/* =========================================================================
   Ilmari Ihalainen — Portfolio
   Black on white, bold, minimal. Geist typography.

   LAYOUT RULE: every block starts at the same left edge. One container
   (--wide + padding) for everything; line length is capped with max-width
   on the text itself, never by indenting a column.
   ========================================================================= */

:root {
  --bg:        #FFFFFF;
  --bg-2:      #F7F7F5;
  --surface:   #F4F4F2;
  --surface-2: #EAEAE7;
  --ink:       #0A0A0B;
  --ink-2:     #45454B;
  --ink-3:     #86868C;
  --rule:      #E3E3E0;
  /* the only two colours on the light side of the site: they mark the
     problem and the outcome of a case and nothing else */
  --bad:       #C1121F;
  --good:      #11693E;
  --rule-2:    #C9C9C5;

  --display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure:    780px;
  --wide:       1120px;
  --pad:        clamp(1.25rem, 4vw, 3rem);
  --radius-card: 30px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  transition: color .15s, border-color .15s, background .15s;
}
a:hover { color: var(--ink); border-color: var(--ink); }
::selection { background: var(--ink); color: var(--bg); }

/* ---------- the one container ---------- */
.wrap,
.prose,
.jobs,
.case,
.videos,
.stack,
.edu-head,
.section > .charts,
.footer-inner,
.footer-fine {
  max-width: var(--wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: .9rem var(--pad);
  max-width: var(--wide); margin: 0 auto;
}
.brand {
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  border-bottom: none;
  font-weight: 700;
}
.topnav { display: flex; align-items: center; gap: clamp(.85rem, 1.6vw, 1.5rem); }
.topnav a {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  border-bottom: none;
  white-space: nowrap;
}
.topnav a:hover { color: var(--ink); }
/* Hover menus under the two case sections. The link itself still works, so
   the menu is an extra way in, never the only one. A pseudo-element bridges
   the gap between link and panel, otherwise the menu closes while the pointer
   crosses it. */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-menu {
  position: absolute;
  top: 100%; left: -.75rem;
  min-width: 310px;
  background: var(--ink);
  border-radius: 12px;
  padding: .4rem;
  margin-top: .75rem;
  box-shadow: 0 20px 44px -20px rgba(10, 10, 11, .55);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.nav-menu::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: -.85rem; height: .85rem;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
  opacity: 1; visibility: visible; transform: none;
}
.topnav .nav-menu a {
  display: block;
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.35;
  padding: .5rem .7rem;
  border-radius: 8px;
  white-space: normal;
}
.topnav .nav-menu a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .11); }
.topnav .nav-menu a em {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  margin-bottom: .15rem;
}

.nav-contact {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: .32rem .9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-contact:hover { background: var(--bg); color: var(--ink); }

.topbar-actions { display: flex; align-items: center; gap: .6rem; }

/* hamburger: hidden until the links collapse */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 0 9px;
  background: var(--bg);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: background .15s;
}
.nav-toggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); }
.nav-toggle[aria-expanded="true"] span { background: var(--bg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  /* the same links, dropped out of the bar as a panel */
  .topnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    /* the bar sets align-items: center for the horizontal nav. Left in place
       here it shrink-wraps every link to the width of its own text, so the
       dividers come out short and the rows collide. */
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    padding: .25rem var(--pad) .75rem;
    border-bottom: 1px solid var(--ink);
  }
  .topnav[data-open="true"] { display: flex; }
  .topnav a {
    /* block, or the vertical padding and the divider do nothing on the two
       links that sit inside a .nav-item wrapper */
    display: block;
    color: var(--bg);
    font-size: 1.05rem;
    font-weight: 600;
    padding: .95rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  /* no room for hover menus on a phone, and no pointer to hover with */
  .nav-item { display: block; }
  .nav-menu { display: none; }
  .topnav > *:last-child a,
  .topnav > a:last-child { border-bottom: none; }
  .topnav a:hover { color: var(--bg); }
}

/* ---------- hero / about ---------- */
.hero { padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
/* The portrait fills its column top to bottom so it reads as a panel beside
   the text, not a stamp floating in white space. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}
.hero-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.2vw, 4.8rem);
  line-height: .93;
  letter-spacing: -0.05em;
  margin: 0;
  color: var(--ink);
}
.hero-title {
  margin: 1rem 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: var(--ink-2);
}
.hero-about { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.hero-about p { margin: 0 0 1em; font-size: 1rem; color: var(--ink-2); }
.hero-about p:last-child { margin-bottom: 0; }
.hero-about p.lede {
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.hero-about a { border-bottom: 1px solid var(--rule-2); }
.hero-about a:hover { border-color: var(--ink); }

.hero-portrait { margin: 0; height: 100%; }
.hero-portrait img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 20px;
  border: 1px solid var(--rule);
}
.hero-contact {
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .8rem;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: -0.01em;
}
.hero-contact a { color: var(--ink-2); border-bottom-color: transparent; font-weight: 500; }
.hero-contact a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.hero-contact-sep { color: var(--rule-2); }
.hero-actions { margin: 1.25rem 0 0; }
.btn-cv {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: .55rem 1.2rem;
  transition: background .15s, color .15s;
}
.btn-cv::after { content: "\2193"; font-weight: 500; }
.btn-cv:hover { background: var(--bg); color: var(--ink); border-color: var(--ink); }

.hero-note {
  margin: .75rem 0 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-3);
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-portrait { order: -1; max-width: 420px; }
}
/* No portrait on a phone. At any size it pushed the name off the first screen,
   and a short banner crop looked worse than no photo at all. */
@media (max-width: 620px) {
  .hero-portrait { display: none; }
}

/* ---------- contact modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-card {
  position: relative;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-card);
  padding: clamp(2rem, 4vw, 3rem);
  width: min(100%, 460px);
  animation: modal-in .2s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.modal-close {
  position: absolute; top: 1rem; right: 1.25rem;
  background: none; border: none; color: var(--bg);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  opacity: .55; padding: .25rem; transition: opacity .15s;
}
.modal-close:hover { opacity: 1; }
.modal-eyebrow {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .55; margin: 0 0 1rem;
}
.modal-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  line-height: 1.02; letter-spacing: -0.045em; margin: 0;
}
.modal-sub { margin: .4rem 0 1.75rem; font-size: .95rem; opacity: .7; }
.modal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.modal-list li {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem;
  align-items: baseline; font-size: .95rem;
}
.modal-key {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .5;
}
/* plain text, so it can be selected and copied without fighting a link drag */
.modal-value {
  color: var(--bg);
  font-weight: 500;
  word-break: break-word;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
/* the one actual link, and it should read as one */
.modal-link {
  color: var(--bg);
  font-weight: 500;
  word-break: break-word;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  border-bottom: none;
}
.modal-link::after {
  content: " \2197";
  text-decoration: none;
  display: inline-block;
  opacity: .6;
}
.modal-link:hover {
  color: var(--bg);
  text-decoration-color: var(--bg);
}
.modal-link:hover::after { opacity: 1; }
@media (max-width: 420px) { .modal-list li { grid-template-columns: 1fr; gap: .1rem; } }

/* the top bar is sticky, so a case linked from the menu must stop below it */
.case,
#growth-ua { scroll-margin-top: 5rem; }

/* #about and #top land on the hero, which has only ~2.25rem of padding above
   the name. Without this the sticky bar sits on top of "Ilmari". */
.hero,
#top { scroll-margin-top: 2.5rem; }

/* A slim band between the hero and the first section, so a recruiter knows
   what the page holds before deciding whether to scroll. */
/* A card, not a full-bleed slab. Everything else on the page is rounded, and
   a bar edge to edge left half of itself as dead black. */
.guide { padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; }
.guide-card {
  background: var(--ink);
  border-radius: 18px;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(1.25rem, 2.4vw, 1.9rem);
}
.guide-line {
  max-width: var(--measure);
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}
/* each sentence on its own line, so the second one never starts as an orphan
   word at the end of the first */
.guide-line span { display: block; }
.guide-line span + span { margin-top: .25em; }
.guide-line em {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: .5rem;
}

.guide + .section { padding-top: clamp(2.25rem, 4vw, 3.5rem); border-top: none; }

/* ---------- section frame ---------- */
.section {
  padding: clamp(4rem, 9vw, 7rem) 0;
  border-top: 1px solid var(--rule);
  /* the section's own top padding already clears the sticky bar, so this only
     needs to be a hair. 4.5rem here stacked on top of the padding and left a
     screen of white above every heading. */
  scroll-margin-top: 1rem;
}

.section-head {
  max-width: var(--wide);
  margin: 0 auto clamp(2.25rem, 4vw, 3rem);
  padding: 0 var(--pad);
}
.section-num {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: .75rem;
}
.section-when {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ink-3);
  margin-bottom: .6rem;
}
.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--ink);
}
.section-lede {
  margin: 1rem 0 0;
  font-size: 1.05rem;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* ---------- prose ---------- */
.prose { color: var(--ink-2); }
.prose > * { max-width: var(--measure); }
.prose p { margin: 0 0 1.15em; font-size: 1.02rem; color: var(--ink-2); }
.prose p.lede {
  font-size: 1.2rem; line-height: 1.45; color: var(--ink);
  font-weight: 500; letter-spacing: -0.02em;
}
.prose h3 {
  font-family: var(--display);
  font-weight: 700; font-size: 1.65rem; line-height: 1.12;
  letter-spacing: -0.035em; margin: 2.5rem 0 .75rem; color: var(--ink);
}
.prose h3:first-child { margin-top: 0; }
.prose h4 {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); margin: 1.75rem 0 .5rem; font-weight: 500;
}
.prose ul { padding-left: 1.1em; margin: 0 0 1.15em; }
.prose li { margin-bottom: .35em; color: var(--ink-2); }
.prose blockquote,
.case-body blockquote {
  margin: 1.5em 0; padding: 0; background: none; border: none;
  font-family: var(--display);
  font-weight: 600; font-size: 1.45rem; line-height: 1.28;
  letter-spacing: -0.035em; color: var(--ink);
}
.prose a { border-bottom: 1px solid var(--rule-2); }
.prose a:hover { border-color: var(--ink); }

/* ---------- jobs & education ---------- */
.job { padding: 2.25rem 0; border-top: 1px solid var(--rule); }
.job:last-child { border-bottom: 1px solid var(--rule); }
.job-when {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .06em;
  color: var(--ink-3); margin-bottom: .5rem;
}
.job-company {
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.04em; margin: 0; color: var(--ink);
}
.job-brief {
  font-size: .92rem; color: var(--ink-3);
  margin: .4rem 0 0; max-width: var(--measure);
}
/* the subject of a degree, which is the part anyone actually scans for */
.job-field {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink-2);
  margin: .3rem 0 .5rem;
}
/* internships: present, not prominent */
.job-min { padding: 1.1rem 0; }
.job-min .job-company { font-size: 1.12rem; }
.job-min .job-when { margin-bottom: .3rem; }
.job-min .job-brief { margin-top: .25rem; }
.job-role {
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
  margin-left: .5rem;
  white-space: nowrap;
}

.positions { list-style: none; padding: 0; margin: 1.3rem 0 0; }
.position { padding: .7rem 0 0; }
.position + .position { margin-top: 1.9rem; border-top: 1px dashed var(--rule); }
.position-when {
  display: block;
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .06em;
  color: var(--ink-3); margin-bottom: .3rem;
}
.position-title {
  display: block;
  font-family: var(--display);
  font-size: 1.12rem; font-weight: 700;
  letter-spacing: -0.03em; color: var(--ink);
}
.position-arrow { color: var(--ink-3); font-weight: 500; margin: 0 .1em; }
.position-body { margin-top: .7rem; max-width: var(--measure); }
.position-body p {
  font-size: .96rem; color: var(--ink-2); line-height: 1.6; margin: 0 0 .95em;
}
.position-body p:last-child { margin-bottom: 0; }

.edu-head { margin-top: 4rem; margin-bottom: 1rem; }
.edu-title {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .14em; color: var(--ink);
  text-transform: uppercase; margin: 0; font-weight: 500;
}

/* ---------- case studies ---------- */
.case { margin-bottom: clamp(3rem, 6vw, 5rem); }
.case:last-of-type { margin-bottom: 0; }
.case-header {
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 2rem;
}
.case-num {
  display: block;
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .14em;
  color: var(--ink-3); font-weight: 500;
  text-transform: uppercase; margin-bottom: .6rem;
}
.case-title {
  font-family: var(--display);
  font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.02; letter-spacing: -0.045em; margin: 0; color: var(--ink);
}
.case-date {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .06em;
  color: var(--ink-3); margin-top: .5rem; text-transform: uppercase;
}
.case-body { max-width: var(--measure); }
.case-body h4 {
  display: block;
  width: fit-content;
  font-family: var(--mono);
  font-size: .8rem; letter-spacing: .14em; color: var(--ink);
  margin: 2.1rem 0 .7rem; font-weight: 700; text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .35rem;
}
.case-body h4:first-child { margin-top: 0; }
.case-body p { margin: 0 0 1.1em; font-size: 1.02rem; color: var(--ink-2); }
.case-body ul {
  padding-left: 1.1em;
  margin: 0 0 1.15em;
}

/* Funnel chart: vertical bars left to right, each a share of the first step.
   Labels run bottom-to-top so 15 of them fit without abbreviating. */
.funnel-wrap {
  margin: 1.5rem 0 .75rem;
  overflow-x: auto;
}
.funnel {
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, .5vw, 7px);
  min-width: 620px;
}
.funnel-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.funnel-val {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--ink-2);
  text-align: center;
  margin-bottom: .3rem;
  white-space: nowrap;
}
.funnel-track {
  display: flex;
  align-items: flex-end;
  height: 190px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
}
.funnel-bar {
  display: block;
  width: 100%;
  min-height: 3px;
  background: var(--ink);
  border-radius: 3px 3px 0 0;
}
.funnel-label {
  display: block;
  position: relative;
  height: 6.5rem;
  margin-top: .4rem;
}
.funnel-label i {
  position: absolute;
  top: 6px;
  right: 50%;
  transform: rotate(-45deg);
  transform-origin: right top;
  font-style: normal;
  font-size: .72rem;
  white-space: nowrap;
  color: var(--ink-2);
}
.funnel-note {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-3);
  margin: 0 0 1rem;
}

.case-actions { margin: 2em 0 .55em; text-align: center; }
.btn-demo {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: .95rem 2.1rem;
  cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(10, 10, 11, .8);
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn-demo i { font-style: normal; transition: transform .15s; }
.btn-demo:hover { background: var(--bg); color: var(--ink); transform: translateY(-2px); }
.btn-demo:hover i { transform: translateX(3px); }
.btn-demo:active { transform: translateY(0); }
.case-actions-note {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--ink-3);
  text-align: center;
  margin: 0 0 2em;
}

/* ---------- dashboard mock, Bitmagic theme ----------
   Palette from the Bitmagic design system. Accents are functional: Aquamarine
   at the healthy top of the funnel through Canary and Pumpkin to Pink at the
   bottom, so colour carries the drop-off. */
.modal:has(.dash-card) { padding: 1rem; }
.dash-card {
  --bm-black: #0b0b0b; --bm-surface: #181818; --bm-mid: #1f1f1f;
  --bm-aqua: #A0DAB9; --bm-canary: #F9E547; --bm-pumpkin: #FF8200;
  --bm-pink: #E0218A; --bm-rose: #CE0056; --bm-silver: #b3b3b3;

  position: relative;
  font-family: "Red Hat Display", var(--sans);
  background: var(--bm-black); color: #fff;
  border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  padding: 1.2rem 1.3rem 1.3rem;
  width: min(100%, 1480px); max-height: 94vh; overflow-y: auto;
  animation: modal-in .2s ease;
}
.dash-close {
  position: absolute; top: .9rem; right: 1.1rem;
  background: none; border: none; color: #fff; font-size: 1.5rem; line-height: 1;
  cursor: pointer; opacity: .5; padding: .25rem; transition: opacity .15s;
}
.dash-close:hover { opacity: 1; }

.dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.dash-eyebrow { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bm-silver); margin: 0 0 .35rem; font-weight: 500; }
.dash-title {
  font-family: "Red Hat Display", var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.01em; line-height: 1; margin: 0;
  background: linear-gradient(135deg, var(--bm-aqua) 0%, var(--bm-canary) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dash-flag { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--bm-black); background: var(--bm-canary); border-radius: 999px; padding: .3rem .7rem; white-space: nowrap; }

.dash-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.dash-bar-2 { margin-bottom: .7rem; }
.dash-field { display: flex; align-items: center; gap: .45rem;
  background: var(--bm-mid); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: .24rem .3rem .24rem .75rem; }
.dash-field > span { font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bm-silver); white-space: nowrap; }
.dash-field select, .dash-inline-field select, .dash-metric {
  font-family: inherit; font-size: .78rem; font-weight: 500; color: #fff;
  background: var(--bm-black); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: .26rem 1.7rem .26rem .7rem; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23A0DAB9' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 9px;
}
select:focus-visible { outline: 2px solid var(--bm-aqua); outline-offset: 1px; }

.dash-field-menu { position: relative; padding: 0; }
.dash-field-menu > button, .dash-toggle, .dash-live {
  font-family: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--bm-mid);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  padding: .45rem .9rem; cursor: pointer; display: flex; align-items: center; gap: .4rem;
}
.dash-field-menu > button em { font-style: normal; font-size: .64rem; font-weight: 700;
  background: var(--bm-aqua); color: var(--bm-black); border-radius: 999px; padding: .05rem .38rem; }
.dash-toggle.is-on { background: var(--bm-canary); color: var(--bm-black); border-color: var(--bm-canary); }
.dash-menu { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 5;
  background: var(--bm-surface); border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  padding: .55rem; min-width: 240px; display: grid; gap: .05rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.6); max-height: 320px; overflow-y: auto; }
.dash-menu[hidden] { display: none; }
.dash-check { display: flex; align-items: center; gap: .5rem; font-size: .8rem;
  padding: .28rem .4rem; border-radius: 8px; cursor: pointer; }
.dash-check:hover { background: rgba(255,255,255,.06); }
.dash-check input { accent-color: var(--bm-aqua); cursor: pointer; }

.dash-live { margin-left: auto; color: var(--bm-silver); }
.dash-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--bm-silver); display: block; }
.dash-live.is-live { color: var(--bm-black); background: var(--bm-aqua); border-color: var(--bm-aqua); }
.dash-live.is-live i { background: var(--bm-black); animation: pulse 1.4s ease-in-out infinite; }

.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: .45rem; margin-bottom: .55rem; }
.dash-kpi { background: var(--bm-surface); border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .25rem; }
.dash-kpi-k { font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bm-silver); }
.dash-kpi-v { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.dash-accent-0 .dash-kpi-v { color: var(--bm-aqua); }
.dash-accent-1 .dash-kpi-v { color: var(--bm-canary); }
.dash-accent-2 .dash-kpi-v { color: var(--bm-pumpkin); }
.dash-accent-3 .dash-kpi-v { color: #fff; }
.dash-delta { font-size: .64rem; font-weight: 700; letter-spacing: 0; }
.dash-delta.up { color: var(--bm-aqua); } .dash-delta.down { color: var(--bm-pink); }

.dash-insight { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  background: var(--bm-surface); border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--bm-pumpkin); border-radius: 13px;
  padding: .65rem .9rem; margin-bottom: .55rem; font-size: .82rem; }
.dash-ins-k { font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bm-silver); }
.dash-insight b { font-weight: 700; }
.dash-insight b.up { color: var(--bm-aqua); } .dash-insight b.down { color: var(--bm-pink); }
.dash-ins-v { color: var(--bm-silver); font-size: .76rem; }
.dash-ins-sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); margin: 0 .4rem; }

.dash-panel { background: var(--bm-surface); border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px; padding: .8rem .9rem .9rem; margin-bottom: .55rem; }
.dash-panel-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
.dash-panel-title { font-weight: 700; font-size: .9rem; }
.dash-panel-meta { font-size: .72rem; color: var(--bm-aqua); font-weight: 600; margin-left: auto; }
.dash-inline-field { display: flex; align-items: center; gap: .4rem; }
.dash-inline-field > span { font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bm-silver); }

.dash-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
@media (max-width: 1000px) { .dash-charts { grid-template-columns: 1fr; } }
.dash-chart { margin-bottom: .55rem; }
.dash-chart .dash-panel-head { margin-bottom: .65rem; }
.dash-metric { font-weight: 700; }
.dash-hist { display: flex; align-items: flex-end; gap: 3px; height: 118px; position: relative; }
.dash-hbar { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; min-width: 0; position: relative; }
.dash-hval { font-size: .48rem; text-align: center; color: var(--bm-silver); margin-bottom: .15rem; white-space: nowrap; overflow: hidden; }
.dash-hfill { display: block; width: 100%; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--bm-aqua) 0%, rgba(160,218,185,.3) 100%); transition: height .3s ease; }
.dash-hprev { position: absolute; left: 0; right: 0; bottom: 14px; display: block;
  border-radius: 3px 3px 0 0; background: rgba(255,255,255,.14); }
.dash-hx { font-size: .48rem; text-align: center; color: var(--bm-silver); opacity: .55; margin-top: .2rem; }
.dash-annos { position: relative; height: 15px; margin-top: .2rem; }
.dash-anno { position: absolute; transform: translateX(-50%); font-size: .5rem; color: var(--bm-canary);
  white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dash-anno i { width: 1px; height: 5px; background: var(--bm-canary); display: block; }
.dash-chart-foot { font-size: .64rem; color: var(--bm-silver); margin: .6rem 0 0; }
.dash-chart-foot b.up { color: var(--bm-aqua); } .dash-chart-foot b.down { color: var(--bm-pink); }

.dash-funnel-wrap { overflow-x: auto; padding-bottom: .2rem; }
.dash-funnel { display: flex; align-items: flex-end; gap: 5px; min-width: 900px; }
.dash-fcol { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; transition: opacity .25s; }
.dash-fcol.is-muted { opacity: .26; }
.dash-fval { font-size: .62rem; font-weight: 700; text-align: center; white-space: nowrap; }
.dash-fcount { font-size: .52rem; text-align: center; color: var(--bm-silver); margin-bottom: .2rem; white-space: nowrap; }
.dash-ftrack { display: flex; align-items: flex-end; gap: 2px; height: 180px;
  background: var(--bm-mid); border-radius: 5px; overflow: hidden; padding: 0 1px; }
.dash-fbar, .dash-fbar2 { display: block; flex: 1 1 0; border-radius: 5px 5px 0 0; transition: height .35s ease; background: var(--bm-aqua); }
.dash-fbar2 { background: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 3px, rgba(255,255,255,.2) 3px 6px); }
.dash-fbar2[hidden] { display: none; }
.dash-fcol:nth-child(n+5) .dash-fbar { background: var(--bm-canary); }
.dash-fcol:nth-child(n+9) .dash-fbar { background: var(--bm-pumpkin); }
.dash-fcol:nth-child(n+13) .dash-fbar { background: var(--bm-pink); }
.dash-fcol:nth-child(n+16) .dash-fbar { background: var(--bm-rose); }
.dash-flabel { display: block; position: relative; height: 90px; }
.dash-flabel i { position: absolute; top: 7px; right: 50%; transform: rotate(-45deg); transform-origin: right top;
  font-style: normal; font-size: .66rem; white-space: nowrap; color: var(--bm-silver); }
.dash-legend { display: flex; align-items: center; gap: .4rem; font-size: .7rem; color: var(--bm-silver); margin: .6rem 0 0; }
.dash-legend[hidden] { display: none; }
.dash-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: .6rem; }
.dash-key-1 { background: var(--bm-aqua); margin-left: 0; }
.dash-key-2 { background: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 3px, rgba(255,255,255,.2) 3px 6px); }

.dash-note { font-size: .64rem; line-height: 1.6; color: var(--bm-silver); opacity: .75; margin: .9rem 0 0; }
.case-body ul li {
  color: var(--ink-2);
  font-size: 1.02rem;
  margin-bottom: .4em;
}
.case-body h4.lbl-problem { color: var(--bad); border-bottom-color: var(--bad); }
.case-body h4.lbl-outcome { color: var(--good); border-bottom-color: var(--good); }
.case-body h4.lbl-problem + p.case-tldr { border-left-color: var(--bad); }
.case-body h4.lbl-outcome + p.case-tldr { border-left-color: var(--good); }
/* a tldr written as two beats: the spans stack with a gap, so it still reads
   as one block behind one rule */
.case-body p.case-tldr span { display: block; }
.case-body p.case-tldr span + span { margin-top: .55em; }
.case-body p.case-tldr {
  font-family: var(--display);
  font-size: 1.2rem; font-weight: 600; line-height: 1.38;
  letter-spacing: -0.03em; color: var(--ink);
  padding: .1em 0 .1em 1.15em;
  border-left: 3px solid var(--ink);
  margin: 0 0 1.3em;
}

/* The one line a recruiter should leave the case with. Rule above it so it
   reads as a close, not as another paragraph. */
.case-body p.case-bottom {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--ink);
  border-top: 2px solid var(--ink);
  padding-top: .9rem;
  margin: 2em 0 0;
}
.case-body p.case-bottom strong { font-weight: 700; }

/* inline API names and flags, set in mono so they read as literals */
code {
  font-family: var(--mono);
  font-size: .88em;
  color: var(--ink);
  background: var(--surface);
  padding: .1em .35em;
  border-radius: 3px;
}

.charts + .case-body { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- chart figures ---------- */
.charts {
  display: grid;
  gap: clamp(.65rem, 1.2vw, 1rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.charts + .charts { margin-top: clamp(.65rem, 1.2vw, 1rem); }
.charts-1 { grid-template-columns: 1fr; }
.charts-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.charts-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.chart {
  margin: 0; padding: .85rem;
  border: 1px solid var(--rule); border-radius: 14px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.chart img { width: 100%; border-radius: 4px; }
/* open the full-resolution file in a new tab; some of these are 3000px wide */
.chart-zoom { display: block; border: none; cursor: zoom-in; }
.chart-zoom:hover { border: none; }
.chart-zoom:hover img { opacity: .9; }
/* full container width: a caption that wraps earlier than the chart above it
   reads as a mistake */
.charts-caption {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: .75rem 0 0;
}

/* ---------- video row (click-to-play YouTube, true shapes) ----------
   One justified row: every card the same height, width set by the video's
   own aspect ratio, which each cell carries as --ar. */
.videos { margin-top: clamp(2rem, 4vw, 3rem); }
.videos-label {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 1rem;
}
/* Mosaic: a 12-column grid. The column span sets the width, aspect-ratio sets
   the shape. Do NOT size these with grid-row spans — row height is independent
   of column width, so spans give cells that are close to the right shape but
   never exactly it, and a YouTube iframe letterboxes inside the difference. */
/* Each row is a grid whose column widths are in the same proportion as the
   clips' aspect ratios. Width/ratio is then constant across the row, so every
   clip lands on exactly the same height, the row always fills the container,
   and nothing can wrap. The fr values are written per row in the markup.
   Do not swap this for fixed heights and auto widths: borders and gaps push
   the total a few pixels past the container and the last clip drops to its
   own line. */
.video-row {
  display: grid;
  gap: clamp(.5rem, 1vw, .85rem);
}
.video-row + .video-row { margin-top: clamp(.5rem, 1vw, .85rem); }

.yt-cell {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.yt-wide   { aspect-ratio: 16 / 9; }
.yt-square { aspect-ratio: 1 / 1; }
.yt-tall   { aspect-ratio: 9 / 16; }

/* On a phone the proportional columns get too narrow to read, so drop the
   per-row template: 16:9 goes full width, verticals and squares pair up. */
@media (max-width: 700px) {
  .video-row {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: none !important;
  }
  .yt-wide { flex: 1 1 100%; }
  .yt-tall, .yt-square { flex: 1 1 calc(50% - .5rem); }
}
.yt { display: block; width: 100%; height: 100%; border: 0; position: relative; cursor: pointer; }
.yt:hover { border: 0; }
.yt-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease, opacity .2s ease;
}
.yt:hover .yt-thumb { transform: scale(1.03); opacity: .82; }
.yt-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.yt-play::after {
  content: "";
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #FFFFFF;
  margin-left: 4px;
}
.yt:hover .yt-play { transform: translate(-50%, -50%) scale(1.1); }
.yt-frame { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- tools: a list, not a wall of chips ---------- */
.stack-key {
  font-family: var(--mono);
  font-size: .72rem; line-height: 1.6;
  color: var(--ink-3); margin: 0 0 2rem;
  max-width: 70ch;
}
.stack-key b { color: var(--ink); font-weight: 500; }
.stack-row {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1rem 2rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.stack-row:last-child { border-bottom: 1px solid var(--rule); }
.stack-label {
  font-family: var(--display);
  font-weight: 700; font-size: 1rem;
  letter-spacing: -0.025em; color: var(--ink); margin: 0;
}
.stack-items {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-3);
}
.stack-items b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .stack-row { grid-template-columns: 1fr; gap: .4rem; }
}

/* a number worth stopping on, inside running text */
.rule-em {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- brand list ---------- */
.brands {
  margin: 1.25rem 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.5;
  letter-spacing: -0.025em;
  color: var(--ink);
}

/* ---------- media figures & placeholders ---------- */
figure.media { margin: 2.5rem 0; padding: 0; }
figure.media > img,
figure.media > video {
  width: 100%; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--rule);
}
figure.media figcaption {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .01em;
  color: var(--ink-3); margin-top: .75rem; padding-left: .25rem;
}
figure.media figcaption code {
  color: var(--ink); background: var(--surface);
  padding: .1em .35em; border-radius: 3px; font-size: .95em;
}
.placeholder {
  aspect-ratio: 16/9;
  background: var(--surface);
  border: 1px dashed var(--rule-2);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  font-family: var(--mono); font-size: .78rem;
  text-align: center; padding: 1rem;
}

/* ---------- footer ---------- */
.footer {
  padding: clamp(3.5rem, 7vw, 5rem) 0 2.5rem;
  background: var(--ink);
  color: var(--bg);
}
.footer-inner {
  display: grid; grid-template-columns: 1fr auto;
  gap: 2rem; align-items: end;
}
.footer-tagline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.05; letter-spacing: -0.045em;
  margin: 0; color: var(--bg);
}
.footer-links {
  display: grid; gap: .5rem;
  font-family: var(--mono); font-size: .82rem; text-align: right;
}
.footer-links a {
  color: var(--bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.footer-links a:hover { border-color: var(--bg); }
.footer-fine {
  margin-top: 3rem;
  padding-top: 1.25rem;
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .01em;
  color: var(--ink-3);
  display: flex; justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { text-align: left; }
  .footer-fine { flex-direction: column; gap: .5rem; }
}