/* ==========================================================================
   Performify shared stylesheet · sourced from Design System v0.3
   ========================================================================== */

/* ==========================================================================
   Fonts · self-hosted from /fonts/
   ========================================================================== */
@font-face { font-family: 'Outfit'; font-weight: 300; font-style: normal; font-display: swap; src: url('/fonts/Outfit-Light.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/Outfit-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/Outfit-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/Outfit-Bold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); }

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* Surfaces */
  --bg:           #08090C;
  --surface:      #0F1116;
  --card:         #14161D;
  --card-hover:   #1A1D27;

  /* Ink */
  --text:         #F0F0F2;
  --text-body:    #CDCDD0;
  --text-muted:   #7B7D85;  /* A11y: passes AA normal on --bg (4.85) and --surface (4.60) but fails on --surface-2 (4.48, by 0.02). Do not place muted text on --surface-2 without a size or weight increase. */
  --text-deep:    #494B54;

  /* Hairlines */
  --border:       rgba(255,255,255,0.05);
  --border-2:     rgba(255,255,255,0.10);

  /* Accents */
  --accent:           #3DFFC0;
  --accent-hover:     #6BFFD0;
  --accent-active:    #22D9A0;
  --accent-dim:       rgba(61,255,192,0.55);
  --accent-amber:     #FFB347;
  --accent-red:       #FF6B6B;

  /* Radius */
  --r: 2px;

  /* Spacing */
  --s-4: 4px;   --s-8: 8px;   --s-12: 12px; --s-16: 16px;
  --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px;
  --s-80: 80px; --s-96: 96px; --s-120: 120px;

  /* Type */
  --t-hero:    clamp(3rem, 7vw, 5.75rem);
  --t-section: clamp(2rem, 4vw, 3rem);
  --t-sub:     clamp(1.375rem, 2.2vw, 1.75rem);
  --t-card:    1.125rem;
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-micro:   0.6875rem;

  /* Section rhythm */
  --rhythm: clamp(4rem, 8vw, 6rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
::selection { background: var(--accent); color: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient dot-grid */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 1;
}

/* Motifs / utilities */
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "zero"; }
.uc   { text-transform: uppercase; letter-spacing: 0.1em; }
.wrap { max-width: 1060px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); position: relative; z-index: 3; }
section { position: relative; z-index: 3; }

.cmt::before { content: "// "; color: var(--accent-dim); font-weight: 500; }

/* Cloudflare email-protection wrapper renders the obfuscated placeholder
   string ([email protected]) as a plain <a> until the CF script swaps in the
   real address. Without an explicit colour the anchor falls through to the
   user-agent default link blue (#0000ee) which is 2.11:1 on --bg, an AA
   normal-text contrast failure. Pin to --text and keep an underline so the
   link is distinguishable from surrounding --text-body without relying on
   colour alone (WCAG 1.4.1). */
.__cf_email__,
a.__cf_email__:link,
a.__cf_email__:visited { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.__cf_email__:hover    { color: var(--accent); }
/* Buttons carry their own affordance (background, border), no underline needed. */
.btn .__cf_email__,
.btn .__cf_email__:link,
.btn .__cf_email__:visited,
.btn .__cf_email__:hover { color: inherit; text-decoration: none; }
.cursor { display: inline-block; color: var(--accent); animation: blink 1s steps(1) infinite; font-weight: 400; }
@keyframes blink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
  vertical-align: middle;
}
.dot.amber { background: var(--accent-amber); animation-name: pulse-amber; }
.dot.red   { background: var(--accent-red);   animation-name: pulse-red; }
@keyframes pulse       { 0%{ box-shadow: 0 0 0 0 rgba(61,255,192,.55);} 70%{ box-shadow: 0 0 0 8px rgba(61,255,192,0);} 100%{ box-shadow: 0 0 0 0 rgba(61,255,192,0);} }
@keyframes pulse-amber { 0%{ box-shadow: 0 0 0 0 rgba(255,179,71,.55);} 70%{ box-shadow: 0 0 0 8px rgba(255,179,71,0);} 100%{ box-shadow: 0 0 0 0 rgba(255,179,71,0);} }
@keyframes pulse-red   { 0%{ box-shadow: 0 0 0 0 rgba(255,107,107,.55);} 70%{ box-shadow: 0 0 0 8px rgba(255,107,107,0);} 100%{ box-shadow: 0 0 0 0 rgba(255,107,107,0);} }

.chip {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 8px;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  color: var(--text-body);
  background: transparent;
}
.chip.mint  { color: var(--accent);       border-color: rgba(61,255,192,0.35); }
.chip.amber { color: var(--accent-amber); border-color: rgba(255,179,71,0.35); }
.chip.red   { color: var(--accent-red);   border-color: rgba(255,107,107,0.35); }
.lab-type { margin-bottom: 4px; }
.lab-stamp { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-family: 'JetBrains Mono', monospace; }
.lab-stamp .date { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text); }
.lab-stamp .kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.lab-stamp.mint .kind  { color: var(--accent); }
.lab-stamp.amber .kind { color: var(--accent-amber); }
.lab-stamp.red .kind   { color: var(--accent-red); }
.lab-stamp.neutral .kind { color: var(--text-body); }
@media (max-width: 880px){ .lab-stamp { text-align: left; align-items: flex-start; } }
.labs-cta { display: flex; justify-content: center; margin-top: var(--s-48); }

.breadcrumb { font-family: 'JetBrains Mono', monospace; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin: var(--s-32) 0 var(--s-24); }

.pixel-cross {
  display: inline-grid; grid-template-columns: repeat(3, 6px); grid-template-rows: repeat(3, 6px);
  gap: 2px; vertical-align: middle;
  animation: breathe 4s ease-in-out infinite;
}
.pixel-cross .px { background: var(--accent); border-radius: 1px; box-shadow: 0 0 4px rgba(61,255,192,0.35); }
.pixel-cross .px.off { background: transparent; box-shadow: none; }
@keyframes breathe { 0%,100% { opacity: 0.85 } 50% { opacity: 1 } }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .dot, .cursor, .pixel-cross { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ================= 01 · NAV ================= */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  background: rgba(8,9,12,0.80);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1060px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--s-24);
  padding: var(--s-16) var(--gutter);
}
.nav-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.wordmark { font-family: 'JetBrains Mono', monospace; font-weight: 500; letter-spacing: -0.02em; }
.nav-brand .wordmark { font-size: 14px; }
.nav-links { display: flex; justify-content: center; gap: var(--s-24); }
.nav-link {
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); text-decoration: none;
  padding: 6px 2px;
  transition: color .15s ease;
}
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--text); }
.nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent);
}
.nav-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-body);
  background: transparent;
}
.nav-hamburger {
  display: none;
  width: 28px; height: 18px;
  position: relative; cursor: pointer;
  border: none; background: transparent; padding: 0;
}
.nav-hamburger span { position: absolute; left: 0; right: 0; height: 1px; background: var(--text); }
.nav-hamburger span:nth-child(1){ top: 2px; }
.nav-hamburger span:nth-child(2){ top: 50%; transform: translateY(-50%); }
.nav-hamburger span:nth-child(3){ bottom: 2px; }
@media (max-width: 720px){
  .nav-links, .nav-pill { display: none; }
  .nav-hamburger { display: inline-block; justify-self: end; }
}

/* ================= SECTION SCAFFOLD ================= */
.sec { padding: var(--rhythm) 0; border-bottom: 1px solid var(--border); }
.sec-head {
  display: grid; grid-template-columns: 180px 1fr;
  gap: var(--s-48); align-items: start;
  margin-bottom: var(--s-48);
}
.sec-num { font-family: 'JetBrains Mono', monospace; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); line-height: 1.6; }
.sec-num b { color: var(--text); font-weight: 500; display: block; margin-bottom: 4px; }
.sec-lead h2 { font-weight: 700; letter-spacing: -0.025em; font-size: var(--t-section); line-height: 1.05; max-width: 28ch; }
.sec-lead h2 em { font-style: normal; font-weight: 500; color: var(--accent); }
.sec-lead p { color: var(--text-body); margin-top: var(--s-16); max-width: 58ch; font-size: var(--t-body); line-height: 1.6; }
@media (max-width: 720px){ .sec-head { grid-template-columns: 1fr; gap: var(--s-16); } }

/* ================= 02 · HERO ================= */
.hero { padding: var(--s-96) 0 var(--s-80); border-bottom: 1px solid var(--border); overflow: hidden; }
.hero-meta {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--s-16); align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--s-48);
}
.hero-meta .dash { border-top: 1px dashed var(--border-2); height: 1px; }
.hero-meta .l { color: var(--text); }
.hero h1 {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: var(--t-hero);
  line-height: 0.96;
  max-width: 16ch;
}
.hero h1 em { font-style: normal; font-weight: 500; color: var(--accent); }
.hero-sub {
  margin-top: var(--s-24);
  color: var(--text-body);
  max-width: 52ch;
  font-size: var(--t-sub);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: var(--s-16); align-items: center;
  margin-top: var(--s-32);
}
.hero-ctas .note {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
}
.hero-stats-wrap { margin-top: var(--s-64); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn .arr { font-family: 'JetBrains Mono', monospace; transition: transform .15s ease; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:hover .arr { transform: translateX(2px); }
.btn-primary:active { background: var(--accent-active); transform: translateY(0); }
.btn-ghost { background: transparent; color: var(--text-body); border-color: var(--border-2); }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.btn-ghost:hover .arr { transform: translateX(2px); }
.btn-ghost:active { color: var(--accent-active); border-color: var(--accent-active); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.stat { background: var(--bg); padding: var(--s-24); display: flex; flex-direction: column; gap: 8px; }
.stat .label { font-family: 'JetBrains Mono', monospace; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.stat .value { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: var(--t-section); letter-spacing: -0.02em; line-height: 1; color: var(--text); display: flex; align-items: baseline; gap: 6px; }
.stat .value em { font-style: normal; color: var(--accent); font-weight: 700; }
.stat .value .unit { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--text-muted); font-weight: 400; letter-spacing: 0; }
@media (max-width: 680px){ .stats { grid-template-columns: repeat(2, 1fr); } }

/* ================= 03 · VERTICAL STRIP ================= */
.v-strip {
  display: flex; align-items: center; gap: var(--s-16);
  padding: var(--s-12) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
  overflow-x: auto; white-space: nowrap;
}
.v-strip::-webkit-scrollbar { display: none; }
.v-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v-strip .head { color: var(--accent-dim); font-weight: 500; }
.v-strip .sep  { color: var(--text-deep); }

/* ================= CLIENTS ================= */
.clients { padding: var(--s-64) 0; border-bottom: 1px solid var(--border); }
.clients-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-16);
  margin-bottom: var(--s-32);
}
.clients-head .l { color: var(--accent-dim); font-weight: 500; }
.clients-head .r { color: var(--text-deep); }
.clients-row {
  display: flex; flex-wrap: wrap;
  gap: var(--s-32) var(--s-48);
  font-family: 'Outfit', sans-serif; font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  letter-spacing: -0.01em;
}
.clients-row a {
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0.7;
  transition: color .15s ease, opacity .15s ease;
}
.clients-row a:hover { color: var(--accent); opacity: 1; }

/* ================= SERVICES ================= */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
@media (max-width: 860px){ .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .svc-grid { grid-template-columns: 1fr; } }
.svc {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--s-32);
  display: flex; flex-direction: column; gap: var(--s-16);
  transition: background .2s ease, border-color .2s ease;
}
.svc::before {
  content: ""; position: absolute; top: -1px; right: -1px; width: 24px; height: 24px;
  border-top: 1px solid transparent; border-right: 1px solid transparent;
  transition: border-color .2s ease;
}
.svc:hover, .svc.is-hover { background: var(--card-hover); }
.svc:hover::before, .svc.is-hover::before { border-color: var(--accent); }
.svc:hover .svc-num, .svc.is-hover .svc-num { color: var(--accent); }
.svc-top { font-family: 'JetBrains Mono', monospace; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em; display: flex; gap: 10px; align-items: baseline; }
.svc-top .tag { color: var(--accent-dim); font-weight: 500; }
.svc-num { color: var(--text-muted); transition: color .2s ease; }
.svc-title { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: var(--t-card); letter-spacing: -0.005em; line-height: 1.35; color: var(--text); }
.svc-body { color: var(--text-body); font-size: var(--t-body); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.svc-footer { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }

/* ================= LABS ================= */
.labs { border-top: 1px solid var(--border); }
.lab {
  position: relative;
  display: grid; grid-template-columns: 80px 160px 1fr 180px;
  gap: var(--s-24); align-items: center;
  padding: var(--s-24) var(--s-32) var(--s-24) 0;
  border-bottom: 1px solid var(--border);
  transition: transform .2s ease;
  text-decoration: none; color: inherit;
}
.lab-num { font-family: 'JetBrains Mono', monospace; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.lab-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lab-meta .kv { display: flex; flex-direction: column; }
/* A11y note (accepted): .k labels (SECTOR / SURFACE / etc.) sit at
   --text-deep on --bg (2.29:1) and intentionally fail WCAG AA. They are
   structural scaffolding, the values in .v below are self-explanatory by
   position. Promoting these would over-emphasise the scaffolding and flatten
   the lab card hierarchy. */
.lab-meta .k { font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-deep); }
.lab-meta .v { font-family: 'JetBrains Mono', monospace; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-body); }
.lab-body { display: flex; flex-direction: column; gap: 6px; }
.lab-title { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; line-height: 1.25; color: var(--text); transition: color .2s ease; }
.lab-title em { font-style: normal; color: var(--accent); font-weight: 500; }
.lab-desc { color: var(--text-body); font-size: var(--t-small); line-height: 1.55; max-width: 58ch; }
.lab-result { text-align: right; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.lab-result .big { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--accent); line-height: 1.1; text-align: right; }
.lab-result .cap { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.lab-arrow { position: absolute; top: var(--s-24); right: 0; font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--text-muted); transition: color .2s ease, transform .2s ease; }
.lab:hover, .lab.is-hover { transform: translateX(8px); }
.lab:hover .lab-title, .lab.is-hover .lab-title { color: var(--accent); }
.lab:hover .lab-arrow, .lab.is-hover .lab-arrow { color: var(--accent); transform: translateX(4px); }
@media (max-width: 880px){
  .lab { grid-template-columns: 1fr; gap: var(--s-8); padding-right: var(--s-32); }
  .lab-result { text-align: left; align-items: flex-start; }
  .lab-result .big { text-align: left; }
  .lab-arrow { top: var(--s-16); }
}

/* ================= PULL QUOTE ================= */
.pullquote { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-48); align-items: start; }
.pullquote .q-col .mark { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 28px; line-height: 1; margin-bottom: var(--s-16); display: inline-block; }
.pullquote .q-col .body {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: clamp(1.625rem, 2.8vw, 2.375rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--text-body);
}
.pullquote .q-col .body em { font-style: normal; font-weight: 500; color: var(--text); }
.pullquote .q-col .sig { margin-top: var(--s-32); font-family: 'JetBrains Mono', monospace; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.6; }
.pullquote .q-col .sig .who { color: var(--text); font-weight: 500; }
.pullquote .q-col .sig .role { color: var(--text-muted); }
.pullquote .p-col { display: flex; flex-direction: column; }
.principle { padding: var(--s-24) 0; border-bottom: 1px solid var(--border-2); }
.principle:first-child { padding-top: 0; }
.principle:last-child { border-bottom: none; }
.principle .label { font-family: 'JetBrains Mono', monospace; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: var(--s-8); }
.principle .title { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: var(--t-card); letter-spacing: -0.005em; color: var(--text); margin-bottom: 6px; }
.principle p { color: var(--text-body); font-size: var(--t-small); line-height: 1.55; }
@media (max-width: 900px){ .pullquote { grid-template-columns: 1fr; gap: var(--s-32); } }

/* ================= QUOTES ================= */
.quotes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
}
.q {
  background: var(--bg); padding: var(--s-32);
  display: flex; flex-direction: column; gap: var(--s-16);
  min-height: 240px;
}
.q .mark { color: var(--accent); font-size: 22px; font-weight: 400; line-height: 1; }
.q .body { font-size: var(--t-body); color: var(--text); line-height: 1.5; font-weight: 400; }
.q .attr { margin-top: auto; font-family: 'JetBrains Mono', monospace; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.6; }
.q .attr .who { color: var(--text); font-weight: 500; display: block; }
.q .attr .role { color: var(--text-muted); }
@media (max-width: 900px){ .quotes { grid-template-columns: 1fr; } }

/* ================= CONTACT ================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-48); align-items: start; }
.contact-left h3 {
  font-weight: 700; letter-spacing: -0.03em;
  font-size: var(--t-hero); line-height: 0.96;
  max-width: 14ch;
}
.contact-left h3 em { font-style: normal; font-weight: 500; color: var(--accent); }
.contact-left p {
  color: var(--text-body);
  max-width: 46ch;
  margin-top: var(--s-24);
  font-size: var(--t-sub);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.contact-left .cta { margin-top: var(--s-32); }
.contact { border-top: 1px solid var(--border); }
.contact .row {
  display: grid; grid-template-columns: 120px 1fr;
  gap: var(--s-24); align-items: baseline;
  padding: var(--s-16) 0;
  border-bottom: 1px solid var(--border);
}
.contact .k { font-family: 'JetBrains Mono', monospace; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.contact .v { font-size: var(--t-body); color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.contact .v a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-2); padding-bottom: 1px; transition: border-color .15s ease, color .15s ease; }
.contact .v a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 900px){ .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px){ .contact .row { grid-template-columns: 1fr; gap: 4px; } }

/* ================= FOOTER WORDMARK ================= */
.footer-mark { position: relative; overflow: hidden; border-top: 1px solid var(--border); background: var(--bg); padding-top: var(--s-32); }
.footer-mark .rows {
  max-width: 1060px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24);
  padding: var(--s-24) var(--gutter);
  border-top: 1px solid var(--border);
}
.footer-mark .rows > div {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted);
}
.footer-mark .rows .k { color: var(--accent-dim); font-weight: 500; display: block; margin-bottom: 4px; }
.footer-mark .rows .v { color: var(--text-body); display: block; }
/* A11y note (accepted): the giant wordmark below sits at --text-deep on --bg
   (2.29:1) and intentionally fails WCAG AA. It is decorative texture, not
   readable content. The semantic brand mark and live links live in .rows
   above at AA-passing contrast. The mint --accent slash anchors recognition.
   Do not promote this colour without redesigning the footer hierarchy. */
.footer-mark .giant {
  position: relative;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: clamp(80px, 18vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--text-deep);
  white-space: nowrap;
  padding: var(--s-32) var(--gutter) 0;
  overflow: hidden;
  max-width: 1060px; margin: 0 auto;
}
.footer-mark .giant .slash { color: var(--accent); }
.footer-mark .giant.flat { color: var(--text-deep); text-shadow: none; filter: none; }
.footer-mark .giant.flat .slash { color: var(--accent); text-shadow: none; filter: none; }
@media (max-width: 720px){ .footer-mark .rows { grid-template-columns: 1fr; } }

footer.colophon {
  padding: var(--s-48) 0 var(--s-80);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-16);
  align-items: end;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em;
}
footer.colophon .right { display: flex; align-items: center; gap: 10px; color: var(--text-body); }