/* ==========================================================================
   Salamon Capital — site styles
   Design tokens and components extracted from the original design prototype.
   Values are 1:1 with the prototype; nothing was re-designed here.
   ========================================================================== */

/* --- Fonts (self-hosted; no third-party request, no GDPR exposure) -------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/serif4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/serif4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  --bg: #12151A;
  --bg-alt: #15181E;
  --bg-deep: #0F1217;
  --bg-frame: #0E1116;
  --bg-card-hover: #17181D;

  --ink: #EDEAE3;
  --ink-2: #BDB9B1;
  --ink-3: #A29E96;
  --muted: #8A8F98;
  --muted-2: #6E747E;
  --muted-3: #565C66;
  --dim: #3E434C;

  --accent: #E8A33D;
  --accent-hi: #F2BC69;
  --accent-btn: #F2B356;

  --line: rgba(237, 234, 227, 0.09);
  --line-soft: rgba(237, 234, 227, 0.08);
  --line-strong: rgba(237, 234, 227, 0.14);
  --line-frame: rgba(237, 234, 227, 0.12);
  --line-accent: rgba(232, 163, 61, 0.55);

  --serif: 'Source Serif 4', Georgia, serif;
  --sans: Inter, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1560px;
  --pad-x: clamp(28px, 3.6vw, 64px);
}

/* --- Base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

input, textarea, button { font-family: inherit; }
::selection { background: rgba(232, 163, 61, 0.3); }
::placeholder { color: #5F6570; }

img { max-width: 100%; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--bg);
  font-size: 14px;
}
.skip-link:focus { left: 0; color: var(--bg); }

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

/* Measure utility — replaces the prototype's one-off `max-width: NNch` rules. */
.mw { max-width: var(--mw); }

/* --- Layout -------------------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.section { border-top: 1px solid var(--line); }
.section--alt { background: var(--bg-alt); --row-bg: var(--bg-alt); }
.section--deep { background: var(--bg-deep); --row-bg: var(--bg-deep); }
/* Full-bleed row: the container keeps its max-width but drops the side padding,
   so edge-to-edge card grids sit flush like they do in the design. */
.wrap--flush { padding-left: 0; padding-right: 0; }

.pad-sm { padding-top: 56px; padding-bottom: 56px; }
.pad-md { padding-top: clamp(56px, 8vh, 96px); padding-bottom: clamp(56px, 8vh, 96px); }
.pad-lg { padding-top: clamp(64px, 9vh, 110px); padding-bottom: clamp(64px, 9vh, 110px); }
.pad-xl { padding-top: clamp(72px, 11vh, 130px); padding-bottom: clamp(72px, 11vh, 130px); }
.pad-flat { padding-top: 64px; padding-bottom: 64px; }

.page-head {
  padding-top: clamp(64px, 10vh, 120px);
  padding-bottom: clamp(48px, 7vh, 80px);
}
.page-head--contact { padding-bottom: clamp(64px, 9vh, 110px); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 56px;
  align-items: start;
}
.split--wide { gap: 64px; }
.split--narrow {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* --- Typography ---------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin: 0 0 28px;
}
.eyebrow--hero { letter-spacing: 0.22em; margin-bottom: 36px; }
.eyebrow--page { letter-spacing: 0.22em; margin-bottom: 32px; }
.eyebrow--quiet { color: var(--muted); }
.eyebrow--muted { color: var(--muted-2); font-size: 10.5px; letter-spacing: 0.16em; }

.h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.h1--contact { font-size: clamp(34px, 5.2vw, 62px); }

.h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.h2--lg { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.12; }
.h2--xl { font-size: clamp(28px, 4vw, 50px); line-height: 1.1; }
.h2--sm { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.16; }
.h2--xs { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.18; }
.h2--product { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.1; }
.h2--plain {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: normal;
}
.h2--person { font-size: 30px; line-height: 1.15; letter-spacing: normal; }

.h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
}
.h3--card { font-size: 27px; line-height: 1.25; }
.h3--venture { font-size: 26px; line-height: 1.2; }

.lede {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--ink-3);
  font-weight: 300;
  text-wrap: pretty;
}

.p-lg { font-size: 17px; line-height: 1.75; color: var(--ink-2); font-weight: 300; text-wrap: pretty; }
.p-md { font-size: 16px; line-height: 1.75; color: var(--ink-2); font-weight: 300; text-wrap: pretty; }
.p-sm { font-size: 15px; line-height: 1.75; color: var(--ink-3); font-weight: 300; }
.p-xs { font-size: 14.5px; line-height: 1.7; color: var(--ink-3); font-weight: 300; }
.p-loose { line-height: 1.8; }
.is-dim { color: var(--ink-3); }
.stack > * + * { margin-top: 24px; }
.stack { margin: 0; }

.note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted-2);
}

.disclaimer {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  line-height: 1.9;
  color: var(--muted-3);
}

/* --- Navigation ---------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--pad-x);
  min-height: 76px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}
.brand {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand__accent { color: var(--accent); }

.nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px clamp(14px, 2.4vw, 32px);
}
.nav__link {
  position: relative;
  padding: 6px 0;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  transition: color 200ms ease;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
}

/* Language switch sits beside the links, separated by a hairline — the shape
   the original design used for it. It is rendered only where the counterpart
   page exists. */
.nav__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(14px, 2.6vw, 36px);
}
.lang-switch {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  padding-left: clamp(12px, 2vw, 28px);
  border-left: 1px solid var(--line);
  transition: color 200ms ease;
}
.lang-switch:hover { color: var(--accent); }

/* --- Buttons and links --------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 17px 30px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.btn--primary {
  background: var(--accent);
  color: var(--bg);
  transition: box-shadow 200ms ease, background 200ms ease;
}
.btn--primary:hover {
  background: var(--accent-btn);
  color: var(--bg);
  box-shadow: 0 0 28px rgba(232, 163, 61, 0.32);
}
.btn--ghost {
  background: transparent;
  border: 1px solid rgba(232, 163, 61, 0.5);
  color: var(--accent);
  transition: background 200ms ease, border-color 200ms ease;
}
.btn--ghost:hover {
  background: rgba(232, 163, 61, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.btn--sm { padding: 16px 28px; }
.btn[disabled] { opacity: 0.55; cursor: default; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
}

.link-arrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--accent);
  transition: opacity 200ms ease;
}
.link-arrow:hover { opacity: 0.7; color: var(--accent); }
.link-arrow--off { color: var(--muted-3); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(640px, 94vh, 1040px);
  display: flex;
  align-items: center;
}
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 85% 130% at 122% 50%,
    rgba(232,163,61,0.2) 0%, rgba(232,163,61,0.07) 30%,
    rgba(232,163,61,0.02) 52%, rgba(232,163,61,0) 72%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(80px, 13vh, 160px) var(--pad-x) clamp(80px, 12vh, 140px);
}
.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 6.6vw, 80px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  padding-bottom: 0.14em;
  /* The longest line only reaches ~86% of the gradient box, so the original ramp
     — which hit full brightness exactly at 100% — never put its brightest tone
     on a glyph. Full brightness now lands at 84% and holds to the end, so the
     right-hand text reads as genuinely 100% whatever the line breaks do, while
     the dark falloff on the left is left alone. */
  background-image: linear-gradient(100deg,
    #4A4741 0%, #6E6A61 20%, #A9A294 46%, #E9DBC0 68%, #FFFCF5 84%, #FFFCF5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-wrap: balance;
}
.hero__lede {
  margin: 36px 0 0;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
  font-weight: 300;
  background-image: linear-gradient(100deg, #8F8B82 0%, #A8A39A 55%, #CFC6B6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-wrap: pretty;
}

.beam { position: absolute; top: 50%; transform: translateY(-50%); }
.beam--wide {
  right: -48%; width: 170vw; height: 190vh;
  background: radial-gradient(ellipse 100% 50% at 100% 50%,
    rgba(240,183,96,0.5) 0%, rgba(232,163,61,0.26) 22%, rgba(232,163,61,0.1) 44%,
    rgba(232,163,61,0.03) 64%, rgba(232,163,61,0) 82%);
  filter: blur(46px);
  animation: scBeamWide 24s ease-in-out infinite;
}
.beam--tilt {
  right: -36%; width: 140vw; height: 100vh;
  background: radial-gradient(ellipse 100% 38% at 100% 50%,
    rgba(255,226,178,0.46) 0%, rgba(240,183,96,0.18) 26%,
    rgba(232,163,61,0.04) 58%, rgba(232,163,61,0) 80%);
  filter: blur(32px);
  animation: scBeamTilt 34s ease-in-out infinite;
}
.beam--sweep {
  right: -30%; width: 126vw; height: 48vh;
  background: radial-gradient(ellipse 100% 30% at 100% 50%,
    rgba(255,240,210,0.24) 0%, rgba(244,197,116,0.08) 34%, rgba(232,163,61,0) 72%);
  filter: blur(34px);
  animation: scBeamSweep 28s ease-in-out infinite;
}
.beam--core {
  right: -22vw; width: 62vw; height: clamp(18px, 3vw, 52px);
  background: linear-gradient(to left,
    rgba(255,246,228,0.6) 0%, rgba(250,214,160,0.3) 18%, rgba(240,183,96,0.12) 42%,
    rgba(232,163,61,0.03) 68%, rgba(232,163,61,0) 92%);
  filter: blur(26px);
  animation: scBeamCore 16s ease-in-out infinite;
}
.beam--orb {
  right: clamp(-380px, -18vw, -70px);
  width: clamp(220px, 30vw, 520px);
  height: clamp(220px, 30vw, 520px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,252,246,0.85) 0%, rgba(255,230,186,0.44) 26%, rgba(240,183,96,0.16) 42%,
    rgba(232,163,61,0.04) 60%, rgba(232,163,61,0) 76%);
  filter: blur(22px);
  animation: scBeamOrb 13s ease-in-out infinite;
}

.dust { position: absolute; inset: 0; }
.dust i { position: absolute; border-radius: 50%; display: block; }

@keyframes scBeamWide {
  0%   { opacity: 0.78; transform: translateY(-50%) scale(0.97); }
  50%  { opacity: 1;    transform: translateY(-50%) scale(1.03); }
  100% { opacity: 0.78; transform: translateY(-50%) scale(0.97); }
}
@keyframes scBeamCore {
  0%   { opacity: 0.8; transform: translateY(-50%) scaleX(0.97) scaleY(0.9); }
  50%  { opacity: 1;   transform: translateY(-50%) scaleX(1.02) scaleY(1.08); }
  100% { opacity: 0.8; transform: translateY(-50%) scaleX(0.97) scaleY(0.9); }
}
@keyframes scBeamTilt {
  0%   { opacity: 0.6; transform: translateY(-50%) rotate(-2.5deg) scale(0.98); }
  50%  { opacity: 0.9; transform: translateY(-50%) rotate(1.5deg) scale(1.03); }
  100% { opacity: 0.6; transform: translateY(-50%) rotate(-2.5deg) scale(0.98); }
}
@keyframes scBeamOrb {
  0%   { opacity: 0.82; transform: translateY(-50%) scale(0.96); }
  50%  { opacity: 1;    transform: translateY(-50%) scale(1.06); }
  100% { opacity: 0.82; transform: translateY(-50%) scale(0.96); }
}
@keyframes scBeamSweep {
  0%   { opacity: 0.4;  transform: translateY(-50%) translateX(1.5%) scaleY(0.94); }
  50%  { opacity: 0.66; transform: translateY(-50%) translateX(-1.5%) scaleY(1.06); }
  100% { opacity: 0.4;  transform: translateY(-50%) translateX(1.5%) scaleY(0.94); }
}
@keyframes scDust1 {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 0.85; }
  100% { transform: translate(-260px, -120px); opacity: 0; }
}
@keyframes scDust2 {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 0.9; }
  78%  { opacity: 0.7; }
  100% { transform: translate(-420px, 90px); opacity: 0; }
}
@keyframes scDust3 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-180px, -220px) scale(0.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .beam, .dust i { animation: none !important; }
}

/* --- Cards --------------------------------------------------------------- */

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
}
.cards--bordered { border: 1px solid var(--line); }

.card {
  flex: 1 1 300px;
  min-width: 0;
  padding: 56px var(--pad-x) 64px;
  background: var(--bg);
}
.card--link { transition: background 200ms ease; }
.card--link:hover { background: var(--bg-card-hover); }
.card--wide { flex-basis: 340px; }
.card--tight {
  flex-basis: 260px;
  padding: 30px 28px 34px;
  background: var(--bg-alt);
}
.card--venture {
  flex-basis: 320px;
  padding: 36px 34px 40px;
  background: var(--bg-deep);
}
.card--venture-wide { flex-basis: 380px; }

.card__title { margin: 0 0 18px; }
.card__body { margin: 0 0 26px; }
.card__lines {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-2);
  font-weight: 300;
}
.card__eyebrow { font-size: 11px; letter-spacing: 0.18em; margin-bottom: 18px; }

.service-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
}
.service-head--tight { margin-bottom: 12px; }
.service-head__letter {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--accent);
}

/* Social-proof logo row — markup currently commented out in index.html. */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}
.logo-slot {
  height: 64px;
  border: 1px solid var(--line-soft);
  background: repeating-linear-gradient(135deg, rgba(237,234,227,0.05) 0 1px, transparent 1px 9px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted-3);
}

/* --- Spec lists ---------------------------------------------------------- */

.speclist {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec {
  background: var(--row-bg, var(--bg));
  padding: 16px 0;
  display: flex;
  gap: 20px;
  align-items: baseline;
}
.speclist--roomy .spec { padding: 18px 0; gap: 24px; }
.spec__key {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--accent);
  min-width: var(--kw, auto);
  flex-shrink: 0;
}
.speclist--roomy .spec__key { font-size: 11px; letter-spacing: 0.14em; }
.spec__val { font-size: 15px; color: var(--ink); font-weight: 300; }
.speclist--roomy .spec__val { font-size: 14.5px; color: var(--ink-3); }

/* --- Process ------------------------------------------------------------- */

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.process {
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}
.process--first { border-top-color: var(--line-accent); }
.process__label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 0 0 18px;
}
.process--first .process__label { color: var(--accent); }
.process .h3 { margin-bottom: 12px; }

/* --- Products ------------------------------------------------------------ */

.badge-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
  border: 1px solid rgba(232, 163, 61, 0.45);
  padding: 5px 10px;
}
.tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--muted-2);
}

.frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-frame);
  overflow: hidden;
  background: var(--bg-frame);
}
.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  filter: saturate(0.85) brightness(0.92);
}
.frame__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(18, 21, 26, 0.55);
}
.frame__link {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: rgba(18, 21, 26, 0.8);
  padding: 6px 10px;
}

.stat-stack {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat { background: var(--bg-alt); padding: 28px 26px; }
.stat__num {
  font-family: var(--mono);
  font-size: 26px;
  color: var(--accent);
  margin-bottom: 8px;
}
.stat__label { font-size: 14px; color: var(--ink-3); font-weight: 300; }

.ventures {
  position: relative;
  overflow: hidden;
}
.ventures__inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(80px, 12vh, 150px) var(--pad-x);
}
.ventures__mask {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 95% at 2% 50%,
    rgba(15,18,23,0.8) 0%, rgba(15,18,23,0.4) 42%, rgba(15,18,23,0) 70%);
}
.ventures nebula-field { position: absolute; inset: 0; z-index: 0; }

.bignum-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.bignum {
  font-family: var(--serif);
  font-size: clamp(46px, 5.6vw, 76px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.bignum-row__unit {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.round {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 26px;
}
.round__label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted-3);
  margin-bottom: 8px;
}
.round__value { font-family: var(--mono); font-size: 22px; color: var(--ink-3); }
.round__value--now { color: var(--accent); }
.round__arrow {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted-3);
  padding-bottom: 4px;
}

.holdings {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-frame);
  margin: 0;
  padding: 0;
  list-style: none;
}
.holding {
  flex: 1 1 300px;
  min-width: 0;
  background: var(--bg-deep);
  padding: 20px 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.holding__name { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.holding__meta { display: flex; align-items: baseline; gap: 12px; }
.holding__sym {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.holding__kind {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--muted-3);
}

/* --- About --------------------------------------------------------------- */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  max-width: var(--maxw);
  margin: 0 auto;
}
.person { padding: 56px var(--pad-x) 64px; background: var(--bg); }
.portrait {
  max-width: 300px;
  margin-bottom: 32px;
  border: 1px solid rgba(237, 234, 227, 0.1);
}
.portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.03) brightness(0.95);
}
.portrait img.is-filip { object-position: 50% 22%; }
.portrait img.is-martina { object-position: 50% 18%; }
.person__role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 14px;
}
.person .h2 { margin-bottom: 18px; }

.vision-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.vision { background: var(--row-bg, var(--bg)); padding: 26px 0; }
.vision__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 12px;
}

/* --- Contact ------------------------------------------------------------- */

.form {
  margin-top: 64px;
  display: grid;
  gap: 36px;
}
.field__label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 10px;
}
.field__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 12px 0;
  font-size: 17px;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms ease;
  border-radius: 0;
}
textarea.field__input { line-height: 1.6; resize: vertical; }
.field__input:focus { border-bottom-color: var(--accent); }
.field__input:user-invalid { border-bottom-color: #C4543A; }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.form__consent {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: var(--muted-3);
  max-width: 42ch;
}
.form__consent a { color: var(--muted-2); border-bottom: 1px solid rgba(232, 163, 61, 0.3); }
.form__consent a:hover { color: var(--accent); }

.form__error {
  font-size: 14.5px;
  line-height: 1.6;
  color: #E48B6C;
  font-weight: 300;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.success {
  margin-top: 64px;
  border-top: 1px solid var(--line-accent);
  padding-top: 32px;
}
.success__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 18px;
}
.success .h2 { margin-bottom: 14px; }

.contact-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
}
.contact-facts__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 0 0 14px;
}
.contact-facts__value { font-size: 17px; color: var(--ink-2); font-weight: 300; }

/* --- Legal pages --------------------------------------------------------- */

.legal { max-width: 760px; }

/* Reading measure for long-form pages — service detail, and later insights and
   case studies. Same width as .legal, named for what it does. */
.longform { max-width: 760px; }

.prose { font-size: 16px; line-height: 1.8; color: var(--ink-2); font-weight: 300; }
.prose > * + * { margin-top: 20px; }
.prose h2 {
  margin: 56px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.prose h2 + * { margin-top: 16px; }
.prose h3 {
  margin: 32px 0 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}
.prose h3 + * { margin-top: 12px; }
.prose p { margin: 0; }
.prose ul { margin: 0; padding-left: 20px; }
.prose li { margin-top: 10px; }
.prose li::marker { color: var(--muted-3); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose a { border-bottom: 1px solid rgba(232, 163, 61, 0.35); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.prose th {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
.prose td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.65;
}
.prose td:last-child, .prose th:last-child { padding-right: 0; }
.table-scroll { overflow-x: auto; }

.legal-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted-3);
  margin: 28px 0 0;
}

/* Unfilled company details. Deliberately loud — this must not reach production
   unnoticed. Replace the text and delete the <span> wrapper. */
.todo {
  font-family: var(--mono);
  font-size: 0.88em;
  letter-spacing: 0.04em;
  color: #12151A;
  background: var(--accent);
  padding: 1px 6px;
  white-space: nowrap;
}

.callout {
  border-left: 2px solid var(--line-accent);
  padding: 4px 0 4px 20px;
  color: var(--ink-3);
}

/* --- Article furniture ---------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted-3);
  text-transform: uppercase;
}
.crumbs a { color: var(--muted-2); }
.crumbs a:hover { color: var(--accent); }

/* Article beside a rail that follows the reader down the page. */
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(40px, 4.5vw, 80px);
  padding-top: 24px;
  padding-bottom: clamp(64px, 9vh, 110px);
  /* No align-items here on purpose. The rail column has to stretch to the full
     row height, otherwise the sticky box inside it has nowhere to travel and
     simply scrolls away with the page. */
  align-items: stretch;
}
.article-main { min-width: 0; max-width: 760px; }
.article-side__sticky {
  position: sticky;
  top: 96px;               /* clears the sticky header */
  display: grid;
  gap: 18px;
}

/* Below this width the rail would squeeze the text, and everything in it
   already appears in the article flow — so it is dropped rather than stacked. */
@media (max-width: 1080px) {
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .article-side { display: none; }
}

.h1--article { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.1; }

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.byline a { color: var(--ink-3); border-bottom: 1px solid rgba(232, 163, 61, 0.3); }
.byline a:hover { color: var(--accent); }

.badge--updated {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--bg);
  background: var(--accent);
  padding: 4px 8px;
}

/* The answer box. First thing a reader sees, and the passage most likely to be
   lifted into a search result — so it has to answer the headline on its own. */
.summary-box {
  margin-top: 36px;
  padding: 24px 0 24px 24px;
  border-left: 2px solid var(--accent);
}
.summary-box p {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-2);
  font-weight: 300;
  text-wrap: pretty;
}
.summary-box strong { color: var(--ink); font-weight: 500; }

.toc {
  margin-top: 44px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.toc__title {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.toc__list { margin: 0; padding: 0 0 0 22px; display: grid; gap: 10px; }
.toc__list li::marker { color: var(--muted-3); font-family: var(--mono); font-size: 11px; }
.toc__list a { color: var(--ink-2); font-size: 15px; font-weight: 300; }
.toc__list a:hover { color: var(--accent); }

/* Scrolling to an anchor must not hide the heading under the sticky header. */
.prose h2, .prose h3 { scroll-margin-top: 96px; }

.note-box {
  margin: 32px 0;
  padding: 22px 24px;
  background: var(--bg-alt);
  border-left: 2px solid var(--line-strong);
}
.note-box--tip { border-left-color: var(--accent); }
.note-box--key { border-left-color: var(--accent); background: rgba(232, 163, 61, 0.06); }
.note-box__label {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.note-box--example .note-box__label { color: var(--muted); }
.note-box__body > :first-child { margin-top: 0; }
.note-box__body > :last-child { margin-bottom: 0; }
.note-box__body p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.75; }
.note-box .link-arrow { margin-top: 6px; }

.service-box {
  margin: 40px 0;
  padding: 30px 28px 32px;
  border: 1px solid var(--line-frame);
  background: var(--bg-alt);
}
.service-box__body p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.75; color: var(--ink-3); }
.service-box__body > :last-child { margin-bottom: 0; }

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

.faq { display: grid; gap: 12px; margin-top: 8px; }
.faq__item {
  border: 1px solid var(--line);
  background: var(--bg-alt);
  transition: border-color 200ms ease, background 200ms ease;
}
.faq__item:hover { border-color: var(--line-strong); }
.faq__item[open] {
  border-color: rgba(232, 163, 61, 0.4);
  background: rgba(232, 163, 61, 0.04);
}
.faq__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 22px;
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.4;
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q > span { flex: 1 1 auto; }
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 7px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.5px 12px no-repeat;
  transition: transform 220ms ease;
}
.faq__item[open] .faq__q::after {
  background: linear-gradient(var(--accent), var(--accent)) center / 12px 1.5px no-repeat;
  transform: rotate(180deg);
}
.faq__q:hover { color: var(--accent); }
.faq__a { padding: 0 22px 22px; }
.faq__a p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--ink-3); max-width: 62ch; }

/* --- Closing offer -------------------------------------------------------- */

.offer {
  margin-top: 56px;
  padding: 34px 32px 36px;
  border: 1px solid var(--line-frame);
  border-left: 2px solid var(--accent);
  background: var(--bg-alt);
}
.offer__points {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 14px 32px;
}
.offer__points li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
  font-weight: 300;
}
.offer__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-size: 13px;
}

/* --- Author, end of article ------------------------------------------------ */

.author-section {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.author-section__head {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.author-section__head img {
  width: 120px;
  height: 150px;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.03) brightness(0.95);
  border: 1px solid rgba(237, 234, 227, 0.1);
  display: block;
}
.author-section__head > div { flex: 1 1 300px; min-width: 0; }
.author-section__name { margin: 0 0 8px; font-family: var(--serif); font-size: 26px; color: var(--ink); }
.author-section__name a { color: var(--ink); }
.author-section__name a:hover { color: var(--accent); }
.author-section__role {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.author-section__creds {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px 24px;
  align-items: start;
}
.author-section__creds-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.author-section__creds ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.author-section__creds li { font-size: 15px; line-height: 1.5; color: var(--ink-2); font-weight: 300; }
@media (max-width: 560px) {
  .author-section__creds { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
}
.share__label { color: var(--muted-3); }
.share a { color: var(--muted-2); }
.share a:hover { color: var(--accent); }

/* --- Sticky rail ---------------------------------------------------------- */

.side-card {
  border: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 22px 22px 24px;
}
.side-card--cta { border-color: rgba(232, 163, 61, 0.35); }
.side-card__label {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted-2);
}
.side-card__label--live { color: var(--accent); display: flex; align-items: center; gap: 9px; }
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.18);
}

.side-author { display: flex; gap: 14px; align-items: center; }
.side-author img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.03) brightness(0.95);
  border: 1px solid rgba(237, 234, 227, 0.1);
  display: block;
}
.side-author__name { margin: 0 0 5px; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.side-author__name a { color: var(--ink); }
.side-author__name a:hover { color: var(--accent); }
.side-author__role {
  margin: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--muted);
}

.side-cta__title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
}
.side-cta__body { margin: 0 0 18px; font-size: 14px; line-height: 1.65; color: var(--ink-3); font-weight: 300; }
.side-cta__form { display: grid; gap: 12px; }
.side-cta__form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  outline: none;
  resize: vertical;
  transition: border-color 200ms ease;
}
.side-cta__form textarea:focus { border-color: var(--accent); }
.side-cta__form .btn { width: 100%; padding: 14px 20px; }
.side-cta__foot {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--muted-3);
}

/* --- Insights finder: search and topic filter ----------------------------- */

.finder { display: grid; gap: 22px; }

.finder__search { position: relative; max-width: 520px; }
.finder__search input {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 15px 44px 15px 18px;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.finder__search input:focus { border-color: var(--accent); }
.finder__search input::-webkit-search-cancel-button { display: none; }
.finder__clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.finder__clear:hover { color: var(--accent); }

.finder__tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; }
.finder__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted-3);
  padding-top: 6px;
}
.finder__status {
  margin: 0;
  min-height: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  text-transform: uppercase;
}
.tag:hover { border-color: var(--accent); color: var(--accent); }
.tag.is-active {
  border-color: var(--accent);
  background: rgba(232, 163, 61, 0.12);
  color: var(--accent);
}
.tag__count { color: var(--muted-3); font-size: 9.5px; }
.tag.is-active .tag__count { color: var(--accent); }

.post-list__empty {
  margin: 0;
  padding: 48px var(--pad-x);
  font-size: 16px;
  color: var(--ink-3);
  font-weight: 300;
}
.post-list__empty .link-arrow {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  font-family: var(--mono);
}

/* The article rows carry their own tags, which double as filter shortcuts. */
.post-row .tag-row { margin-top: 4px; }

/* --- Insights list ------------------------------------------------------- */

.post-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.post-row {
  background: var(--bg);
  padding: 40px var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
  transition: background 200ms ease;
}
.post-row:hover { background: var(--bg-card-hover); }
.post-row__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted-3);
  padding-top: 4px;
}
.post-row__body h2 a { color: var(--ink); }
.post-row__body h2 a:hover { color: var(--accent); }

@media (max-width: 720px) {
  .post-row { grid-template-columns: 1fr; gap: 14px; }
  .post-row__meta { flex-direction: row; gap: 16px; padding-top: 0; }
}

/* Case-study results read better side by side than stacked. */
.stat-stack--row {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  border: 1px solid var(--line);
}

/* --- AI Readiness Assessment ---------------------------------------------- */

/* Background field: nebula, the assembling Dyson sphere, and occasional comets.
   Fixed rather than absolute so the sphere stays with the reader through a long
   result page instead of scrolling away mid-assembly. */
.asmt-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.asmt-field nebula-field { position: absolute; inset: 0; opacity: 0.55; }
.asmt-field dyson-field,
.asmt-field comet-field { position: absolute; inset: 0; }

/* Everything the reader interacts with sits above the field. */
.asmt-wrap, .crumbs { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .asmt-field comet-field { display: none; }
}

/* --- AI Readiness Assessment (continued) ---------------------------------------------- */

.asmt-wrap {
  padding-top: clamp(32px, 6vh, 64px);
  padding-bottom: clamp(64px, 10vh, 120px);
  min-height: 62vh;
}
.asmt-landing { max-width: 760px; }

/* Progress: one tick per statement, filling as answers land. */
.asmt-progress {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: clamp(40px, 8vh, 80px);
}
.asmt-ticks { display: flex; gap: 4px; flex: 1 1 auto; }
.asmt-tick {
  flex: 1 1 auto;
  height: 2px;
  background: var(--line-strong);
  transition: background 260ms ease, height 260ms ease;
}
.asmt-tick.is-done { background: var(--accent); height: 4px; }
.asmt-tick.is-here { background: rgba(232, 163, 61, 0.45); height: 4px; }
.asmt-count {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  white-space: nowrap;
}

.asmt-q { max-width: 820px; }
.asmt-q__text {
  margin: 0 0 clamp(40px, 7vh, 72px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.asmt-scale { display: grid; gap: 16px; }
.asmt-scale__end {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted-3);
}
.asmt-scale__end--hi { text-align: right; }
.asmt-dots { display: flex; gap: clamp(6px, 1.4vw, 14px); }
.asmt-dot {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  max-height: 74px;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.asmt-dot:hover { border-color: var(--accent); color: var(--accent); }
.asmt-dot.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 26px rgba(232, 163, 61, 0.32);
}

.asmt-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(32px, 5vh, 52px);
}
.asmt-nav .link-arrow { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); }

.asmt-break { max-width: 640px; padding-top: clamp(24px, 5vh, 56px); }
.asmt-break__text {
  margin: 0 0 36px;
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.3;
  color: var(--ink-2);
}

/* --- result --------------------------------------------------------------- */

.asmt-result { max-width: 820px; }

.asmt-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: clamp(36px, 6vh, 56px);
}
.asmt-type { background: var(--bg-alt); padding: 28px 26px 30px; }
.asmt-type__label {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.asmt-type__name {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.15;
  color: var(--ink);
}

/* The sentence someone screenshots. */
.asmt-gap {
  margin: 0 0 clamp(40px, 7vh, 64px);
  padding-left: 24px;
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}

.asmt-axis { margin-bottom: clamp(40px, 7vh, 64px); }
.asmt-axis__track {
  position: relative;
  height: 1px;
  background: var(--line-strong);
  margin: 44px 0 14px;
}
.asmt-axis__span {
  position: absolute;
  top: 0;
  height: 1px;
  background: var(--accent);
  opacity: 0.45;
}
.asmt-axis__mark {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  background: var(--accent);
  border-radius: 50%;
}
.asmt-axis__mark b {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
  white-space: nowrap;
}
.asmt-axis__mark--low b { bottom: auto; top: 16px; }
.asmt-axis__ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted-3);
  margin-top: 26px;
}

.asmt-prose h2 { font-size: 22px; }
.asmt-prose h2:first-child { margin-top: 0; }

.asmt-project {
  margin: clamp(40px, 7vh, 64px) 0 0;
  padding: 30px 28px 32px;
  border: 1px solid var(--line-frame);
  border-left: 2px solid var(--accent);
  background: var(--bg-alt);
}
.asmt-project__text {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.3;
  color: var(--ink);
}

.asmt-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.asmt-tools .link-arrow { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); }

.asmt-capture {
  margin-top: clamp(48px, 8vh, 80px);
  padding: 34px 32px 36px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}

@media (max-width: 560px) {
  .asmt-dots { gap: 5px; }
  .asmt-dot { font-size: 12px; }
  .asmt-scale__end { font-size: 9px; }
}

/* --- Footer -------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line); }
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 52px var(--pad-x) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  justify-content: space-between;
  align-items: start;
}
.footer__brand { font-family: var(--serif); font-size: 19px; color: var(--ink); margin-bottom: 14px; display: inline-block; }
.footer__tagline {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted-3);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 28px; }
.footer__link { font-size: 13.5px; color: var(--ink-3); transition: color 200ms ease; }
.footer__link:hover { color: var(--accent); }
.footer__meta {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted-3);
}
.footer__meta a {
  color: var(--muted-3);
  transition: color 200ms ease;
}
.footer__meta a:hover { color: var(--accent); }
.footer__meta a[aria-current='page'] { color: var(--ink-3); }