/* ============================================================
   NEMI — Large Manufacturing Model
   Deck design system: Space Grotesk + IBM Plex Mono
   Forest #07110D · Surface #10231C · Mint #2EE6A8
   Green #1E7A5B · Cream #F2F1EA · Ink #2A2B2B
   ============================================================ */

:root {
  --forest: #07110D;
  --surface: #10231C;
  --surface-2: #123B2E;
  --deep: #0B4A38;
  --green: #1E7A5B;
  --green-bright: #10A37E;
  --mint: #2EE6A8;
  --mint-soft: #8FE9C6;
  --mint-pale: #CFF5E6;
  --cream: #F2F1EA;
  --cream-2: #E9EEE7;
  --sage: #DDE5DB;
  --ink: #2A2B2B;
  --ink-soft: #3D4A43;
  --ink-dim: #5B6660;
  --gray: #8A8F8C;
  --rust: #C05030;
  --nav-h: 72px;

  /* section-scoped tokens — dark defaults */
  --s-bg: var(--forest);
  --s-bg2: var(--surface);
  --s-head: #FFFFFF;
  --s-text: #E9EEE7;
  --s-dim: #9DA8A0;
  --s-line: rgba(233, 238, 231, 0.13);
  --s-line-strong: rgba(233, 238, 231, 0.26);
  --s-accent: var(--mint);
  --s-accent-2: var(--mint-soft);
  --s-btn-bg: var(--mint);
  --s-btn-text: #07110D;
  --s-btn-hover: var(--mint-soft);
  --s-note-bg: var(--surface);

  /* legacy aliases used by inline page styles */
  --bg: var(--forest);
  --bg-raise: var(--surface);
  --white: var(--s-head);
  --text: var(--s-text);
  --text-dim: var(--s-dim);
  --line: var(--s-line);
  --line-strong: var(--s-line-strong);
  --green-100: var(--mint-pale);
  --green-300: var(--mint);
  --green-500: var(--green);
}

.light {
  --s-bg: var(--cream);
  --s-bg2: #FFFFFF;
  --s-head: #10231C;
  --s-text: var(--ink);
  --s-dim: var(--ink-dim);
  --s-line: rgba(42, 43, 43, 0.14);
  --s-line-strong: rgba(42, 43, 43, 0.3);
  --s-accent: var(--green);
  --s-accent-2: var(--green-bright);
  --s-btn-bg: var(--green);
  --s-btn-text: #FFFFFF;
  --s-btn-hover: var(--deep);
  --s-note-bg: var(--cream-2);
  --white: #10231C;
  --text: var(--ink);
  --text-dim: var(--ink-dim);
  --line: rgba(42, 43, 43, 0.14);
  --line-strong: rgba(42, 43, 43, 0.3);
  --bg-raise: #FFFFFF;
  --green-300: var(--green);
  --green-100: var(--deep);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Do NOT add overflow-x: clip/hidden here. Measured: it stops .thesis-decksec
   and .suites-sec from sticking (they scroll away instead of pinning), which
   kills the card-deck and suites scroll sequences. Horizontal overflow is
   fixed at its source instead — see .mkt-marquee. */
html { scroll-behavior: smooth; }

body {
  background: var(--forest);
  color: #E9EEE7;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--green); color: #FFFFFF; }

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

a { color: inherit; text-decoration: none; }

/* ---------- sections carry their palette ---------- */

.sec, .sec-tight, .cta-band, .hero {
  background: var(--s-bg);
  color: var(--s-text);
}

/* ---------- type ---------- */

h1, h2, h3, h4 {
  color: var(--s-head);
  font-weight: 600;
  text-transform: none;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.display {
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.h-lg { font-size: clamp(1.6rem, 3.4vw, 2.7rem); }
.h-md { font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: 0.02em; }
.h-sm { font-size: 1.02rem; letter-spacing: 0.04em; }

.eyebrow {
  display: block;
  color: var(--s-accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-bottom: 1.4rem;
}

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.7;
  color: var(--s-text);
  max-width: 46em;
}

.dim { color: var(--s-dim); }

.accent { color: var(--s-accent); }

.mono {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
}

/* ---------- layout ---------- */

.container { max-width: 1240px; margin: 0 auto; padding: 0 6vw; }

.sec { padding: clamp(5rem, 10vw, 8.5rem) 0; position: relative; }
.sec-tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.sec-line-top { border-top: 1px solid var(--s-line); }
.light.sec-line-top, .light + .light.sec-line-top { border-top-color: rgba(42,43,43,0.12); }

.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); max-width: 62em; }
.sec-head .lede { margin-top: 1.4rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.gap { gap: clamp(1.2rem, 2.5vw, 2rem); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

/* ---------- nav (always dark) ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(7, 17, 13, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(233, 238, 231, 0.13);
  color: #E9EEE7;
}

.nav-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  padding-right: 0.5rem;
}
.brand span { color: var(--mint); }

.nav-menu { display: flex; align-items: center; }

.nav-links { display: flex; align-items: center; gap: 0.3rem; list-style: none; }

.nav-links > li { position: relative; }

.nav-links a.nav-item {
  display: block;
  padding: 0.6rem 0.8rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E9EEE7;
  transition: color 0.2s;
}
.nav-links a.nav-item:hover, .nav-links a.nav-item.active { color: var(--mint); }

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--surface);
  border: 1px solid rgba(233, 238, 231, 0.13);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.22s ease;
}
.nav-links li:hover .dropdown,
.nav-links li:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown a {
  display: block;
  padding: 0.5rem 1.3rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9DA8A0;
  transition: all 0.15s;
}
.dropdown a:hover { color: #FFFFFF; background: rgba(46, 230, 168, 0.08); }
.dropdown .dd-label {
  padding: 0.55rem 1.3rem 0.3rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
  border-bottom: 1px solid rgba(233, 238, 231, 0.13);
  margin-bottom: 0.3rem;
}

.btn {
  display: inline-block;
  padding: 0.9rem 1.9rem;
  border: 1px solid var(--s-btn-bg);
  background: var(--s-btn-bg);
  color: var(--s-btn-text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  /* explicit list, never `all`: `all` includes clip-path, so the notched corner
     re-animated on any width recalc (web-font swap) and visibly jumped */
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn:hover { background: var(--s-btn-hover); border-color: var(--s-btn-hover); }

/* The clip-path cuts the top-right diagonal, and a border is painted inside the
   element, so the diagonal is left unstroked. A border-only button therefore
   shows a broken outline at the notch. Give the ghost variant a translucent
   fill instead of an outline, so the notched shape reads on its own. */
.btn-ghost {
  background: rgba(233, 238, 231, 0.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: transparent;
  color: var(--s-text);
}
.btn-ghost:hover {
  background: rgba(233, 238, 231, 0.18);
  border-color: transparent;
  color: var(--s-text);
}

.nav .btn {
  padding: 0.6rem 1.2rem;
  margin-left: 0.8rem;
  background: var(--mint);
  border-color: var(--mint);
  color: #07110D;
}
.nav .btn:hover { background: var(--mint-soft); border-color: var(--mint-soft); }

.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px; height: 40px;
  position: relative;
}
.nav-burger span {
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: #FFFFFF;
  transition: all 0.25s;
}
.nav-burger span:nth-child(1) { top: 13px; }
.nav-burger span:nth-child(2) { top: 20px; }
.nav-burger span:nth-child(3) { top: 27px; }

/* ---------- hero ---------- */

.hero {
  min-height: min(100vh, 900px);
  display: flex;
  align-items: center;
  position: relative;
  padding: calc(var(--nav-h) + 4rem) 0 5rem;
  overflow: hidden;
}

.hero-sub {
  min-height: min(72vh, 640px);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.72) contrast(1.05) brightness(0.85);
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) contrast(1.05) brightness(0.7);
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(7,17,13,0.95) 0%, rgba(7,17,13,0.74) 45%, rgba(7,17,13,0.42) 100%),
    linear-gradient(to top, #07110D 0%, rgba(7,17,13,0.25) 30%, rgba(7,17,13,0.6) 100%);
}

.hero .container { position: relative; z-index: 2; }
.hero .display { max-width: 13em; }
.hero .lede { margin-top: 1.8rem; }
.hero-cta { margin-top: 2.8rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.scroll-hint {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  width: 1px;
  height: 56px;
  background: rgba(233, 238, 231, 0.26);
  overflow: hidden;
}
.scroll-hint::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--mint);
  animation: scrolldrop 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scrolldrop {
  0% { top: -50%; }
  100% { top: 110%; }
}

/* ---------- cards ---------- */

.cardgrid { border: 1px solid var(--s-line); background: var(--s-line); }

.card {
  background: var(--s-bg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  position: relative;
  transition: background 0.3s;
}
.card:hover { background: var(--s-bg2); }

.card .tick {
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-top: 2px solid var(--s-accent);
  border-left: 2px solid var(--s-accent);
  opacity: 0;
  transition: opacity 0.3s;
}
.card:hover .tick { opacity: 1; }

.card .idx {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s-accent);
  display: block;
  margin-bottom: 1.1rem;
}

.card h3 { margin-bottom: 0.8rem; }
.card p { font-size: 0.92rem; color: var(--s-dim); line-height: 1.65; }
.card ul { margin-top: 0.9rem; list-style: none; }
.card ul li {
  font-size: 0.85rem;
  color: var(--s-dim);
  padding: 0.32rem 0 0.32rem 1.2rem;
  position: relative;
}
.card ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.85em;
  width: 6px; height: 2px;
  background: var(--s-accent);
}

.card-link { display: block; }
.card-link .more {
  margin-top: 1.4rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.3s;
  display: block;
}
.card-link:hover .more { opacity: 1; transform: translateX(0); }

/* ---------- image blocks ---------- */

.img-block {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--s-line);
}
.img-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.04) brightness(0.92);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s;
}
.img-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(11, 74, 56, 0.2), rgba(7, 17, 13, 0.08) 55%, rgba(7, 17, 13, 0.38));
  pointer-events: none;
}
.img-block:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.04) brightness(1); }

.img-tall { aspect-ratio: 4 / 5; }
.img-wide { aspect-ratio: 16 / 9; }
.img-sq { aspect-ratio: 1 / 1; }

.img-cap {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  padding: 1rem 1.2rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint-pale);
  background: linear-gradient(to top, rgba(7,17,13,0.88), transparent);
  right: 0;
}

/* ---------- stat band ---------- */

.stats { border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); }
/* compact variant: sits under the lede inside a narrow split column */
.stats--inline { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.stats--inline .stat { padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(0.7rem, 1.1vw, 1rem); }
.stats--inline .stat:first-child { padding-left: 0; }
.stats--inline .stat .num { font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
.stats--inline .stat .label { margin-top: 0.6rem; font-size: 0.56rem; letter-spacing: 0.1em; }
.stat { padding: clamp(2rem, 4vw, 3.2rem) clamp(1.2rem, 2.5vw, 2.4rem); border-left: 1px solid var(--s-line); }
.stat:first-child { border-left: none; }
.stat .num {
  color: var(--s-head);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}
.stat .num sub, .stat .num span.unit {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.42em;
  font-weight: 600;
  color: var(--s-accent);
  letter-spacing: 0.06em;
}
.stat .label {
  margin-top: 0.9rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-dim);
}

/* ---------- spec table ---------- */

.spec-table { width: 100%; border-collapse: collapse; border: 1px solid var(--s-line); background: var(--s-bg); }
.light .spec-table { background: #FFFFFF; }
.spec-table th, .spec-table td {
  padding: 1rem 1.4rem;
  text-align: left;
  border-bottom: 1px solid var(--s-line);
  vertical-align: top;
}
.spec-table th {
  width: 32%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-accent);
  border-right: 1px solid var(--s-line);
}
.spec-table td { font-size: 0.92rem; color: var(--s-text); }
.spec-table td .dim { display: block; font-size: 0.8rem; margin-top: 0.2rem; color: var(--s-dim); }

/* ---------- process steps ---------- */

.steps { counter-reset: step; border-top: 1px solid var(--s-line); }
.step {
  display: grid;
  grid-template-columns: 90px 1fr 1.4fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--s-line);
  align-items: baseline;
}
.step .no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--s-accent);
}
.step h4 { font-size: 0.95rem; letter-spacing: 0.05em; }
.step p { font-size: 0.9rem; color: var(--s-dim); }

/* ---------- thesis lines ---------- */

.thesis-line {
  padding: clamp(2.2rem, 4.5vw, 3.6rem) 0;
  border-bottom: 1px solid var(--s-line);
}
.thesis-line:first-child { border-top: 1px solid var(--s-line); }
.thesis-line .h-lg { max-width: 22em; text-transform: none; letter-spacing: 0.005em; }
.thesis-line .h-lg em { font-style: normal; color: var(--s-accent); }
.thesis-line .no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--s-accent);
  display: block;
  margin-bottom: 1rem;
}

/* ---------- loop diagram ---------- */

.loop-wrap { display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.loop-svg { width: 100%; height: auto; }

.loop-stages { list-style: none; }
.loop-stage {
  padding: 1.5rem 0 1.5rem 1.8rem;
  border-left: 1px solid var(--s-line);
  position: relative;
  transition: border-color 0.3s;
}
.loop-stage::before {
  content: '';
  position: absolute;
  left: -4px; top: 2.1rem;
  width: 7px; height: 7px;
  background: var(--s-bg);
  border: 1px solid var(--s-accent);
  transform: rotate(45deg);
  transition: background 0.3s;
}
.loop-stage:hover { border-color: var(--s-accent); }
.loop-stage:hover::before { background: var(--s-accent); }
.loop-stage .stage-letter {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--s-accent);
  text-transform: uppercase;
}
.loop-stage h3 { margin: 0.4rem 0; font-size: 1.05rem; }
.loop-stage h3 a:hover { color: var(--s-accent); }
.loop-stage p { font-size: 0.9rem; color: var(--s-dim); }
.loop-stage .suite {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-accent-2);
}

/* ---------- quote ---------- */

.pull-quote {
  max-width: 34em;
  margin: 0 auto;
  text-align: center;
}
.pull-quote blockquote {
  color: var(--s-head);
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.005em;
}
.pull-quote cite {
  display: block;
  margin-top: 2rem;
  font-style: normal;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s-dim);
}

/* ---------- cta band ---------- */

.cta-band {
  border-top: 1px solid var(--s-line);
  text-align: center;
  padding: clamp(5rem, 9vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 900px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(46, 230, 168, 0.09) 0%, transparent 62%);
  pointer-events: none;
}
.light.cta-band::before { background: radial-gradient(circle, rgba(30, 122, 91, 0.1) 0%, transparent 62%); }
.cta-band .h-lg { margin-bottom: 1.2rem; }
.cta-band p { color: var(--s-dim); max-width: 36em; margin: 0 auto 2.6rem; position: relative; }
.cta-band .container { position: relative; }
/* short variant: headline left, actions right, no lede — compact closing band */
.cta-band--short {
  text-align: left; padding: clamp(3.6rem, 6vw, 5.6rem) 0;
  border-top: 1px solid rgba(46, 230, 168, 0.22);
}
/* let the weld sparks read on the right; keep the left dark for the type */
.cta-band--short .sec-bgvideo { filter: saturate(0.32) brightness(0.72) contrast(1.08); }
.cta-band--short .sec-bgveil {
  background:
    linear-gradient(to right, rgba(7,7,7,0.95) 0%, rgba(7,7,7,0.82) 40%, rgba(7,7,7,0.42) 76%, rgba(7,7,7,0.6) 100%),
    linear-gradient(to bottom, rgba(7,7,7,0.68) 0%, rgba(7,7,7,0.22) 46%, rgba(7,7,7,0.72) 100%);
}
.cta-band--short .cta-short {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.8rem, 4vw, 3.5rem); flex-wrap: wrap;
}
.cta-short__lead { flex: 1 1 400px; max-width: 640px; }
/* short mint rule above the label, same device as the offerings panels */
.cta-short__lead .eyebrow { position: relative; padding-left: 34px; }
.cta-short__lead .eyebrow::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 24px; height: 2px;
  background: var(--s-accent); transform: translateY(-50%);
}
.cta-band--short .h-lg { margin: 0.85rem 0 0; max-width: none; line-height: 1.06; }
.cta-short__actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.cta-band--short .btn { padding: 1rem 1.9rem; font-size: 0.82rem; }
@media (max-width: 860px) {
  .cta-band--short .cta-short { flex-direction: column; align-items: flex-start; }
  .cta-short__lead { max-width: none; }
}

/* full variant: full-height closing section, centered stack over the weld video */
.cta-band--full {
  min-height: 100vh;
  display: flex; align-items: center;
  text-align: center;
  padding: clamp(5rem, 10vw, 8rem) 0;
  border-top: 1px solid rgba(46, 230, 168, 0.22);
}
.cta-band--full .sec-bgvideo { filter: saturate(0.36) brightness(0.6) contrast(1.08); }
.cta-band--full .sec-bgveil {
  background:
    radial-gradient(ellipse 120% 90% at 50% 50%, rgba(7,7,7,0.5) 0%, rgba(7,7,7,0.82) 66%, rgba(7,7,7,0.95) 100%),
    linear-gradient(to bottom, rgba(7,7,7,0.9) 0%, rgba(7,7,7,0.34) 42%, rgba(7,7,7,0.34) 58%, rgba(7,7,7,0.92) 100%);
}
.cta-full { display: flex; flex-direction: column; align-items: center; }
.cta-full .eyebrow { position: relative; padding-left: 34px; }
.cta-full .eyebrow::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 24px; height: 2px;
  background: var(--s-accent); transform: translateY(-50%);
}
.cta-band--full .h-lg { margin: 1rem 0 0; max-width: 15em; line-height: 1.06; }
.cta-band--full .lede { margin: 1.4rem auto 0; max-width: 40em; }
.cta-full__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 2.4rem; }
.cta-band--full .btn { padding: 1rem 1.9rem; font-size: 0.82rem; }

/* ---------- footer (always dark) ---------- */

footer {
  background: var(--forest);
  color: #9DA8A0;
  border-top: 1px solid rgba(233, 238, 231, 0.13);
  padding: 4rem 0 2.5rem;
  font-size: 0.82rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}
.foot-grid h4 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--mint);
  margin-bottom: 1.1rem;
}
.foot-grid ul { list-style: none; }
.foot-grid ul li { margin-bottom: 0.55rem; }
.foot-grid a:hover { color: #FFFFFF; }
.foot-brand { color: #FFFFFF; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.3em; margin-bottom: 1rem; }
.foot-brand span { color: var(--mint); }
.foot-logo { display: inline-block; margin-bottom: 1.1rem; }
.foot-logo img { height: 30px; width: auto; display: block; }
.foot-tag { max-width: 26em; line-height: 1.7; }
.foot-certs { display: flex; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }
.foot-cert {
  border: 1px solid rgba(233, 238, 231, 0.26);
  padding: 0.35rem 0.8rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #9DA8A0;
}
/* social: same bordered chip language as the cert badges, square corners */
.foot-social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(233, 238, 231, 0.26);
  color: #9DA8A0;
  transition: color .2s, background .2s, border-color .2s;
}
.foot-social a:hover { color: #070707; background: var(--s-accent, #10A37E); border-color: var(--s-accent, #10A37E); }
.foot-social svg { display: block; }
/* keyed on hover capability, not width, so a touchscreen laptop gets it too */
@media (hover: none) { .foot-social a { width: 44px; height: 44px; } }
.foot-base {
  border-top: 1px solid rgba(233, 238, 231, 0.13);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

/* ---------- reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- crumbs, labels, tags, notes ---------- */

.crumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--s-dim);
  margin-bottom: 1.6rem;
  display: block;
}
.crumb a:hover { color: var(--s-accent); }
.crumb .sep { margin: 0 0.6rem; color: var(--s-accent); }

.hr-label {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: clamp(3rem, 6vw, 5rem) 0 clamp(1.8rem, 3vw, 2.6rem);
}
.hr-label::after { content: ''; flex: 1; height: 1px; background: var(--s-line); }
.hr-label span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--s-accent);
  white-space: nowrap;
}

.tag-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.tag {
  border: 1px solid var(--s-line-strong);
  padding: 0.5rem 1.1rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-dim);
  transition: all 0.25s;
}
.tag:hover { border-color: var(--s-accent); color: var(--s-accent); }

.note {
  border-left: 3px solid var(--s-accent);
  padding: 1.4rem 1.8rem;
  background: var(--s-note-bg);
  font-size: 0.94rem;
  color: var(--s-text);
  max-width: 56em;
}
.note strong { color: var(--s-accent); font-weight: 600; }

/* ---------- pillars (cost · quality · speed · tough challenges) ---------- */

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--s-line); }
.pillar { padding: clamp(1.4rem, 2.5vw, 2.2rem); border-left: 1px solid var(--s-line); position: relative; }
.pillar:first-child { border-left: none; }
.pillar .p-key {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s-accent);
  display: block;
  margin-bottom: 0.9rem;
}
.pillar .p-big { color: var(--s-head); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; }
.pillar p { font-size: 0.85rem; color: var(--s-dim); margin-top: 0.7rem; line-height: 1.6; }
@media (max-width: 1020px) { .pillars { grid-template-columns: repeat(2, 1fr); } .pillar:nth-child(3) { border-left: none; } .pillar:nth-child(n+3) { border-top: 1px solid var(--s-line); } }
@media (max-width: 640px) { .pillars { grid-template-columns: 1fr; } .pillar { border-left: none; } .pillar + .pillar { border-top: 1px solid var(--s-line); } }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--s-line); }
.faq details { border-bottom: 1px solid var(--s-line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.4rem 2.5rem 1.4rem 0;
  position: relative;
  color: var(--s-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.1rem;
  color: var(--s-accent);
  transition: transform 0.2s;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 0 1.5rem; max-width: 52em; color: var(--s-dim); font-size: 0.95rem; }
.faq details p a { color: var(--s-accent); }

/* ---------- media band (video/gallery in page body) ---------- */

.media-band { position: relative; overflow: hidden; border: 1px solid var(--s-line); aspect-ratio: 21 / 9; }
.media-band video, .media-band img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85) contrast(1.04) brightness(0.9); }
.media-band .img-cap { z-index: 2; }

/* ---------- forms ---------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 46rem; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s-accent);
  margin-bottom: 0.55rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--s-bg2);
  border: 1px solid var(--s-line-strong);
  color: var(--s-head);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s;
  border-radius: 0;
  -webkit-appearance: none;
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--s-accent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--s-dim); opacity: 0.7; }
.form-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--s-accent);
  min-height: 1.4em;
}

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .loop-wrap { grid-template-columns: 1fr; }
  .loop-wrap .loop-svg { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .step { grid-template-columns: 60px 1fr; }
  .step p { grid-column: 2; }
  .form-grid { grid-template-columns: 1fr; }

  .nav-burger { display: block; }
  .nav-menu {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    bottom: 0;
    background: var(--forest);
    display: none;
    overflow-y: auto;
    padding: 1.5rem 6vw 4rem;
  }
  .nav-menu.open { display: block; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a.nav-item { padding: 1rem 0; font-size: 0.85rem; border-bottom: 1px solid rgba(233, 238, 231, 0.13); }
  .dropdown {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    border: none;
    background: transparent;
    padding: 0 0 0.5rem 1.2rem;
    min-width: 0;
    display: none;
  }
  .nav-links li.dd-open .dropdown { display: block; }
  .nav .btn { margin: 1.5rem 0 0; display: block; text-align: center; }
}

@media (max-width: 640px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .stat { border-left: none; border-top: 1px solid var(--s-line); }
  .stat:first-child { border-top: none; }
  .foot-grid { grid-template-columns: 1fr; }
  .spec-table th { width: 38%; }
}

/* ---------- video inside image blocks ---------- */
.img-block video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.03) brightness(0.94);
}

/* ---------- customer logo marquee ---------- */
.logo-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee + .logo-marquee { margin-top: 1rem; }
.logo-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: logo-scroll 60s linear infinite;
}
.logo-marquee-rev .logo-track { animation-direction: reverse; }
.logo-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  width: 150px;
  padding: 14px 20px;
  background: #FFFFFF;
  border: 1px solid rgba(42, 43, 43, 0.12);
}
.logo-chip img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.3s, opacity 0.3s;
}
.logo-chip:hover img { filter: grayscale(0); opacity: 1; }
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }

/* ---------- suite cards with product screenshots ---------- */
.card-media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-media__img {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--s-line);
  background: var(--forest);
}
.card-media__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.9);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s;
}
.card-media:hover .card-media__img img { transform: scale(1.04); filter: saturate(1) brightness(1); }
.card-media .card-body { display: block; padding: clamp(1.4rem, 2.6vw, 2rem); }
.card-media .card-body .idx { margin-bottom: 0.9rem; }

/* ============================================================
   NEMI LMM brand retheme — Brand Book v2.0 ("2029 Theme")
   Signal Emerald #10A37E · Deep Emerald #0A4938 · Warm Graphite
   #292926 · Black Ground #070707 · Bone #FEFEFE · Soft Oat #ECE7DD
   ============================================================ */

:root {
  --forest: #070707;
  --surface: #161615;
  --surface-2: #292926;
  --deep: #0A4938;
  --green: #0A4938;
  --green-bright: #10A37E;
  --mint: #10A37E;
  --mint-soft: #7FCDB6;
  --mint-pale: #D9EFE7;
  --cream: #FEFEFE;
  --cream-2: #ECE7DD;
  --sage: #ECE7DD;
  --ink: #070707;
  --ink-soft: #292926;
  --ink-dim: #5B5B57;
  --gray: #8A8A85;
}

/* Light sections: bone canvas, soft-oat cards (brand card fill) */
.light .card { background: var(--cream-2); }
.light .card:hover { background: #FFFFFF; }

/* Corner snips — the signature single-corner chamfer */
.card, .img-block, .thesis-media {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.btn { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.logo-chip { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }

/* Bracketed index tags — [01] [02] [03] */
.card .idx::before, .thesis-line .no::before, .stat .no::before { content: "["; }
.card .idx::after, .thesis-line .no::after, .stat .no::after { content: "]"; }

/* Blueprint grid — right-anchored, emerald on dark / graphite on light */
.sec::before, .cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(16,163,126,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,163,126,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.9) 100%);
  mask-image: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.9) 100%);
}
.sec.light::before {
  background-image:
    linear-gradient(rgba(7,7,7,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,7,7,.05) 1px, transparent 1px);
}
.cta-band { position: relative; }

/* Crop marks — registration corners on the hero */
.crops { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.crops span { position: absolute; font-family: 'IBM Plex Mono', monospace; font-size: 16px;
  color: rgba(233,238,231,.45); }
.crops span:nth-child(1) { top: 88px; left: 26px; }
.crops span:nth-child(2) { top: 88px; right: 26px; }
.crops span:nth-child(3) { bottom: 22px; left: 26px; }
.crops span:nth-child(4) { bottom: 22px; right: 26px; }

/* blueprint grid backdrop — replaces the molten bg video on the Factories
   section; same mint grid the page heroes use, faded toward the text side */
.sec-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image:
    linear-gradient(rgba(16, 163, 126, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 163, 126, 0.10) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 70% 50%, #000 40%, transparent 100%);
}

/* Fortress factories — six capability tiles on a fixed 2x3 grid.
   Both columns start and finish flush; the visual variety comes from unequal
   ROW heights, not from offsetting a column, so nothing is left hanging.
   Motion lives on .ib-par (the image inside each frame), never on the grid,
   so the alignment holds at every scroll position. */
/* certifications sit where the stat row used to, same rhythm on the left column */
/* two equal cells side by side, so they read as one row rather than a stack */
.fort-certs {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
/* A CSS border cannot follow the notched corner: clip-path cuts the diagonal away
   and leaves the top-right open. So the outer layer IS the edge, and an inset
   pseudo-element supplies the fill, both clipped to the same shape. */
.fort-cert {
  position: relative;
  background: var(--s-line-strong);
  padding: 14px 20px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.fort-cert::before {
  content: ''; position: absolute; inset: 1px;
  background: #121312;                       /* = the old 5% tint over the #070707 section */
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
.fort-cert b, .fort-cert span { position: relative; z-index: 1; }
.fort-cert b {
  display: block; font-weight: 600; font-size: 15px;
  letter-spacing: -.3px; color: var(--s-head);
}
.fort-cert span {
  display: block; margin-top: 5px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-accent);
}

.fort-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.16fr 0.9fr 1.04fr;
  gap: 14px;
  height: clamp(430px, 66vh, 640px);
}
.fort-photos .img-block { height: 100%; aspect-ratio: auto; }

/* parallax layer: over-sized so it can drift without exposing an edge */
.fort-photos .ib-par {
  position: absolute; left: 0; right: 0; top: -9%; bottom: -9%;
  display: block; will-change: transform;
}
.fort-photos .ib-par img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* tiles resolve in a diagonal sweep, top-left to bottom-right */
.fort-photos .img-block {
  opacity: 0; transform: translateY(14px) scale(0.988);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.fort-photos.in .img-block { opacity: 1; transform: none; }
.fort-photos .img-block:nth-child(1) { transition-delay: 0.04s; }
.fort-photos .img-block:nth-child(2) { transition-delay: 0.12s; }
.fort-photos .img-block:nth-child(3) { transition-delay: 0.10s; }
.fort-photos .img-block:nth-child(4) { transition-delay: 0.18s; }
.fort-photos .img-block:nth-child(5) { transition-delay: 0.16s; }
.fort-photos .img-block:nth-child(6) { transition-delay: 0.24s; }

@media (max-width: 700px) {
  .fort-photos { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .fort-photos .img-block { aspect-ratio: 16 / 10; height: auto; }
  .fort-photos .ib-par { transform: none !important; }
  .fort-certs { grid-template-columns: 1fr; }   /* stack only when there is no room */
}
@media (prefers-reduced-motion: reduce) {
  .fort-photos .ib-par { transform: none !important; }
  .fort-photos .img-block { opacity: 1; transform: none; transition: none; }
}

/* ---------- brand alignment pass: hero + type ---------- */
/* Headlines are sentence case in the brand system; caps live in mono labels only */
h1, h2, h3, h4 { text-transform: none; letter-spacing: -0.015em; }
.display { letter-spacing: -0.025em; }

/* Hero: constrain the lede to the headline's column, balance vertical padding */
.hero { padding: calc(var(--nav-h) + 3rem) 0 6rem; }
.hero .lede { max-width: 34em; }

/* Veil retinted to Black Ground */
.hero-veil {
  background:
    linear-gradient(to right, rgba(7,7,7,0.94) 0%, rgba(7,7,7,0.7) 45%, rgba(7,7,7,0.38) 100%),
    linear-gradient(to top, #070707 0%, rgba(7,7,7,0.24) 30%, rgba(7,7,7,0.58) 100%);
}

/* ---------- thesis: code-stream background ---------- */
.sec-thesisbg { overflow: hidden; }
.sec-bgvideo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.18) brightness(0.5) contrast(1.05);
}
.sec-bgveil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(7,7,7,0.95) 0%, rgba(7,7,7,0.85) 50%, rgba(7,7,7,0.72) 100%),
    linear-gradient(to bottom, rgba(7,7,7,0.9) 0%, rgba(7,7,7,0.55) 40%, rgba(7,7,7,0.9) 100%);
}
.sec-thesisbg .container { position: relative; z-index: 1; }

/* ---------- hero: flush left, not centered-column ---------- */
.hero .container { max-width: 1460px; width: 100%; margin: 0 auto; padding: 0 6vw; }

/* ---------- thesis bg: more visible code stream ---------- */
.sec-bgvideo { filter: saturate(0.35) brightness(0.75) contrast(1.05); }
.sec-bgveil {
  background:
    linear-gradient(to right, rgba(7,7,7,0.88) 0%, rgba(7,7,7,0.66) 50%, rgba(7,7,7,0.45) 100%),
    linear-gradient(to bottom, rgba(7,7,7,0.72) 0%, rgba(7,7,7,0.3) 40%, rgba(7,7,7,0.72) 100%);
}

/* ---------- generic video-backed sections ---------- */
.sec-hasbg { position: relative; overflow: hidden; }
/* Factories section: fit heading + photos + stats into a single viewport on desktop */
@media (min-width: 901px) {
  .sec-fit { min-height: 100vh; display: flex; align-items: center; padding: clamp(3rem, 6vh, 5rem) 0; }
  .sec-fit > .container { width: 100%; }
  .sec-fit .split { align-items: center; }
  .sec-fit .fort-photos { gap: 12px; }
  /* the grid sets its own height; tiles fill their row, so no aspect override */
  .sec-fit .stats { margin-top: clamp(1.4rem, 3vh, 2.4rem) !important; }
  .sec-fit .stat { padding: 16px 20px; }
  .sec-fit .stat .v { font-size: clamp(26px, 2.4vw, 34px); }
}
.sec-hasbg .container { position: relative; z-index: 1; }

/* ---------- thesis: statement + compact video per row ---------- */
.thesis-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) 0;
  border-bottom: 1px solid var(--s-line);
}
.thesis-row:first-of-type { border-top: 1px solid var(--s-line); }
.thesis-row .thesis-line { border: 0; padding: 0; }
.thesis-row .thesis-line:first-child { border-top: 0; }
.thesis-vid {
  position: relative;
  aspect-ratio: 16 / 7.5;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--s-line);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.thesis-vid video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.5) brightness(0.85);
}
@media (max-width: 860px) {
  .thesis-row { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* ============================================================
   Technical layout layer — document markers, telemetry tags
   ============================================================ */

/* Section counters — engineering-document style, top-right */
.sec-marker {
  position: absolute;
  top: 1.4rem; right: 6vw;
  z-index: 2;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--s-dim);
  opacity: 0.75;
}
.sec-marker b { color: var(--s-accent); font-weight: 500; }

/* Slim emerald rule under section eyebrows — brand header pattern */
.sec-head .eyebrow { display: inline-block; }
.sec-head .eyebrow::after {
  content: '';
  display: block;
  width: 34px; height: 2px;
  margin-top: 10px;
  background: var(--s-accent);
}

/* Telemetry tags on media panels */
.vid-tag {
  position: absolute;
  top: 10px; left: 12px;
  z-index: 2;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(233,238,231,0.9);
  background: rgba(7,7,7,0.55);
  padding: 4px 8px;
}
.vid-tag::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--mint);
  animation: tagblink 2s steps(1) infinite;
  vertical-align: 1px;
}
@keyframes tagblink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .vid-tag::before { animation: none; } }

/* Hero meta strip — coordinates + certifications, mono */
.hero-meta {
  position: absolute;
  left: clamp(2rem, 4.5vw, 5rem); right: 6vw; bottom: 1.6rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(233,238,231,0.5);
  text-transform: uppercase;
}
.hero-meta b { color: var(--mint); font-weight: 500; }
@media (max-width: 700px) { .hero-meta { display: none; } }

/* ---------- thesis: three-module technical grid ---------- */
.thesis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--s-line);
  border: 1px solid var(--s-line);
}
.thesis-card {
  display: flex;
  flex-direction: column;
  background: var(--s-bg);
  transition: background 0.3s;
}
.thesis-card:hover { background: var(--s-bg2); }
.thesis-card__vid {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--s-line);
}
.thesis-card__vid video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.5) brightness(0.85);
}
.thesis-card__body { flex: 1; padding: clamp(1.4rem, 2.6vw, 2rem); }
.thesis-card__body .no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--s-accent);
  display: block;
  margin-bottom: 1rem;
}
.thesis-card__body .no::before { content: '['; }
.thesis-card__body .no::after { content: ']'; }
.thesis-card__body p {
  color: var(--s-head);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.thesis-card__body p em { font-style: normal; color: var(--s-accent); }
.thesis-card__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1.4rem, 2.6vw, 2rem);
  border-top: 1px solid var(--s-line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.thesis-card__foot span:first-child { color: var(--s-dim); }
.thesis-card__foot span:last-child { color: var(--s-accent); text-align: right; }
@media (max-width: 860px) { .thesis-grid { grid-template-columns: 1fr; } }

/* ---------- thesis: full-viewport stacked panels ---------- */
.thesis-stack { position: relative; }
.thesis-panel {
  position: sticky; top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--forest);
  border-top: 1px solid var(--s-line);
  box-shadow: 0 -34px 70px rgba(0, 0, 0, 0.42);
  overflow: hidden;
  will-change: transform;
}
.thesis-panel .container { width: 100%; }
.thesis-panel__top {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(2rem, 4.5vw, 3.6rem);
}
.thesis-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--s-dim);
}
.thesis-heading {
  color: var(--s-head);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  letter-spacing: -0.01em;
  display: inline-block;
  margin-bottom: 20px;
}
.thesis-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.thesis-panel__text {
  color: var(--s-head);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.1vw, 2.7rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.thesis-panel__text em { font-style: normal; color: var(--s-accent); }
.thesis-panel__foot {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--s-line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--s-dim);
}
.thesis-panel__foot b { color: var(--s-accent); font-weight: 500; }
.thesis-vid--big { aspect-ratio: 16 / 10; }
@media (max-width: 860px) {
  .thesis-panel { position: relative; min-height: 0; padding: 4rem 0; }
  .thesis-panel__grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---------- loop section: fits one viewport ---------- */
.sec-looph { padding: clamp(3rem, 5vh, 4.5rem) 0; min-height: 100vh; display: flex; align-items: center; }
.sec-looph .container { width: 100%; }
.sec-looph .sec-head { margin-bottom: clamp(1.5rem, 3vh, 2.5rem); }
.sec-looph .loop-svg { max-width: 340px; }
.sec-looph .loop-wrap { grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(2rem, 4vw, 4rem); }
.sec-looph .loop-stage { padding: 0.9rem 0 0.9rem 1.6rem; }
.sec-looph .loop-stage p { font-size: 0.85rem; }

/* ---------- thesis: contained card deck (peeking stack) ---------- */
.thesis-deckwrap { position: relative; height: 300vh; }
.thesis-decksec {
  position: sticky; top: 0;
  height: 100vh; min-height: 0;
  display: flex; align-items: center;
  padding: 0;
  overflow: hidden;
}
.thesis-decksec .container { width: 100%; }
/* wider boxes for the thesis + loop + factories sections */
.thesis-decksec .container, .sec-loop3 .container, .sec-fit > .container,
.sec.light > .container, footer > .container { max-width: 1460px; width: 100%; }
.thesis-decksec .thesis-panel__top { margin-bottom: 1.6rem; }
.thesis-deck { position: relative; height: min(62vh, 540px); margin-top: 1.4rem; }
.tcard {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: clamp(1.8rem, 3.2vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--s-line-strong);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55);
  will-change: transform;
}
/* scroll dimming rides on this overlay's opacity (compositor-only) instead of a
   CSS filter on the card, which would re-composite every video frame */
.tcard::before {
  content: ''; position: absolute; inset: 0; z-index: 6;
  background: #000; opacity: var(--dim, 0); pointer-events: none;
}
.tcard .thesis-panel__grid { width: 100%; }
.tcard .no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em;
  color: var(--s-accent);
  display: block; margin-bottom: 1.1rem;
}
.tcard .no::before { content: '['; }
.tcard .no::after { content: ']'; }
.tcard .thesis-panel__text { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.tcard .thesis-vid--big { aspect-ratio: 16 / 9.5; }
@media (max-width: 860px) {
  /* Keep the stacked card deck on mobile too. dvh rather than vh so the
     sticky pane is not cut off by the browser's collapsing address bar, and a
     shorter scroll run (220vh) so three cards do not take forever to get
     through on a phone. */
  .thesis-deckwrap { height: 220vh; }
  .thesis-decksec {
    position: sticky; top: 0; height: 100dvh;
    display: flex; align-items: center; padding: 1.5rem 0;
  }
  .thesis-deck { position: relative; height: min(74dvh, 560px); margin-top: 0; }
  .tcard { position: absolute; inset: 0; margin-top: 0; }
}
/* No sticky/transform tricks when the visitor has asked for less motion:
   fall back to a plain vertical list. */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .thesis-deckwrap { height: auto; }
  .thesis-decksec { position: static; height: auto; padding: 4rem 0; }
  .thesis-deck { height: auto; }
  .tcard { position: static; transform: none !important; margin-top: 1.2rem; }
}

/* ---------- thesis deck: full-bleed video half + visible pattern ---------- */
.tcard { padding: 0; }
.tcard .thesis-panel__grid {
  height: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.tcard .thesis-panel__grid > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.8rem, 3.2vw, 3rem);
}
.tcard .thesis-vid--big {
  aspect-ratio: auto;
  height: 100%;
  border: 0;
  border-left: 1px solid var(--s-line-strong);
  clip-path: none;
}
@media (max-width: 860px) {
  .tcard .thesis-panel__grid { grid-template-columns: 1fr; }
  .tcard .thesis-vid--big { aspect-ratio: 16/9; height: auto; border-left: 0; border-top: 1px solid var(--s-line-strong); }
}

/* blueprint grid clearly visible across the deck section */
.thesis-decksec::before {
  background-image:
    linear-gradient(rgba(16,163,126,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,163,126,.11) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.95) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.95) 100%);
}

/* ---------- thesis deck: 10px breathing room around the video ---------- */
.tcard { padding: 10px; }
.tcard .thesis-vid--big { border: 1px solid var(--s-line); }

/* thesis deck: 50px inset around the video half */
.tcard { padding: 50px; }

/* That 50px inset is for the desktop side-by-side layout. Stacked on a phone
   it eats a third of a 330px card, and the text column's own
   clamp(1.8rem,...) padding sits on top of it — which the video half does not
   have, so the two never shared a left edge (text 102px, video 74px). Give the
   card one modest inset and let both halves sit flush inside it. */
@media (max-width: 860px) {
  .tcard { padding: 22px; }
  .tcard .thesis-panel__grid > div:first-child { padding: 4px 0 18px; }
}

/* ---------- thesis deck: brand trio card fills ---------- */
.tcard:nth-of-type(1) { background: var(--deep); }
.tcard:nth-of-type(2) { background: var(--surface-2); }
.tcard:nth-of-type(3) { background: var(--cream-2); border-color: rgba(7,7,7,.2); }
.tcard:nth-of-type(3) .thesis-panel__text { color: var(--ink); }
.tcard:nth-of-type(3) .thesis-panel__text em { color: var(--deep); }
.tcard:nth-of-type(3) .no { color: var(--deep); }
.tcard:nth-of-type(3) .thesis-panel__foot { color: var(--ink-dim); border-top-color: rgba(7,7,7,.18); }
.tcard:nth-of-type(3) .thesis-panel__foot b { color: var(--deep); }
.tcard:nth-of-type(3) .thesis-vid--big { border-color: rgba(7,7,7,.18); }

/* ---------- suites: separated cards, screenshots anchored to top ---------- */
.cardgrid { gap: 14px; background: transparent; border: 0; }
.cardgrid .card { border: 1px solid var(--s-line-strong); }
.card-media__img img { object-position: top; }

/* ---------- fortress factories: larger photo grid ---------- */
.split:has(.fort-photos) { grid-template-columns: 0.8fr 1.2fr; }
.fort-photos { gap: 16px; }

/* Eyebrows removed site-wide per request */
.eyebrow, .kicker { display: none !important; }

/* thesis deck: video as centered box with clear 50px+ space all sides */
.tcard .thesis-panel__grid { align-items: center; height: auto; }
.tcard .thesis-vid--big { height: auto; aspect-ratio: 16 / 10; }

/* fortress: compact tags + button aligned to content left edge */
.split .tag-row .tag { padding: 0.36rem 0.8rem; font-size: 0.6rem; letter-spacing: 0.1em; }
.split .tag-row { gap: 0.5rem; }

/* ============================================================
   Brand header — identical to About/Services/Careers
   Overrides the reference (.nav-*) chrome
   ============================================================ */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; height: auto; display: block;
  backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none;
}
.nav .wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; height: 84px; }
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 30px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 8px; }
.nav__links a {
  position: relative;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(236,231,221,0.62); transition: color .2s; padding: 8px 16px;
}
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 1.5px;
  background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav__links a:not(.nav__cta):hover::after,
.nav__links a.active:not(.nav__cta)::after { transform: scaleX(1); }
.nav__links a:hover, .nav__links a.active { color: #FFFFFF; }
.nav__links a.active { color: var(--mint); }
.nav__cta {
  margin-left: 14px;
  background: var(--mint); color: var(--forest) !important;
  padding: 11px 22px !important; font-weight: 700; font-family: "Space Grotesk", sans-serif !important;
  letter-spacing: 0 !important; text-transform: none !important; font-size: 14px !important;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  transition: background .2s, transform .2s;
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--mint-soft); color: var(--forest) !important; transform: translateY(-1px); }
.nav--stuck {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  width: min(1460px, calc(100% - 24px)); background: rgba(7,7,7,.35);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(236,231,221,.14); animation: nav-drop .35s ease;
}
.nav--stuck .wrap { height: 46px; padding: 0 18px; max-width: none; }
.nav--stuck .nav__logo img { height: 22px; }
/* inset:0 spans the whole condensed bar so the links can centre in it — but that
   also lays an invisible sheet over the logo and swallows the click, so the
   "tap the logo to go home" affordance died the moment you scrolled past 120px.
   Let pointers through the container and re-arm them on the links themselves. */
/* Condensed bar: everything after the logo sits right, the same order as the
   full-size nav. Centring the links and pinning only the CTA (what this used to
   do) stranded Invest in the middle of the bar, away from the button it pairs
   with. inset:0 still spans the bar so the row can align to its right edge. */
.nav--stuck .nav__links { position: absolute; inset: 0; justify-content: flex-end;
  padding-right: 12px; pointer-events: none; }
.nav--stuck .nav__links > a { pointer-events: auto; }
.nav--stuck .nav__links a:not(.nav__cta):not(.nav__invest) { font-size: 11px; padding: 6px 14px; }
/* Both buttons shrink to the 46px bar — at full size they crowded it. */
.nav--stuck .nav__invest { margin-left: 6px; padding: 7px 13px !important; font-size: 13px !important; }
.nav--stuck .nav__cta { position: static; transform: none;
  margin-left: 8px; padding: 8px 16px !important; font-size: 13px !important; }
@keyframes nav-drop { from { transform: translate(-50%, -130%); } to { transform: translate(-50%, 0); } }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__burger span { display: block; width: 24px; height: 2px; background: #ECE7DD; margin: 5px 0; }
@media (max-width: 900px) {
  /* Solid, not .96: the drawer is a panel you read menu items off, not glass.
     See the .nav--stuck note below for why even .96 was not opaque enough. */
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0; background: #070707;
    border-bottom: 1px solid rgba(236,231,221,.1); padding: 8px 24px 20px; }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 12px 0; width: 100%; }
  /* .nav__cta keeps its desktop margin-left:14px in the drawer, which pushed the
     Contact block 14px right of every other row and 14px past the panel's right
     padding. Only the scrolled state had ever reset it. */
  .nav__cta { margin-left: 0; }
  .nav__burger { display: block; }
  /* At 30px tall the wordmark ran to 142px — 38% of a 375px screen. */
  .nav__logo img { height: 23px; }
  .nav--stuck .nav__logo img { height: 19px; }
  /* Shrinking the wordmark also shrank the tap target to 23px tall, well under
     the ~44px a thumb needs, so "tap the logo to go home" kept missing. Pad the
     link out to a 44px target without changing how big the logo looks. */
  .nav__logo { min-height: 44px; padding-right: 10px; }
  .foot-logo { padding: 7px 12px 7px 0; margin-bottom: calc(1.1rem - 7px); }
  /* The desktop .nav--stuck rules place the links with inset:0 and pull the CTA
     out to right:12px/top:50%. On mobile that crushes the whole drop-down into
     the 46px condensed bar and leaves the green Contact block floating over the
     page. Re-assert the panel layout for the scrolled state. */
  .nav--stuck .nav__links { top: 100%; right: 0; bottom: auto; left: 0;
    justify-content: flex-start; pointer-events: auto;
    /* the desktop condensed-bar rule sets padding-right:12px to pull the row to
       the bar edge; in the drawer that left 24px of padding on the left and 12px
       on the right, so restate the panel padding */
    padding: 8px 24px 20px; }
  /* The condensed bar is 35% ink over a blur. backdrop-filter makes the nav a
     backdrop root, so the drawer — a child hanging below the bar's own box —
     gets composited into that group and the page reads straight through it,
     whatever alpha the panel itself carries. With the menu open the header
     stops being glass and becomes a solid surface, which is what a drawer
     wants anyway. */
  .nav--stuck:has(.nav__links.open) { background: #070707;
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav--stuck .nav__links a:not(.nav__cta):not(.nav__invest) { font-size: 12px; padding: 12px 0; }
  /* the condensed-bar sizing above is (0,2,0) and !important, so the drawer has
     to restate Invest at matching weight or it keeps the 46px-bar padding and
     the box collapses to a thin outlined strip */
  .nav--stuck .nav__invest { margin-left: 0; padding: 11px 22px !important; font-size: 14px !important; }
  .nav--stuck .nav__cta { position: static; transform: none; margin-left: 0;
    padding: 12px 18px !important; font-size: 14px !important; }
}

/* ============================================================
   The Loop — modern 4-stage card grid (replaces radar SVG)
   ============================================================ */
.sec-loop2 { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.sec-loop2 .sec-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.loop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.loop-card {
  display: block; position: relative;
  background: var(--surface);
  border: 1px solid var(--s-line-strong);
  padding: 1.7rem 1.5rem 1.6rem;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: transform .3s cubic-bezier(.22,1,.36,1), background .3s;
  overflow: hidden;
}
.loop-card::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.loop-card:hover { transform: translateY(-6px); background: var(--surface-2); }
.loop-card:hover::before { transform: scaleX(1); }
.loop-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.loop-card__letter {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 3.2rem; line-height: 0.9;
  color: var(--mint); letter-spacing: -0.02em;
}
.loop-card__num { font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.2em; color: var(--s-dim); }
.loop-card__num::before { content: '['; }
.loop-card__num::after { content: ']'; }
.loop-card__stage {
  margin-top: 1.3rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--mint);
}
.loop-card h3 { margin-top: 0.5rem; font-size: 1.18rem; color: var(--s-head); letter-spacing: -0.01em; }
.loop-card p { margin-top: 0.7rem; font-size: 0.85rem; color: var(--s-dim); line-height: 1.6; }
.loop-card__suite {
  display: inline-block; margin-top: 1.5rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--s-head);
}
.loop-card__suite i { color: var(--mint); font-style: normal; display: inline-block;
  opacity: 0; transform: translate(-3px,3px); transition: opacity .25s, transform .25s; }
.loop-card:hover .loop-card__suite i { opacity: 1; transform: translate(0,0); }
.loop-note {
  margin-top: 1.8rem; display: flex; align-items: center; gap: 0.7rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--s-dim);
}
.loop-note__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 12px var(--mint); animation: loopdot 2.4s ease-in-out infinite; }
@keyframes loopdot { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .loop-note__dot { animation: none; } }
@media (max-width: 900px) { .loop-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .loop-grid { grid-template-columns: 1fr; } }

/* ---------- thesis card 03: text-only closing statement ---------- */
.tcard--text { justify-content: center; padding: clamp(2rem, 4vw, 3.5rem); }
.tcard--text__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.tcard--text .no { display: block; margin-bottom: 1.4rem; }
.tcard--text .thesis-panel__text {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.tcard--text .thesis-panel__text em {
  background: linear-gradient(transparent 62%, rgba(16,163,126,0.22) 62%);
  padding: 0 0.12em;
}
.tcard--text .thesis-panel__foot {
  display: inline-block;
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(7,7,7,0.18);
}

/* ============================================================
   The Loop — circular diagram + refined stage list
   ============================================================ */
.sec-loop3 { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.sec-loop3 .sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------- The Loop: N·E·M·I editorial rail ---------- */
.loop4 { margin-top: clamp(2rem, 4vw, 3.5rem); }
.loop4-rail {
  position: relative; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46,230,168,0.45) 6%, rgba(46,230,168,0.45) 94%, transparent);
}
.loop4-pulse {
  /* a lit highlight band that sweeps along the rail and enters each box */
  position: absolute; top: -1.5px; height: 4px; width: 30%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(46,230,168,0.9) 50%, transparent);
  box-shadow: 0 0 18px rgba(46,230,168,0.55);
  animation: loop4pulse 9s linear infinite;
}
@keyframes loop4pulse {
  0%   { left: -30%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .loop4-pulse { animation: none; opacity: 0; } }
.loop4-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
/* layered build: rail draws first, then each stage rises in sequence,
   then the return path closes the loop */
.loop4.reveal { opacity: 1; transform: none; }          /* wrapper never hides; layers do */
.loop4 .loop4-rail { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(0.22,0.61,0.36,1) 0.1s; }
.loop4.in .loop4-rail { transform: scaleX(1); }
.loop4 .loop4-pulse { animation-play-state: paused; }
.loop4.in .loop4-pulse { animation-play-state: running; }
.loop4 .loop4-col { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,0.61,0.36,1); }
.loop4.in .loop4-col:nth-child(1) { transition-delay: 0.25s; }
.loop4.in .loop4-col:nth-child(2) { transition-delay: 0.55s; }
.loop4.in .loop4-col:nth-child(3) { transition-delay: 0.85s; }
.loop4.in .loop4-col:nth-child(4) { transition-delay: 1.15s; }
.loop4.in .loop4-col { opacity: 1; transform: none; }
.loop4 .loop4-return { opacity: 0; transition: opacity 0.7s ease 1.55s; }
.loop4.in .loop4-return { opacity: 1; }
.loop4-col {
  position: relative;
  padding: clamp(2.2rem, 3.5vw, 3.4rem) clamp(1.2rem, 2vw, 2rem) clamp(2.4rem, 3.5vw, 3.2rem);
  border-right: 1px solid rgba(233,238,231,0.08);
}
.loop4-col:last-child { border-right: 0; }
/* stage nodes removed — the rail carries a single sweeping highlight instead */
.loop4-letter {
  display: block; line-height: 0.95;
  font-size: clamp(4.2rem, 7.5vw, 7rem); font-weight: 700; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(233,238,231,0.42);
  transition: color 0.4s ease, -webkit-text-stroke-color 0.4s ease;
}
/* the pulse lights each stage as it passes — the loop runs layer by layer */
.loop4.in .loop4-col:nth-child(1) .loop4-letter { animation: loop4lit 9s linear infinite 1.4s; }
.loop4.in .loop4-col:nth-child(2) .loop4-letter { animation: loop4lit 9s linear infinite 3.15s; }
.loop4.in .loop4-col:nth-child(3) .loop4-letter { animation: loop4lit 9s linear infinite 4.9s; }
.loop4.in .loop4-col:nth-child(4) .loop4-letter { animation: loop4lit 9s linear infinite 6.6s; }
@keyframes loop4lit {
  0%   { color: transparent; -webkit-text-stroke-color: rgba(233,238,231,0.42); }
  3%   { color: var(--mint); -webkit-text-stroke-color: var(--mint); }
  16%  { color: var(--mint); -webkit-text-stroke-color: var(--mint); }
  25%  { color: transparent; -webkit-text-stroke-color: rgba(233,238,231,0.42); }
  100% { color: transparent; -webkit-text-stroke-color: rgba(233,238,231,0.42); }
}
@media (prefers-reduced-motion: reduce) {
  .loop4 .loop4-rail, .loop4 .loop4-col, .loop4 .loop4-return { transition: none; transform: none; opacity: 1; }
  .loop4.in .loop4-letter { animation: none !important; }
}
.loop4-col:hover .loop4-letter { color: var(--mint); -webkit-text-stroke-color: var(--mint); }
.loop4-kicker {
  display: block; margin-top: clamp(1.4rem, 2.4vw, 2.2rem);
  font-family: 'IBM Plex Mono', monospace; font-size: clamp(0.58rem, 0.62vw, 0.7rem); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(233,238,231,0.55);
  white-space: nowrap;
}
.loop4-kicker b { font-weight: 500; color: var(--mint); }
.loop4-col h3 {
  margin-top: 0.85rem;
  font-size: clamp(0.98rem, 1.24vw, 1.4rem); font-weight: 600; color: #FFFFFF;
  white-space: nowrap;                        /* heading always one line */
}
.loop4-col p {
  margin-top: 0.7rem;
  font-size: clamp(0.82rem, 0.98vw, 0.98rem); line-height: 1.65;
  color: rgba(233,238,231,0.6); max-width: 21em;   /* settles into ~3 tidy lines */
}
.loop4-return { position: relative; border-top: 1px dashed rgba(233,238,231,0.18); text-align: center; }
.loop4-return__label {
  display: inline-block; transform: translateY(-50%);
  position: relative; overflow: hidden;
  padding: 0.5rem 1.5rem; background: var(--forest); border-radius: 0;
  box-shadow: inset 0 0 0 999px rgba(46,230,168,0.13), 0 0 24px rgba(46,230,168,0.22);
  outline: 1px solid rgba(46,230,168,0.45); outline-offset: -1px;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: #CFFBEC;
}
.loop4-return__label::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), rgba(46,230,168,0.6), transparent);
  transform: skewX(-18deg); animation: loop4sheen 3.6s ease-in-out infinite;
}
@keyframes loop4sheen { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .loop4-return__label::before { animation: none; opacity: 0; } }
/* inline mint highlighter — marks a key phrase inside body copy */
.hl-mint {
  background: #0e5a41; color: #EAFBF4; font-weight: 500;
  padding: 0.06em 0.4em; border-radius: 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (max-width: 860px) {
  .loop4-rail, .loop4-col::before { display: none; }
  .loop4-grid { grid-template-columns: 1fr; }
  .loop4-col { border-right: 0; border-top: 1px solid rgba(233,238,231,0.08); padding: 2rem 0; }
  .loop4-col:first-child { border-top: 0; }
  .loop4-letter { font-size: 3.4rem; }

  /* Stacked to a single column, each stage reads better centred — the big
     letter, the stage label and the copy sit on one axis instead of a ragged
     left edge with a large letter floating above it. */
  .loop4-col { text-align: center; }
  .loop4-col p { margin-left: auto; margin-right: auto; max-width: 34ch; }

  /* The closing line is a badge centred on a dashed rule across four columns.
     Stacked it is nearly as wide as the card, so keep it a plain block rather
     than pulling it up over the rule — but centre it to match the stages. */
  .loop4-return { text-align: center; border-top: 0; margin-top: 1.75rem; }
  .loop4-return__label {
    display: block; transform: none; text-align: center;
    padding: 0.85rem 1rem; letter-spacing: 0.16em; line-height: 1.7;
  }
}
.loop3-wrap {
  display: grid; grid-template-columns: minmax(0, 420px) 1fr;
  gap: clamp(3rem, 7vw, 6.5rem); align-items: center;
}
.loop3-diagram { position: relative; }
.loop3-diagram svg { width: 100%; height: auto; display: block; overflow: visible; }
.loop3-travel { transform-origin: 200px 200px; animation: loop3spin 9s linear infinite; }
.loop3-arc { transform-origin: 200px 200px; animation: loop3spin 9s linear infinite; }
@keyframes loop3spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loop3-travel, .loop3-arc { animation: none; } }
.loop3-letter { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 2px; fill: var(--mint); }
.loop3-center { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: 6px; fill: #FFFFFF; }
.loop3-sub { font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 2.5px; fill: var(--s-dim); }

.loop3-list { list-style: none; position: relative; margin: 0; padding: 0; }
.loop3-list::before { content: ''; position: absolute; left: 19px; top: 12px; bottom: 12px;
  width: 1px; background: var(--s-line); }
.loop3-row { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 1.4rem;
  padding: clamp(1rem, 2vw, 1.5rem) 0; }
.loop3-row + .loop3-row { border-top: 1px solid var(--s-line); }
.loop3-mark {
  position: relative; z-index: 1;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem;
  color: var(--mint); background: var(--surface); border: 1px solid var(--mint);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: background .3s, color .3s;
}
.loop3-row:hover .loop3-mark { background: var(--mint); color: var(--forest); }
.loop3-stage { font-family: 'IBM Plex Mono', monospace; font-size: 0.64rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--s-dim); }
.loop3-stage span { color: var(--mint); }
.loop3-body h3 { margin-top: 0.35rem; font-size: 1.2rem; color: var(--s-head); letter-spacing: -0.01em; }
.loop3-body p { margin-top: 0.5rem; font-size: 0.88rem; color: var(--s-dim); line-height: 1.6; max-width: 40em; }
@media (max-width: 900px) {
  .loop3-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .loop3-diagram { max-width: 320px; margin: 0 auto; }
}

/* ============================================================
   Phase One Markets — horizontal scroll gallery, large images
   ============================================================ */
.mkt-scroll {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 0 22px;
  margin: 0 calc(-1 * 6vw);           /* bleed to the section edges */
  padding-left: 6vw; padding-right: 6vw;
  scrollbar-width: thin;
  scrollbar-color: rgba(7,7,7,0.3) transparent;
}
.mkt-scroll::-webkit-scrollbar { height: 6px; }
.mkt-scroll::-webkit-scrollbar-thumb { background: rgba(7,7,7,0.25); border-radius: 3px; }
.mkt-scroll::-webkit-scrollbar-track { background: transparent; }
.mkt-slide {
  position: relative; flex: 0 0 auto;
  width: clamp(300px, 42vw, 560px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid rgba(7,7,7,0.12);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.mkt-slide img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) contrast(1.04) brightness(0.86);
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1), filter 0.5s;
}
.mkt-slide::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,7,7,0) 45%, rgba(7,7,7,0.72) 100%);
}
.mkt-slide:hover img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.mkt-slide__num {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.18em;
  color: rgba(233,238,231,0.9); background: rgba(7,7,7,0.4); padding: 5px 9px;
}
.mkt-slide__cap {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.15rem;
  color: #FFFFFF; letter-spacing: -0.01em;
}
.mkt-scroll__end { flex: 0 0 6vw; }

/* ---------- The Loop: fit one viewport, tighter ---------- */
@media (min-width: 901px) {
  .sec-loop3 { min-height: 100vh; display: flex; align-items: center; padding: 3rem 0; }
  .sec-loop3 > .container { width: 100%; }
  .sec-loop3 .sec-head { margin-bottom: 1.6rem; max-width: 900px; }
  .sec-loop3 .sec-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
  .sec-loop3 .lede { font-size: 0.95rem; margin-top: 1rem; }
  .loop3-wrap { grid-template-columns: minmax(0, 380px) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .loop3-diagram { max-width: 360px; }
  .loop3-row { padding: 0.75rem 0; grid-template-columns: 36px 1fr; gap: 1.1rem; }
  .loop3-list::before { left: 17px; }
  .loop3-mark { width: 36px; height: 36px; font-size: 1rem; }
  .loop3-body h3 { font-size: 1.06rem; margin-top: 0.25rem; }
  .loop3-body p { font-size: 0.82rem; margin-top: 0.35rem; line-height: 1.55; }
}
/* row hover accent */
.loop3-row { transition: background .25s; }
.loop3-row:hover { background: rgba(16,163,126,0.05); }

/* ---------- markets: auto-scrolling marquee, shorter slides ---------- */
/* real horizontal scroller: auto-drifts, but can be dragged, swiped or wheel-scrolled.
   The drift is driven from JS (scrollLeft) rather than a transform, so manual
   scrolling and the animation share one coordinate system instead of fighting. */
.mkt-marquee {
  overflow-x: auto; overflow-y: hidden; margin: 0 calc(-1 * 6vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  cursor: grab; touch-action: pan-x; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.mkt-marquee::-webkit-scrollbar { display: none; }
.mkt-marquee.is-grabbing { cursor: grabbing; }
.mkt-marquee.is-grabbing .mkt-slide { pointer-events: none; }
.mkt-track {
  display: flex; gap: 16px; width: max-content; padding: 4px 6vw;
}
.mkt-slide {
  width: clamp(340px, 34vw, 460px);
  aspect-ratio: 3 / 2;                 /* shorter than 4/5 */
}

/* ---------- Loop stage chips: richer emerald fill (consistent) ---------- */
.loop3-mark {
  background: var(--deep);
  color: var(--mint);
  border-color: rgba(16,163,126,0.55);
}
.loop3-row:hover .loop3-mark { background: var(--mint); color: var(--forest); border-color: var(--mint); }
.loop3-stage span { color: var(--mint-soft); }

/* ---------- Markets: shorter slides ---------- */
.mkt-slide { aspect-ratio: 16 / 9; width: clamp(300px, 30vw, 440px); }

/* ---------- markets: taller slides, one viewport, cleaner fades ---------- */
@media (min-width: 901px) {
  .sec:has(.mkt-marquee) {
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    padding: 3rem 0;
  }
  .sec:has(.mkt-marquee) .sec-head { margin-bottom: clamp(1.6rem, 3vh, 2.6rem); }
}
.mkt-slide {
  aspect-ratio: auto;
  height: clamp(440px, 52vh, 570px);   /* tall cinematic, trimmed 150px total */
  width: clamp(560px, 50vw, 900px);
}
/* Those minimums (560 wide, 440 tall) are bigger than a phone screen, so a
   single slide overflowed the viewport and stood 54% of the screen tall.
   Size to the viewport instead, and leave a sliver of the next slide showing
   so it still reads as something you can scroll. */
@media (max-width: 860px) {
  .mkt-slide {
    width: 76vw;
    height: auto;
    aspect-ratio: 3 / 2;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  }
  .mkt-track { gap: 12px; padding: 4px 12px; }
  .mkt-slide__cap { left: 14px; bottom: 12px; font-size: 0.98rem; }
  .mkt-slide__num { top: 12px; left: 12px; font-size: 0.6rem; }
}
/* Full-bleed: the marquee lives outside .container in the markup, so it already
   spans the section edge to edge. Do NOT reach for `width: 100vw` here — 100vw
   includes the classic scrollbar, which pushed the whole document 8px wider
   than the viewport and gave every desktop visitor a sideways scroll. */
.mkt-marquee {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.mkt-track { padding: 6px 0; gap: 20px; }

/* nav dropdown (injected nav on the homepage) */
.nav__item { position: relative; display: inline-flex; align-items: center; }
.nav__item > a::after { content: ' \25BE'; font-size: 9px; opacity: 0.6; }
.nav__drop {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px);
  min-width: 190px; padding: 8px 0;
  background: #0B0F0D; border: 1px solid rgba(16,163,126,0.3);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 80;
}
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop {
  opacity: 1; visibility: visible; transform: translate(-50%, 4px);
}
.nav__drop a {
  display: block; padding: 11px 20px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; color: rgba(236,231,221,0.85);
}
.nav__drop a:hover { color: var(--mint); background: rgba(46,230,168,0.08); }
@media (max-width: 860px) {
  .nav__item { display: block; }
  .nav__drop { position: static; transform: none; opacity: 1; visibility: visible; border: 0; background: transparent; padding: 0 0 0 18px; }
}

/* hero H1 typewriter caret — sits after the last typed character (later spans
   are empty until typed). The .typing class is never removed, so the caret
   keeps blinking after the line finishes rather than disappearing. */
.hero h1.typing .hero-live::after {
  content: ''; display: inline-block; width: 3px; height: 0.82em;
  margin-left: 6px; vertical-align: -0.04em; background: var(--mint);
  animation: heroCaret 0.7s step-end infinite;
}
@keyframes heroCaret { 50% { opacity: 0; } }

/* headline stays plain white end to end — no highlight treatment */

/* centred hero, no CTA row */
.hero .container.hero--center { text-align: center; }
.hero--center .lede { margin-left: auto; margin-right: auto; }
/* One line. A hidden ghost of the finished string reserves the full width, so
   the centred headline does not slide leftward as the caret types it out. */
.hero--center h1 {
  display: inline-grid;
  white-space: nowrap;
  margin-left: auto; margin-right: auto;
}
.hero--center h1 > span { grid-area: 1 / 1; text-align: left; }
.hero-ghost { visibility: hidden; }
@media (max-width: 900px) {
  .hero--center h1 { display: block; white-space: normal; }
  .hero-ghost { display: none; }
}
/* the description holds until the headline has finished typing */
.hero-lede {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-lede.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-lede { opacity: 1; transform: none; transition: none; }
}
/* typewriter caret for the thesis line */
.type-fx.typing::after {
  content: ''; display: inline-block; width: 2px; height: 0.95em;
  margin-left: 3px; vertical-align: -0.12em;
  background: var(--mint);
  animation: typeblink 0.9s steps(1) infinite;
}
@keyframes typeblink { 50% { opacity: 0; } }

/* ---------- Markets marquee ("Where Our Work Ends Up") on landscape phones ----------
   Every other breakpoint sizes a slide off viewport WIDTH. In landscape the
   viewport is wide but very short, so 76vw makes a 617x411 card on an 812x375
   screen — taller than the entire screen, with barely one card in frame and the
   heading pushed off the top. Size off HEIGHT here instead and trim the section's
   vertical padding, so the head and three slides fit in one screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .mkt-slide {
    width: auto;
    height: clamp(150px, 48vh, 260px);
    aspect-ratio: 3 / 2;
  }
  .mkt-track { gap: 12px; padding: 4px 12px; }
  .sec:has(.mkt-marquee) { padding: 2rem 0; }
  .sec:has(.mkt-marquee) .sec-head { margin-bottom: 1.1rem; }
  .sec:has(.mkt-marquee) .h-lg { font-size: 1.35rem; }
  .sec:has(.mkt-marquee) .lede { font-size: 0.92rem; line-height: 1.55; margin-top: 0.6rem; }
}

/* ---------- Suites: scroll-driven showcase on black ---------- */
.suites-wrap { height: 405vh; position: relative; }
.suites-sec {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: #070707;
  display: flex; flex-direction: column; justify-content: center;
}
.suites-sec .container { width: 100%; }
.suite-stage { position: relative; height: 100vh; }
/* cinematic opener: heading alone on black, fades away as the show starts */
.suites-intro {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
  will-change: transform, opacity;
}
.suites-intro__tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--mint);
}
.suites-intro__tag::before { content: '[ '; }
.suites-intro__tag::after { content: ' ]'; }
.suites-intro h2 {
  margin-top: 1.4rem;
  font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; letter-spacing: -0.025em;
  color: #FFFFFF;
}
.suites-intro p {
  margin-top: 1.4rem; max-width: 44em;
  font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7;
  color: rgba(236,231,221,0.7); padding: 0 6vw;
}
.suite-media { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.suite-media figure {
  /* base geometry: 60% wide, tall (top to bottom), right-anchored; JS grows to 75% */
  position: absolute; right: clamp(28px, 4vw, 76px); top: 6vh; width: 60vw; aspect-ratio: 2200 / 1238; height: auto; margin: 0;
  transform: translateX(110%);
  will-change: transform, width, height, top;
  background: #0D0D0D;
  overflow: hidden;
  /* a contained panel: brand corner snip, visible edge, deep shadow */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  border: 1px solid rgba(233,238,231,0.16);
  box-shadow: -34px 24px 80px rgba(0,0,0,0.65);
}
.suite-media figure::after {
  /* light veil only on the text side — the screenshot itself stays bright */
  content: ''; position: absolute; inset: 38px 0 0 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,7,7,0.38) 0%, rgba(7,7,7,0.08) 30%, rgba(7,7,7,0) 55%);
}

/* browser-window chrome — each suite screenshot presented as a live app window */
.suite-media figure { padding-top: 38px; box-sizing: border-box; }
.dev-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 38px; z-index: 3;
  display: flex; align-items: center; gap: 12px; padding: 0 16px; margin: 0;
  background: linear-gradient(180deg, #131715, #0B0E0C);
  border-bottom: 1px solid rgba(233, 238, 231, 0.12);
}
.dev-dots { display: inline-flex; gap: 7px; }
.dev-dots span { width: 9px; height: 9px; border-radius: 50%; display: block; }
.dev-dots span:nth-child(1) { background: #FF5F57; }
.dev-dots span:nth-child(2) { background: #FEBC2E; }
.dev-dots span:nth-child(3) { background: #28C840; }
.dev-app {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(233, 238, 231, 0.78);
}
.dev-live {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mint);
  border: 1px solid rgba(16, 163, 126, 0.4);
  padding: 3px 10px;
}
.dev-live::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px;
  border-radius: 50%; background: var(--mint); vertical-align: 1px;
  animation: devPulse 1.6s ease-in-out infinite;
}
@keyframes devPulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .dev-live::before { animation: none; } }
.suite-media img {
  width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block;
  filter: saturate(0.96) brightness(0.94);
}
.suite-infos { position: absolute; left: 0; top: 0; bottom: 0; width: 32%; z-index: 20; }
.suite-info {
  position: absolute; top: 50%; left: 0; right: 0; margin-top: -170px;
  padding-left: 26px; border-left: 2px solid var(--mint);
  opacity: 0; transform: translateY(46px); will-change: transform, opacity;
  pointer-events: none;
  text-shadow: 0 2px 26px rgba(7,7,7,0.9);
}
.suite-idx {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; letter-spacing: 0.24em;
  color: var(--mint);
}
.suite-idx::before { content: '['; }
.suite-idx::after { content: ']'; }
.suite-info h3 { margin-top: 1.1rem; font-size: clamp(2.3rem, 3.4vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF; }
.suite-info p { margin-top: 1.1rem; font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.65; color: rgba(236,231,221,0.86); max-width: 26em; }
.suite-more {
  display: inline-block; margin-top: 1.5rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--mint);
  border-bottom: 1px solid rgba(16,163,126,0.4); padding-bottom: 5px;
}
.suite-more:hover { border-bottom-color: var(--mint); }
@media (max-width: 860px) {
  .suites-wrap { height: auto; }
  .suites-sec { position: static; height: auto; padding: 4rem 0; }
  .suite-stage { height: auto; margin-top: 2rem; }
  .suite-media { position: static; width: 100%; display: grid; gap: 14px; pointer-events: auto; }
  .suite-media figure { position: static; transform: none !important; aspect-ratio: 16/9;
    width: 100% !important; height: auto !important; top: auto !important;
    -webkit-mask-image: none; mask-image: none; }
  .suite-media figure::after { display: none; }
  .suite-media figure::before { display: none; }
  .suites-intro { position: static; opacity: 1 !important; transform: none !important; }
  .suite-infos { position: static; width: 100%; }
  .suite-info { position: static; margin-top: 1.6rem; opacity: 1 !important; transform: none !important; pointer-events: auto; }

  /* home.js moves each screenshot inside its own description on narrow
     screens, so a suite reads name > copy > shot instead of all three shots
     followed by all three descriptions. */
  .suites-paired .suite-media { display: none; }        /* now empty */
  .suites-paired .suite-info { margin-top: 2.6rem; }

  /* Fade up on arrival. The !important is to beat the .suite-info rule above,
     which force-clears the desktop animation's opacity/transform. Only applied
     under .suites-paired, which JS adds — so if the script never runs, that
     base rule still shows everything. */
  .suites-paired .suite-info {
    opacity: 0 !important;
    transform: translateY(26px) !important;
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
  }
  .suites-paired .suite-info.in {
    opacity: 1 !important;
    transform: none !important;
  }
  .suites-paired .suite-info figure {
    opacity: 0; transform: translateY(14px);
    transition: opacity .8s ease .15s, transform .8s cubic-bezier(.22, 1, .36, 1) .15s;
  }
  .suites-paired .suite-info.in figure { opacity: 1; transform: none; }
  .suites-paired .suite-info figure {
    margin: 1.4rem 0 0; padding: 0; position: static;
    width: 100% !important; height: auto !important;
    aspect-ratio: 16/9; overflow: hidden;
    border: 1px solid rgba(236,231,221,.14); background: #0d100f;
  }
  .suites-paired .suite-info figure img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* the fake browser chrome reads as clutter at this size */
  .suites-paired .suite-info figure .dev-bar { display: none; }
}

.foot-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* marquee cards: light placeholder behind images — a not-yet-loaded card must
   read as paper, never as a black box against this light section */
.mkt-slide { background: #EFEBE2; }

/* ---------- Nav: Invest button ---------- */
/* Outlined against the filled Contact CTA it sits beside, so the two read as a
   pair without competing. Square, not chamfered: a clip-path cuts the corner out
   of the border stroke itself, so the chamfered version had no line at all along
   the top-right. A sharp rectangle is an approved brand shape, so the outline
   stays whole. */
.nav__invest {
  margin-left: 10px;
  color: var(--mint) !important;
  border: 1px solid rgba(16,163,126,.55);
  padding: 10px 18px !important;
  font-weight: 600; font-family: "Space Grotesk", sans-serif !important;
  letter-spacing: 0 !important; text-transform: none !important; font-size: 14px !important;
  transition: background .2s, color .2s, border-color .2s;
}
.nav__invest::after { display: none; }
.nav__invest:hover { background: var(--mint); color: var(--forest) !important; border-color: var(--mint); }

/* With Invest in the row there are 7 items again: without nowrap the flex row
   shrinks each link enough that "About Us" breaks onto two lines. */
.nav__links a { white-space: nowrap; }

/* The row only just clears the logo at the top of the desktop range, so tighten
   it across that band. Starts at 900.02px, not 901px: at a fractional viewport
   of ~900.5 neither max-width:900 nor min-width:901 matches, and the width fell
   through the gap onto the untightened row. */
@media (min-width: 900.02px) and (max-width: 1120px) {
  .nav__links a { padding: 8px 10px; letter-spacing: 1.3px; }
  .nav__invest { margin-left: 6px; padding: 10px 13px !important; }
  .nav__cta { margin-left: 6px; padding: 11px 15px !important; }
}
@media (max-width: 900px) {
  /* In the drawer Invest pairs with Contact, so it is boxed like Contact rather
     than sitting as a bare text row among the section links — outlined instead
     of filled, since it is the secondary of the two. Same padding as .nav__cta
     so the two stack as one block with their labels on the same left edge. */
  .nav__invest { margin: 10px 0 8px; border: 1px solid rgba(46,230,168,.55);
    width: 100%; padding: 11px 22px !important; font-size: 14px !important;
    color: var(--mint) !important; clip-path: none; }
  .nav__invest:hover { background: var(--mint); color: var(--forest) !important;
    border-color: var(--mint); }
}