/* Layout concept: an editorial index of one designer's work — strategy leads, story follows, craft sits underneath. */
:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --ink: #15161c;
  --muted: #5a5d6a;
  --line: #d9dbe2;
  --accent: #e6ad08;      /* subway-suit yellow (site accent) */
  --speed: #3d8b37; --guided: #d4bb24; --invest: #d9412f;
  --accent-ink: #15161c;
  --green: #2f8a5f;       /* Guided mode */
  --red: #c8553f;         /* Investigation mode */
  --chip: #e8eaef;
  --display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --wrap: 1180px;
  --text: 80ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111217; --surface: #1a1c23; --ink: #eceef2; --muted: #a2a5b3; --line: #2b2e38;
    --accent: #f2c230; --accent-ink: #15161c; --green: #5fbf8c; --red: #e07a64; --chip: #23262f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111217; --surface: #1a1c23; --ink: #eceef2; --muted: #a2a5b3; --line: #2b2e38;
  --accent: #f2c230; --accent-ink: #15161c; --green: #5fbf8c; --red: #e07a64; --chip: #23262f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin: 0 auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; margin: 0; }
p { margin: 0; }
.label { font: 500 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* Header */
.site-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.site-head .name { font: 700 18px/1 var(--display); text-decoration: none; letter-spacing: -0.01em; }
.site-head nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; }
.site-head nav a { text-decoration: none; color: var(--muted); }
.site-head nav a:hover { color: var(--ink); }

/* Hero */
.hero { padding-block: 72px 56px; display: grid; gap: 28px; }
.hero h1 { font-size: clamp(40px, 7vw, 88px); max-width: 15ch; }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--hl, #ecc428) 62%, var(--hl, #ecc428) 92%, transparent 92%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hl: #8a6d00; } }
:root[data-theme="dark"] { --hl: #8a6d00; }
.hero .lede { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 58ch; }
.hero .lede strong { color: var(--ink); font-weight: 600; }

/* Section heads */
.section { padding-block: 56px; border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); }

/* Lead story */
.lead { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; text-decoration: none; }
.lead .media { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.lead .media img { border-radius: 8px; }
.lead h3 { font-size: clamp(32px, 4.5vw, 52px); margin-block: 10px 14px; }
.lead p.sum { color: var(--muted); max-width: 52ch; }
.outcomes { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 12px; }
.outcomes li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: baseline; }
.outcomes li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); transform: translateY(1px); }
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--body); padding: 14px 20px; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; }
.btn:hover { background: var(--accent); color: var(--accent-ink); }

/* Bridge */
.bridge { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.bridge figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.bridge h3 { font-size: clamp(26px, 3.4vw, 36px); margin-block: 10px 14px; }
.bridge p { color: var(--muted); max-width: 54ch; }
.stat { display: grid; grid-template-columns: auto auto auto; justify-content: start; gap: 24px; margin-top: 22px; flex-wrap: wrap; }
.stat div { display: grid; gap: 2px; }
.stat b { font: 700 28px/1 var(--display); font-variant-numeric: tabular-nums; }
.stat span { font-size: 14px; color: var(--muted); }

/* Studio grid */
.studio { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.card .m { aspect-ratio: 16/10; background: var(--chip); overflow: hidden; }
.card .m img, .card .m video { width: 100%; height: 100%; object-fit: cover; }
.card .t { padding: 18px 20px 22px; display: grid; gap: 8px; }
.card h3 { font-size: 22px; }
.card p { color: var(--muted); font-size: 15px; }
.c-6 { grid-column: span 6; }
.c-4 { grid-column: span 4; }
.c-8 { grid-column: span 8; }
.c-12 { grid-column: span 12; }
.card.feature .m { aspect-ratio: 16/9; }
.art-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.art-row > * { aspect-ratio: 4/5; overflow: hidden; }
.art-row img, .art-row video { width: 100%; height: 100%; object-fit: cover; }
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface); }
.book img { aspect-ratio: 1; object-fit: contain; padding: 12px; }
.soon { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* About */
.about { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; }
.about .portrait { display: grid; gap: 12px; }
.about .portrait img { border-radius: 14px; aspect-ratio: 3/4; object-fit: cover; }
.about .portrait video { border-radius: 10px; aspect-ratio: 16/9; object-fit: cover; }
.about .portrait figcaption { font-size: 13px; color: var(--muted); }
.about .bio { display: grid; gap: 16px; max-width: var(--text); min-width: 0; }
.about .bio p { color: var(--muted); }
.about .bio p strong { color: var(--ink); font-weight: 600; }
.skills { display: grid; gap: 18px; margin-top: 12px; }
.skills h3 { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips li { background: var(--chip); border-radius: 999px; padding: 6px 12px; font-size: 14px; line-height: 1.3; }

/* Track record */
.track { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.track article { border-top: 3px solid var(--ink); padding-top: 16px; display: grid; gap: 8px; }
.track h3 { font-size: 22px; }
.track p { color: var(--muted); font-size: 15px; }

.site-foot { padding-block: 40px 56px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
.todo { background: color-mix(in srgb, var(--accent) 22%, transparent); padding: 2px 6px; border-radius: 4px; color: var(--ink); }

/* Case study pages */
.case-hero { padding-block: 56px 36px; display: grid; gap: 18px; }
.case-hero h1 { font-size: clamp(44px, 7vw, 84px); }
.case-hero .sub { font: 600 clamp(20px, 2.4vw, 26px)/1.3 var(--display); color: var(--muted); max-width: 30ch; }
.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-block: 20px; border-block: 1px solid var(--line); margin-top: 10px; }
.meta div { display: grid; gap: 4px; font-size: 15px; }
.result-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-block: 36px; }
.result-band div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.result-band b { font: 700 22px/1.2 var(--display); }
.result-band span { color: var(--muted); font-size: 15px; }
.prose { max-width: var(--text); display: grid; gap: 18px; }
.prose h2 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 18px; }
.prose p, .prose li { color: var(--muted); }
.prose p strong, .prose li strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
blockquote { margin: 8px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font: 600 clamp(20px, 2.4vw, 26px)/1.35 var(--display); color: var(--ink); }
.case-body { display: grid; gap: 48px; padding-block: 20px 40px; }
.fig { margin: 0; display: grid; gap: 10px; }
.fig .frame { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; overflow-x: auto; }
.fig .frame img { border-radius: 8px; margin: 0 auto; }
.fig figcaption { font-size: 14px; color: var(--muted); max-width: var(--text); }
.decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.decisions article { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.decisions h3 { font-size: 20px; }
.decisions p { color: var(--muted); font-size: 15px; }
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.stages div { padding: 18px; display: grid; gap: 6px; align-content: start; border-left: 1px solid var(--line); }
.stages div:first-child { border-left: 0; }
.stages b { font: 700 18px/1.2 var(--display); }
.stages span { color: var(--muted); font-size: 14px; }
.stages .now { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.next-case { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 32px; border-top: 1px solid var(--line); }

/* Model diagram */
.model svg { width: 100%; min-width: 640px; height: auto; }
.model .box { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.model .t1 { font: 600 15px var(--body); fill: var(--ink); }
.model .t2 { font: 400 13px var(--body); fill: var(--muted); }
.model .code { font: 700 15px var(--mono); fill: var(--ink); }
.model .wire { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.model .hub { fill: var(--chip); stroke: var(--ink); stroke-width: 1.5; }
.model .speed { fill: color-mix(in srgb, var(--speed) 22%, var(--surface)); stroke: var(--speed); stroke-width: 2; }
.model .guided { fill: color-mix(in srgb, var(--guided) 30%, var(--surface)); stroke: var(--guided); stroke-width: 2; }
.model .invest { fill: color-mix(in srgb, var(--invest) 20%, var(--surface)); stroke: var(--invest); stroke-width: 2; }

@media (max-width: 860px) {
  .lead, .bridge, .about, .track { grid-template-columns: 1fr; }
  .c-6, .c-4, .c-8 { grid-column: span 12; }
  .art-row { grid-template-columns: repeat(3, 1fr); }
  .about .portrait { max-width: 320px; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-band, .decisions { grid-template-columns: 1fr; }
  .stages { grid-template-columns: 1fr 1fr; }
  .stages div:nth-child(3) { border-left: 0; }
  .stages div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 520px) { .stat { grid-template-columns: 1fr 1fr; } .stat div:first-child { grid-column: 1 / -1; } }
.subhead { font-size: 22px; margin-top: 10px; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pillars article { border-top: 3px solid var(--accent); padding-top: 14px; display: grid; gap: 8px; align-content: start; }
.pillars h3 { font-size: 19px; }
.pillars p { color: var(--muted); font-size: 15px; }
.risk-table { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); font-size: 15px; }
.risk-table > div { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--line); }
.risk-table > div:first-child { border-top: 0; }
.risk-table .rh { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.risk-table span { color: var(--muted); min-width: 0; }
@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; }
  .risk-table > div { grid-template-columns: 1fr; gap: 4px; }
  .risk-table .rh { display: none; }
}

/* Live demo: a product screen, deliberately light in both themes (it depicts the bank UI) */
:root { --ui-bg: #e9edf2; --ui-card: #ffffff; --ui-ink: #1c2b3a; --ui-muted: #6b7684; --ui-line: #e3e7ec; --ui-navy: #1f4b6e; --ui-link: #2d6cb5; --ui-warn-bg: #fdf3e7; --ui-warn: #a65a0b; --ui-warn-line: #f0c48f; }
.demo { padding: 0; overflow: hidden; display: grid; }
.ui { background: var(--ui-bg); color: var(--ui-ink); padding: 16px; display: grid; gap: 10px; font: 400 13px/1.4 var(--body); border-radius: 13px 13px 0 0; }
.ui-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-steps span { background: var(--ui-card); border: 1px solid var(--ui-line); color: var(--ui-muted); border-radius: 999px; padding: 4px 10px; font-size: 11.5px; }
.ui-steps .on { background: var(--ui-navy); border-color: var(--ui-navy); color: #fff; font-weight: 600; }
.ui-modebar { display: flex; align-items: center; gap: 6px; background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 8px; padding: 6px 8px; flex-wrap: wrap; }
.ui-mlabel { color: var(--ui-muted); font-size: 12px; margin-right: 4px; }
.ui-modebar button { font: 500 12.5px/1 var(--body); padding: 7px 11px; border-radius: 4px; border: 1px solid #cfd6de; background: var(--ui-card); color: var(--ui-ink); cursor: pointer; transition: background .25s, color .25s; }
.ui-modebar button[aria-selected="true"] { background: var(--ui-navy); border-color: var(--ui-navy); color: #fff; }
.ui-hint { color: var(--ui-muted); font-size: 12px; min-height: 2.8em; margin: 0 2px; }
.ui-card { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 10px; padding: 16px 18px; display: grid; gap: 12px; min-height: 372px; align-content: start; }
.pane { display: grid; gap: 10px; animation: paneIn .45s ease; }
.pane[hidden] { display: none !important; }
@keyframes paneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pane h4 { margin: 0; font: 600 17px/1.2 var(--body); color: var(--ui-ink); }
.ui-sub { color: var(--ui-muted); font-size: 12px; margin-top: -6px; }
.rows { margin: 0; display: grid; }
.rows > div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--ui-line); }
.rows dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ui-muted); padding-top: 2px; }
.rows dd { margin: 0; display: grid; min-width: 0; }
.rows b, .accts b, .abil b { font-weight: 600; font-size: 13px; }
.rows small, .accts small, .abil small { color: var(--ui-muted); font-size: 11.5px; }
.ui-warn { background: var(--ui-warn-bg); border: 1px solid var(--ui-warn-line); border-left: 3px solid var(--ui-warn); color: var(--ui-warn); padding: 8px 10px; border-radius: 6px; font-size: 12px; }
.ui-warn b { font-weight: 600; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.accts, .abil { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
.accts li { border: 1px solid var(--ui-line); border-radius: 6px; padding: 7px 9px; display: grid; }
.accts li.flag { border-color: var(--ui-warn-line); }
.accts i { font-style: normal; font-size: 11px; color: var(--ui-link); }
.accts li.flag i { color: var(--ui-warn); }
.abil li { display: grid; padding: 3px 0 5px 14px; border-bottom: 1px solid var(--ui-line); position: relative; }
.abil li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-navy); }
.abil li.off { opacity: .55; }
.abil li.off::before { background: transparent; border: 1px solid var(--ui-muted); }
.abil li.path { background: #eef3f8; border: 1px solid var(--ui-line); border-radius: 6px; padding: 6px 8px; opacity: 1; }
.abil li.path::before { display: none; }
.abil em { font-style: normal; color: var(--ui-warn); font-size: 11.5px; }
.abil .tag { font-size: 10.5px; color: var(--ui-link); }
.ui-actions { display: flex; gap: 8px; margin-top: 4px; }
.ui-btn { font: 600 12.5px/1 var(--body); padding: 9px 14px; border-radius: 4px; background: var(--ui-navy); color: #fff; }
.ui-btn.ghost { background: transparent; color: var(--ui-ink); border: 1px solid #cfd6de; font-weight: 500; }
.demo-cap { font-size: 13px; color: var(--muted); padding: 12px 16px 14px; margin: 0; }
@media (max-width: 520px) { .cols { grid-template-columns: 1fr; } .ui-card { min-height: 0; } }
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.ladder > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 6px; align-content: start; }
.ladder > div:nth-child(1) { min-height: 150px; }
.ladder > div:nth-child(2) { min-height: 175px; }
.ladder > div:nth-child(3) { min-height: 200px; }
.ladder > div:nth-child(4) { min-height: 225px; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ladder b { font: 700 18px/1.2 var(--display); }
.ladder span:not(.label) { color: var(--muted); font-size: 14px; }
.ladder-cap { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .ladder { grid-template-columns: 1fr 1fr; } .ladder > div { min-height: 0 !important; } .two-up { grid-template-columns: 1fr; } }

/* Self-serve template styles */
  .tpl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .tpl article { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; align-content: start; }
  .mock { aspect-ratio: 4/3; position: relative; overflow: hidden; display: grid; align-content: end; padding: 18px; }
  .mock .nav { position: absolute; top: 12px; left: 16px; right: 16px; display: flex; justify-content: space-between; font: 600 10px/1 var(--body); opacity: .85; }
  .mock h4 { margin: 0; font-size: 22px; line-height: 1.05; position: relative; z-index: 1; max-width: 70%; }
  .mock .nav { z-index: 1; }
  .mock .cta { margin-top: 10px; font: 600 10px/1 var(--body); padding: 7px 10px; border-radius: 3px; justify-self: start; position: relative; z-index: 1; }
  .mock { padding-bottom: 26px; }
  .tpl .t { padding: 18px 20px 22px; display: grid; gap: 8px; }
  .tpl h3 { font-size: 22px; }
  .tpl p { color: var(--muted); font-size: 15px; }
  .sw { display: flex; gap: 6px; }
  .sw i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); }
  /* Rustic: South and Midwest. Earth tones, a sturdy serif, field stripes */
  .rustic .mock { background: linear-gradient(180deg, #f4ead8 0 30%, #c9b27f 30% 35%, #9c7a43 35% 40%, #f4ead8 40%); color: #3b2a14; }
  .rustic h4 { font-family: "Lora", Georgia, serif; }
  .rustic .cta { background: #7a4b22; color: #fff; }
  /* Revolve: East Coast. Bold color and geometric shapes */
  .revolve .mock { background: #1d3a8a; color: #fff; }
  .revolve .mock::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: #f3b61f; right: -12%; top: -18%; }
  .revolve .mock::after { content: ""; position: absolute; width: 30%; aspect-ratio: 1; background: #e4572e; right: 6%; bottom: -14%; transform: rotate(18deg); border-radius: 18px; }
  .revolve h4 { font-family: "Archivo Black", Arial, sans-serif; font-weight: 400; }
  .revolve .cta { background: #fff; color: #1d3a8a; }
  /* Chevron: Mountain West. Warm colors and pointed forms */
  .chevron .mock { background: linear-gradient(160deg, #b5532d, #e08a3c); color: #fff8ee; }
  .chevron .mock::before { content: ""; position: absolute; inset: 30% -10% auto -10%; height: 70%; background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.12) 22px 44px); clip-path: polygon(0 40%, 25% 0, 50% 40%, 75% 0, 100% 40%, 100% 100%, 0 100%); }
  .chevron h4 { font-family: "Bricolage Grotesque", Arial, sans-serif; text-transform: uppercase; letter-spacing: .02em; }
  .chevron .cta { background: #3a1e10; color: #fff8ee; }
  .bars { display: grid; gap: 14px; }
  .bar { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; font-size: 14px; color: var(--muted); }
  .bar > div { height: 34px; border-radius: 6px; background: var(--chip); position: relative; }
  .bar > div span { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--accent); display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font: 700 15px/1 var(--display); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
  .bar.before > div span { background: var(--muted); color: var(--bg); }
  @media (max-width: 860px) { .tpl { grid-template-columns: 1fr; } }

  /* Hero fan of three browser windows */
  .fan { position: relative; aspect-ratio: 21/9; min-height: 240px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
  .browser { position: absolute; width: 44%; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(20,22,30,.18); border: 1px solid rgba(0,0,0,.08); }
  .browser .chrome { height: 26px; background: #eceef2; display: flex; align-items: center; gap: 6px; padding: 0 10px; }
  .browser .chrome i { width: 8px; height: 8px; border-radius: 50%; background: #c9ccd4; }
  .browser .chrome span { margin-left: 8px; font: 500 11px/1 var(--mono); color: #5a5d6a; letter-spacing: .04em; }
  .browser .mock { aspect-ratio: 16/10; }
  .browser .mock h4 { font-size: clamp(14px, 1.8vw, 26px); }
  .fan-sm { aspect-ratio: 4/3; }
  .fan-sm .browser .mock h4 { font-size: clamp(13px, 1.3vw, 18px); }
  .fan-sm .b1, .fan-sm .b3 { top: 26%; }
  .fan-sm .b2 { top: 12%; }
  .b1 { left: 4%; top: 18%; transform: rotate(-4deg); }
  .b2 { left: 28%; top: 8%; z-index: 2; width: 46%; }
  .b3 { right: 4%; top: 20%; transform: rotate(4deg); }
  @media (max-width: 600px) { .browser { width: 62%; } .b2 { width: 62%; left: 19%; } .b1 { left: -6%; } .b3 { right: -6%; } .browser .mock .nav { display: none; } }
.bridge .fan { border-radius: 14px; }
.fan-sm .revolve .mock::before { width: 42%; right: -14%; top: -30%; } .browser.revolve .mock::before { width: 48%; right: -12%; top: -30%; }

/* North Star: jargon before/after */
.jargon .ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.jargon .side { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: grid; gap: 14px; align-content: start; }
.jargon .after { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.jargon .arrow { align-self: center; font: 700 28px/1 var(--display); color: var(--muted); }
.jargon .fl { display: block; font: 600 13px/1 var(--body); color: var(--muted); margin-bottom: 6px; }
.jargon .select, .jargon .search { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg); display: flex; gap: 10px; align-items: center; font-size: 15px; }
.jargon .select { justify-content: space-between; color: var(--muted); }
.jargon .search { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.jargon .search i { font-style: normal; color: var(--muted); }
.jargon .opts { list-style: none; margin: 6px 0 0; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.jargon .opts li { font: 500 13px/1 var(--mono); padding: 8px; border-radius: 6px; text-align: center; background: var(--chip, var(--surface)); }
.jargon .understood { border-radius: 12px; padding: 14px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); display: grid; gap: 4px; }
.jargon .understood span { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.jargon .understood b { font: 700 17px/1.3 var(--display); }
.jargon .understood em { font-style: normal; font-size: 14px; color: var(--muted); }
.jargon .note { color: var(--muted); font-size: 14px; margin: 0; }
@media (max-width: 760px) { .jargon .ba { grid-template-columns: 1fr; } .jargon .arrow { transform: rotate(90deg); justify-self: center; } }

/* Headlines: Poppins */
:root { --headline: "Poppins", "Helvetica Neue", Arial, sans-serif; }
.hero h1, .case-hero h1 { font-family: var(--headline); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
.hero h1 { max-width: 17ch; }
@media (max-width: 640px) { .fan:not(.fan-sm) { aspect-ratio: auto; height: 260px; min-height: 0; } }

/* Self-Serve case */
.pb3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pb3 article { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.pb3 h3 { font-size: 20px; }
.pb3 p:not(.label) { color: var(--muted); font-size: 15px; margin: 0; }
.styles { display: grid; gap: 28px; }
.style { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 24px; align-items: center; }
.style .st { display: grid; gap: 8px; }
.style .st h3 { font-size: 30px; }
.style .st p:not(.label) { color: var(--muted); margin: 0; }
.style .sw { display: flex; gap: 6px; margin-top: 6px; }
.style .sw i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); }
.style .shot { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #f5f6f8; }
.style .shot img { width: 100%; display: block; }
@media (max-width: 860px) { .pb3, .style { grid-template-columns: 1fr; } }

/* Colored metric cards, per case study palette */
.result-band.pop div { border-color: transparent; box-shadow: 0 10px 24px -14px rgba(0,0,0,.45); }
.result-band.pop div:nth-child(1) { background: var(--rb1); color: var(--rb1-ink); }
.result-band.pop div:nth-child(2) { background: var(--rb2); color: var(--rb2-ink); }
.result-band.pop div:nth-child(3) { background: var(--rb3); color: var(--rb3-ink); }
.result-band.pop span { color: inherit; opacity: .88; }
.result-band.pop b { font-size: 24px; }
.ss-hero { margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.ss-hero img { width: 100%; display: block; aspect-ratio: 2/1; object-fit: cover; }
@media (max-width: 640px) { .ss-hero img { aspect-ratio: 4/3; object-position: center; } }

/* North Star homepage demo in a MacBook mockup */
.lead > div:not(.media) > .lead-title h3 { margin-top: 10px; }
.lead .media.demo { background: transparent; border: 0; padding: 0; }
.demo .stage { border-radius: 18px; padding: clamp(22px, 4vw, 48px) clamp(26px, 4.5vw, 52px) clamp(26px, 4vw, 48px); background: radial-gradient(110% 90% at 15% 0%, #fde9a6 0%, rgba(253,233,166,0) 55%), radial-gradient(90% 80% at 95% 100%, #bfe6d1 0%, rgba(191,230,209,0) 60%), #f4efe2; border: 1px solid var(--line); }
.laptop { width: 100%; max-width: 900px; margin: 0 auto; filter: drop-shadow(0 28px 28px rgba(30, 25, 10, .25)); }
.laptop .lid { position: relative; background: #0d0e10; border-radius: 3.2% / 5%; padding: 2.3% 2.3% 2.6%; box-shadow: inset 0 0 0 1.5px #3b3e44; }
.laptop .cam { position: absolute; top: 0; left: 50%; width: 11%; height: 2.4%; transform: translateX(-50%); background: #0d0e10; border-radius: 0 0 8px 8px; z-index: 2; }
.laptop .screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ui-bg); border-radius: 0.6%; }
.laptop .scaler { position: absolute; left: 0; top: 0; width: 1040px; height: 650px; transform-origin: 0 0; display: flex; flex-direction: column; }
.laptop .bbar { flex: none; display: flex; align-items: center; gap: 12px; background: #e6e9ed; padding: 10px 14px; border-bottom: 1px solid #d3d8de; }
.laptop .dots { display: flex; gap: 7px; }
.laptop .dots i { width: 11px; height: 11px; border-radius: 50%; background: #f26b5b; }
.laptop .dots i:nth-child(2) { background: #f5bf4f; }
.laptop .dots i:nth-child(3) { background: #5bc469; }
.laptop .url { flex: 0 1 420px; margin: 0 auto; background: #fff; border-radius: 7px; padding: 5px 12px; font: 500 12px/1.2 var(--body); color: #6b7684; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.laptop .ui { flex: 1; overflow: hidden; align-content: start; border-radius: 0; padding: 18px 28px; font-size: 14px; }
.laptop .ui-card { min-height: 0; }
.laptop .base { position: relative; height: 0; padding-bottom: 3.2%; margin: 0 -6.5%; background: linear-gradient(#e3e5e9 0%, #c9ccd2 45%, #a9adb4 100%); border-radius: 0 0 10% 10% / 0 0 100% 100%; box-shadow: inset 0 1px 0 #f5f6f8; }
.laptop .base i { position: absolute; top: 0; left: 50%; width: 15%; height: 40%; transform: translateX(-50%); background: linear-gradient(#b7bbc2, #cdd0d5); border-radius: 0 0 10px 10px; }
.demo .demo-cap { padding: 14px 4px 0; text-align: center; }

/* North Star: zoomed mode crops */
.nlm { display: grid; gap: 28px; }
.nlm-block { display: grid; gap: 14px; }
.nlm-block h3 { font-size: clamp(22px, 2.6vw, 28px); }
.nlm-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 24px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.nlm-t { display: grid; gap: 8px; align-content: center; }
.nlm-t b { font: 700 20px/1.25 var(--display); letter-spacing: -0.01em; }
.nlm-t > span:last-child { color: var(--muted); font-size: 15px; }
.nlm-row figure { margin: 0; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid #e3e7ec; box-shadow: 0 12px 24px -18px rgba(0,0,0,.35); }
.nlm-row img { width: 100%; display: block; }
.mchip { justify-self: start; font: 600 12px/1 var(--body); padding: 6px 11px; border-radius: 999px; border: 1px solid; }
.mchip.speed { background: #3d8b37; border-color: #3d8b37; color: #fff; }
.mchip.guided { background: #efe36a; border-color: #d4bb24; color: #2b2600; }
.mchip.invest { background: #d9412f; border-color: #d9412f; color: #fff; }
.mchip.formats { background: #e3e8f6; border-color: #4a63a8; color: #2c3f74; }
@media (max-width: 860px) { .nlm-row { grid-template-columns: 1fr; gap: 14px; padding: 14px; } }

/* Contact */
.contact { margin-top: 72px; padding: clamp(28px, 5vw, 64px); border-radius: 22px; background: radial-gradient(110% 90% at 10% 0%, #c9eed8 0%, rgba(201,238,216,0) 55%), radial-gradient(90% 80% at 100% 100%, #fde9a6 0%, rgba(253,233,166,0) 60%), var(--surface); border: 1px solid var(--line); display: grid; gap: 14px; justify-items: start; }
.contact h2 { font-size: clamp(30px, 4.6vw, 54px); max-width: 18ch; }
.contact p { color: var(--muted); font-size: 18px; max-width: 50ch; margin: 0; }
.contact-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.contact .btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contact { background: var(--surface); } }

/* Brand & story: side card's image fills the row height instead of leaving a gap */
@media (min-width: 861px) {
  .studio .card.c-4 .m { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
  .studio .card.c-4 .m img { object-position: 60% 50%; }
}
.card .pole-m { position: relative; }
.card .pole-m img { object-position: 60% 25%; }
.card .pole-m::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,11,28,.85) 0%, rgba(26,11,28,.25) 60%, rgba(26,11,28,0) 85%); }
.card .pole-m span { position: absolute; z-index: 1; left: 22px; bottom: 20px; max-width: 9ch; color: #fff; font: 700 clamp(26px, 3vw, 38px)/1 var(--display); letter-spacing: -0.02em; }

/* Project name above a tagline headline */
.proj-name { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 700 clamp(20px, 2.2vw, 26px)/1.1 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.proj-name::before { content: ""; width: 14px; height: 14px; background: #e6ad08; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.case-hero .proj-name { margin-top: -4px; }
.lead-title .proj-name { margin-top: 10px; }
/* Homepage North Star card: name is the headline, tagline second */
.lead-title .proj-name { font-size: clamp(36px, 4.6vw, 56px); letter-spacing: -0.03em; gap: 14px; margin-top: 8px; }
.lead-title .proj-name::before { width: clamp(22px, 2.4vw, 30px); height: clamp(22px, 2.4vw, 30px); }
.lead-title h3 { font-size: clamp(20px, 2.1vw, 26px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin-block: 8px 12px; color: var(--muted); }
.lead-title h3 a { color: inherit; }
/* North Star case header: name is the headline, tagline second */
.case-hero h1.proj-name { font-size: clamp(48px, 8vw, 96px); letter-spacing: -0.035em; line-height: 1; gap: clamp(12px, 1.6vw, 20px); margin-top: 0; }
.case-hero h1.proj-name::before { width: clamp(30px, 4vw, 52px); height: clamp(30px, 4vw, 52px); }
.case-hero .tagline { margin: 0; font: 700 clamp(24px, 3vw, 36px)/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); max-width: 24ch; }
.case-hero .tagline + .sub { font: 400 clamp(17px, 1.6vw, 20px)/1.55 var(--body); color: var(--muted); max-width: 58ch; }

/* ===== North Star: added story graphics ===== */
.nx { display: grid; gap: 22px; margin-block: 8px; }
.nx-head { display: grid; gap: 8px; max-width: 62ch; }
.nx-head h3 { font-size: clamp(28px, 4vw, 46px); line-height: 1.05; letter-spacing: -0.03em; }
.nx-head p:not(.label) { color: var(--muted); font-size: 18px; margin: 0; }
.nx-head p.small { font-size: 15px; }
.m-speed { --m: var(--speed); --mbg: #e6f2e2; --mink: #fff; }
.m-guided { --m: var(--guided); --mbg: #fbf6d3; --mink: #2b2600; }
.m-invest { --m: var(--invest); --mbg: #fbe4df; --mink: #fff; }
.m-guided.mpill, .m-guided .mpill { background: #efe36a; }
.mpill { justify-self: start; display: inline-block; font: 700 13px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 8px 13px; border-radius: 999px; background: var(--m); color: var(--mink); }
.m-guided .mpill { color: #2b2600; }

/* A: filters today */
.nf { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.nf-ui { background: #f4f0e8; border: 1px solid #d9d2c4; border-radius: 18px; padding: 20px; display: grid; gap: 14px; color: #1d2433; font-family: var(--body); }
.nf-tag { margin: 0; font: 700 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.nf-menus { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.nf-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nf-p { background: #fff; border: 1.5px solid #1d2433; border-radius: 12px; padding: 12px; display: grid; gap: 7px; align-content: start; font-size: 13px; }
.nf-p > b { font-size: 14px; }
.nf-search, .nf-2 i { font-style: normal; border: 1px solid #c9c2b4; border-radius: 6px; padding: 6px 8px; color: #8a8478; font-size: 12px; }
.nf-p ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nf-p li { padding: 5px 8px 5px 22px; border-radius: 6px; position: relative; display: grid; }
.nf-p li small { color: #8a8478; font-size: 11px; }
.nf-p li.on { background: #f1ede5; }
.nf-p li.on::before { content: "✓"; position: absolute; left: 7px; top: 5px; font-size: 12px; }
.nf-l { color: #4a5160; font-size: 12px; }
.nf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nf-act { display: flex; justify-content: space-between; font-weight: 700; margin-top: 4px; }
.nf-act span:last-child { font-weight: 400; color: #8a8478; }
.nf-foot { margin: 0; font-size: 15px; }
.nf-stats { display: grid; gap: 0; }
.nf-stats div { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.nf-stats div:first-child { padding-top: 0; }
.nf-stats b { font: 700 clamp(28px, 3.4vw, 42px)/1 var(--display); letter-spacing: -0.02em; }
.nf-stats span { color: var(--muted); font-size: 15px; }

/* B: modes */
.nm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nm-cards article { border: 2.5px solid var(--m); border-radius: 18px; padding: 22px; display: grid; gap: 8px; align-content: start; background: var(--surface); }
.nm-cards h4 { margin: 0; font: 700 clamp(24px, 2.8vw, 32px)/1 var(--display); letter-spacing: -0.02em; }
.nm-cards p { margin: 0; font-size: 16px; }
.nm-rails { border-top: 2px solid var(--ink); padding-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; }
.nm-rails .label { grid-column: 1 / -1; }
.nm-rails div { display: grid; gap: 4px; }
.nm-rails b { font: 700 19px/1.2 var(--display); }
.nm-rails span { color: var(--muted); font-size: 15px; }

/* C: search cards */
.ns3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.ns3 article { border: 2.5px solid var(--m); border-radius: 18px; padding: 18px; display: grid; gap: 10px; align-content: start; background: var(--surface); }
.ns3 h4 { margin: 0; font: 700 17px/1.25 var(--display); }
.ns3 p { margin: 0; font-size: 15px; color: var(--muted); }
.sbar { border: 1.5px solid var(--ink); border-radius: 10px; padding: 9px 12px; font-size: 14px; background: var(--bg); }
.sread { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; font-size: 14px; }
.sread .q { margin-top: 2px; }
.chips2 { display: flex; flex-wrap: wrap; gap: 6px; }
.chips2 i { font-style: normal; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.chips2 i.miss { border: 1.5px dashed var(--invest); color: var(--invest); }
.chips2.opts i { border-radius: 8px; }
.sread .none { font-weight: 600; }
.sread .alt { display: flex; justify-content: space-between; gap: 8px; border: 1.5px solid var(--ink); border-radius: 8px; padding: 7px 10px; font-size: 13px; background: var(--surface); }

/* D: product vs person */
.nt { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nt > div { border-radius: 18px; padding: 22px; display: grid; gap: 12px; align-content: start; background: var(--surface); }
.nt-prod { border: 2px solid var(--line); }
.nt-person { border: 2.5px solid var(--ink); }
.nt h4 { margin: 0; font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--display); letter-spacing: -0.02em; }
.nt-prod h4 { color: var(--muted); }
.nt p:not(.label) { margin: 0; color: var(--muted); }
.chips3 { display: flex; flex-wrap: wrap; gap: 6px; }
.chips3 i { font-style: normal; font-size: 14px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--muted); }
.chips3.job i { border-color: #22304a; background: #e3ebf6; color: #1b2840; }
.nt-punch { margin: 0; font: 700 clamp(19px, 2.2vw, 24px)/1.3 var(--display); letter-spacing: -0.01em; }

/* E: Now / Walk / Run */
.nwr-tabs { display: inline-flex; gap: 8px; justify-self: start; }
.nwr-tabs button { font: 700 14px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.nwr-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nwr-pane { display: grid; gap: 18px; animation: paneIn .4s ease; }
.nwr-pane[hidden] { display: none; }
.nwr-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.nwr-points { display: grid; gap: 16px; }
.nwr-points h4 { margin: 0; font: 700 clamp(20px, 2.4vw, 28px)/1.15 var(--display); }
.nwr-points div { display: grid; gap: 4px; }
.nwr-points b { font: 700 18px/1.25 var(--display); }
.nwr-points span { color: var(--muted); }
.mock-old, .mock-new { border: 1px solid #d5dae1; border-radius: 14px; overflow: hidden; background: #f1f3f6; color: #1c2b3a; font: 400 12.5px/1.35 var(--body); }
.mo-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 9px 14px; background: #fff; color: #6b7684; border-bottom: 1px solid #e3e7ec; }
.mo-body { padding: 14px; display: grid; gap: 8px; }
.mo-body > b { font-size: 16px; }
.mo-body > em { font-style: normal; color: #8a95a3; font-size: 15px; }
.mo-card { background: #fff; border-radius: 8px; padding: 12px; display: grid; gap: 6px; }
.mo-card small { color: #6b7684; }
.mo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mo-fields i { font-style: normal; border: 1px solid #cfd6de; border-radius: 4px; padding: 5px 7px; color: #6b7684; }
.mo-chk { display: flex; gap: 7px; align-items: center; font-weight: 600; }
.mo-chk i, .lb i { display: inline-block; width: 11px; height: 11px; border: 1px solid #9aa4b0; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.mo-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-top: 1px solid #e3e7ec; padding-top: 6px; }
.lb { border: 1px solid #9aa4b0; border-radius: 3px; padding: 4px 8px; white-space: nowrap; }
.mock-new { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; padding: 12px; background: #e8ecf1; }
.mn-main, .mn-side { background: #fff; border-radius: 10px; padding: 12px; display: grid; gap: 7px; align-content: start; }
.mn-t { font-size: 15px; }
.mn-steps { display: flex; flex-wrap: wrap; gap: 5px; }
.mn-steps span { border: 1px solid #d5dae1; border-radius: 999px; padding: 3px 8px; font-size: 11px; }
.mn-steps .on { background: #1f4b6e; color: #fff; border-color: #1f4b6e; }
.mn-steps .done { background: #e8ecf1; }
.mn-mode { border: 1px solid #e3e7ec; border-radius: 6px; padding: 6px 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: #4a5565; }
.mn-mode .g { font-style: normal; background: #efe36a; color: #2b2600; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.mn-hint { background: #e3ebf6; border-radius: 6px; padding: 7px 9px; }
.mn-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid #e3e7ec; padding-top: 6px; }
.mn-row span { flex: 1; }
.mn-row i { width: 13px; height: 13px; border: 1px solid #9aa4b0; border-radius: 3px; font-style: normal; font-size: 10px; line-height: 12px; text-align: center; }
.mn-row i.ck { background: #1f4b6e; border-color: #1f4b6e; color: #fff; }
.mn-side small { color: #6b7684; }
.mn-sel { border: 1px solid #cfd6de; border-radius: 4px; padding: 6px 8px; }
.mn-rad { padding-left: 18px; position: relative; }
.mn-rad::before { content: ""; position: absolute; left: 0; top: 2px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #9aa4b0; }
.mn-rad.on::before { border-color: #1f4b6e; background: radial-gradient(#1f4b6e 40%, #fff 45%); }
.mn-chg { background: #e3ebf6; border-radius: 6px; padding: 8px; display: grid; }
.mn-chg span { color: #2d6cb5; font-size: 11.5px; }
.mn-btn { background: #1f4b6e; color: #fff; text-align: center; border-radius: 4px; padding: 8px; font-weight: 600; }
.run3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.run3 article { display: grid; gap: 10px; align-content: start; }
.run3 h5 { margin: 0; display: flex; gap: 10px; align-items: center; font: 700 clamp(18px, 2vw, 22px)/1.2 var(--display); }
.run3 h5 i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-size: 14px; flex: none; }
.r-card { background: #fff; color: #1c2b3a; border: 1px solid #d5dae1; border-radius: 14px; padding: 16px; display: grid; gap: 8px; font: 400 13.5px/1.4 var(--body); align-content: start; min-height: 100%; }
.r-card > b { font-size: 16px; }
.r-card small { color: #6b7684; }
.r-card .try { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 11px; }
.r-card .chips3 i { font-size: 12px; background: #e8ecf1; border: 0; color: #4a5565; }
.r-in { border: 2px solid #1f4b6e; border-radius: 8px; padding: 9px 10px; }
.r-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.r-btns span { border: 1px solid #cfd6de; border-radius: 4px; padding: 7px 10px; font-weight: 600; font-size: 12.5px; }
.r-btns .p { background: #1f4b6e; border-color: #1f4b6e; color: #fff; }
.r-acc { background: #f5f7fa; border: 1px solid #e3e7ec; border-radius: 8px; padding: 7px 10px; font-weight: 600; }
.r-acc em { font-style: normal; color: #6b7684; font-weight: 400; }
.r-can { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-weight: 600; }
.r-can li { padding-left: 16px; position: relative; }
.r-can li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--speed); }
.r-can li.off { color: #9aa4b0; }
.r-can li.off::before { background: #c9cfd6; }
.r-card p { margin: 0; border-bottom: 1px solid #e3e7ec; padding-bottom: 6px; }
.r-card p em { display: block; font-style: normal; color: #6b7684; font-size: 12px; }

/* F: engine */
.ne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; }
.ne-flow { display: grid; gap: 8px; }
.ne-eng { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ne-eng div { border: 2px solid var(--ink); border-radius: 14px; padding: 14px; display: grid; gap: 4px; background: var(--surface); }
.ne-eng b { font: 700 20px/1.1 var(--display); }
.ne-eng span { color: var(--muted); font-size: 14.5px; }
.ne-arrow { font-style: normal; text-align: center; color: var(--muted); font-size: 18px; }
.ne-read { background: #121a2b; color: #fff; border-radius: 12px; padding: 14px 16px; font-size: 16px; line-height: 1.5; }
.ne-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ne-modes span { text-align: center; padding: 9px 6px; border-radius: 999px; background: var(--m); color: var(--mink); font: 700 13px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.ne-modes .m-guided { background: #efe36a; }

@media (max-width: 860px) {
  .nf, .nm-cards, .nm-rails, .ns3, .nt, .nwr-grid, .run3, .ne { grid-template-columns: 1fr; }
  .nf-panels { grid-template-columns: 1fr 1fr; }
  .nf-panels .nf-p:last-child { grid-column: 1 / -1; }
  .mock-new { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .nf-panels { grid-template-columns: 1fr; } .ne-eng { grid-template-columns: 1fr; } }
/* Supporting example: smaller than the main idea */
.nx-compact .nx-head h3 { font-size: clamp(22px, 2.6vw, 30px); }
.nx-compact .nx-head p:not(.label) { font-size: 16px; }
.nx-compact .nf-stats b { font-size: clamp(22px, 2.4vw, 30px); }
.nx-compact .nf { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.nx-compact .nf-ui { padding: 16px; }

/* Eyebrows in Bodoni */
:root { --eyebrow: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif; }
.label, .nf-tag { font-family: var(--eyebrow); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; font-optical-sizing: auto; }
/* Eyebrows: tracked bold sans (overrides Bodoni) */
.label, .nf-tag { font-family: var(--body); font-weight: 700; font-size: 11.5px; letter-spacing: 0.18em; }
/* North Star tagline on one line on wider screens */
.case-hero .tagline { max-width: none; }
@media (min-width: 861px) {
  .case-hero .tagline { white-space: nowrap; }
  .lead-title h3 { white-space: nowrap; font-size: clamp(17px, 1.75vw, 24px); }
}

/* North Star: research evidence */
.rs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rs article { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.rs article:first-child { grid-column: span 2; background: color-mix(in srgb, var(--speed) 8%, var(--surface)); border-color: color-mix(in srgb, var(--speed) 35%, var(--line)); }
.rs h4 { margin: 0; font: 700 20px/1.2 var(--display); letter-spacing: -0.01em; }
.rs p:not(.label) { margin: 0; color: var(--muted); font-size: 15.5px; }
.rs p strong { color: var(--ink); }
.rs-stat h4 b { display: block; font-size: clamp(40px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.03em; margin-bottom: 4px; }
.rs small { color: var(--muted); font-size: 12.5px; }
.rs small a { color: inherit; }
@media (max-width: 860px) { .rs { grid-template-columns: 1fr; } .rs article:first-child { grid-column: auto; } }
.rs-stat { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: center; }
.rs-stat .label, .rs-stat p, .rs-stat small { grid-column: 2; }
.rs-stat h4 { grid-column: 1; grid-row: 1 / span 4; max-width: 16ch; }
@media (max-width: 860px) { .rs-stat { grid-template-columns: 1fr; } .rs-stat > * { grid-column: 1 !important; grid-row: auto !important; } }

/* Wider reading measure + calmer headline wrapping */
.nx-head { max-width: 80ch; }
.case-body .prose h2, .nx-head h3 { text-wrap: balance; }
.nx-head h3 { max-width: 24em; }

/* Spotlight: the bet + business case */
.spot { position: relative; display: grid; gap: 28px; padding: clamp(22px, 4vw, 44px); border-radius: 24px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow: 0 18px 40px -30px rgba(40, 30, 0, .35); }
.spot::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.spot .prose h2 { margin-top: 0; }
.spot > .prose:first-child p { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--ink); }
.spot .pillars article { background: var(--surface); }
.spot .pillars article { padding: 16px 18px 18px; border-radius: 0 0 12px 12px; box-shadow: 0 8px 20px -16px rgba(40,30,0,.35); }

/* About: How I work */
.how { display: grid; gap: 14px; margin-top: 8px; }
.how h3 { font-size: 20px; }
.how ol { list-style: none; counter-reset: how; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.how li { counter-increment: how; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 16px 52px; display: grid; gap: 4px; }
.how li::before { content: counter(how); position: absolute; left: 16px; top: 15px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 700 12px/24px var(--body); text-align: center; }
.how b { font: 700 16px/1.3 var(--display); }
.how span { color: var(--muted); font-size: 14.5px; }
@media (max-width: 640px) { .how ol { grid-template-columns: 1fr; } }
/* Remaining eyebrow-style labels: tracked bold sans to match .label */
.soon, .skills h3, .risk-table .rh, .jargon .understood span { font-family: var(--body); font-weight: 700; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; }
body .bl, body .kicker, body .pole-hero .kicker, body .hl, body .house span, body .ax, body .mklabel { font-family: var(--body); font-weight: 700; letter-spacing: 0.16em; }

/* Pilot: strategy */
.pv-wrap { display: grid; gap: 18px; }
.goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.goals div { border-top: 3px solid var(--accent); background: var(--surface); border-radius: 0 0 14px 14px; padding: 16px 18px; display: grid; gap: 4px; }
.goals b { font: 700 18px/1.25 var(--display); }
.goals span { color: var(--muted); font-size: 15px; }
.pv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pv article { border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 6px; align-content: start; background: var(--surface); }
.pv h4 { margin: 0; font: 700 20px/1.2 var(--display); }
.pv p:not(.label) { margin: 0; color: var(--muted); font-size: 15px; }
.pv article.us { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.pv article.us p:not(.label) { color: var(--ink); }
.pv-wrap .cap a { color: inherit; }
@media (max-width: 860px) { .goals, .pv { grid-template-columns: 1fr; } }

/* About: career path */
.career { display: grid; gap: 14px; margin-top: 8px; }
.career h3 { font-size: 20px; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; position: relative; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: linear-gradient(90deg, #d6176f, #c9a45c, #3d8b37, #5b2bd6, #1c859b, var(--ink)); opacity: .55; }
.tl li { position: relative; display: grid; gap: 6px; align-content: start; padding-top: 44px; }
.tl li::before { content: ""; position: absolute; top: 23px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--bg); }
.tl .yr { position: absolute; top: 0; left: 0; font: 700 11.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
:root[data-theme="dark"] .tl li:last-child, .tl li:last-child { --c: var(--ink); }
.tl b { font: 700 16px/1.2 var(--display); }
.tl li > span:last-child { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.tl-thread { margin: 4px 0 0; font: 600 clamp(16px, 1.6vw, 19px)/1.45 var(--display); letter-spacing: -0.01em; color: var(--ink); }
@media (max-width: 980px) {
  .tl { grid-template-columns: 1fr; gap: 18px; padding-left: 28px; }
  .tl::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, #d6176f, #c9a45c, #3d8b37, #5b2bd6, #1c859b, var(--ink)); }
  .tl li { padding-top: 0; }
  .tl li::before { left: -28px; top: 1px; }
  .tl .yr { position: static; }
}
.bio .tl-thread { color: var(--ink); }
.lessons ol { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lessons ol { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lessons li { grid-column: span 2; }
.lessons li:nth-child(n+4) { grid-column: span 3; }
.lessons li:nth-child(1)::before { background: #d6176f; }
.lessons li:nth-child(2)::before { background: #3d8b37; }
.lessons li:nth-child(3)::before { background: #5b2bd6; }
.lessons li:nth-child(4)::before { background: #1c859b; }
.lessons li::before { color: #fff; }
@media (max-width: 760px) { .lessons ol { grid-template-columns: 1fr; } .lessons li, .lessons li:nth-child(n+4) { grid-column: auto; } }

/* Hero: a small pop of original art */
.hero.hero-art-on { grid-template-columns: minmax(0, 1fr) clamp(200px, 24vw, 300px); align-items: center; column-gap: clamp(28px, 5vw, 72px); }
.hero-text { display: grid; gap: 28px; }
.hero-art { position: relative; display: grid; gap: 12px; justify-items: center; text-decoration: none; color: var(--muted); }
.hero-art .arch { position: relative; width: 100%; aspect-ratio: 4 / 5.4; border-radius: 999px 999px 22px 22px; overflow: hidden; background: #111; box-shadow: 0 28px 50px -30px rgba(0,0,0,.55); }
.hero-art::before { content: ""; position: absolute; z-index: -1; width: 100%; aspect-ratio: 4 / 5.4; top: 14px; left: 14px; border-radius: 999px 999px 22px 22px; background: var(--hl, #8fdcae); }
.hero-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero-art video.on { opacity: 1; }
.hero-art-cap { font: 700 11.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; margin-top: 14px; }
.hero-art:hover .hero-art-cap { color: var(--ink); }
@media (max-width: 760px) {
  .hero.hero-art-on { grid-template-columns: 1fr; row-gap: 32px; }
  .hero-art { justify-self: start; width: 58%; max-width: 240px; }
}
.hero-art::before { left: -14px; }
@media (max-width: 760px) { .hero-art { width: 44%; max-width: 190px; margin-left: 14px; } }
.hero-art-cap { white-space: nowrap; }
.hero-art .arch, .hero-art::before { border-radius: 20px; aspect-ratio: 4 / 5; }

/* Hero: Mr Rat walking the platform */
.rat-scene { background: #f6e7bf; }
.rat-scene .rs-tiles { position: absolute; inset: 0 0 28% 0; background:
  linear-gradient(180deg, transparent 0 38%, #1c859b 38% 42%, transparent 42%),
  repeating-linear-gradient(90deg, rgba(120,90,40,.22) 0 2px, transparent 2px 48px),
  repeating-linear-gradient(180deg, rgba(120,90,40,.22) 0 2px, transparent 2px 24px),
  #f6e7bf;
  background-size: 100% 100%, 48px 100%, 100% 24px, auto; animation: rsScroll 1.2s linear infinite; }
.rat-scene.pause .rs-tiles, .rat-scene.still .rs-tiles { animation-play-state: paused; }
@keyframes rsScroll { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 0, -48px 0, 0 0, 0 0; } }
.rat-scene .rs-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, #e9c43d 0 10px, #3b3f47 10px); }
.rat-scene .rs-rat { position: absolute; left: 50%; bottom: 20%; width: 64%; transform: translateX(-50%); animation: rsBob .6s ease-in-out infinite; }
.rat-scene.pause .rs-rat, .rat-scene.still .rs-rat { animation: rsHop 2.1s ease-in-out 1; }
.rat-scene .rs-rat img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.rat-scene .rs-rat::before { content: ""; display: block; padding-top: 133%; }
.rat-scene .rs-rat .f2 { opacity: 0; }
.rat-scene.alt .rs-rat .f1 { opacity: 0; } .rat-scene.alt .rs-rat .f2 { opacity: 1; }
.rat-scene.pause .rs-rat .f1, .rat-scene.still .rs-rat .f1 { opacity: 0; } .rat-scene.pause .rs-rat .f2, .rat-scene.still .rs-rat .f2 { opacity: 1; }
@keyframes rsBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3%); } }
@keyframes rsHop { 0%, 30%, 60%, 100% { transform: translateX(-50%) translateY(0) rotate(0); } 42% { transform: translateX(-50%) translateY(-6%) rotate(-2deg); } }
.rat-scene .rs-rat { width: 54%; bottom: 21%; }
.rat-scene .rs-tiles { background:
  linear-gradient(180deg, transparent 0 46%, #1c859b 46% 50%, transparent 50%),
  repeating-linear-gradient(90deg, rgba(120,90,40,.12) 0 2px, transparent 2px 48px),
  repeating-linear-gradient(180deg, rgba(120,90,40,.12) 0 2px, transparent 2px 24px),
  #f6e7bf; background-size: 100% 100%, 48px 100%, 100% 24px, auto; }
.rat-scene .rs-rat .f2 { transition: opacity .18s ease; }
.rat-scene .rs-rat .f1 { transition: opacity .18s ease; }

/* Hero: Mr Rat under drifting clouds (transparent) */
.hero-art.sky::before { display: none; }
.rat-sky { position: relative; display: block; width: 100%; aspect-ratio: 1000 / 848; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.rat-sky img { position: absolute; height: auto; display: block; }
.rat-sky .d1 { animation: cloudR 11s ease-in-out infinite alternate; }
.rat-sky .d2 { animation: cloudL 13s ease-in-out infinite alternate; }
.rat-sky .d3 { animation: cloudR 15s ease-in-out infinite alternate; animation-delay: -4s; }
.rat-sky .d4 { animation: cloudL 12s ease-in-out infinite alternate; animation-delay: -6s; }
.rat-sky .sun { animation: sunGlow 6s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes cloudR { from { transform: translateX(0); } to { transform: translateX(42%); } }
@keyframes cloudL { from { transform: translateX(0); } to { transform: translateX(-36%); } }
@keyframes sunGlow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,200,40,0)); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(255,200,40,.55)); } }
@media (prefers-reduced-motion: reduce) { .rat-sky img { animation: none !important; } }
.hero-art.sky { width: 100%; }
@media (min-width: 761px) { .hero.hero-art-on { grid-template-columns: minmax(0, 1fr) clamp(240px, 32vw, 420px); column-gap: clamp(24px, 4vw, 56px); } }
@media (max-width: 760px) { .hero-art.sky { width: 78%; max-width: 320px; margin-left: 0; } }
/* Mr Rat: smaller vignette, sitting on the hero's baseline */
@media (min-width: 761px) { .hero.hero-art-on { grid-template-columns: minmax(0, 1fr) clamp(160px, 18vw, 240px); align-items: end; } .hero-art.sky { align-self: end; } }
@media (max-width: 760px) { .hero-art.sky { width: 52%; max-width: 200px; } }
/* Mr Rat by the hydrant: bold framed card on the hero baseline */
.hero-art.hydrant { display: block; border-radius: 20px; overflow: hidden; background: #f7f4ed; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 24px 44px -28px rgba(0,0,0,.45); transform: rotate(1.5deg); transition: transform .35s ease, box-shadow .35s ease; }
.hero-art.hydrant::before { display: none; }
.hero-art.hydrant img { display: block; width: 100%; height: auto; }
.hero-art.hydrant:hover, .hero-art.hydrant:focus-visible { transform: rotate(0deg) translateY(-4px); box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 30px 54px -28px rgba(0,0,0,.5); }
@media (min-width: 761px) { .hero.hero-art-on { grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 340px); align-items: end; } .hero-art.hydrant { align-self: end; } }
@media (max-width: 760px) { .hero-art.hydrant { width: 62%; max-width: 260px; margin-left: 4px; } }
@media (prefers-reduced-motion: reduce) { .hero-art.hydrant { transition: none; } }
@media (min-width: 761px) { .hero.hero-art-on { grid-template-columns: minmax(0, 1fr) clamp(200px, 21vw, 280px); } }
.hero-art.hydrant { transform: rotate(1deg); }
.hero-art.hydrant .rat-vid { display: block; width: 100%; height: auto; aspect-ratio: 624 / 640; background: #f7f4ed; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-art.hydrant .rat-vid { position: static; inset: auto; opacity: 1; height: auto; object-fit: cover; }
/* Homepage: Dory Fatale noir card */
.card.noir-card { background: #0e0c0a; border-color: #2a2219; color: #efe6d8; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.card.noir-card .m { aspect-ratio: 16 / 9; background: #000; }
.card.noir-card .t { align-content: center; padding: clamp(20px, 3vw, 40px); }
.card.noir-card h3, .card.noir-card h3 a { color: #f6eee2; }
.card.noir-card .label { color: #e0a24a; }
.card.noir-card p { color: #cbbfae; }
.card.noir-card .btn { background: #e0a24a; color: #140f0a; border-color: #e0a24a; }
@media (max-width: 760px) { .card.noir-card { grid-template-columns: 1fr; } }
/* About: How I work with AI */
.how-ai { display: grid; gap: 14px; margin-top: 8px; }
.how-ai-head { display: grid; gap: 4px; }
.how-ai-head h3 { font-size: 20px; }
.how-ai-head p { margin: 0; color: var(--muted); font-size: 15.5px; }
.how-ai-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.how-ai-grid article { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 6px; align-content: start; }
.how-ai-grid .k { margin: 0; font: 700 11px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.how-ai-grid b { font: 700 16px/1.3 var(--display); }
.how-ai-grid span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.how-ai-grid em { font-style: normal; font-weight: 600; font-size: 14.5px; border-left: 3px solid var(--hl, #ecc428); padding-left: 8px; margin-top: 2px; }
.how-ai-grid a { font-weight: 600; font-size: 14px; margin-top: 4px; }
@media (max-width: 1100px) { .how-ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .how-ai-grid { grid-template-columns: 1fr; } }
.how-ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .how-ai-grid { grid-template-columns: 1fr; } }
/* How I work with AI: full-width colored panel */
#about .how-ai { --ai-bg: #f5df7a; --ai-ink: #2b2306; margin-top: clamp(36px, 5vw, 56px); background: var(--ai-bg); border-radius: 22px; padding: clamp(22px, 4vw, 44px); gap: 22px; position: relative; overflow: hidden; }
#about .how-ai::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.28); pointer-events: none; }
#about .how-ai-head h3 { font-size: clamp(26px, 3.2vw, 36px); color: var(--ai-ink); }
#about .how-ai-head p { color: #5a4a12; font-size: 17px; }
#about .how-ai-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 1; }
#about .how-ai-grid article { background: #fff; border-color: transparent; box-shadow: 0 14px 30px -22px rgba(60,45,0,.55); padding: 18px; }
#about .how-ai-grid article, #about .how-ai-grid b, #about .how-ai-grid a { color: #17150f; }
#about .how-ai-grid span, #about .how-ai-grid .k { color: #5d584c; }
#about .how-ai-grid em { color: #17150f; border-left-color: #d9a90a; }
@media (max-width: 1000px) { #about .how-ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #about .how-ai-grid { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #about .how-ai { --ai-bg: #3a300b; --ai-ink: #f6e7a6; } :root:not([data-theme="light"]) #about .how-ai-head p { color: #e2d39a; } }
:root[data-theme="dark"] #about .how-ai { --ai-bg: #3a300b; --ai-ink: #f6e7a6; }
:root[data-theme="dark"] #about .how-ai-head p { color: #e2d39a; }
#about .how-ai-head { position: relative; z-index: 1; }
#about .how-ai::after { z-index: 0; }
@media (max-width: 560px) { #about .how-ai::after { width: 140px; height: 140px; right: -50px; top: -50px; } }
/* North Star case study: demo at the top */
.ns-demo { margin: 8px 0 40px; }
.ns-demo .media.demo { background: transparent; border: 0; padding: 0; max-width: 1000px; margin: 0 auto; }
.ns-demo .media.demo { max-width: 860px; }
/* North Star hero: copy left, demo right */
.ns-hero .ns-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.ns-hero .ns-hero-copy { display: grid; gap: inherit; align-content: center; }
.ns-hero .ns-hero-copy { gap: 18px; }
.ns-hero .ns-demo { margin: 0; }
.ns-hero .ns-demo .media.demo { max-width: none; }
.ns-hero .ns-demo .demo .stage, .ns-hero .ns-demo .stage { padding: clamp(18px, 2.6vw, 34px); }
@media (max-width: 900px) { .ns-hero .ns-hero-grid { grid-template-columns: 1fr; } }
.ns-hero .ns-hero-copy > * { min-width: 0; }
.ns-hero .tagline { white-space: normal; max-width: 18ch; font-size: clamp(24px, 2.6vw, 34px); }
.ns-hero .tagline + .sub { max-width: 46ch; font-size: clamp(16px, 1.3vw, 18px); }
.ns-hero h1.proj-name { font-size: clamp(48px, 6.4vw, 84px); }
/* ---------- Self-Serve: results panel ---------- */
.ss-wow { --ink2: #f6f1e6; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: radial-gradient(120% 120% at 0% 0%, #34479f 0%, #1f2b6a 55%, #18214f 100%); color: var(--ink2); border-radius: 24px; padding: clamp(26px, 4.5vw, 56px); margin: 8px 0 44px; position: relative; overflow: hidden; }
.ss-wow::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(240,183,58,.28), rgba(240,183,58,0) 70%); pointer-events: none; }
.ss-wow .k { margin: 0; font: 700 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: #f0b73a; }
.ss-wow .big { margin: 6px 0 4px; font: 700 clamp(84px, 13vw, 168px)/.9 var(--display); letter-spacing: -0.05em; color: #fff; }
.ss-wow .what { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.45; color: #d8dcf2; max-width: 28ch; }
.ss-wow-chart { display: grid; gap: 20px; position: relative; z-index: 1; }
.ss-bars { display: grid; gap: 14px; }
.ss-bar { display: grid; grid-template-columns: 84px minmax(0, 1fr) 72px; align-items: center; gap: 12px; }
.ss-bar .m { font: 600 14px/1 var(--body); color: #c4cae9; }
.ss-bar .t { height: 46px; border-radius: 10px; background: rgba(255,255,255,.08); overflow: hidden; }
.ss-bar .t i { display: block; height: 100%; width: var(--w); border-radius: 10px; background: rgba(255,255,255,.35); }
.ss-bar.hi .t i { background: linear-gradient(90deg, #f0b73a, #ffd36b); box-shadow: 0 0 30px rgba(240,183,58,.45); }
.ss-bar b { font: 700 22px/1 var(--display); color: #fff; text-align: right; }
.ss-wow.in .ss-bar .t i { animation: ssGrow 1.4s cubic-bezier(.2,.8,.2,1) both; }
.ss-wow.in .ss-bar.hi .t i { animation-delay: .25s; }
@keyframes ssGrow { from { width: 0; } to { width: var(--w); } }
@media (prefers-reduced-motion: reduce) { .ss-wow.in .ss-bar .t i { animation: none; } }
.ss-wow-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ss-wow-stats li { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; }
.ss-wow-stats b { font: 700 30px/1 var(--display); color: #fff; }
.ss-wow-stats span { font-size: 13.5px; color: #c4cae9; line-height: 1.35; }
.ss-wow .cap { margin: 0; font-size: 13px; color: #9ea6d3; }
@media (max-width: 860px) { .ss-wow { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ss-bar { grid-template-columns: 70px minmax(0, 1fr) 60px; } .ss-bar b { font-size: 18px; } .ss-wow-stats b { font-size: 24px; } }

/* ---------- Self-Serve: research ---------- */
.ss-research { display: grid; gap: 22px; }
.ss-ev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ss-ev article { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px 22px; display: grid; gap: 8px; align-content: start; overflow: hidden; }
.ss-ev article::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--c, #7a4b22); }
.ss-ev article:nth-child(1) { --c: #7a4b22; } .ss-ev article:nth-child(2) { --c: #2b3f99; } .ss-ev article:nth-child(3) { --c: #a24c26; }
.ss-ev .k { margin: 0; font: 700 11.5px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
.ss-ev h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.2; }
.ss-ev p:not(.k) { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.ss-so { margin: 6px 0 0; font: 700 clamp(22px, 2.8vw, 32px)/1.3 var(--display); letter-spacing: -0.015em; max-width: 36ch; }
.ss-so span { display: block; font: 700 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ss-so em { font-style: normal; background: linear-gradient(transparent 62%, rgba(240,183,58,.55) 62%, rgba(240,183,58,.55) 92%, transparent 92%); }
@media (max-width: 860px) { .ss-ev { grid-template-columns: 1fr; } }

/* ---------- Self-Serve: region tile map ---------- */
.ss-map { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 52px); align-items: center; background: #f7f1e6; color: #2b2116; border-radius: 24px; padding: clamp(24px, 4vw, 48px); }
.ss-map h2 { color: #2b2116; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; margin: 6px 0 10px; }
.ss-map .label { color: #7a4b22; }
.ss-map-copy > p:not(.label) { color: #5a4a36; font-size: 17px; line-height: 1.55; margin: 0 0 18px; }
.ss-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ss-key li { display: grid; grid-template-columns: 22px auto 1fr; gap: 10px; align-items: center; }
.ss-key i { width: 22px; height: 22px; border-radius: 6px; }
.ss-key b { font: 700 17px/1 var(--display); }
.ss-key span { color: #6d5b44; font-size: 14.5px; }
.ss-tiles { margin: 0; display: grid; gap: 10px; }
.ss-tiles .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); gap: 4px; }
.ss-tiles .grid i { aspect-ratio: 1; border-radius: 5px; display: grid; place-items: center; font: 700 clamp(7px, .85vw, 11px)/1 var(--body); font-style: normal; color: rgba(255,255,255,.92); }
.ss-tiles figcaption { font-size: 13px; color: #7a6a55; }
i.rustic { background: #6b7a3a; } i.east { background: #2b3f99; } i.mtn { background: #c0602a; } i.pac { background: #d9cfbf; color: #8a7c66 !important; }
.ss-key i.rustic { background: #6b7a3a; }
@media (max-width: 860px) { .ss-map { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ss-tiles .grid { gap: 2px; } .ss-tiles .grid i { border-radius: 3px; font-size: 6.5px; } }
.ss-range { margin-top: 22px; display: grid; gap: 10px; }
.ss-range .label { color: #7a4b22; margin: 0; }
.ss-range ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ss-range li { font: 600 13px/1 var(--body); padding: 8px 11px; border-radius: 999px; background: #fff; border: 1px solid #e3d7c4; color: #4a3b28; }
.ss-range li.rustic { background: #6b7a3a; border-color: #6b7a3a; color: #fff; }
.ss-range li.east { background: #2b3f99; border-color: #2b3f99; color: #fff; }
.ss-range li.mtn { background: #c0602a; border-color: #c0602a; color: #fff; }
/* Self-Serve: full range grid */
.ss-range-grid { display: grid; gap: 18px; }
.ss-tplgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ss-tplgrid img { width: 100%; aspect-ratio: 2582 / 1865; object-fit: cover; border-radius: 12px; display: block; background: #ece6da; transition: transform .3s ease, box-shadow .3s ease; }
.ss-tplgrid img:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 18px 30px -18px rgba(0,0,0,.45); }
.ss-note { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .ss-tplgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ss-tplgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Self-Serve: live sites wall */
.ss-live { display: grid; gap: 18px; }
.ss-wall { display: grid; gap: 14px; background: #14181f; border-radius: 22px; padding: 18px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ss-wall .row { overflow: hidden; }
.ss-wall .track { display: flex; gap: 14px; width: max-content; animation: ssMarq 70s linear infinite; }
.ss-wall .r2 .track { animation-duration: 55s; animation-direction: reverse; }
.ss-wall .r1 img { height: clamp(150px, 19vw, 250px); width: auto; border-radius: 10px; display: block; }
.ss-wall .r2 img { height: clamp(180px, 22vw, 300px); width: auto; display: block; }
.ss-wall:hover .track { animation-play-state: paused; }
@keyframes ssMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ss-wall .r2 .track { animation-name: ssMarq3; }
@keyframes ssMarq3 { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .ss-wall .track { animation: none; } .ss-wall .row { overflow-x: auto; } }
i.mid { background: #7a3d8c; } i.pnw { background: #2f6b4f; }
i.sw { background: #1c1b1f; }
/* Map as the hero of the solution */
.ss-map { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); padding: clamp(26px, 4.5vw, 60px); margin-top: 8px; }
.ss-map h2 { font-size: clamp(32px, 4.2vw, 52px); }
.ss-map .ss-tiles .grid { gap: 6px; }
.ss-map .ss-tiles .grid i { border-radius: 7px; font-size: clamp(8px, .95vw, 13px); }
@media (max-width: 860px) { .ss-map { grid-template-columns: 1fr; } }
/* Map v2: stacked head, big map + side key */
.ss-map { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 36px); }
.ss-map-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: end; }
.ss-map-head h2 { margin: 6px 0 0; }
.ss-map-head > p { margin: 0; color: #5a4a36; font-size: 17px; line-height: 1.55; }
.ss-map-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 280px); gap: clamp(20px, 3vw, 40px); align-items: center; }
.ss-map-side { display: grid; gap: 4px; }
.ss-map-side .ss-range { margin-top: 18px; }
@media (max-width: 860px) { .ss-map-head, .ss-map-body { grid-template-columns: 1fr; } }