/* roasdept design system, paper canvas.
   White page, ink type, one purple. The deliverable is the thing on the page:
   a dashboard, a chart, a number. Colour is spent on data, never on decoration.
   Every value comes from the tokens below. Nothing is defined only in a media query. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;

  --paper: #FFFFFF;
  --paper-2: #F8F6FC;
  --paper-3: #F2EFFA;
  --paper-4: #EAE5F6;

  --ink: #14101C;
  --ink-2: #423B52;
  --ink-3: #6C6480;
  --ink-4: #9A93A9;

  --brand: #7C1AFC;
  --brand-deep: #4E0CA8;
  --brand-soft: #F2E8FE;
  --brand-line: rgba(124, 26, 252, 0.22);

  /* categorical data hues, fixed order, never cycled */
  --d1: #7C1AFC;
  --d2: #14101C;
  --d3: #B58CFF;
  --d4: #C9C2D8;

  --line: rgba(20, 16, 28, 0.11);
  --line-2: rgba(20, 16, 28, 0.065);
  --line-3: rgba(20, 16, 28, 0.035);

  --shadow-s: 0 1px 2px rgba(20, 16, 28, 0.05), 0 4px 14px -8px rgba(20, 16, 28, 0.14);
  --shadow-m: 0 2px 6px rgba(20, 16, 28, 0.05), 0 18px 48px -22px rgba(20, 16, 28, 0.28);
  --shadow-l: 0 4px 10px rgba(20, 16, 28, 0.045), 0 40px 90px -40px rgba(20, 16, 28, 0.34);

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 34px;

  --maxw: 1180px;
  --maxw-wide: 1420px;

  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-slat: cubic-bezier(0.7, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- layout */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 30px; }
.wrap-wide { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 30px; }

section { position: relative; }

.pad { padding: 108px 0; }
.pad-s { padding: 74px 0; }
.pad-t { padding-top: 108px; }
.pad-b { padding-bottom: 108px; }

.tint { background: var(--paper-2); }
.tint-2 { background: var(--paper-3); }

.rule { height: 1px; background: var(--line-2); border: 0; margin: 0; }

/* ------------------------------------------------------------ typography */

h1, h2, h3, h4, h5 {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.1vw, 4.6rem); letter-spacing: -0.042em; }
h2 { font-size: clamp(1.95rem, 3.5vw, 2.95rem); letter-spacing: -0.038em; }
h3 { font-size: 1.16rem; letter-spacing: -0.02em; line-height: 1.28; }
h4 { font-size: 1rem; letter-spacing: -0.015em; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin-top: 22px;
}

.small { font-size: 0.92rem; }
.tiny { font-size: 0.8rem; color: var(--ink-3); line-height: 1.55; }

.eyebrow {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 20px;
}
.eyebrow-q {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-4);
  margin: 0 0 20px;
}
.mono { font-family: var(--mono); }

/* the serif is reserved for figures and for one accent word in a headline */
.fig { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
em.acc { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; color: var(--brand); }

/* ---------------------------------------------------------------- motion */

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.07s; }
.reveal.d2 { transition-delay: 0.14s; }
.reveal.d3 { transition-delay: 0.21s; }

/* headline words rise out of a mask */
.rw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.rw > i {
  display: inline-block; font-style: inherit;
  transform: translateY(105%);
  transition: transform 0.9s var(--ease);
}
.in .rw > i, .rw.in > i { transform: none; }
.rw:nth-of-type(1) > i { transition-delay: 0.02s; }
.rw:nth-of-type(2) > i { transition-delay: 0.09s; }
.rw:nth-of-type(3) > i { transition-delay: 0.16s; }
.rw:nth-of-type(4) > i { transition-delay: 0.23s; }
.rw:nth-of-type(5) > i { transition-delay: 0.30s; }
.rw:nth-of-type(6) > i { transition-delay: 0.37s; }
.rw:nth-of-type(7) > i { transition-delay: 0.44s; }
.rw:nth-of-type(8) > i { transition-delay: 0.51s; }
.rw:nth-of-type(9) > i { transition-delay: 0.58s; }
.rw:nth-of-type(10) > i { transition-delay: 0.65s; }

/* ---------------------------------------- the frame: a screenshot that lands */
/* Replaces the louvre reveal. A frame rises the last thirty pixels into place,
   its shadow arrives with it, and one light pass crosses the glass. */

.shot { position: relative; }
.shot > .artifact {
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  box-shadow: 0 0 0 rgba(20, 16, 28, 0);
  transition: opacity 0.6s var(--ease), transform 1.05s var(--ease),
              box-shadow 1.3s var(--ease) 0.08s;
  will-change: transform, opacity;
}
.shot.in > .artifact { opacity: 1; transform: none; box-shadow: var(--shadow-l); }

.shot .sheen {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  overflow: hidden; border-radius: var(--r-m);
}
.shot .sheen > i {
  position: absolute; top: -55%; bottom: -55%; left: 0; width: 32%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, 0.58) 48%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-200%) rotate(9deg);
}
.shot.in .sheen > i { animation: sheen 1.35s var(--ease) 0.42s 1 both; }
@keyframes sheen {
  from { transform: translateX(-200%) rotate(9deg); }
  to   { transform: translateX(440%) rotate(9deg); }
}

/* the picture inside drifts a little slower than the page around it */
.shot-media { overflow: hidden; }
.shot-media img {
  display: block; width: 100%; height: auto;
  transform: translate3d(0, calc(var(--par, 0) * 1px), 0) scale(1.05);
}

/* a figure that counts up to itself when it arrives */
.count { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-size: 0.88rem; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 24px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font-size: 0.93rem; font-weight: 600; letter-spacing: -0.012em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; white-space: nowrap; isolation: isolate;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
/* the sweep is a pseudo element so the label never moves */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sweep, var(--ink));
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}
.btn:hover::before { transform: none; }

.btn-primary { background: var(--brand); color: #fff; --sweep: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; --sweep: var(--brand); }
.btn-ghost { border-color: var(--line); color: var(--ink); --sweep: var(--ink); }
.btn-ghost:hover { color: #fff; border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); --sweep: var(--brand); }
.btn-light:hover { color: #fff; }

.btn .arrow { transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.93rem; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tlink:hover { color: var(--brand); border-color: var(--brand-line); }
.tlink .arrow { transition: transform 0.35s var(--ease); }
.tlink:hover .arrow { transform: translateX(4px); }

/* -------------------------------------------------------------------- nav */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  padding: 16px 0;
  transition: padding 0.4s var(--ease);
}
.nav-inner {
  max-width: var(--maxw-wide); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  padding: 10px 12px 10px 24px;
  border-radius: 999px; position: relative;
  border: 1px solid transparent;
  transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease),
              border-color 0.45s var(--ease), max-width 0.5s var(--ease), padding 0.4s var(--ease);
}
.nav.compact { padding: 10px 0; }
.nav.compact .nav-inner {
  max-width: 1000px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-m);
}
.wordmark { display: block; flex: none; }
.wordmark img { width: 128px; height: auto; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > a, .nav-trigger {
  display: inline-block; padding: 9px 14px; border-radius: 999px;
  font-size: 0.89rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-links > a:hover, .nav-trigger:hover { color: var(--ink); background: var(--paper-3); }
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--paper-3); }

.has-menu { position: static; }
.nav-trigger::after {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: 0.55;
}
.menu {
  position: absolute; top: calc(100% + 14px); left: 0; right: 0;
  padding: 14px; border-radius: var(--r-l);
  background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-l);
  opacity: 0; visibility: hidden;
  clip-path: inset(0 0 100% 0 round var(--r-l));
  transition: opacity 0.25s var(--ease), visibility 0s linear 0.4s,
              clip-path 0.5s var(--ease-slat);
}
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-menu:hover .menu, .has-menu:focus-within .menu {
  opacity: 1; visibility: visible;
  clip-path: inset(0 0 0 0 round var(--r-l));
  transition: opacity 0.2s var(--ease), visibility 0s, clip-path 0.55s var(--ease-slat);
}
.menu-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.menu-grid a {
  display: block; padding: 16px 15px 17px; border-radius: var(--r-m);
  text-decoration: none; color: var(--ink);
  transform: translateY(10px); opacity: 0;
  transition: background 0.2s ease, transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.has-menu:hover .menu-grid a, .has-menu:focus-within .menu-grid a { transform: none; opacity: 1; }
.menu-grid a:nth-child(1) { transition-delay: 0.06s, 0.06s, 0.06s; }
.menu-grid a:nth-child(2) { transition-delay: 0.06s, 0.11s, 0.11s; }
.menu-grid a:nth-child(3) { transition-delay: 0.06s, 0.16s, 0.16s; }
.menu-grid a:nth-child(4) { transition-delay: 0.06s, 0.21s, 0.21s; }
.menu-grid a:nth-child(5) { transition-delay: 0.06s, 0.26s, 0.26s; }
.menu-grid a:hover { background: var(--paper-2); }
.menu-grid a svg { display: block; color: var(--brand); margin-bottom: 12px; }
.menu-grid a b { display: block; font-size: 0.93rem; font-weight: 600; letter-spacing: -0.01em; }
.menu-grid a span { display: block; font-size: 0.79rem; color: var(--ink-3); margin-top: 5px; line-height: 1.5; }
.menu-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 8px; padding: 14px 15px 4px; border-top: 1px solid var(--line-3);
  font-size: 0.83rem; color: var(--ink-3);
}

.nav-cta { padding: 11px 20px; font-size: 0.87rem; }

/* the burger, and the louvre sheet it opens */
.burger {
  display: none; width: 44px; height: 44px; flex: none; border: 0; cursor: pointer;
  border-radius: 999px; background: var(--paper-3);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger i { display: block; width: 17px; height: 1.6px; border-radius: 2px; background: var(--ink); transition: transform 0.35s var(--ease); }

.sheet {
  position: fixed; inset: 0; z-index: 100;
  visibility: hidden;
}
.sheet.open { visibility: visible; }
.sheet-ground {
  position: absolute; inset: 0; background: var(--ink);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.62s var(--ease-slat);
}
.sheet.open .sheet-ground { clip-path: inset(0 0 0 0); }
.sheet-body {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px 30px 40px;
  opacity: 0; transition: opacity 0.3s ease 0.1s;
  overflow-y: auto;
}
.sheet.open .sheet-body { opacity: 1; transition-delay: 0.30s; }
.sheet-close {
  position: absolute; top: 24px; right: 24px; width: 44px; height: 44px;
  border: 0; border-radius: 999px; background: rgba(255,255,255,0.1); color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.sheet-index { display: flex; flex-direction: column; gap: 2px; margin-top: 58px; }
.sheet-index a {
  display: flex; align-items: baseline; gap: 16px; padding: 12px 4px;
  color: #fff; text-decoration: none;
  font-size: clamp(1.9rem, 7vw, 2.6rem); font-weight: 700; letter-spacing: -0.04em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color 0.25s var(--ease), padding-left 0.35s var(--ease);
}
.sheet-index a:hover { color: #B58CFF; padding-left: 14px; }
.sheet.open .sheet-index a { animation: sheetrise 0.6s var(--ease) both; }
.sheet.open .sheet-index a:nth-child(1) { animation-delay: 0.26s; }
.sheet.open .sheet-index a:nth-child(2) { animation-delay: 0.32s; }
.sheet.open .sheet-index a:nth-child(3) { animation-delay: 0.38s; }
.sheet.open .sheet-index a:nth-child(4) { animation-delay: 0.44s; }
.sheet.open .sheet-index a:nth-child(5) { animation-delay: 0.50s; }
.sheet.open .sheet-index a:nth-child(6) { animation-delay: 0.56s; }
.sheet.open .sheet-index a:nth-child(7) { animation-delay: 0.62s; }
@keyframes sheetrise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.sheet-index a b { font-family: var(--mono); font-size: 0.62rem; font-weight: 500; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; }
.sheet-foot { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 34px; }
.sheet-foot a.mail { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 0.92rem; }
.sheet-foot a.mail:hover { color: #fff; }

/* ------------------------------------------------------------------- hero */

.hero { padding: 168px 0 88px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 64px; align-items: center; }
.hero-grid.svc { grid-template-columns: 1.22fr 0.78fr; align-items: start; }
.hero-grid.rep { grid-template-columns: 0.94fr 1.06fr; }

/* a single soft purple wash, top right, is the only ambient colour on the page */
.hero > * { position: relative; z-index: 1; }
.hero::before {
  content: ""; position: absolute; z-index: 0;
  top: -320px; right: -180px; width: 780px; height: 780px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,26,252,0.13), rgba(124,26,252,0) 68%);
  pointer-events: none;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* the fine grid behind a hero, drawn not painted */
.grid-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--line-3) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line-3) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 30%, transparent 78%);
}

/* ------------------------------------------------------------------ cards */

.card {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-l);
  padding: 30px; box-shadow: var(--shadow-s);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
a.card { display: block; text-decoration: none; }
a.card:hover { box-shadow: var(--shadow-m); transform: translateY(-3px); border-color: var(--line); }
.card-flat { box-shadow: none; background: var(--paper-2); border-color: transparent; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.svc-icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); margin-bottom: 20px;
}
.grid-svc .card h3 { margin-bottom: 8px; }
.grid-svc .card p { color: var(--ink-3); font-size: 0.92rem; margin: 0; }

.dots { list-style: none; margin: 0; padding: 0; }
.dots li { position: relative; padding-left: 20px; margin-bottom: 11px; font-size: 0.95rem; color: var(--ink-2); }
.dots li:last-child { margin-bottom: 0; }
.dots li::before {
  content: ""; position: absolute; left: 2px; top: 0.66em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
}

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: flex; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line-2); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before {
  content: "0" counter(s); font-family: var(--mono); font-size: 0.66rem; color: var(--brand);
  letter-spacing: 0.08em; padding-top: 4px; flex: none;
}
.steps li b { display: block; color: var(--ink); font-size: 0.98rem; margin-bottom: 4px; letter-spacing: -0.015em; }
.steps li span { font-size: 0.93rem; color: var(--ink-3); }

/* ----------------------------------------------------------------- figures */

.cellgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-m); overflow: hidden; background: #fff; }
.cellgrid.three { grid-template-columns: repeat(3, 1fr); }
.cellgrid.two { grid-template-columns: repeat(2, 1fr); }
.cell { padding: 26px 24px; border-right: 1px solid var(--line-2); }
.cell:last-child { border-right: 0; }
.cell .k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); display: block; }
.cell .v {
  display: block; margin: 12px 0 8px; color: var(--ink);
  font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.015em;
}
.cell .v em { font-style: normal; color: var(--brand); }
.cell .n { font-size: 0.84rem; color: var(--ink-3); line-height: 1.5; margin: 0; }

.kv { display: grid; grid-template-columns: 1fr auto; gap: 0; }
.kv .k, .kv .v { padding: 13px 0; border-top: 1px solid var(--line-2); font-size: 0.93rem; }
.kv .k { color: var(--ink-3); }
.kv .v { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv .v em { font-style: normal; color: var(--brand); }
.kv > :nth-child(1), .kv > :nth-child(2) { border-top: 0; }

/* ------------------------------------------------------------------ charts */

.chart { margin: 0; min-width: 0; }
.chart figcaption {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-4); margin-top: 16px; line-height: 1.6;
}
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.chart-head h3 { font-size: 1.02rem; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--ink-3); }
.legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* horizontal bars */
.bars { display: flex; flex-direction: column; gap: 3px; }
.bar {
  display: grid; grid-template-columns: minmax(96px, 154px) 1fr auto; gap: 16px;
  align-items: center; padding: 7px 0; position: relative;
}
.bar .bl { font-size: 0.84rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .bt { height: 12px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.bar .bf {
  display: block; height: 100%; border-radius: 3px; background: var(--d1);
  width: 0; transition: width 1.05s var(--ease);
}
.in .bar .bf { width: var(--w); }
.bar .bv { font-family: var(--mono); font-size: 0.79rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 62px; text-align: right; }
.bar.alt .bf { background: var(--d3); }
.bar.mute .bf { background: var(--d4); }
.bar:hover .bl { color: var(--ink); }

/* a bar row that carries a second, secondary number */
.bar .bv small { color: var(--ink-4); margin-left: 7px; }

/* columns */
.cols { display: flex; align-items: flex-end; gap: 10px; height: 210px; padding-top: 10px; }
.col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.col .cf {
  width: 100%; border-radius: 5px 5px 0 0; background: var(--d1);
  height: 0; transition: height 1.05s var(--ease);
}
.in .col .cf { height: var(--h); }
.col.alt .cf { background: var(--d3); }
.col .cv { font-family: var(--mono); font-size: 0.76rem; color: var(--ink); margin-bottom: 8px; white-space: nowrap; }
.col .cl { font-size: 0.74rem; color: var(--ink-3); margin-top: 10px; text-align: center; }

/* the split: one stacked bar that carries a whole argument */
.split-bar { display: flex; height: 62px; border-radius: var(--r-s); overflow: hidden; background: var(--paper-3); }
.split-bar > span {
  display: flex; align-items: center; padding: 0 18px; color: #fff;
  font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden;
  width: 0; transition: width 1.15s var(--ease);
}
.in .split-bar > span { width: var(--w); }
.split-bar .s1 { background: var(--d1); }
.split-bar .s2 { background: var(--ink); }
.split-legend { display: flex; justify-content: space-between; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.split-legend div { font-size: 0.84rem; color: var(--ink-3); }
.split-legend b { display: block; color: var(--ink); font-size: 0.95rem; }

/* scatter, drawn as inline svg */
.scatter { width: 100%; height: auto; display: block; }
.scatter .ax { stroke: var(--line); stroke-width: 1; }
.scatter .gl { stroke: var(--line-3); stroke-width: 1; }
.scatter .pt { fill: var(--d1); opacity: 0; transition: opacity 0.5s ease, r 0.5s var(--ease); }
.in .scatter .pt { opacity: 0.75; }
.scatter .pt.hi { fill: var(--ink); }
.scatter .lb { font-family: var(--mono); font-size: 9px; fill: var(--ink-4); }
.scatter .an { font-family: var(--sans); font-size: 11px; fill: var(--ink-2); font-weight: 500; }

/* data table, the export as it came */
.dtable { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.dtable th {
  font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-4); text-align: left; font-weight: 500; padding: 0 14px 11px 0; border-bottom: 1px solid var(--line);
}
.dtable th.r, .dtable td.r { text-align: right; padding-right: 0; padding-left: 18px; }
.dtable td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line-3); color: var(--ink-2); }
.dtable td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.dtable tr:hover td { background: var(--paper-2); }
.dtable td b { color: var(--brand); font-weight: 600; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }

/* ---------------------------------------------------------------- artifact */

/* a screenshot is presented as what it is: a window onto somebody's dashboard */
.artifact { border-radius: var(--r-m); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-m); overflow: hidden; }
.artifact-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); background: var(--paper-2); }
.artifact-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.artifact-bar span { font-family: var(--mono); font-size: 0.63rem; color: var(--ink-4); margin-left: 8px; letter-spacing: 0.04em; }
.artifact-cap {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-4); margin-top: 14px; line-height: 1.6;
}

/* ----------------------------------------------------------------- panels */

.panel {
  border-radius: var(--r-xl); padding: clamp(34px, 5vw, 62px);
  background: var(--paper-2); border: 1px solid var(--line-2);
}
.panel-ink {
  border-radius: var(--r-xl); padding: clamp(34px, 5vw, 62px);
  background: var(--ink); color: rgba(255,255,255,0.72); position: relative; overflow: hidden;
}
.panel-ink h2, .panel-ink h3, .panel-ink h4 { color: #fff; }
.panel-ink .eyebrow { color: #B58CFF; }
.panel-ink .dots li { color: rgba(255,255,255,0.72); }
.panel-ink .dots li::before { background: #B58CFF; }
.panel-ink .kv .k { color: rgba(255,255,255,0.5); }
.panel-ink .kv .v { color: #fff; }
.panel-ink .kv .k, .panel-ink .kv .v { border-color: rgba(255,255,255,0.1); }
.panel-ink::before {
  content: ""; position: absolute; top: -180px; right: -140px; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,26,252,0.5), rgba(124,26,252,0) 66%); pointer-events: none;
}
.panel-ink > * { position: relative; }
.panel-ink .steps li { border-color: rgba(255,255,255,0.12); }
.panel-ink .steps li::before { color: #B58CFF; }
.panel-ink .steps li b { color: #fff; }
.panel-ink .steps li span { color: rgba(255,255,255,0.62); }
.panel-ink .tlink { color: #fff; border-color: rgba(255,255,255,0.2); }
.panel-ink .tlink:hover { color: #B58CFF; border-color: #B58CFF; }

.panel-split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }

.quote { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; letter-spacing: -0.03em; color: var(--ink); font-weight: 600; text-wrap: balance; }

/* ----------------------------------------------------------------- ticker */

.ticker { overflow: hidden; padding: 15px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--paper-2); }
.ticker-track { display: flex; width: max-content; animation: slide 54s linear infinite; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 11px; padding: 0 30px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-3); white-space: nowrap;
}
.ticker-item b { color: var(--ink); font-weight: 500; }
.ticker-item::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); margin-left: 20px; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes slide { from { transform: none; } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------- case study */

.cs-layout { display: grid; grid-template-columns: 226px 1fr; gap: 62px; align-items: start; }
.cs-layout > * { min-width: 0; }
.cs { min-width: 0; }
.csindex { position: sticky; top: 110px; }
.csindex h5 { font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 14px; font-weight: 500; }
.csindex a {
  display: flex; gap: 11px; padding: 8px 0; font-size: 0.85rem; color: var(--ink-3); text-decoration: none;
  border-top: 1px solid var(--line-3); transition: color 0.25s ease;
}
.csindex a:first-of-type { border-top: 0; }
.csindex a b { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-4); font-weight: 400; flex: none; }
.csindex a:hover { color: var(--ink); }

.cs { scroll-margin-top: 100px; padding-bottom: 78px; }
.cs + .cs { border-top: 1px solid var(--line-2); padding-top: 60px; }
.cs .csnum { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.15em; color: var(--brand); display: block; margin-bottom: 16px; white-space: nowrap; }
figure.shotwrap { margin: 0; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; margin-top: 30px; }
.two-up .artifact-cap { margin-top: 10px; }
.cs .csnote { font-size: 0.83rem; color: var(--ink-3); line-height: 1.6; margin-top: 20px; padding-left: 15px; border-left: 2px solid var(--line); }

.case-fig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.case-fig .v { font-family: var(--serif); font-size: 2.1rem; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.case-fig .k { font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: 9px; }

/* ---------------------------------------------------------------- results */

.flag { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.flag > div { padding: 0 26px; border-left: 1px solid var(--line-2); }
.flag > div:first-child { padding-left: 0; border-left: 0; }
.flag .fnum { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flag .flab { font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: 10px; }
.flag .fnote { font-size: 0.83rem; color: var(--ink-3); margin-top: 8px; }

.result { border-radius: var(--r-l); border: 1px solid var(--line-2); background: #fff; padding: 30px; box-shadow: var(--shadow-s); }
.result .when { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.nda {
  font-size: 0.8rem; color: var(--ink-3); line-height: 1.6; margin-top: 20px;
  padding: 14px 16px; border-radius: var(--r-s); background: var(--paper-2);
}
.nda b { color: var(--ink-2); font-weight: 600; }

/* ------------------------------------------------------------------ forms */

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { margin-bottom: 18px; }
.field label {
  display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-family: inherit; font-size: 0.95rem; transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.field textarea { min-height: 132px; resize: vertical; }
.field .hint { font-size: 0.78rem; color: var(--ink-4); margin-top: 7px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ----------------------------------------------------------------- footer */

.footer { background: var(--ink); color: rgba(255,255,255,0.6); padding: 78px 0 34px; margin-top: 0; }
.footer .wordmark img { width: 132px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.footer h5 { font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin: 0 0 16px; font-weight: 500; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer a { color: rgba(255,255,255,0.66); text-decoration: none; font-size: 0.9rem; transition: color 0.25s ease; }
.footer a:hover { color: #fff; }
.footer .small { color: rgba(255,255,255,0.5); }
.footer-base {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 52px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.09);
  font-size: 0.8rem; color: rgba(255,255,255,0.42);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1040px) {
  .cs-layout { grid-template-columns: 1fr; gap: 34px; }
  .csindex { position: static; }
  .csindex .csindex-links { display: flex; flex-wrap: wrap; gap: 6px; }
  .csindex a { border-top: 0; padding: 7px 12px; border-radius: 999px; background: var(--paper-2); font-size: 0.79rem; }
  .cellgrid { grid-template-columns: repeat(2, 1fr); }
  .cell { border-bottom: 1px solid var(--line-2); }
  .cell:nth-child(2n) { border-right: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 940px) {
  .hero-grid, .hero-grid.svc, .hero-grid.rep, .grid-3, .grid-2, .grid-svc,
  .panel-split, .case-fig, .field-row { grid-template-columns: 1fr; }
  .flag { grid-template-columns: 1fr; gap: 26px; }
  .flag > div { padding: 0 0 0 18px; border-left: 2px solid var(--line-2); }
  .flag > div:first-child { padding-left: 18px; border-left: 2px solid var(--line-2); }
  .hero { padding: 138px 0 66px; }
  .pad { padding: 76px 0; }
  .pad-s { padding: 56px 0; }
  .pad-t { padding-top: 76px; }
  .pad-b { padding-bottom: 76px; }
}

@media (max-width: 880px) {
  .two-up { grid-template-columns: 1fr; gap: 22px; }
  .nav-links, .nav-cta { display: none; }
  .burger { display: flex; }
  .nav-inner {
    max-width: none; margin: 0 16px; padding: 8px 8px 8px 20px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-color: var(--line-2); box-shadow: var(--shadow-s);
  }
  .nav.compact .nav-inner { max-width: none; }
}

@media (max-width: 620px) {
  .dtable { min-width: 520px; }
  .cellgrid { grid-template-columns: 1fr; }
  .cell { border-right: 0; }
  .bar { grid-template-columns: 1fr auto; gap: 10px; }
  .bar .bt { grid-column: 1 / -1; }
  .cols { height: 168px; }
  .col .cl { font-size: 0.66rem; }
  .wrap, .wrap-wide { padding: 0 20px; }
  .card, .result { padding: 24px; }
}

/* ==========================================================================
   the alive layer: things that respond to the reader
   ========================================================================== */

/* a hairline in the nav pill that reports how far down the page you are */
.nav-prog {
  position: absolute; left: 26px; right: 26px; bottom: 5px; height: 2px;
  border-radius: 2px; background: var(--line-3); overflow: hidden;
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.nav.compact .nav-prog { opacity: 1; }
.nav-prog > i {
  display: block; height: 100%; width: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand));
  transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* cards carry a soft light under the pointer */
.card { position: relative; overflow: hidden; }
.card > * { position: relative; z-index: 1; }
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.4s var(--ease);
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%),
              rgba(124, 26, 252, 0.13), rgba(124, 26, 252, 0) 62%);
}
.card:hover::after { opacity: 1; }

/* ------------------------------------------------- the flow: a process line */

.flow { display: flex; flex-direction: column; }
.flow-step { position: relative; padding: 0 0 40px 56px; }
.flow-step:last-child { padding-bottom: 0; }
.flow-step .fdot {
  position: absolute; left: 5px; top: 4px; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid var(--line); background: #fff;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
}
.flow-step.in .fdot {
  background: var(--brand); border-color: var(--brand);
  box-shadow: 0 0 0 6px var(--brand-soft);
}
.flow-step .fline {
  position: absolute; left: 12px; top: 22px; bottom: -4px; width: 2px;
  background: var(--brand); transform: scaleY(0); transform-origin: top;
  transition: transform 0.7s var(--ease) 0.16s;
}
.flow-step:last-child .fline { display: none; }
.flow-step.in .fline { transform: scaleY(1); }
.flow-step .fbg {
  position: absolute; left: 12px; top: 22px; bottom: -4px; width: 2px;
  background: var(--line-2);
}
.flow-step:last-child .fbg { display: none; }
.flow-step h3 { font-size: 1.14rem; letter-spacing: -0.02em; margin-bottom: 8px; }
.flow-step p { color: var(--ink-3); font-size: 0.95rem; margin: 0; max-width: 54ch; }
.flow-step .fwhen {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--brand); display: block; margin-bottom: 7px;
}
.panel-ink .flow-step .fdot { border-color: rgba(255, 255, 255, 0.25); background: var(--ink); }
.panel-ink .flow-step.in .fdot { background: #B58CFF; border-color: #B58CFF; box-shadow: 0 0 0 6px rgba(181, 140, 255, 0.16); }
.panel-ink .flow-step .fbg { background: rgba(255, 255, 255, 0.14); }
.panel-ink .flow-step .fline { background: #B58CFF; }
.panel-ink .flow-step h3 { color: #fff; }
.panel-ink .flow-step p { color: rgba(255, 255, 255, 0.64); }
.panel-ink .flow-step .fwhen { color: #B58CFF; }

/* ------------------------------------------- the engine: expertise, in a picture */

.engine { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.engine-core {
  grid-column: 2; grid-row: 2; position: relative;
  border-radius: var(--r-l); background: var(--ink); color: #fff;
  padding: 30px 24px; text-align: center; z-index: 2;
  box-shadow: var(--shadow-l);
}
.engine-core b { display: block; font-size: 1.06rem; letter-spacing: -0.02em; }
.engine-core span { display: block; margin-top: 8px; font-size: 0.83rem; color: rgba(255, 255, 255, 0.6); }
.engine-core::before {
  content: ""; position: absolute; inset: -14px; border-radius: calc(var(--r-l) + 14px);
  border: 1px solid var(--brand); opacity: 0.5;
  animation: pulse 3.2s var(--ease) infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.96); opacity: 0.55; }
  70%  { transform: scale(1.06); opacity: 0; }
  100% { transform: scale(1.06); opacity: 0; }
}
.engine-node {
  border-radius: var(--r-m); background: #fff; border: 1px solid var(--line-2);
  padding: 20px 18px; box-shadow: var(--shadow-s);
}
.engine-node b { display: block; font-size: 0.95rem; letter-spacing: -0.01em; }
.engine-node span { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--ink-3); line-height: 1.45; }
.engine-node .svc-icon { margin-bottom: 12px; }
.pulse-line { display: block; width: 100%; height: auto; }
.pulse-line .trace {
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
  animation: trace 3.4s linear infinite;
}
@keyframes trace { to { stroke-dashoffset: -1200; } }

/* ---------------------------------------------- case study index: the rows */

.csrow {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 58px;
  align-items: center; padding: 62px 0; border-top: 1px solid var(--line-2);
}
.csrow:first-child { border-top: 0; padding-top: 12px; }
.csrow-media { transition: transform 0.6s var(--ease); }
.csrow:hover .csrow-media { transform: translateY(-6px); }
.csrow-tag {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand); display: block; margin-bottom: 14px;
}
.csrow h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -0.035em; margin-bottom: 18px; max-width: 20ch; }
.csrow .csrow-figs { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 26px 0 28px; }
.csrow .csrow-figs > div { min-width: 108px; }
.csrow .csrow-figs .v { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.035em; display: block; }
.csrow .csrow-figs .k {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); display: block; margin-top: 5px;
}
.csrow.rev .csrow-media { order: 2; }

/* a three column mega menu for the case study list */
.menu-grid.three { grid-template-columns: repeat(3, 1fr); }
.menu-grid .mshot {
  display: block; width: 100%; height: 92px; object-fit: cover;
  border-radius: var(--r-s); margin-bottom: 12px; border: 1px solid var(--line-2);
}

/* ------------------------------------------------------------- stat strip */

.strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line-2); border-radius: var(--r-m);
  background: #fff; overflow: hidden;
}
.strip > div { padding: 26px 24px; border-right: 1px solid var(--line-2); }
.strip > div:last-child { border-right: 0; }
.strip .v { display: block; font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 700; letter-spacing: -0.04em; }
.strip .k {
  display: block; margin-top: 8px; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-4);
}
.strip .n { margin: 8px 0 0; font-size: 0.82rem; color: var(--ink-3); line-height: 1.5; }

/* ------------------------------------------------------- feature list rows */

.feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
.feat > div { padding: 22px 0; border-top: 1px solid var(--line-2); }
.feat h4 { font-size: 1rem; letter-spacing: -0.02em; margin-bottom: 6px; }
.feat p { margin: 0; font-size: 0.9rem; color: var(--ink-3); line-height: 1.55; }

@media (max-width: 940px) {
  .csrow { grid-template-columns: 1fr; gap: 34px; padding: 46px 0; }
  .csrow.rev .csrow-media { order: 0; }
  .engine { grid-template-columns: 1fr; }
  .engine-core { grid-column: 1; grid-row: auto; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip > div:nth-child(2) { border-right: 0; }
  .strip > div:nth-child(1), .strip > div:nth-child(2) { border-bottom: 1px solid var(--line-2); }
  .menu-grid.three { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .strip { grid-template-columns: 1fr; }
  .strip > div { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .strip > div:last-child { border-bottom: 0; }
  .feat { grid-template-columns: 1fr; }
  .flow-step { padding-left: 42px; }
}

/* ==========================================================================
   phones get their own tier, not a squeezed tablet
   Below 620px the layout was already single column, but the type scale, the
   rhythm and the ambient wash were all still sized for a wide screen.
   ========================================================================== */

/* ==========================================================================
   phones: give each grid its shape back
   Three different desktop grids all collapse to the same white rounded box, so
   a phone scrolls past sixteen identical cards and the page reads as a queue.
   Below 560px each grid is rebuilt into the form that actually suits one column.
   ========================================================================== */

@media (max-width: 560px) {

  /* the icon services become a list you can scan, not five stacked heroes */
  .grid-svc { gap: 10px; }
  .grid-svc .card {
    display: grid; grid-template-columns: 40px 1fr; column-gap: 15px;
    align-items: start; padding: 16px 18px;
  }
  .grid-svc .card .svc-icon { grid-row: 1 / span 3; margin-bottom: 0; }
  .grid-svc .card h3 { font-size: 1rem; margin-bottom: 3px; }
  .grid-svc .card p { font-size: 0.88rem; line-height: 1.5; }
  .grid-svc .card .go { margin-top: 9px; }

  /* plain prose cards lose the box. The border was only repeating the shape of
     everything above them; as a ruled list they read as one thing with parts. */
  .notes { gap: 0; }
  .notes .card {
    position: relative; background: none; border: 0; border-radius: 0;
    box-shadow: none; padding: 17px 0 17px 21px;
    border-top: 1px solid var(--line-2);
  }
  .notes .card::after { display: none; }
  .notes .card::before {
    content: ""; position: absolute; left: 3px; top: 25px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
  }
  .notes .card:first-child { border-top: 0; padding-top: 2px; }
  .notes .card:first-child::before { top: 10px; }
  .notes .card h3 { font-size: 1.02rem; margin-bottom: 7px !important; }

  /* the value was set nowrap against a 1fr label, which on a phone jams the two
     columns edge to edge. Stacked, the label can carry the eyebrow treatment. */
  .kv { grid-template-columns: 1fr; }
  .kv .k {
    padding: 15px 0 0; border-top: 1px solid var(--line-2);
    font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--ink-4);
  }
  .kv .v {
    padding: 5px 0 15px; border-top: 0; text-align: left;
    white-space: normal; font-size: 1.02rem;
  }
  .kv > :nth-child(1) { border-top: 0; padding-top: 0; }

  /* Grid items default to min-width:auto, so one unbreakable child sets the
     floor for the whole column and pushes the page sideways. Three panels were
     being widened past the viewport by a single long button label. */
  .panel-split > *, .grid-2 > *, .grid-3 > *, .grid-svc > *, .hero-grid > * { min-width: 0; }
  .btn { white-space: normal; text-align: center; }

  /* the column labels are nowrap and centre on their column, so the last one
     spills past the right edge once the columns get narrow enough */
  .cols { gap: 6px; }
  .col { min-width: 0; }
  .col .cv { font-size: 0.66rem; }

  /* On a wide screen the engine is a three by three: the dark core in the
     middle with five levers around it, which is the whole "one desk" idea.
     Stacked into one column that idea is just six boxes. Here the same
     relationship is drawn vertically instead: the core at the head of a rail,
     every lever hanging off it. */
  .engine { gap: 0; padding-left: 25px; }
  .engine::before {
    content: ""; position: absolute; left: 6px; top: 76px; bottom: 30px;
    width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, var(--brand), var(--brand-line));
  }
  .engine-core {
    margin: 0 0 4px -25px; padding: 24px 22px; text-align: left;
  }
  .engine-core::before { inset: -9px; border-radius: calc(var(--r-l) + 9px); }
  .engine-node {
    position: relative; display: grid; grid-template-columns: 34px 1fr;
    column-gap: 13px; align-items: start;
    background: none; border: 0; box-shadow: none; border-radius: 0;
    padding: 15px 0 15px 6px;
  }
  .engine-node::before {
    content: ""; position: absolute; left: -24px; top: 27px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--paper); border: 2px solid var(--brand);
  }
  .engine-node .svc-icon {
    width: 34px; height: 34px; border-radius: 10px;
    margin-bottom: 0; grid-row: 1 / span 2;
  }
  .engine-node b { font-size: 0.98rem; }
  .engine-node span { margin-top: 3px; }

  /* a 7.6:1 dashboard squeezed to phone width is a 47px illegible strip, so it
     keeps a readable size and the reader drags it sideways instead */
  .shot.wide .shot-media {
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .shot.wide .shot-media img { width: 720px; min-width: 720px; max-width: none; height: auto; }
}

@media (max-width: 520px) {
  h1 { font-size: 2.2rem; letter-spacing: -0.036em; }
  h2 { font-size: 1.72rem; letter-spacing: -0.032em; }
  .lede { font-size: 1.02rem; }

  /* Headings carry a ch-based measure inline, which is a desktop device: it
     keeps a wide screen's line from running too long. A phone is already
     narrower than the measure, so the only thing it still does there is orphan
     the last word onto a line of its own. The viewport is the measure here. */
  h1[style], h2[style], h3[style] { max-width: none !important; }

  .wrap, .wrap-wide { padding: 0 18px; }

  .hero { padding: 116px 0 52px; }
  /* the wash is the only ambient colour the brand has. Sized for a wide screen
     it sits almost entirely off a phone's right edge, so it gets pulled back
     on-canvas rather than dropped. */
  .hero::before { top: -250px; right: -215px; width: 600px; height: 600px; }
  .grid-bg::after { background-size: 52px 52px; }
  .hero-cta { gap: 10px; margin-top: 26px; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }

  .pad { padding: 54px 0; }
  .pad-s { padding: 40px 0; }
  .pad-t { padding-top: 54px; }
  .pad-b { padding-bottom: 54px; }

  .card, .result { padding: 22px; border-radius: var(--r-m); }
  .grid-2, .grid-3, .grid-svc { gap: 14px; }
  .panel, .panel-ink { padding: 30px 22px; border-radius: var(--r-l); }

  .flow-step { padding: 0 0 32px 38px; }
  .csrow { padding: 36px 0; gap: 26px; }
  .csrow .csrow-figs { gap: 12px 22px; margin: 20px 0 22px; }

  .footer { padding: 56px 0 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-base { margin-top: 36px; }
}

@media (max-width: 400px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.58rem; }
  .wrap, .wrap-wide { padding: 0 15px; }
  .card, .result { padding: 19px; }
  .strip > div { padding: 20px 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ==========================================================================
   touch: the alive layer rebuilt for a screen with no pointer
   Every effect above is bound to :hover, so on a phone none of it ever fires
   and the page reads as flat. Here the same effects are driven by scroll
   position and by the tap instead.
   ========================================================================== */

@media (hover: none) {
  /* the reading hairline earns its place from the first pixel on a phone */
  .nav-prog { opacity: 1; }

  /* the light under the pointer becomes a light that follows the page: the
     script adds .lit to whichever card is crossing the middle of the screen */
  .card.lit::after { opacity: 1; }
  .csrow.lit .csrow-media { transform: translateY(-6px); }

  /* a tap has to answer, because nothing hovers */
  a.card:active {
    transform: translateY(-1px) scale(0.994);
    box-shadow: var(--shadow-m); border-color: var(--brand-line);
  }
  .btn:active { transform: scale(0.975); }
  .tlink:active { color: var(--brand); border-color: var(--brand); }
  .menu-grid a:active { background: var(--paper-2); }
  .sheet-index a:active { color: #B58CFF; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .rw > i { transform: none; }
  .shot > .artifact { opacity: 1; transform: none; box-shadow: var(--shadow-l); }
  .shot .sheen { display: none; }
  .shot-media img { transform: none; }
  .sheet-ground { clip-path: inset(0 0 0 0); }
  .flow-step .fdot { background: var(--brand); border-color: var(--brand); }
  .flow-step .fline { transform: scaleY(1); }
  .bar .bf { width: var(--w); }
  .col .cf { height: var(--h); }
  .split-bar > span { width: var(--w); }
  .scatter .pt { opacity: 0.75; }
}

@media print {
  .nav, .sheet, .ticker { display: none; }
  body { background: #fff; }
}