:root {
  --bg: #0a0a0c;
  --bg-2: #101013;
  --surface: #15151a;
  --surface-2: #1c1c22;
  --fg: #f5f5f6;
  --fg-2: #c5c5cc;
  --muted: #6b6b73;
  --dim: #3a3a42;
  --cyan: #00c2ff;
  --amber: #ffae00;
  --rule: rgba(245,245,246,0.10);
  --rule-2: rgba(245,245,246,0.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--cyan); color: var(--bg); }

.mono { font-family: 'JetBrains Mono', monospace; }
.display { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.86; }
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); }
.meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* page scaffolding */
.stage {
  --grid: rgba(0,194,255,0.05);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--bg);
  background-size: 28px 28px;
  min-height: 100vh;
  overflow-x: hidden;
}
.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
section { position: relative; }

/* nav: floating pill, inset from each edge. position:fixed avoids the
   overflow-x:hidden on .stage that would break position:sticky. */
nav.bar {
  position: fixed; top: 16px; left: 16px; right: 16px; z-index: 50;
  background: rgba(10,10,12,0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(245,245,246,0.14);
  border-radius: 14px;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
body { padding-top: 88px; }
nav.bar .inner { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 22px; }
nav.bar .links { gap: 22px; }
html { scroll-padding-top: 96px; }
nav.bar .brand { display: flex; align-items: center; gap: 12px; }
nav.bar .brand .wm { font-family: 'Archivo Black', sans-serif; font-size: 14px; letter-spacing: -0.04em; text-transform: uppercase; }
nav.bar .links { display: flex; align-items: center; gap: 28px; }
nav.bar .links a { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); transition: color .15s; }
nav.bar .links a:hover { color: var(--cyan); }
nav.bar .status { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); }
nav.bar .status::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: var(--amber); box-shadow: 0 0 8px var(--amber); }

/* hero */
.hero { padding: 100px 0 120px; position: relative; }
.hero .grid { display: grid; grid-template-columns: 110px minmax(0, 1fr) 260px; gap: 36px; align-items: start; }
.hero .sidebar { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.hero .sidebar .pillar { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); line-height: 1.7; }
.hero .sidebar .pillar b { display: block; color: var(--cyan); margin-bottom: 4px; letter-spacing: 0.22em; font-weight: 400; }
.hero .sidebar .pillar.amber b { color: var(--amber); }
.hero h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(48px, 7.2vw, 96px);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 22px 0 0;
}
.hero h1 .cyan { color: var(--cyan); }
.hero h1 .amber { color: var(--amber); }
.hero .lede { margin-top: 30px; max-width: 580px; font-size: 17px; line-height: 1.55; color: var(--fg-2); font-weight: 500; }
.hero .cta-row { margin-top: 38px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn {
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 0; border: 1px solid transparent;
  cursor: pointer; transition: transform .15s, background .15s, color .15s;
  display: inline-flex; align-items: center; gap: 10px;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--cyan); color: var(--bg); }
.btn.primary:hover { background: var(--fg); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn.ghost:hover { background: var(--fg); color: var(--bg); }
.btn .arrow { font-family: 'JetBrains Mono', monospace; }

.hero .readout {
  margin-top: 36px;
  border: 1px solid var(--rule); padding: 18px 22px;
  background: rgba(21,21,26,0.4); backdrop-filter: blur(4px);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.7; color: var(--fg-2);
}
.hero .readout b { color: var(--cyan); font-weight: 400; }
.hero .readout .row { display: flex; justify-content: space-between; gap: 16px; }
.hero .readout .row span:last-child { color: var(--fg); }

.badge { display: block; }

/* section heading */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 80px 0 36px; border-top: 1px solid var(--rule); }
.sec-head h2 { font-family: 'Archivo Black', sans-serif; font-size: 42px; line-height: 0.88; letter-spacing: -0.035em; text-transform: uppercase; margin: 8px 0 0; max-width: 700px; }
.sec-head h2 .cyan { color: var(--cyan); }
.sec-head .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; color: var(--muted); }
.sec-head .right { text-align: right; }
.sec-head .right .mono { display: block; color: var(--muted); margin-top: 6px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }

/* dual reading block */
.dual {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--rule); border-bottom: none;
  background: var(--bg-2);
}
.dual .read {
  padding: 28px 32px;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 6px;
}
.dual .read:last-child { border-right: none; }
.dual .read .label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
}
.dual .read.r1 .label { color: var(--cyan); }
.dual .read.r2 .label { color: var(--amber); }
.dual .read .lead {
  font-family: 'Archivo Black', sans-serif; font-size: 22px; line-height: 0.95;
  letter-spacing: -0.03em; text-transform: uppercase; margin: 4px 0 6px;
}
.dual .read .lead .cyan { color: var(--cyan); }
.dual .read .lead .amber { color: var(--amber); }
.dual .read p {
  font-size: 13px; line-height: 1.5; color: var(--fg-2); margin: 0; font-weight: 500;
}
@media (max-width: 800px) {
  .dual { grid-template-columns: 1fr; }
  .dual .read { border-right: none; border-bottom: 1px solid var(--rule); }
  .dual .read:last-child { border-bottom: none; }
}

/* philosophy quadrant */
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.quad .cell { background: var(--bg-2); padding: 36px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; transition: background .2s; cursor: default; }
.quad .cell:hover { background: var(--surface-2); }
.quad .cell .tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); }
.quad .cell.i .tag { color: var(--amber); }
.quad .cell h3 { font-family: 'Archivo Black', sans-serif; font-size: 38px; letter-spacing: -0.035em; text-transform: uppercase; margin: 18px 0 10px; line-height: 0.86; }
.quad .cell p { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0; max-width: 320px; font-weight: 500; }
.quad .cell .num { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); letter-spacing: 0.2em; align-self: flex-end; }

/* work cards */
.work { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.work .card { background: var(--bg-2); padding: 28px; min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; }
.work .card .top { display: flex; justify-content: space-between; align-items: flex-start; }
.work .card .top .meta { color: var(--cyan); }
.work .card .num { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); letter-spacing: 0.2em; }
.work .card h4 { font-family: 'Archivo Black', sans-serif; font-size: 26px; line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; margin: 28px 0 8px; }
.work .card p { font-size: 13px; line-height: 1.5; color: var(--fg-2); margin: 0; max-width: 340px; font-weight: 500; }
.work .card .tags { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.work .card .tag {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-2); padding: 4px 8px;
  border: 1px solid var(--rule);
}
.work .card.featured { grid-column: span 2; min-height: 320px; background: linear-gradient(135deg, rgba(0,194,255,0.05), transparent 60%), var(--bg-2); }
.work .card.featured h4 { font-size: 44px; line-height: 0.88; max-width: 600px; }
.work .card.featured h4 .cyan { color: var(--cyan); }
.work .card.featured p { max-width: 480px; font-size: 14px; }

/* spec sheet */
.spec { display: grid; grid-template-columns: 280px 1fr; gap: 60px; align-items: start; }
.spec .left .eyebrow { display: block; margin-bottom: 14px; }
.spec .left h2 { font-family: 'Archivo Black', sans-serif; font-size: 40px; line-height: 0.88; letter-spacing: -0.035em; text-transform: uppercase; margin: 0; }
.spec .left h2 .cyan { color: var(--cyan); }
.spec .left .blurb { margin-top: 16px; color: var(--fg-2); font-size: 14px; line-height: 1.55; font-weight: 500; }
.spec table { width: 100%; border-collapse: collapse; }
.spec tr { border-bottom: 1px solid var(--rule); }
.spec td { padding: 16px 0; vertical-align: top; }
.spec td.k { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); width: 200px; }
.spec td.v { font-family: 'Archivo', sans-serif; font-size: 15px; color: var(--fg); font-weight: 500; }
.spec td.v .amber { color: var(--amber); }
.spec td.v .cyan { color: var(--cyan); }

/* stack pill chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg); padding: 6px 12px;
  border: 1px solid var(--rule);
}

/* philosophy teaser (home page) - editorial 2x2:
   italic serif heading + mono meta + sans body */
.principles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: border-color .2s;
}
.principles:hover { border-color: rgba(0,194,255,0.45); }
.principle {
  background: var(--bg);
  padding: 56px 48px 56px;
  display: flex; flex-direction: column;
  min-height: 360px;
  transition: background .2s;
  position: relative;
}
.principles:hover .principle { background: var(--bg-2); }
.p-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.32em; color: var(--muted);
  margin-bottom: auto;
}
.p-name {
  font-family: 'Newsreader', 'Crimson Pro', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(44px, 6vw, 80px); line-height: 1;
  letter-spacing: -0.005em; margin: 0 0 24px;
  color: var(--fg);
}
.p-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; color: #a89c8a;
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.p-body {
  font-family: 'Archivo', sans-serif; font-weight: 400;
  font-size: 19px; line-height: 1.4; color: #a89c8a;
  margin: 0;
}
@media (max-width: 960px) {
  .principles { grid-template-columns: 1fr; }
  .principle { padding: 36px 28px; min-height: 240px; }
}

/* legacy philosophy teaser (kept for compatibility with other pages) */
.phi-teaser {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  border: 1px solid var(--rule);
  margin-top: 80px;
  transition: border-color .2s;
  text-decoration: none;
}
.phi-teaser:hover { border-color: var(--cyan); }
.phi-teaser:hover .phi-teaser__cell { background: var(--surface-2); }
.phi-teaser__left { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--rule); background: var(--bg-2); }
.phi-teaser__h { font-family: 'Archivo Black', sans-serif; font-size: 38px; line-height: 0.88; letter-spacing: -0.035em; text-transform: uppercase; margin: 12px 0 0; color: var(--fg); max-width: 480px; }
.phi-teaser__h .cyan { color: var(--cyan); }
.phi-teaser__p { margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--fg-2); max-width: 480px; font-weight: 500; }
.phi-teaser__right { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--rule); }
.phi-teaser__cell { background: var(--bg-2); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; min-height: 130px; transition: background .2s; }
.phi-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); }
.phi-tag.c-amber { color: var(--amber); }
.phi-name { font-family: 'Archivo Black', sans-serif; font-size: 24px; letter-spacing: -0.03em; text-transform: uppercase; color: var(--fg); line-height: 0.9; }
@media (max-width: 960px) {
  .phi-teaser { grid-template-columns: 1fr; margin-top: 60px; }
  .phi-teaser__left { border-right: none; border-bottom: 1px solid var(--rule); padding: 32px 24px; }
  .phi-teaser__h { font-size: 30px; }
}

/* philosophy / about page */
.phi-hero { padding: 100px 0 60px; }
.phi-hero h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin: 22px 0 0;
  max-width: 1000px;
}
.phi-hero h1 .cyan { color: var(--cyan); }
.phi-hero .lede { margin-top: 30px; max-width: 640px; font-size: 17px; line-height: 1.55; color: var(--fg-2); font-weight: 500; }

.phi-hero-big { padding-top: 56px; }
.phi-hero-big .phi-breadcrumb {
  display: block;
  padding-bottom: 20px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}
.phi-hero-big .meta { display: block; margin-bottom: 18px; }
.phi-hero-glyph {
  font-family: 'Archivo Black', sans-serif; line-height: 0.82;
  letter-spacing: -0.05em; color: var(--fg);
  margin: 8px 0 32px;
}
.phi-hero-glyph .a {
  font-size: clamp(140px, 24vw, 360px);
  display: inline-flex; align-items: baseline;
}
.phi-hero-glyph .sup {
  font-size: 0.4em; color: var(--cyan);
  align-self: flex-start;
  line-height: 0.82;
  display: inline-block; margin-left: 0.04em;
}

@media (max-width: 960px) {
  .phi-hero { padding: 50px 0 30px; }
  .phi-hero-big { padding-top: 28px; }
  .phi-hero-big .phi-breadcrumb { padding-bottom: 14px; margin-bottom: 22px; }
}

.about-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 60px; align-items: start; padding: 80px 0 100px; border-top: 1px solid var(--rule); }
.about-grid h2 { font-family: 'Archivo Black', sans-serif; font-size: 42px; line-height: 0.88; letter-spacing: -0.04em; text-transform: uppercase; margin: 8px 0 0; }
.about-grid h2 .cyan { color: var(--cyan); }
.about-grid .right p { font-size: 15px; line-height: 1.65; color: var(--fg-2); margin: 0 0 18px; max-width: 600px; font-weight: 500; }
.about-grid .right p:last-child { margin-bottom: 0; }
.about-grid .right p strong { color: var(--fg); font-weight: 700; }
@media (max-width: 960px) {
  .about-grid { grid-template-columns: 1fr; gap: 24px; padding: 50px 0 60px; }
}

.manifesto { padding: 80px 0; border-top: 1px solid var(--rule); }
.manifesto .head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 50px; }
.manifesto .head h2 { font-family: 'Archivo Black', sans-serif; font-size: 42px; line-height: 0.88; letter-spacing: -0.04em; text-transform: uppercase; margin: 8px 0 0; }
.manifesto .head h2 .cyan { color: var(--cyan); }
.manifesto ol { list-style: none; padding: 0; margin: 0; counter-reset: rule; }
.manifesto ol li {
  counter-increment: rule;
  display: grid; grid-template-columns: 80px 1fr; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid var(--rule);
  align-items: start;
}
.manifesto ol li:first-child { border-top: 1px solid var(--rule); }
.manifesto ol li::before {
  content: counter(rule, decimal-leading-zero);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.22em;
  color: var(--cyan); padding-top: 6px;
}
.manifesto ol li .body { font-family: 'Archivo Black', sans-serif; font-size: clamp(22px, 3vw, 32px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; color: var(--fg); }
.manifesto ol li .body em { font-style: normal; color: var(--cyan); }
@media (max-width: 960px) {
  .manifesto { padding: 50px 0; }
  .manifesto ol li { grid-template-columns: 60px 1fr; gap: 14px; }
}

/* footer / contact */
.contact {
  padding: 120px 0 60px; position: relative; border-top: 1px solid var(--rule);
  background: radial-gradient(ellipse at 70% 0%, rgba(0,194,255,0.08), transparent 60%);
}
.contact h2 { font-family: 'Archivo Black', sans-serif; font-size: clamp(56px, 8vw, 110px); line-height: 0.82; letter-spacing: -0.045em; text-transform: uppercase; margin: 0; }
.contact h2 .cyan { color: var(--cyan); }
.contact .row { margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; padding-top: 32px; border-top: 1px solid var(--rule); }
.contact .col h5 { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); margin: 0 0 14px; font-weight: 400; }
.contact .col p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); font-weight: 500; }
.contact .col a { color: var(--fg); border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.contact .col a:hover { color: var(--cyan); border-color: var(--cyan); }

footer.foot {
  border-top: 1px solid var(--rule); padding: 22px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
footer.foot .inner { display: flex; justify-content: space-between; padding: 0 40px; }
footer.foot .right { display: flex; gap: 28px; }
footer.foot .right .live { color: var(--cyan); }
footer.foot .right .live::before { content: '\2022'; margin-right: 4px; }

/* marquee strip */
.marquee {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 18px 0; overflow: hidden; white-space: nowrap;
  font-family: 'Archivo Black', sans-serif; font-size: 20px; letter-spacing: -0.02em; text-transform: uppercase;
}
.marquee .track { display: inline-flex; gap: 50px; animation: scroll 40s linear infinite; }
.marquee .track .sep { color: var(--cyan); }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* mobile / narrow-desktop - the 800-1000px band where the 3-column hero
   would otherwise overflow */
@media (max-width: 960px) {
  .container { padding: 0 22px; }
  nav.bar { margin: 10px 10px 0; top: 10px; }
  nav.bar .inner { padding: 0 14px 0 16px; }
  nav.bar .links { gap: 14px; }
  nav.bar .links a:nth-child(n+4) { display: none; }
  .hero { padding: 60px 0 80px; }
  .hero .grid { grid-template-columns: 1fr; gap: 18px; }
  .hero .sidebar { flex-direction: row; gap: 22px; }
  .hero .readout { margin-top: 24px; }
  .quad, .work { grid-template-columns: 1fr; }
  .work .card.featured { grid-column: span 1; }
  .spec { grid-template-columns: 1fr; gap: 24px; }
  .contact .row { grid-template-columns: 1fr; }
  .sec-head { padding: 50px 0 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .sec-head .right { text-align: left; }
}