/* Datstra r2. Tokens follow the current site (paper, navy, coral, Cabinet Grotesk, Switzer). */
@font-face { font-family: "Cabinet Grotesk"; src: url(../fonts/cabinet-grotesk-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url(../fonts/cabinet-grotesk-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Switzer"; src: url(../fonts/switzer-variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --paper-50: #fdfcfa; --paper-100: #faf8f5; --paper-200: #f3efe9; --paper-300: #e4dfd7; --paper-400: #cfc7bb; --paper-500: #a89e90; --paper-600: #8a8073;
  --navy-50: #eef3f7; --navy-100: #d9e4ee; --navy-200: #b3c8da; --navy-300: #87a6c0; --navy-400: #5a82a2; --navy-500: #355c7d; --navy-600: #2a4d6e; --navy-700: #1e3a5f; --navy-800: #162c49; --navy-900: #0f1f33;
  --coral-50: #fef1f2; --coral-100: #fde0e3; --coral-200: #fbc2c8; --coral-300: #f99ba5; --coral-400: #f67280; --coral-500: #e45a68; --coral-600: #c8414f; --coral-700: #b83a48; --coral-800: #7a2430;
  --bg: var(--paper-100); --surface: #fff; --line: var(--paper-300);
  --ink: #1a2433; --text: #3a4a5c; --muted: #556377;
  --font-display: "Cabinet Grotesk", "Switzer", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(3rem, 1.6rem + 5vw, 6.75rem);
  --fs-display: clamp(2.5rem, 1.55rem + 3.3vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.3vw, 3.375rem);
  --fs-h3: clamp(1.375rem, 1.18rem + .7vw, 1.875rem);
  --fs-h4: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  --fs-lead: clamp(1.125rem, 1.03rem + .4vw, 1.4375rem);
  --fs-body: 1.0625rem;
  --section: clamp(4.5rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, .6rem + 3vw, 3rem);
  --max: 1360px;
  --r-s: 6px; --r-m: 12px; --r-l: 20px; --r-pill: 999px;
  --shadow-s: 0 1px 2px #0f1f330f, 0 2px 6px #0f1f330d;
  --shadow-m: 0 2px 4px #0f1f330d, 0 12px 28px -8px #0f1f3329;
  --shadow-l: 0 4px 8px #0f1f330d, 0 32px 64px -20px #0f1f3347;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

/* ---------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
/* zero specificity, so a component's own padding on a list wins */
:where(ul[role=list], ol[role=list]) { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label { touch-action: manipulation; }
a:not(.btn):active { opacity: .7; }

body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-text); font-size: var(--fs-body); font-weight: 420; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  min-height: 100dvh; display: flex; flex-direction: column;
}
main { flex: 1; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 800; text-wrap: balance; }
h1 { font-size: var(--fs-display); letter-spacing: -.03em; line-height: .98; }
h2 { font-size: var(--fs-h2); letter-spacing: -.025em; line-height: 1.02; }
h3 { font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.12; font-weight: 700; }
h4 { font-size: var(--fs-h4); line-height: 1.25; font-weight: 700; }
p, li { text-wrap: pretty; }
strong, b { color: var(--ink); font-weight: 640; }
a { color: var(--navy-500); text-underline-offset: .22em; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
::selection { background: var(--coral-200); color: var(--navy-900); }
:focus-visible { outline: 3px solid var(--coral-500); outline-offset: 3px; border-radius: 4px; }
mark { background: #e6f16a; color: inherit; padding: 0 .15em; border-radius: 2px; }

.icon { width: 1.125em; height: 1.125em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--navy-900); color: var(--paper-100); padding: .6rem 1rem; border-radius: var(--r-s); font-weight: 600; }
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--warm { background: var(--paper-200); }
.section--dark { background: var(--navy-900); color: var(--navy-200); }
.section--dark :is(h1, h2, h3, h4, strong, b) { color: var(--paper-100); }
.section--dark a:not(.btn) { color: var(--coral-300); }
.section--dark :focus-visible { outline-color: var(--coral-300); }
img[src*="/illustrations/"] { mix-blend-mode: multiply; }

.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 40rem; margin-top: 1.5rem; }
.section--dark .lead { color: var(--navy-100); }
.split { display: grid; gap: 1.5rem 4rem; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; } }
.prose { font-size: var(--fs-lead); line-height: 1.55; max-width: 42rem; }
.prose p + p { margin-top: 1.1rem; }
.sec-head { max-width: 54rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.sec-head:not(.sec-head--row) > p { margin-top: 1.1rem; }
.sec-title { max-width: 26ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.sec-head--row { max-width: none; display: grid; gap: 1rem 4rem; align-items: end; }
@media (min-width: 900px) { .sec-head--row { grid-template-columns: 1fr 1fr; } }
.sec-head--row p { font-size: var(--fs-lead); line-height: 1.5; max-width: 36rem; }

/* ---------- buttons and links */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--navy-900); --btn-bd: var(--navy-900);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem; padding: .7rem 1.35rem; border-radius: var(--r-pill); border: 2px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-text); font-size: 1rem; font-weight: 620; line-height: 1.1;
  text-decoration: none; text-align: center; text-wrap: balance;
  transition: transform 160ms var(--ease-out);
  -webkit-user-select: none; user-select: none;
}
.btn:active { transform: scale(.97); }
.btn .icon { transition: transform 200ms var(--ease-out); }
.btn--primary { --btn-bg: var(--coral-400); --btn-bd: var(--coral-400); --btn-fg: var(--navy-900); }
.btn--dark { --btn-bg: var(--navy-900); --btn-bd: var(--navy-900); --btn-fg: var(--paper-100); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { --btn-bg: var(--coral-300); --btn-bd: var(--coral-300); }
  .btn--dark:hover { --btn-bg: var(--navy-700); --btn-bd: var(--navy-700); }
  .btn:hover .icon, .link-arrow:hover .icon { transform: translateX(3px); }
  .nav a:hover::after { transform: scaleX(1); }
}
.btn--sm { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: .9375rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .45rem; padding-block: .3rem; border-bottom: 2px solid var(--coral-400); color: var(--navy-900); font-weight: 640; text-decoration: none; }
.link-arrow .icon { transition: transform 200ms var(--ease-out); }
.section--dark .link-arrow { color: var(--paper-100); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }

/* ---------- logo: the "datstra." wordmark. Hovering it wipes in "analytics" between the name and the full stop. */
.logo { --wm: 1.625rem; display: inline-flex; padding: 2px; color: var(--navy-900); text-decoration: none; border-radius: 6px; }
.wm { position: relative; display: inline-block; font-family: var(--font-display); font-size: var(--wm); font-weight: 800; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.wm-dot { position: relative; display: inline-block; color: var(--coral-400); transition: opacity 400ms ease 350ms; }
.wm-more { position: absolute; left: 0; top: 0; color: var(--navy-900); opacity: 0; transform: translateX(-.25em); transition: opacity 160ms ease, transform 160ms var(--ease-out); pointer-events: none; }
.wm-more i { font-style: normal; color: var(--coral-400); }
@media (hover: hover) and (pointer: fine) {
  .logo:hover .wm-dot { color: transparent; }
  .logo:hover .wm-more { opacity: 1; transform: none; transition-duration: 260ms; }
}
.logo:focus-visible .wm-dot { color: transparent; transition: none; }
.logo:focus-visible .wm-more { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .wm-more { transition: none; } }

/* ---------- header */
.site-header { position: sticky; top: 0; z-index: 50; color: var(--navy-900); }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper-100); box-shadow: 0 1px 0 var(--paper-300); opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.site-header[data-scrolled]::before, .site-header[data-open]::before { opacity: 1; }
.bar { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.nav { margin-left: auto; display: none; }
.nav ul { display: flex; gap: clamp(1.25rem, .4rem + 1.6vw, 2.25rem); }
.nav a { position: relative; display: inline-block; padding-block: .7rem; color: inherit; font-size: .975rem; font-weight: 560; text-decoration: none; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: 3px; border-radius: 3px; background: var(--coral-400); transform: scaleX(0); transform-origin: 0 50%; transition: transform 200ms var(--ease-out); }
.nav a[aria-current=page]::after { transform: scaleX(1); }
.header-cta { display: none; }
.menu-btn { margin-left: auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill); border: 1.5px solid var(--navy-900); background: transparent; transition: transform 160ms var(--ease-out); }
.menu-btn:active { transform: scale(.96); }
.bars { display: grid; gap: 5px; width: 18px; }
.bars i { display: block; height: 2px; border-radius: 2px; background: var(--navy-900); transition: transform 200ms var(--ease-in-out); }
.menu-btn[aria-expanded=true] .bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded=true] .bars i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu { border-top: 1px solid var(--line); padding-block: 1rem 2rem; background: var(--paper-100); }
.menu a:not(.btn) { display: block; padding-block: .45rem; font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy-900); text-decoration: none; }
.menu .btn { margin-top: 1.25rem; }
/* The phone menu drops in from under the bar instead of popping; it closes instantly. */
@media (prefers-reduced-motion: no-preference) {
  .menu { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
  @starting-style { .menu { opacity: 0; transform: translateY(-6px); } }
}
@media (prefers-reduced-motion: reduce) {
  .menu { transition: opacity 150ms ease; }
  @starting-style { .menu { opacity: 0; } }
}
@media (min-width: 900px) {
  .nav, .header-cta { display: inline-flex; }
  .menu-btn, .menu { display: none !important; }
}

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

/* ---------- home: hero */
.hero { padding-block: clamp(2rem, .5rem + 5vw, 5.5rem) clamp(4rem, 2rem + 6vw, 8rem); }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1040px) { .hero-grid { grid-template-columns: 1.08fr .92fr; gap: clamp(3rem, 1rem + 4vw, 6rem); } }
.hero-title { font-size: var(--fs-hero); line-height: .93; letter-spacing: -.04em; }
.hero-title .ln { display: block; }
h1 .accent, h2 .accent { color: var(--coral-500); }
.section--dark h2 .accent, .section--dark h3 .accent { color: var(--coral-300); }
h3 .accent { color: var(--coral-600); }
.hero .lead { margin-top: 1.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > .lead { --rise: 10px; animation: rise 560ms 260ms var(--ease-out) both; }
  .hero-copy > .actions { --rise: 8px; animation: rise 520ms 340ms var(--ease-out) both; }
  .agent-panel { --rise: 10px; animation: rise 600ms 200ms var(--ease-out) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise, 10px)); } }
/* Headings, "the agent is writing": each word settles from a small blur and drop, quicker as the line goes on.
   The words are real text in the HTML; build.mjs only wraps them. h1 plays on load; h2 once, when it comes on screen. */
.w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  h1 .w { animation: write-h1 560ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
  .js h2.is-waiting .w { opacity: 0; }
  .js h2.is-writing .w { animation: write 520ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
}
@keyframes write { from { opacity: 0; transform: translateY(.2em); } }
/* h1 starts faint, not invisible: text painted at opacity 0 does not count as the page's largest paint (LCP), so a
   fully hidden h1 left a tiny logo as the LCP element and the score waited for its animation. */
@keyframes write-h1 { from { opacity: .12; transform: translateY(.2em); } }
@keyframes fade { from { opacity: 0; } }

.agent-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-l); padding: clamp(1rem, .6rem + 1.2vw, 1.5rem); }
.ap-head { display: flex; align-items: center; gap: .65rem; padding: .2rem .25rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .9375rem; }
.ap-head b { font-weight: 650; }
.ap-pulse { position: relative; width: .6rem; height: .6rem; border-radius: 50%; background: var(--coral-400); }
.ap-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--coral-400); opacity: 0; }
.ap-row { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .9rem; align-items: center; padding: .85rem .25rem; border-bottom: 1px solid var(--line); }
.ap-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--navy-50); color: var(--navy-700); }
.ap-ic .icon { width: 1.2rem; height: 1.2rem; }
.ap-txt { font-size: .9375rem; line-height: 1.35; }
.ap-txt b { display: block; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; }
.ap-st { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem .3rem .55rem; border-radius: var(--r-pill); background: var(--navy-50); color: var(--navy-700); font-size: .8125rem; font-weight: 650; white-space: nowrap; }
.ap-st .icon { width: .95rem; height: .95rem; }
.ap-ask .ap-ic { background: var(--coral-50); color: var(--coral-700); }
.ap-ask .ap-st { background: var(--coral-50); color: var(--coral-700); }
.agent-panel figcaption { padding: 1rem .25rem 0; color: var(--muted); font-size: .8125rem; }
@media (max-width: 460px) {
  .ap-row { grid-template-columns: 2.25rem 1fr; }
  .ap-ic { width: 2.25rem; height: 2.25rem; }
  .ap-st { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .agent-panel.is-waiting .ap-st { opacity: 0; transform: scale(.9); }
  .agent-panel.is-playing .ap-st { animation: pop 300ms var(--ease-out) both; }
  .agent-panel.is-playing .ap-row:nth-child(1) .ap-st { animation-delay: 500ms; }
  .agent-panel.is-playing .ap-row:nth-child(2) .ap-st { animation-delay: 850ms; }
  .agent-panel.is-playing .ap-row:nth-child(3) .ap-st { animation-delay: 1150ms; }
  .agent-panel.is-playing .ap-row:nth-child(4) .ap-st { animation-delay: 1420ms; }
  .agent-panel.is-playing .ap-row:nth-child(5) .ap-st { animation-delay: 1660ms; }
  .agent-panel.is-playing .ap-pulse::after { animation: ping 1s 400ms var(--ease-out) 2; }
  .agent-panel.has-3d.is-playing .ap-row:nth-child(1) .ap-st { animation-delay: 1100ms; }
  .agent-panel.has-3d.is-playing .ap-row:nth-child(2) .ap-st { animation-delay: 1450ms; }
  .agent-panel.has-3d.is-playing .ap-row:nth-child(3) .ap-st { animation-delay: 1750ms; }
  .agent-panel.has-3d.is-playing .ap-row:nth-child(4) .ap-st { animation-delay: 2020ms; }
  .agent-panel.has-3d.is-playing .ap-row:nth-child(5) .ap-st { animation-delay: 2260ms; }
  .agent-panel.has-3d.is-playing .ap-pulse::after { animation: ping 1s 900ms var(--ease-out) 2; }
}
@keyframes pop { from { opacity: 0; transform: scale(.9); } }
@keyframes ping { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }

/* ---------- home: busywork */
.busywork { padding-top: calc(var(--section) * .5); }
.bw-head { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .bw-head { grid-template-columns: 1.7fr 1fr; gap: 4rem; } }
.question { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.03em; }
.question em { font-style: normal; color: var(--coral-500); }
.bw-art { position: relative; width: min(100%, 25rem); aspect-ratio: 640 / 510; justify-self: center; }
.notes-still, .notes-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.notes-still { transition: opacity 300ms ease; }
.notes-canvas { opacity: 0; transition: opacity 400ms ease; }
.bw-art.is-3d .notes-canvas { opacity: 1; }
.bw-art.is-3d .notes-still { opacity: 0; }
.bw-list { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.bw-list li { display: grid; gap: .35rem 3rem; align-items: center; padding-block: 1.15rem; border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .bw-list li { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.bw-word { display: flex; align-items: center; gap: .9rem; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: var(--ink); }
.bw-word .icon { width: .62em; height: .62em; color: var(--coral-500); stroke-width: 2.25; }
.bw-list p { max-width: 34rem; }

/* ---------- case study: the client card in the hero */
.client { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem 1.5rem; align-items: center; }
.client-photo { width: clamp(5.5rem, 4rem + 4vw, 7.5rem); aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.client-logo { width: auto; height: 2.1rem; margin-bottom: .6rem; }
.client-who p { line-height: 1.4; }
.client-where { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; color: var(--muted); font-size: .9375rem; }
.client-where .icon { color: var(--coral-600); width: 1rem; height: 1rem; }

/* ---------- home: the featured case study, as a short teaser: one line, one number, one 3D thread you can click */
.teaser { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 960px) { .teaser { grid-template-columns: 1fr 1.05fr; } }
.teaser h2 { max-width: 16ch; }
.teaser-save { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); font-family: var(--font-display); font-size: clamp(3.25rem, 2rem + 4.2vw, 5.75rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; color: var(--ink); }
.teaser-line { max-width: 28rem; margin-top: .7rem; font-size: var(--fs-lead); line-height: 1.4; color: var(--ink); }
/* the negotiation, as a real thread: shop on the left, Barter on the right, the price beside it */
/* The price column has a fixed width so the ticking numbers never resize the chat beside it. */
.nego-chat { display: grid; grid-template-columns: minmax(0, 1fr) 13.5rem; gap: 1rem 1.75rem; align-items: end; max-width: 38rem; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.chat { display: grid; align-content: end; gap: .45rem; }
.chat li { max-width: 82%; padding: .5rem .8rem .55rem; border-radius: 14px; font-size: .9375rem; line-height: 1.35; }
.chat li b { display: block; margin-bottom: .1rem; font-size: .75rem; font-weight: 650; color: var(--muted); }
.chat li small { color: var(--muted); font-size: .8125rem; font-weight: 450; white-space: nowrap; }
.chat .from-barter small { color: #5b6785; }
.chat .from-shop { justify-self: start; border: 1px solid var(--navy-100); border-bottom-left-radius: 4px; background: var(--surface); color: var(--ink); }
.chat .from-barter { justify-self: end; border: 1px solid #c9d3ea; border-bottom-right-radius: 4px; background: #eef2fb; color: #183c96; font-weight: 560; }
.chat .from-barter b { color: #183c96; }
.chat .chat-typing { justify-self: start; display: inline-flex; gap: 5px; padding: .75rem .85rem; border: 1px solid var(--navy-100); border-bottom-left-radius: 4px; background: var(--surface); }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--navy-300); }
.chat-price { display: grid; justify-items: end; text-align: right; transition: opacity 300ms ease; }
.cp-label { color: var(--muted); font-size: .8125rem; font-weight: 600; }
.cp-was { color: var(--paper-600); font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; text-decoration-color: var(--coral-400); text-decoration-thickness: 2px; transition: opacity 300ms ease; }
.cp-saved { margin-top: .25rem; color: var(--text); font-size: .875rem; transition: opacity 300ms ease; }
.cp-saved b { display: inline-block; min-width: 3.4em; text-align: right; color: var(--coral-700); font-variant-numeric: tabular-nums; }
.cp-val { display: block; width: 100%; font-family: var(--font-display); font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pct-check { display: inline-grid; place-items: center; width: .36em; height: .36em; margin-left: .14em; vertical-align: .5em; border-radius: 50%; background: var(--coral-400); color: var(--navy-900); }
.pct-check .icon { width: .2em; height: .2em; stroke-width: 3; }
.teaser-scale { max-width: 28rem; margin-top: .6rem; color: var(--text); font-size: .9375rem; }
.teaser-note { margin-top: .35rem; color: var(--muted); font-size: .875rem; }
@media (max-width: 559px) {
  .nego-chat { grid-template-columns: 1fr; }
  .chat-price { order: -1; justify-items: start; text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .chat li.is-pending { display: none; }
  .chat .from-shop.is-new { animation: from-left 380ms var(--ease-out) both; }
  .chat .from-barter.is-new { animation: from-right 380ms var(--ease-out) both; }
  .chat .chat-typing:not([hidden]) { animation: from-left 260ms var(--ease-out) both; }
  .chat-typing i { animation: typing-dot 1s ease-in-out infinite; }
  .chat-typing i:nth-child(2) { animation-delay: 150ms; }
  .chat-typing i:nth-child(3) { animation-delay: 300ms; }
  .chat-price.is-dim { opacity: .25; }
  .teaser-save.is-waiting .pct-check { opacity: 0; transform: scale(.9); }
  .teaser-save.is-done .pct-check { animation: pop 320ms var(--ease-out) both; }
  .chat-price .is-off { opacity: 0; }
}
@keyframes from-left { from { opacity: 0; transform: translateX(-14px); } }
@keyframes from-right { from { opacity: 0; transform: translateX(14px); } }
@keyframes typing-dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.teaser-art { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; border-radius: var(--r-l); color: inherit; text-decoration: none; }
.teaser-static, .teaser-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.teaser-static { transition: opacity 300ms ease; }
.teaser-canvas { opacity: 0; transition: opacity 400ms ease; }
.teaser-art.is-3d .teaser-canvas { opacity: 1; }
.teaser-art.is-3d .teaser-static { opacity: 0; }
.teaser-art [hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) { .teaser-art { cursor: pointer; } }

/* ---------- home hero: the canvas the busywork cards are drawn on, above the panel, never in the way */
.hero { position: relative; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }


.ruler { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(1.1rem, .8rem + 1.5vw, 2rem) clamp(1rem, .5rem + 2.5vw, 2.5rem); box-shadow: var(--shadow-s); }
.ruler-cap { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; color: var(--muted); font-size: .9375rem; }
.ruler-cap b { margin-right: .4rem; }
.r-replay { padding: .2rem .8rem; border: 1.5px solid var(--paper-400); border-radius: var(--r-pill); background: transparent; color: var(--navy-900); font-size: .8125rem; font-weight: 600; }
.r-replay { transition: transform 160ms var(--ease-out); }
.r-replay:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .r-replay:hover { border-color: var(--navy-900); } }
.ruler-body { padding: 4.75rem clamp(.5rem, 2vw, 1.5rem) 4.25rem; }
.r-track { position: relative; height: 4px; border-radius: 2px; background: var(--paper-300); }
.r-tick { position: absolute; left: var(--x); top: -4px; width: 1px; height: 12px; background: var(--paper-400); }
.r-fill { position: absolute; top: 0; bottom: 0; left: 10%; right: 45.833%; border-radius: 2px; background: var(--coral-400); transform-origin: 100% 50%; transition: transform .9s var(--ease-in-out); }
.r-other { --ax: 50%; position: absolute; left: var(--x); bottom: 2px; transform: translateX(calc(var(--ax) * -1)); padding-bottom: 1.6rem; color: var(--muted); font-size: .8125rem; line-height: 1.25; text-align: center; white-space: nowrap; transition: opacity .5s; }
.r-other b { display: block; color: var(--ink); font-weight: 650; }
.r-other .icon { display: inline; width: .9rem; height: .9rem; vertical-align: -.15em; color: #b26a00; }
.r-other::after { content: ""; position: absolute; left: var(--ax); bottom: 0; height: 1.25rem; border-left: 1px solid var(--paper-500); }
.r-other::before { content: ""; position: absolute; left: var(--ax); bottom: -8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--paper-500); background: var(--surface); }
.r-target { --ax: 78%; color: var(--coral-700); font-weight: 600; text-align: right; }
.r-target b { color: var(--coral-700); }
.r-target::after { border-left: 2px dashed var(--coral-400); height: 1.6rem; bottom: -8px; }
.r-target::before { display: none; }
.r-kase { --ax: 22%; text-align: left; }
.r-end { --ax: 80%; text-align: right; }
.r-ghost { position: absolute; left: var(--x); top: -5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--navy-300); background: var(--surface); opacity: 0; transition: opacity .5s; }
.ruler[data-step="3"] .r-ghost[data-g="1"], .ruler[data-step="4"] .r-ghost { opacity: 1; }
.r-ask { position: absolute; left: var(--x); top: -13px; width: 0; opacity: 0; transition: opacity .4s; }
.r-ask::before { content: ""; position: absolute; left: -15px; top: 0; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--coral-500); background: #f6728014; }
.r-ask span { position: absolute; top: 40px; left: 0; transform: translateX(-30%); white-space: nowrap; color: var(--coral-700); font-size: .8125rem; font-weight: 650; }
.ruler[data-step="2"] .r-ask { opacity: 1; }
.r-dot { position: absolute; left: 10%; top: -8px; display: flex; flex-direction: column; align-items: center; padding-top: 30px; transform: translateX(-30%); line-height: 1.15; white-space: nowrap; transition: transform .9s var(--ease-in-out), opacity .4s; }
.r-dot::before { content: ""; position: absolute; top: 0; left: 30%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--navy-900); box-shadow: 0 0 0 5px #0f1f331f; }
.r-dot b { font-size: .8125rem; }
.r-dot [data-price] { font-family: var(--font-display); font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ruler[data-step="0"] :is(.r-other, .r-dot) { opacity: 0; }
.r-steps { display: grid; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .r-steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.r-steps li { position: relative; padding: 1rem 0; border-bottom: 1px solid var(--line); transition: opacity .5s; }
@media (min-width: 900px) { .r-steps li { border-bottom: 0; padding-bottom: 0; } }
.r-steps li::before { content: ""; position: absolute; left: 0; top: -2px; height: 3px; width: 3rem; background: var(--coral-400); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.r-steps li.is-current::before { transform: scaleX(1); }
.r-day { color: var(--ink); font-weight: 650; }
.r-steps p { margin-top: .25rem; font-size: .9375rem; line-height: 1.5; }
.ruler[data-step="0"] .r-steps li,
.ruler[data-step="1"] .r-steps li:not([data-s="1"]),
.ruler[data-step="2"] .r-steps li:is([data-s="3"], [data-s="4"]),
.ruler[data-step="3"] .r-steps li[data-s="4"] { opacity: .3; }

.result { display: grid; gap: 1rem 3rem; align-items: center; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 900px) { .result { grid-template-columns: auto 1fr; } }
.result-nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.result-nums s { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); color: var(--paper-600); text-decoration-thickness: 4px; text-decoration-color: var(--coral-400); }
.result-nums b { font-size: clamp(3.25rem, 2rem + 5vw, 6.5rem); font-weight: 800; }
.result-nums .arrow { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); color: var(--coral-500); }
.result-line { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; color: var(--coral-700); }
.result-line + p { margin-top: .4rem; font-size: var(--fs-h4); color: var(--ink); }

.honest { display: flex; gap: .6rem; align-items: flex-start; max-width: 48rem; margin-top: 2rem; font-size: .9375rem; line-height: 1.5; }
.honest .icon { margin-top: .15rem; color: var(--coral-600); }
.honest--inline { margin-top: 1.75rem; }

/* ---------- home: own Barter, outcomes */
.own-grid { display: grid; gap: 2.5rem 5rem; }
@media (min-width: 1000px) { .own-grid { grid-template-columns: 5fr 7fr; } .own-head { position: sticky; top: 7rem; align-self: start; } }
.own-head h2 { font-size: var(--fs-display); line-height: 1; }
.verbs li { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.25rem; padding-block: 1.6rem; border-bottom: 1px solid var(--line); }
.v-ic { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 2px solid var(--coral-400); color: var(--navy-900); }
.v-ic .icon { width: 1.35rem; height: 1.35rem; }
.verbs h3 { margin-bottom: .4rem; }

.aim { max-width: 40ch; margin-top: clamp(3rem, 2rem + 3vw, 5rem); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.aim b { font-weight: 800; color: var(--coral-700); white-space: nowrap; }

/* ---------- why us */
.why-head { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 900px) { .why-head { grid-template-columns: 1.5fr 1fr; } }
.why-head h2 { font-size: var(--fs-display); }
.partner-badge { display: block; width: fit-content; border-radius: 6px; }
.partner-badge img { width: clamp(15rem, 11rem + 8vw, 20rem); height: auto; }
@media (min-width: 900px) { .why .partner-badge { justify-self: end; } }
.faces { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 640px) { .faces { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .faces { grid-template-columns: repeat(5, 1fr); } }
.faces img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: .8rem; border-radius: var(--r-m); background: linear-gradient(180deg, #b6c4d2, #7f96ad); }
.faces b { display: block; font-weight: 650; }
.faces span { font-size: .9375rem; }
.shipped { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: 2rem; border-top: 1px solid #ffffff1f; }
.shipped > p { font-weight: 600; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem clamp(1.75rem, .5rem + 2.4vw, 2.75rem); margin-top: 1.5rem; }
.logos img { width: auto; height: 1.5rem; filter: brightness(0) invert(1); opacity: .85; }
.logos .lg-amazon { height: 1.8rem; margin-top: .5rem; }
.logos .lg-apple { height: 2rem; margin-top: -.3rem; }
.logos .lg-jnj { height: 1.05rem; }
.logos .lg-ms { height: 1.35rem; }
.logos .lg-lexis { height: 1.7rem; }
.lg-text { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--paper-100); opacity: .9; }
.shipped--light { margin-top: 0; padding-top: 0; border: 0; }
.shipped--light > p { color: var(--muted); }
.shipped--light .logos img { filter: grayscale(1) brightness(0); opacity: .7; }
.shipped--light .lg-text { color: var(--ink); opacity: .75; }

/* ---------- page heroes */
.page-hero { padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(3rem, 1.5rem + 4vw, 5rem); }
.page-hero h1 { max-width: 20ch; }
.page-hero-grid { display: grid; gap: 2.5rem 4rem; align-items: end; }
@media (min-width: 1000px) { .page-hero-grid { grid-template-columns: 1.55fr 1fr; } }
.page-hero h1 .ln { display: block; }
.page-hero-grid--art { align-items: center; }
@media (min-width: 1000px) { .page-hero-grid--art { grid-template-columns: 1.1fr 1fr; } }
.page-services .agents { padding-top: clamp(1.5rem, .5rem + 3vw, 3.5rem); }
@media (prefers-reduced-motion: no-preference) {
  .page-hero h1 ~ * { --rise: 8px; animation: rise 480ms 240ms var(--ease-out) both; }
  .page-hero h1 ~ * ~ * { animation-delay: 310ms; }
  .page-hero-grid > :nth-child(2) { animation: fade 480ms 120ms ease-out both; }
}

/* ---------- case study */
.run-step { display: grid; gap: 1.5rem 4rem; padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); border-bottom: 1px solid var(--paper-400); }
@media (min-width: 960px) {
  .run-step { grid-template-columns: 5fr 7fr; align-items: start; }
  .run-copy { position: sticky; top: 7rem; }
}
.run-copy h3 { margin-bottom: .6rem; }
.run-copy p:last-child { max-width: 32rem; }

/* Barter app frames: Barter's own palette (cobalt and citron) inside the Datstra page */
.bx { --cobalt: #183c96; --citron: #e6f16a; --bx-line: #dfe5f1; --bx-ink: #16224a; --bx-muted: #5b6785; --bx-tint: #eef2fb;
  overflow: hidden; border: 1px solid var(--bx-line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-m); color: var(--bx-ink); font-size: .9375rem; line-height: 1.5; }
.bx b { color: var(--bx-ink); }
.bx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .65rem; padding: .65rem 1rem; border-bottom: 1px solid var(--bx-line); background: #f7f9fd; font-size: .8125rem; }
.bx-word { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; color: var(--cobalt); line-height: 1; }
.bx-word i { font-style: normal; color: var(--cobalt); }
.bx-pill { padding: .15rem .6rem; border-radius: var(--r-pill); background: var(--citron); color: #1b2a55; font-weight: 650; }
.bx-clock { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; color: var(--bx-muted); font-variant-numeric: tabular-nums; }
.bx-clock .icon { width: .9rem; height: .9rem; }
.bx-body { padding: clamp(1rem, .8rem + 1vw, 1.4rem); }
.bx-label { margin-bottom: .4rem; font-size: .8125rem; font-weight: 650; color: var(--bx-muted); }
.bx-typed { min-height: 5.6rem; padding: .85rem 1rem; border: 1.5px solid var(--cobalt); border-radius: 10px; background: #fbfcff; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .875rem; line-height: 1.55; }
.bx-note { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; color: var(--cobalt); font-size: .8125rem; font-weight: 650; }
.bx-note .icon { width: .95rem; height: .95rem; }
.bx-mail .bx-note--tag { margin-top: .4rem; padding: .1rem .55rem; border-radius: var(--r-pill); background: var(--bx-tint); }
.bx-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.bx-chips li { padding: .3rem .7rem; border: 1px solid #c9d3ea; border-radius: var(--r-pill); background: var(--bx-tint); color: var(--cobalt); font-size: .8125rem; font-weight: 650; }
.bx-btn { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; padding: .55rem 1.05rem; border: 1px solid var(--cobalt); border-radius: 8px; background: var(--cobalt); color: #fff; font-size: .875rem; font-weight: 650; }
.bx-btn .icon { width: 1rem; height: 1rem; }
.bx-btn--ghost { background: #fff; color: var(--cobalt); border-color: var(--bx-line); }
.bx-typed::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.2em; background: var(--cobalt); opacity: 0; }
.bx.is-typing .bx-typed::after { opacity: 1; animation: blink 1s steps(2) infinite; }
.bx.is-typing :is(.bx-note, .bx-chips li, .bx-btn) { opacity: 0; transform: translateY(6px); }
.bx :is(.bx-note, .bx-chips li, .bx-btn) { transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.bx-chips li:nth-child(1) { transition-delay: 60ms; } .bx-chips li:nth-child(2) { transition-delay: 110ms; } .bx-chips li:nth-child(3) { transition-delay: 150ms; }
.bx-chips li:nth-child(4) { transition-delay: 185ms; } .bx-chips li:nth-child(5) { transition-delay: 215ms; } .bx-chips li:nth-child(6) { transition-delay: 240ms; } .bx-btn { transition-delay: 380ms; }
@keyframes blink { 50% { opacity: 0; } }

.bx-short { display: grid; gap: 1rem; }
.bx-map { position: relative; overflow: hidden; border: 1px solid var(--bx-line); border-radius: 10px; background: #e9eef6; }
.bx-map img { width: 100%; }
.bx-map small { position: absolute; right: .4rem; bottom: .25rem; color: var(--bx-muted); font-size: .6875rem; }
.bx-pin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.bx-pin::before { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: var(--cobalt); box-shadow: 0 2px 4px #16224a40; }
.bx-pin.p::before { background: #9aa3b8; }
.bx-pin b { position: absolute; left: 11px; top: -11px; padding: .05rem .4rem; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px #16224a26; font-size: .6875rem; font-weight: 650; white-space: nowrap; }
.bx-pin.p b { color: var(--bx-muted); }
.bx-pin.l b { left: auto; right: 11px; }
.bx-hub { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.bx-hub .icon { position: absolute; max-width: none; left: -13px; top: -13px; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--coral-400); color: var(--navy-900); box-shadow: 0 0 0 4px #f6728040; }
.bx-hub b { position: absolute; left: -50px; top: 17px; width: 100px; text-align: center; font-size: .6875rem; font-weight: 700; }
.bx-shops li { display: grid; grid-template-columns: 2rem 1fr auto; gap: .75rem; align-items: center; padding-block: .6rem; border-bottom: 1px solid var(--bx-line); font-size: .8125rem; color: var(--bx-muted); }
.bx-shops li:last-child { border-bottom: 0; }
.bx-shops b { display: block; font-size: .9375rem; font-weight: 650; }
.bx-shops small { display: block; color: #8a5a00; font-size: .8125rem; }
.mono { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--bx-tint); color: var(--cobalt); font-size: .6875rem; font-style: normal; font-weight: 700; }
.parked .mono { background: #f0f1f5; color: var(--bx-muted); }
.st { padding: .15rem .6rem; border-radius: var(--r-pill); font-size: .75rem; font-style: normal; font-weight: 700; }
.st.q { background: var(--citron); color: #1b2a55; }
.st.p { background: #eceef3; color: var(--bx-muted); }

.bx-mail { padding: 1rem 1.1rem; border: 1px solid var(--bx-line); border-radius: 10px; }
.bx-mail p + p { margin-top: .6rem; }
.bx-mh { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--bx-line); color: var(--bx-muted); font-size: .8125rem; line-height: 1.35; }
.bx-mh b { display: block; font-size: .9375rem; }
.av { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #e7eaf2; color: var(--bx-ink); font-size: .6875rem; font-style: normal; font-weight: 700; }
.av--b { background: var(--cobalt); color: #fff; font-size: .9375rem; }
.bx-qs { margin-top: .4rem; }
.bx-qs li { position: relative; padding-left: 1.2rem; }
.bx-qs li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt); }
.bx-sent { display: grid; gap: .4rem; margin-top: 1rem; }
.bx-sent li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .8rem; border-radius: 8px; background: #f7f9fd; font-size: .875rem; }
.bx-sent b { font-weight: 600; }
.bx-sent span { display: inline-flex; align-items: center; gap: .3rem; color: var(--cobalt); font-weight: 650; white-space: nowrap; }
.bx-sent .icon { width: 1rem; height: 1rem; }
.bx-summary { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .8rem; padding: .6rem .8rem; border-radius: 8px; background: var(--bx-tint); font-size: .875rem; }
.bx-summary .icon { margin-top: .2rem; color: var(--cobalt); width: 1rem; height: 1rem; }
.bx-flag { display: flex; gap: .5rem; align-items: flex-start; margin-top: .9rem !important; padding: .65rem .8rem; border: 1px solid #f1d38c; border-radius: 8px; background: #fff6df; color: #6b4300; font-size: .875rem; }
.bx-flag b { color: #6b4300; }
.bx-flag .icon { margin-top: .2rem; width: 1rem; height: 1rem; }
.bx-quotes, .bx-offers { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.bx-quotes { margin-top: 1rem; }
.bx-quotes th, .bx-quotes td, .bx-offers th, .bx-offers td { padding: .55rem .5rem; border-bottom: 1px solid var(--bx-line); text-align: left; vertical-align: top; }
.bx-quotes thead th, .bx-offers thead th { color: var(--bx-muted); font-size: .75rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.bx-quotes tbody th, .bx-offers tbody th { font-weight: 650; }
.bx-quotes tfoot td { border-bottom: 0; color: var(--bx-muted); font-size: .8125rem; }
.warn { color: #8a5a00; font-weight: 600; }
.warn .icon, .rec-tag .icon { display: inline; width: .9rem; height: .9rem; margin-right: .3rem; vertical-align: -.12em; }
.rec-tag .icon { margin-right: .25rem; }
.table-scroll { overflow-x: auto; }
.bx-offers { min-width: 30rem; }
.bx-offers tbody th > span { display: flex; align-items: center; width: fit-content; margin-top: .3rem; font-size: .75rem; }
.bx-offers tr.rec { background: #f8fbd9; }
.bx-offers tr.rec td:nth-child(2) { font-weight: 700; }
.rec-tag { padding: .1rem .55rem; border-radius: var(--r-pill); background: var(--cobalt); color: #fff; font-weight: 650; }
.bx-reco { display: flex; gap: .5rem; align-items: flex-start; margin-top: 1rem; color: var(--cobalt); font-size: .875rem; font-weight: 600; }
.bx-reco .icon { margin-top: .2rem; width: 1rem; height: 1rem; }
.bx .bx-thread { display: grid; gap: .8rem; padding: clamp(1rem, .8rem + 1vw, 1.4rem); }
.bx-thread li { max-width: 92%; padding: .8rem 1rem; border: 1px solid var(--bx-line); border-radius: 12px; }
.bx-thread .out { justify-self: end; border-color: #c9d3ea; background: var(--bx-tint); }
.bx-thread .who { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; color: var(--bx-muted); font-size: .75rem; }
.bx-thread .who b { font-size: .8125rem; }
.bx-thread .who .av { width: 1.6rem; height: 1.6rem; font-size: .6875rem; }
.bx-thread .who b::after { content: "\00b7"; margin-left: .5rem; color: var(--bx-muted); font-weight: 400; }
.bx-approve { max-width: 34rem; }
.bx-q { font-size: 1.125rem; font-weight: 700; }
.bx-sub { margin-bottom: 1rem; color: var(--bx-muted); font-size: .875rem; }
.bx-checks li { display: flex; gap: .55rem; align-items: center; padding-block: .3rem; font-size: .875rem; }
.bx-checks .icon { width: 1.25rem; height: 1.25rem; padding: 3px; border-radius: 50%; background: var(--cobalt); color: #fff; }
.bx-small { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--bx-line); color: var(--bx-muted); font-size: .8125rem; }
.bx-actions { display: flex; justify-content: flex-end; gap: .5rem; }

.rule-list li { display: grid; grid-template-columns: 1.75rem 1fr; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.rule-list .icon { width: 1.5rem; height: 1.5rem; margin-top: .15rem; color: var(--coral-600); }
.rule-list b { display: block; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; }
.real-grid { display: grid; gap: 2rem 4rem; margin-top: 2rem; }
@media (min-width: 800px) { .real-grid { grid-template-columns: 1fr 1fr; } }
.real-grid h3 { padding-bottom: .6rem; font-size: var(--fs-h4); }
.real-grid > div:last-child h3 { border-color: var(--coral-400); color: var(--coral-700); }
.real-grid li { padding-block: .75rem; border-bottom: 1px solid var(--paper-400); color: var(--ink); }
.real-note { max-width: 50rem; margin-top: 2rem; font-size: var(--fs-lead); line-height: 1.5; }
.term-list li { padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.section--warm .term-list li { border-color: var(--paper-400); }
.term-list b { display: block; margin-bottom: .2rem; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; }

/* ---------- services */
.agent-rows li { display: grid; grid-template-columns: 3rem 1fr; gap: .6rem 1.25rem; align-items: center; padding-block: 1.6rem; border-bottom: 1px solid var(--line); }
.agent-rows li > p { grid-column: 2; }
.ar-ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--coral-400); color: var(--navy-900); }
.ar-ic .icon { width: 1.25rem; height: 1.25rem; }
.ar-check { display: flex; gap: .5rem; align-items: flex-start; color: var(--navy-700); font-size: .9375rem; font-weight: 560; }
.ar-check .icon { margin-top: .2rem; width: 1.05rem; height: 1.05rem; color: var(--coral-600); }
@media (min-width: 960px) {
  .agent-rows li { grid-template-columns: 3rem minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .agent-rows li > p { grid-column: auto; }
  .agent-rows h3 { margin-top: .55rem; }
  .agent-rows li > p:not(.ar-check) { margin-top: .45rem; }
  .ar-check { margin-top: .5rem; }
}
.steps { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { padding-top: 1.25rem; border-top: 1px solid #ffffff2e; }
.steps h3 { margin-bottom: .5rem; font-size: var(--fs-h4); }
/* each step's icon: a thin coral ring, the line icon drawn in once as the steps come into view */
.step-ic { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border: 1.5px solid var(--coral-300); border-radius: 50%; color: var(--coral-300); }
.step-ic .icon { width: 1.35rem; height: 1.35rem; stroke-width: 1.75; }
@media (prefers-reduced-motion: no-preference) {
  .js .steps.is-waiting .step-ic { opacity: 0; transform: scale(.9); }
  .js .steps.is-waiting .step-ic .icon { opacity: 0; transform: scale(.6) rotate(-14deg); }
  .steps.is-drawing .step-ic { animation: settle 420ms var(--ease-out) both; animation-delay: var(--sd, 0ms); }
  .steps.is-drawing .step-ic .icon { animation: icon-in 560ms var(--ease-out) both; animation-delay: calc(var(--sd, 0ms) + 120ms); }
}
@keyframes settle { from { opacity: 0; transform: scale(.9); } }
@keyframes icon-in { from { opacity: 0; transform: scale(.6) rotate(-14deg); } }
.step-n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 1rem; border-radius: 50%; background: var(--coral-400); color: var(--navy-900); font-family: var(--font-display); font-weight: 800; }
.faq-list details { padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; color: var(--coral-600); font-family: var(--font-text); font-weight: 500; font-size: 1.5rem; line-height: 1; transition: transform 200ms var(--ease-in-out); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { max-width: 44rem; margin-top: .7rem; }
@media (prefers-reduced-motion: no-preference) {
  .faq-list details[open] p { animation: rise 260ms var(--ease-out) both; --rise: 6px; }
}

/* ---------- about */
.partner-hero { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: end; max-width: 26rem; }
.partner-hero .partner-badge img { width: clamp(7.5rem, 6rem + 3vw, 9.5rem); }
.partner-hero p { font-size: .9375rem; }
.partner-hero p a { display: inline-block; margin-top: .5rem; font-weight: 600; }
.team-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 2.75rem 2rem; }
.team-list img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 1rem; border-radius: var(--r-m); background: var(--navy-50); }
.team-list h3 { font-size: var(--fs-h4); }
.team-list .role { margin: .15rem 0 .5rem; color: var(--coral-700); font-size: .9375rem; font-weight: 650; }
.team-list p { font-size: .9375rem; line-height: 1.5; }
.team-list li { display: flex; flex-direction: column; }
/* LinkedIn as an icon, pinned to the bottom of each card so the row lines up whatever the bio length */
.team-list .team-li { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: .5rem 0 0 -.6rem; margin-top: auto; padding-top: .5rem; color: var(--navy-600); }
.team-list .team-li .icon { width: 1.25rem; height: 1.25rem; }
.team-list .team-li:hover { color: var(--coral-700); }
.team-more { margin-top: 2.5rem; color: var(--muted); }
.team .shipped { margin-top: 2.5rem; }

/* ---------- contact */
.page-hero--contact h1 { max-width: 13ch; }
.contact { padding-top: 0; }
.contact-grid { display: grid; gap: 3rem 5rem; align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 7fr 4fr; } }
.contact-form { display: grid; gap: 1.6rem; padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s); }
.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend { display: block; margin-bottom: .5rem; padding: 0; color: var(--ink); font-weight: 650; }
.field label span, .field legend span { margin-left: .35rem; color: var(--muted); font-size: .875rem; font-weight: 450; }
.field :is(input, select, textarea) { width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1.5px solid var(--paper-400); border-radius: var(--r-s); background: var(--paper-50); color: var(--ink); }
.field textarea { resize: vertical; line-height: 1.5; }
.field :is(input, select, textarea):focus { border-color: var(--navy-700); }
.field [aria-invalid=true] { border-color: var(--coral-600); }
.field-row { display: grid; gap: 1.6rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.hint { margin-top: .45rem; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-foot .hint { flex: 1 1 16rem; margin: 0; }
.form-status:empty { display: none; }
.form-status { padding: .9rem 1rem; border-radius: var(--r-s); background: var(--navy-50); color: var(--navy-800); font-weight: 560; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .form-status { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { @starting-style { .form-status { transform: translateY(4px); } } }
.form-status.is-error { background: var(--coral-50); color: var(--coral-800); }
.contact-aside h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.next-list li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: start; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.next-list .step-n { margin: 0; width: 2rem; height: 2rem; font-size: .9375rem; }
.aside-mail { margin-top: 2rem; }
.aside-mail a { display: inline-flex; align-items: center; gap: .5rem; margin-top: .25rem; font-size: 1.125rem; font-weight: 650; }
@media (max-width: 560px) {
  .bx-hub b, .bx-pin.p b { display: none; }
}

/* ---------- footer: Claude Partner Network badge */

/* ---------- phones: thumb-sized targets, a shorter agent panel, the offer table as rows */
@media (max-width: 899px) {
  .bar > .logo { padding-block: .45rem; }
  .foot-nav a, .foot-bottom a, .foot-mail { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .faq-list details { padding-block: .35rem; }
  .faq-list summary { align-items: center; min-height: 3rem; }
  .link-arrow { min-height: 2.75rem; }
  .aside-mail a { min-height: 2.75rem; }
}
@media (max-width: 460px) {
  .ap-row { grid-template-columns: 2.25rem 1fr auto; gap: .75rem; padding-block: .7rem; }
  .ap-st { position: relative; grid-column: auto; justify-self: end; padding: .4rem; }
  .ap-st > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ap-st .icon { width: 1.05rem; height: 1.05rem; }
}
@media (max-width: 560px) {
  .bx-pin b, .bx-hub b { font-size: .75rem; }
  .bx-map small { font-size: .6875rem; }
  .table-scroll { overflow: visible; }
  .bx-offers { min-width: 0; }
  .bx-offers thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bx-offers tr { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1rem; padding: .75rem .5rem; border-bottom: 1px solid var(--bx-line); }
  .bx-offers tbody th { grid-column: 1 / -1; padding: 0 0 .35rem; border: 0; }
  .bx-offers td { display: flex; justify-content: space-between; gap: .5rem; padding: .15rem 0; border: 0; }
  .bx-offers td::before { content: attr(data-label); color: var(--bx-muted); font-weight: 500; }
}

/* ---------- the wider list: quiet words an agent can find, coordinate and chase. Same treatment as the deck's
   "other chases" band: Switzer 400 in navy-300, a front line at 24px and .75 and a back line at 20px and .45,
   tiny coral dots at .5, two lines drifting slowly in opposite directions, both edges faded. */
.chases-intro { max-width: 42rem; margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); font-size: var(--fs-lead); line-height: 1.5; }
.chases { --fade-l: clamp(3rem, 1rem + 9vw, 8rem); --fade-r: clamp(4rem, 1.5rem + 12vw, 11rem); display: grid; gap: .375rem; margin-top: clamp(1.25rem, .75rem + 1.5vw, 2rem); }
.chase-line { overflow: hidden; opacity: .75; }
.chase-line + .chase-line { opacity: .45; }
.chase-row { display: flex; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.chase-row ul { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: .35rem; }
.chase-row ul[aria-hidden] { display: none; }
.chase-row li { display: flex; align-items: baseline; white-space: nowrap; color: var(--navy-300); font-family: var(--font-text); font-weight: 400; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); letter-spacing: -.005em; line-height: 1; }
.chase-line + .chase-line li { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
.chase-row li::after { content: ""; flex: none; align-self: center; width: 4px; height: 4px; margin-inline: clamp(1rem, .7rem + 1vw, 1.375rem); border-radius: 50%; background: var(--coral-400); opacity: .5; }
.chase-row li:last-child::after { display: none; }
/* With JS and motion allowed (and a machine that holds its frames: not .lp, not .lite-gl), each line becomes one long row that drifts, linear and slow, the back line the other way.
   It rests while the pointer is on a line and while it is off screen. Reduced motion keeps the static list above. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.lp):not(.lite-gl) .chase-line {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  }
  .js:not(.lp):not(.lite-gl) .chase-row { width: max-content; max-width: none; margin: 0 0 0 var(--gutter); padding: 0; animation: chase 90s linear infinite; }
  .js:not(.lp):not(.lite-gl) .chase-row ul { flex-wrap: nowrap; }
  .js:not(.lp):not(.lite-gl) .chase-row ul[aria-hidden] { display: flex; }
  .js:not(.lp):not(.lite-gl) .chase-row li:last-child::after { display: block; }
  .js:not(.lp):not(.lite-gl) .chase-line + .chase-line .chase-row { animation-duration: 110s; animation-direction: reverse; }
  .js:not(.lp):not(.lite-gl) [data-offscreen] .chase-row { animation-play-state: paused; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .js:not(.lp):not(.lite-gl) .chase-line:hover .chase-row { animation-play-state: paused; }
}
@keyframes chase { to { transform: translateX(-50%); } }

/* ---------- services hero: busywork slips drift in, pass through the agent and land as one checked stack.
   Drawn in HTML so the moving parts animate on transform and opacity only (WAAPI in site.js).
   The resting state is the finished stack, which is what reduced motion and no-JS visitors see. */
.gather { position: relative; width: 100%; max-width: 36rem; aspect-ratio: 560 / 420; justify-self: center; container-type: inline-size; }
.g-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--navy-200); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.g-lines path { vector-effect: non-scaling-stroke; }
.g-node { position: absolute; left: 35.71%; top: 50%; width: 9.3cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--navy-900); box-shadow: 0 0 0 .9cqw var(--paper-100); }
.g-node::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--coral-400); }
.g-ring { position: absolute; inset: 0; border: 2px solid var(--coral-400); border-radius: 50%; opacity: 0; }
.g-label { position: absolute; left: 35.71%; top: 59.5%; translate: -50% 0; color: var(--muted); font-size: clamp(.6875rem, 2.3cqw, .875rem); font-weight: 600; white-space: nowrap; }
.g-slip { position: absolute; left: 78.93%; top: var(--fy); width: 38%; translate: -50% -50%; display: flex; align-items: center; gap: .55em; padding: .4em .6em; border: 1px solid var(--navy-100); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-size: clamp(.6875rem, 2.4cqw, .875rem); font-weight: 560; line-height: 1.15; white-space: nowrap; transform-origin: 50% 50%; }
.g-slip > .icon { width: 1.2em; height: 1.2em; color: var(--navy-700); }
.g-slip > span { flex: 1; min-width: 0; }
.g-check { display: grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--coral-400); color: var(--navy-900); }
.g-check .icon { width: .85em; height: .85em; stroke-width: 3; }
@media (max-width: 999px) { .gather { max-width: 30rem; } }

/* ---------- contact hero: the agent's view of what happens to your note. It arrives, then the call, the proposal
   and the demo line up and check off, once. Resting state = all checked (reduced motion, no JS). */
.next-art { width: 100%; max-width: 27rem; justify-self: center; display: grid; gap: 1rem; margin: 0; }
.na-note { padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--navy-100); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-m); }
.na-top { display: flex; align-items: center; gap: .55rem; color: var(--ink); font-size: .9375rem; }
.na-top > .icon { color: var(--navy-700); width: 1.1rem; height: 1.1rem; }
.na-from { flex: 1; color: var(--muted); font-size: .875rem; }
.na-msg { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); color: var(--text); font-size: .9375rem; line-height: 1.5; }
.na-steps { position: relative; display: grid; gap: .6rem; padding-left: 1.6rem; }
.na-steps::before { content: ""; position: absolute; left: .55rem; top: -1rem; bottom: 1.4rem; width: 1.5px; background: var(--navy-200); transform-origin: 50% 0; }
.na-card { position: relative; display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border: 1px solid var(--navy-100); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-size: .9375rem; font-weight: 600; }
.na-card::before { content: ""; position: absolute; left: -1.33rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-radius: 50%; background: var(--paper-100); border: 1.5px solid var(--navy-200); }
.na-card > .icon { color: var(--navy-700); width: 1.1rem; height: 1.1rem; }
.na-card > span:first-of-type { flex: 1; }
.na-check { position: relative; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--navy-200); }
.na-tick { position: absolute; inset: -1.5px; display: grid; place-items: center; border-radius: 50%; background: var(--coral-400); color: var(--navy-900); }
.na-tick .icon { width: .8rem; height: .8rem; stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .next-art.is-waiting > *, .next-art.is-waiting .na-card, .next-art.is-waiting .na-tick { opacity: 0; }
  .next-art.is-waiting .na-steps::before { transform: scaleY(0); }
  .next-art.is-playing .na-note { --rise: -14px; animation: rise 640ms var(--ease-out) both; }
  .next-art.is-playing .na-steps::before { animation: draw-down 520ms 900ms var(--ease-in-out) both; }
  .next-art.is-playing .na-card { --rise: 10px; animation: rise 460ms var(--ease-out) both; }
  .next-art.is-playing .na-card:nth-child(1) { animation-delay: 1100ms; }
  .next-art.is-playing .na-card:nth-child(2) { animation-delay: 1500ms; }
  .next-art.is-playing .na-card:nth-child(3) { animation-delay: 1850ms; }
  .next-art.is-playing .na-card:nth-child(4) { animation-delay: 2200ms; }
  .next-art.is-playing .na-tick { animation: pop 300ms var(--ease-out) both; }
  .next-art.is-playing .na-note .na-tick { animation-delay: 700ms; }
  .next-art.is-playing .na-card:nth-child(1) .na-tick { animation-delay: 1600ms; }
  .next-art.is-playing .na-card:nth-child(2) .na-tick { animation-delay: 2000ms; }
  .next-art.is-playing .na-card:nth-child(3) .na-tick { animation-delay: 2350ms; }
  .next-art.is-playing .na-card:nth-child(4) .na-tick { animation-delay: 2700ms; }
  /* the coral word in the contact headline slides in and eases to a gentle stop, once */
  .accent-slow { display: inline-block; animation: slow-stop 1500ms 60ms cubic-bezier(.05, .75, .1, 1) both; }
}
@keyframes draw-down { from { transform: scaleY(0); } }
@keyframes slow-stop { from { transform: translateX(-.6em) skewX(-14deg); } 70% { transform: translateX(.02em) skewX(0); } }

/* ---------- footer: the closing moment. A coral call to action, link columns on thin rules, the partner badge, a
   quiet band of chases, then a full-width "datstra." that rises letter by letter with the coral full stop landing last. */
.site-footer { position: relative; overflow: hidden; background-color: var(--navy-900); color: var(--navy-200); }
.site-footer a { color: var(--navy-100); text-decoration: none; }
.site-footer :focus-visible { outline-color: var(--coral-300); }
.foot-cta { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); background-color: var(--coral-500); color: var(--navy-900); }
.foot-cta-grid { position: relative; z-index: 1; display: grid; gap: 1.5rem 4rem; align-items: end; }
@media (min-width: 900px) { .foot-cta-grid { grid-template-columns: 1.15fr 1fr; } }
.foot-q { max-width: 13ch; font-size: var(--fs-display); line-height: 1; color: var(--navy-900); }
.foot-q .accent { color: var(--paper-100); }
.foot-cta-side p { max-width: 30rem; font-size: var(--fs-lead); line-height: 1.45; color: var(--navy-900); }
.foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.5rem; }
.site-footer .foot-cta .foot-mail { color: var(--navy-900); font-weight: 650; }
.foot-cta :focus-visible { outline-color: var(--navy-900); }
/* Pages that end with the booking form need no second call to action under it. */
.page-contact .foot-cta, .page-finance .foot-cta { display: none; }
.foot-grid { display: grid; gap: 2.5rem 4rem; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; max-width: 34rem; }
.foot-h { margin-bottom: .9rem; padding-bottom: .65rem; border-bottom: 1px solid #ffffff24; font-family: var(--font-text); font-size: .875rem; font-weight: 600; letter-spacing: 0; color: var(--navy-300); }
.foot-nav li + li { margin-top: .5rem; }
.foot-partner { display: grid; gap: .9rem; justify-items: start; }
@media (min-width: 900px) { .foot-partner { justify-items: end; text-align: right; } }
.foot-partner img { width: clamp(13rem, 11rem + 4vw, 15.5rem); }
.foot-partner p { max-width: 17rem; font-size: .875rem; line-height: 1.45; color: var(--navy-200); }
.foot-band { display: none; opacity: .32; }
.foot-band .chases { margin-top: 0; }
.foot-band .chase-row li { color: var(--navy-300); }
.foot-mark { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); font-family: var(--font-display); font-size: min(22rem, calc((min(100vw, var(--max)) - 2 * var(--gutter)) / 3.92)); font-weight: 800; line-height: .8; letter-spacing: -.055em; color: var(--paper-100); white-space: nowrap; overflow: hidden; padding: .4em .2em .2em; margin-inline: -.2em; margin-block: calc(clamp(1.5rem, 1rem + 2vw, 2.5rem) - .4em) -.14em; }
.fm-in, .fl, .fm-dot, .mk { display: inline-block; }
.fm-in, .wm { position: relative; }
.fm-in { transform-origin: 0 100%; }
.foot-mark .fm-dot { color: var(--coral-400); }
/* the logo symbol leads the big wordmark, as in the header; its rings turn once when the footer rises and on hover */
.foot-mark .logo-mark { width: .667em; height: .8em; vertical-align: -.07em; }
.fm-sym { margin-right: .1em; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; margin-top: 1rem; padding-block: 1.25rem 1.5rem; border-top: 1px solid #ffffff24; font-size: .875rem; }
.foot-bottom ul { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; }
.foot-social { justify-content: center; min-width: 2.75rem; }
.foot-social .icon { width: 1.15rem; height: 1.15rem; }
.foot-bottom .foot-social::after { display: none; }
.to-top { display: inline-flex; align-items: center; gap: .35rem; }
.to-top .icon { width: .95rem; height: .95rem; transition: transform 200ms var(--ease-out); }
.foot-nav a, .foot-bottom a, .foot-mail { position: relative; }
.foot-nav a::after, .foot-bottom a::after, .foot-mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .site-footer .foot-grid a:hover, .site-footer .foot-bottom a:hover { color: var(--paper-100); }
  .foot-nav a:hover::after, .foot-bottom a:hover::after, .foot-mail:hover::after { transform: scaleX(1); }
  .to-top:hover .icon { transform: translateY(-2px); }
}
@media (max-width: 899px) { .foot-nav a::after, .foot-bottom a::after, .foot-mail::after { bottom: .55rem; } }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.lp):not(.lite-gl) .foot-band { display: block; }
  .js .foot-mark.is-waiting .fl { transform: translateY(105%); }
  .js .foot-mark.is-waiting .fm-dot { opacity: 0; }
  .foot-mark.is-revealed .fl { animation: mark-rise 900ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
  .foot-mark.is-revealed .fm-dot { animation: dot-land 760ms 460ms both; }
}
@keyframes mark-rise { from { transform: translateY(105%); } }
@keyframes dot-land {
  0% { opacity: 0; transform: translateY(-1.1em); animation-timing-function: cubic-bezier(.45, 0, .7, .4); }
  10% { opacity: 1; }
  68% { transform: translateY(.05em); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  84% { transform: translateY(-.02em); }
  100% { transform: none; }
}

/* ---------- the ambient system: one quiet background language for the whole site.
   1. Grain: a static noise texture on the navy and coral bands, so flat color feels like paper.
   2. Threads: faint line paths behind a few sections, the same lines the agent works along (static).
   3. Notes: a few post-it shapes resting at the edges of warm sections (static, desktop only).
   4. The only movement: a coral dot (the agent) traces a section's thread once when it comes into view, and the
      coral band's light drifts very slowly. Both pause off screen; nothing moves under reduced motion. */
.section--dark, .site-footer, .foot-cta {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.foot-cta::before { content: ""; position: absolute; inset: -40% -20%; z-index: 0; background: radial-gradient(closest-side, rgb(255 255 255 / .16), rgb(255 255 255 / 0)); transform: translateX(-28%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.lp):not(.lite-gl) .foot-cta::before { animation: light-drift 36s ease-in-out infinite alternate; }
  .foot-cta[data-offscreen]::before { animation-play-state: paused; }
}
@keyframes light-drift { to { transform: translateX(28%); } }
.has-amb { position: relative; }
.has-amb > :not(.amb, .amb-notes, .amb-dot) { position: relative; z-index: 1; }
.amb { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: var(--navy-100); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.amb path { vector-effect: non-scaling-stroke; }
.section--warm .amb { stroke: var(--paper-400); }
.section--dark .amb { stroke: var(--navy-700); }
.amb-dot { position: absolute; left: 0; top: 0; z-index: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--coral-400); opacity: 0; pointer-events: none; }
.amb-notes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pi { position: absolute; width: 4.5rem; aspect-ratio: 1; border-radius: 2px 2px 10px 2px; box-shadow: 0 1px 1px #0f1f330d, 0 8px 18px -10px #0f1f3340; opacity: .55; }
.pi-a { right: 4%; top: 2.5rem; background: var(--coral-100); transform: rotate(8deg); }
.pi-b { right: calc(4% + 3.2rem); top: 4.2rem; width: 3.6rem; background: var(--paper-50); border: 1px solid var(--paper-300); transform: rotate(-6deg); }
.pi-c { left: 2.5%; bottom: 2.5rem; width: 3.8rem; background: var(--navy-50); transform: rotate(-9deg); }
@media (max-width: 899px) { .amb-notes { display: none; } }

/* ---------- case study hero: a small Barter run on top of the right column, Sajjad's card anchored below it.
   The request types in, three shops are sent and reply, Indigo ticks $3.65 > $3.30 > $3.12, the approval lands.
   Resting state = the finished run (reduced motion, no JS). */
.page-hero-grid--cs { align-items: stretch; }
.cs-side { display: flex; flex-direction: column; justify-content: space-between; gap: 1.75rem; }
.cs-run { width: 100%; max-width: 30rem; }
.run-body { display: grid; gap: .75rem; padding: 1rem 1.1rem 1.1rem; }
.bx-typed.run-req { min-height: 4.2rem; margin: 0; }
.run-shops { display: grid; gap: .4rem; }
.run-shops li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .7rem; border: 1px solid var(--bx-line); border-radius: 8px; font-size: .875rem; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.run-shops b { font-weight: 650; }
.run-st { display: grid; justify-items: end; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.run-st > span { grid-area: 1 / 1; transition: opacity 300ms ease; }
.rs-sent { opacity: 0; color: var(--bx-muted); font-size: .8125rem; font-weight: 600; }
.rs-price .icon { display: inline; width: .9rem; height: .9rem; vertical-align: -.12em; color: #b26a00; }
.run-shops .is-pick { border-color: var(--coral-400); background: #fff5f6; }
.run-ok { display: flex; align-items: center; gap: .5rem; color: var(--bx-ink); font-size: .875rem; font-weight: 700; transition: opacity 300ms ease; }
.run-check { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--coral-400); color: var(--navy-900); }
.run-check .icon { width: .8rem; height: .8rem; stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .cs-run[data-step] .run-shops li { opacity: 0; transform: translateY(6px); }
  .cs-run:is([data-step="2"], [data-step="3"], [data-step="5"]) .run-shops li { opacity: 1; transform: none; }
  .cs-run[data-step] .run-shops li:nth-child(2) { transition-delay: 120ms; }
  .cs-run[data-step] .run-shops li:nth-child(3) { transition-delay: 220ms; }
  .cs-run[data-step="2"] .rs-sent { opacity: 1; }
  .cs-run:is([data-step="0"], [data-step="1"], [data-step="2"]) .rs-price { opacity: 0; }
  .cs-run[data-step="3"] li:nth-child(2) .rs-price { transition-delay: 150ms; }
  .cs-run[data-step="3"] li:nth-child(3) .rs-price { transition-delay: 300ms; }
  .cs-run[data-step]:not([data-step="5"]) .is-pick { border-color: var(--bx-line); background: transparent; }
  .cs-run[data-step]:not([data-step="5"]) .run-ok { opacity: 0; }
  .cs-run[data-step="5"] .run-check { animation: pop 320ms var(--ease-out) both; }
}

/* ---------- "data + strategy" becomes "datstra." (from the deck): the extra letters unfold in a lighter navy with a
   coral plus, hold, and fold back into the name on the drawer curve. Header and footer wordmarks; JS sets the timing.
   The letters clip only sideways, so descenders show and the text keeps its baseline. Collapsed by default. */
.mx { display: inline-block; width: 0; white-space: pre; font-style: normal; color: var(--navy-300); opacity: 0; transition: opacity 220ms ease; }
.mx-plus { color: var(--coral-400); }
[data-merge].is-open .mx { width: auto; opacity: 1; transition-duration: 450ms; }
[data-merge].is-open .mx-plus { margin-inline: .2em; }
[data-merge].is-open :is(.wm-dot, .fm-dot) { opacity: 0; transition: opacity 150ms ease; }
.fm-dot { transition: opacity 400ms ease 350ms; }
.foot-mark.is-settled :is(.fl, .fm-dot) { animation: none; }
@media (prefers-reduced-motion: reduce) { .mx { transition: none; } }

/* == B: about, case studies, contact ==
   about: the "who we are, and why" section sits in the same split layout as the values section.
   case studies index: three cards. Heal has no link until its case study exists. */
.why p + p { margin-top: 1rem; }
.cs-cards { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .cs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-card { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: clamp(1.25rem, .9rem + 1vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--text); text-decoration: none; }
.cs-card h2 { font-size: var(--fs-h3); line-height: 1.15; }
.cs-card p { color: var(--muted); }
.cs-card .link-arrow { margin-top: auto; align-self: flex-start; }
.cs-card--soon { border-style: dashed; background: transparent; }
.cs-card--soon h2 { color: var(--muted); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a.cs-card { transition: transform 240ms var(--ease-out); }
  a.cs-card:hover { transform: translateY(-3px); }
}
/* == end B == */

/* == C: logo mark, home services row, Who we help ==
   The V1 mark (three coral rings) sits left of the wordmark. Its rings turn on the logo's JS (transform only). */
.logo { align-items: center; gap: .5rem; }
.logo-mark { flex: none; width: 1.583rem; height: 1.9rem; fill: var(--coral-400); overflow: visible; }
.lm-o, .lm-m, .lm-c, .lm-track { transform-box: view-box; transform-origin: 63.333px 43.333px; }

/* home: agents are one part of what we do. A ruled list of the other services, three across on wide screens. */
.more-services h2 { max-width: 22ch; }
.more-list { display: grid; margin-top: clamp(2rem, 1rem + 3vw, 3.25rem); }
@media (min-width: 700px) { .more-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; } }
.more-list li { border-bottom: 1px solid var(--line); }
.more-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.15rem; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; text-decoration: none; }
.more-list a .icon { color: var(--coral-600); transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .more-list a:hover .icon { transform: translateX(3px); } }
.more-who { margin-top: 2rem; }

/* Who we help: the V1 list in V2's rows. The icons reuse the services page ring (.ar-ic). */
.who-list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .75rem 1.25rem; align-items: center; padding-block: 1.6rem; border-bottom: 1px solid var(--line); }
.who-list h2 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.015em; }
.who-txt { display: grid; justify-items: start; gap: .9rem; grid-column: 2; }
.who-txt p { max-width: 36rem; }
@media (min-width: 960px) {
  .who-list li { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
  .who-txt { grid-column: auto; }
}
/* what the agent does for them: three tasks that tick off one after the other */
.who-art { display: grid; gap: .5rem; grid-column: 2; max-width: 19rem; padding: .75rem; border-radius: 14px; background: var(--paper-200); }
.wa-row { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border: 1px solid var(--navy-100); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-size: .8125rem; font-weight: 600; line-height: 1.2; }
.wa-row > .icon { width: 1.15rem; height: 1.15rem; flex: none; color: var(--navy-700); }
.wa-row > span { flex: 1; min-width: 0; }
.wa-row .g-check { width: 1.3rem; height: 1.3rem; }
@media (min-width: 960px) { .who-list li { align-items: center; } .who-art { grid-column: auto; } .agent-rows .who-art { margin-top: .35rem; } }
@media (min-width: 1240px) { .who-list li { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.1fr) 18.5rem; gap: 2rem; } }
@media (min-width: 960px) and (max-width: 1239px) { .who-list .who-art { grid-column: 3; } }

/* == end C == */

/* == A: services and pricing ==
   The workflow map (V1's untangle) lives in the ALIVE section below. Stages, examples and the price tiers are plain layout. */
.stages { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 900px) {
  .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stages--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stages li { padding-top: 1.25rem; }
.stages h3, .stages h4 { margin-bottom: .6rem; }
.sub-head { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); margin-bottom: 1.5rem; }
.note { margin-top: 1.25rem; font-size: .9375rem; color: var(--muted); }
.example { margin-top: clamp(2.5rem, 1.5rem + 2vw, 4rem); }
.example > * { max-width: 46rem; }
.handoff .term-list { margin-top: 1.25rem; }
.example h3 { margin-bottom: .6rem; }

.tiers { display: grid; gap: 2.5rem 2rem; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tier { display: flex; flex-direction: column; gap: .9rem; padding-top: 1.5rem; }
.tier h3 { font-size: var(--fs-h3); }
.tier p { margin: 0; }
.tier-price { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tier-note { margin-top: -.4rem; font-size: .9375rem; color: var(--muted); }
.tier-in { display: grid; gap: .5rem; }
.tier-in li { display: flex; gap: .6rem; align-items: baseline; }
.tier-in li::before { content: ""; flex: none; width: .4rem; height: .4rem; border-radius: 50%; background: var(--coral-400); transform: translateY(-.15em); }
.tier-extra { font-size: .9375rem; color: var(--muted); }
.tier .link-arrow { margin-top: auto; align-self: flex-start; }
.tiers-note { margin-top: 2.5rem; font-size: .9375rem; color: var(--muted); }

/* == end A == */

/* == lead: finance page == */
.fin-met { margin-top: 1.5rem; color: var(--muted); font-size: .9375rem; }
.fin-form-title { margin-bottom: 1.25rem; font-size: var(--fs-h4, 1.5rem); }

/* == lead: case study art == */
.na-card .na-amt { flex: none; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.na-card.is-pick { border-color: var(--coral-300); }
.na-card.is-pick .na-amt { color: var(--ink); }
.na-card--ghost { color: transparent; }
.na-card--ghost > span:first-of-type { height: .55rem; border-radius: 4px; background: var(--paper-300); }
.cs-card { display: flex; flex-direction: column; }
/* Every card's art and logo slot share one height, so the headings line up across a row. */
.cs-art { margin: -.25rem -.25rem 1.25rem; padding: 1.25rem; border-radius: 14px; background: var(--paper-200); display: grid; place-items: center; height: 15.5rem; overflow: hidden; }
.cs-art .next-art { width: 100%; }
.cs-logo { display: flex; align-items: center; height: 2.5rem; margin-bottom: .25rem; }
.cs-logo img { width: auto; max-width: 11rem; height: 100%; object-fit: contain; object-position: left center; }
.cs-logo img.is-wide { height: 1.2rem; }
.cs-logo span { color: var(--muted); font-size: .875rem; font-weight: 600; }
.cs-art .next-art { max-width: 19rem; gap: .7rem; }
.cs-art .na-note { padding: .75rem .85rem .8rem; }
.cs-art .na-top, .cs-art .na-msg, .cs-art .na-card { font-size: .8125rem; }
.cs-art .na-card { padding: .5rem .7rem; }
.cs-art .na-check { width: 1.25rem; height: 1.25rem; }
.cs-card .link-arrow { margin-top: auto; }

/* ==========================================================================================================
   ALIVE: illustrations that play once
   Every illustration is drawn in HTML or SVG and shows its finished state without JS, under reduced motion and
   under ?lp=1. With JS and motion allowed, site.js holds an element marked data-play back (.is-waiting) until about
   35% of it is on screen, then plays it once (.is-playing). The parts inside carry a --d delay (and, for lines and
   draws, a --t duration). Only transform, opacity and stroke-dashoffset move, ease-out, under 700 ms per part
   (the slow fills of a line or a bar are the exceptions: they are one smooth stroke).
   ========================================================================================================== */
.lp *, .lp *::before, .lp *::after { animation: none !important; }
.pt-draw { stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-play].is-waiting :is(.pt, .pt-pop, .pt-grow, .pt-line, .pt-x) { opacity: 0; }
  [data-play].is-waiting .pt-draw { stroke-dashoffset: 1; }
  [data-play].is-playing :is(.pt, .pt-pop, .pt-grow, .pt-line, .pt-x, .pt-draw) { animation-delay: var(--d, 0ms); animation-fill-mode: backwards; animation-timing-function: var(--ease-out); animation-duration: 520ms; }
  [data-play].is-playing .pt { animation-name: rise; --rise: 8px; }
  [data-play].is-playing .pt-pop { animation-name: pop; animation-duration: 340ms; }
  [data-play].is-playing .pt-x { animation-name: from-left; animation-duration: 420ms; }
  [data-play].is-playing .pt-grow { animation-name: grow-y; animation-duration: var(--t, 560ms); }
  [data-play].is-playing .pt-line { animation-name: grow-x; animation-duration: var(--t, 560ms); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  [data-play].is-playing .pt-draw { animation-name: draw; animation-duration: var(--t, 700ms); animation-timing-function: var(--ease-in-out); }
}
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pt-grow { transform-origin: 50% 100%; }
.pt-line { transform-origin: 0 50%; }
.pt-pop { transform-box: fill-box; transform-origin: 50% 50%; }
/* typed text: the full words sit in the HTML (.tw-g); while typing, they are hidden and the same words appear letter by letter on top */
.tw { position: relative; display: block; }
.tw-l { position: absolute; left: 0; top: 0; width: 100%; }
.tw.is-typing .tw-g { visibility: hidden; }

/* ---------- services: the bento of six services. Each tile has a small live picture; it plays once when it comes on
   screen, and again when the pointer arrives. Pictures are drawn on a 12:5 board so every position is a percentage. */
.bento { display: grid; gap: clamp(.75rem, .4rem + 1vw, 1.25rem); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bt { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 640px) { .bt { grid-column: span 6; } }
@media (min-width: 1000px) {
  .bt-agents, .bt-data, .bt-report { grid-column: span 7; }
  .bt-workflow, .bt-ai, .bt-training { grid-column: span 5; }
}
.bt-in { position: relative; display: flex; flex-direction: column; gap: 1rem; height: 100%; padding: .6rem .6rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s); color: var(--text); text-decoration: none; transition: transform 260ms var(--ease-out); }
.bt-art, .tr-art { container-type: inline-size; }
.bt-art { flex: 1; display: grid; place-items: center; padding: clamp(.75rem, .5rem + 1vw, 1.25rem); border-radius: 14px; background: var(--paper-200); }
.bt-fig { position: relative; width: min(100%, 30rem); aspect-ratio: 12 / 5; container-type: inline-size; font-size: clamp(.6875rem, 2.6cqw, .875rem); color: var(--ink); }
.bt-txt { padding: 0 3rem 0 .75rem; }
.bt-txt h3 { margin-bottom: .35rem; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.01em; }
.bt-txt p { font-size: .9375rem; line-height: 1.5; }
.bt-go { position: absolute; right: 1.15rem; bottom: 1.15rem; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1.5px solid var(--coral-400); border-radius: 50%; color: var(--navy-900); transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .bt-in:hover { transform: translateY(-3px); }
  .bt-in:hover .bt-go { transform: translateX(3px); }
}
.bf-lines, .bf-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.bf-lines { stroke: var(--navy-300); stroke-width: 1.5; }
.bf-node { position: absolute; left: 12.5%; top: 50%; width: 11cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--navy-900); box-shadow: 0 0 0 1cqw var(--paper-200); }
.bf-node::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--coral-400); }
.bf-card, .bf-chip { position: absolute; display: flex; align-items: center; gap: .5em; padding: .4em .6em; border: 1px solid var(--navy-100); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-weight: 600; line-height: 1.15; white-space: nowrap; }
.bf-card > .icon, .bf-chip > .icon { width: 1.2em; height: 1.2em; color: var(--navy-700); }
.bf-card { left: 54.6%; width: 43%; translate: 0 -50%; }
.bf-card > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bf-thin { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.bf-job { fill: none; stroke: var(--coral-400); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.bf-stn { fill: #fff; stroke: var(--navy-900); stroke-width: 3.5; }
.bf-rail { position: absolute; left: 10.4%; right: 10.4%; top: 40%; height: .3rem; translate: 0 -50%; border-radius: 3px; background: var(--paper-300); }
.bf-rail--fill { background: var(--coral-400); }
.bf-stop { position: absolute; top: 40%; width: 7.5cqw; aspect-ratio: 1; translate: -50% -50%; }
.bf-stop > i:first-child { position: absolute; inset: 0; border: 2px solid var(--navy-200); border-radius: 50%; background: var(--surface); }
.bf-stop .g-check { position: absolute; inset: 0; width: auto; height: auto; }
.bf-stop .g-check .icon { width: 55%; height: 55%; }
.bf-stop b { position: absolute; top: 100%; left: 50%; margin-top: .7em; translate: -50% 0; color: var(--ink); font-size: 1em; font-weight: 650; white-space: nowrap; }
.bf-chip { left: 1.5%; width: 28%; translate: 0 -50%; }
.bf-table { position: absolute; left: 62%; right: 2.5%; top: 11%; bottom: 11%; display: grid; align-content: center; gap: .5em; padding: .6em .75em; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-m); }
.bf-table b { display: flex; align-items: center; gap: .4em; color: var(--ink); font-weight: 650; }
.bf-table b .icon { width: 1.15em; height: 1.15em; color: var(--navy-700); }
.bf-row { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: .5em; align-items: center; }
.bf-row u { display: block; height: .55em; border-radius: 4px; background: var(--navy-100); }
.bf-row s { width: .7em; height: .7em; border-radius: 50%; background: var(--coral-400); }
.bf-dash { position: absolute; inset: 6% 7%; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: .4em .9em; padding: .6em .8em .7em; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-m); }
.bf-dash > b { grid-column: 1 / -1; display: flex; align-items: center; gap: .45em; color: var(--ink); font-weight: 650; }
.bf-dash > b .icon { width: 1.15em; height: 1.15em; color: var(--navy-700); }
.bf-dash svg { width: 100%; height: 100%; min-height: 0; overflow: visible; }
.bf-grid { fill: none; stroke: var(--paper-300); stroke-width: 1; }
.bf-area { fill: var(--coral-100); opacity: .8; stroke: none; }
.bf-plot { fill: none; stroke: var(--navy-700); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bf-end { fill: var(--coral-400); stroke: #fff; stroke-width: 2; }
.bf-num { display: grid; align-content: center; justify-items: start; color: var(--muted); font-size: .9em; line-height: 1.2; }
.bf-num strong { color: var(--ink); font-family: var(--font-display); font-size: 3.1em; font-weight: 800; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bf-bubble { position: absolute; left: 2.5%; top: 18%; width: 38%; display: grid; gap: .5em; padding: .65em .8em .75em; border: 1px solid var(--navy-100); border-radius: 12px 12px 12px 4px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-weight: 600; line-height: 1.25; }
.bf-bubble i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--navy-900); color: var(--paper-100); }
.bf-bubble i .icon { width: 1.1em; height: 1.1em; }
.bf-task { position: absolute; left: 46%; right: 2.5%; top: 9%; bottom: 9%; display: flex; flex-direction: column; padding: .65em .8em; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-m); }
.bf-task > b { display: flex; align-items: center; gap: .45em; margin-bottom: .35em; color: var(--ink); font-weight: 650; }
.bf-task > b .icon { width: 1.1em; height: 1.1em; color: var(--navy-700); }
.bf-ln { display: block; height: .55em; margin-top: .5em; border-radius: 4px; background: var(--navy-100); }
.bf-done { display: flex; align-items: center; gap: .45em; margin-top: auto; padding-top: .4em; color: var(--ink); font-weight: 650; }
.bf-cursor { position: absolute; left: 63%; top: 68%; width: 1.7em; height: 1.7em; color: var(--navy-900); filter: drop-shadow(0 1px 1px #0f1f3340); }
.bf-cursor .icon { width: 100%; height: 100%; fill: var(--coral-400); stroke: var(--navy-900); stroke-width: 1.75; }
@media (prefers-reduced-motion: no-preference) {
  [data-play].is-waiting .bf-cursor { opacity: 0; }
  [data-play].is-playing .bf-cursor { animation: cursor-work 2600ms var(--ease-in-out) backwards; animation-delay: var(--d, 0ms); }
}
@keyframes cursor-work {
  0% { opacity: 0; transform: translate(-28cqw, -18cqw); }
  8% { opacity: 1; }
  20% { transform: translate(-3cqw, -16cqw); }
  46% { transform: translate(-9cqw, -10cqw); }
  70% { transform: translate(-14cqw, -4cqw); }
  100% { transform: none; }
}
/* the workshop board: four people each get their own work done */
.bf-seats { position: absolute; inset: 8% 3%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3%; }
.bf-seat { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: .5em; }
.bf-seat > i { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--navy-900); color: var(--paper-100); }
.bf-seat > i .icon { width: 1.25em; height: 1.25em; }
.bf-seat > u { position: relative; display: grid; align-content: center; gap: .6em; width: 100%; padding: .7em .6em; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); text-decoration: none; }
.bf-seat s { display: block; height: .5em; width: var(--w); border-radius: 4px; background: var(--navy-100); text-decoration: none; }
.bf-seat em { position: absolute; right: -.45em; top: 3.3em; font-size: 1em; }
.tr-art { padding: 1rem; margin-bottom: 1.25rem; border-radius: 14px; background: var(--paper-100); display: grid; place-items: center; }
.stages--arts li > .mini, .stages--arts li > .tr-art { margin-bottom: 1.25rem; }

/* ---------- services: Keel. Three sources feed one chat; the owner asks, Keel answers with a small chart. */
.keel-side .keel-after { margin-top: 1.5rem; }
.keel-side p + p { margin-top: 1.1rem; }
.ka { display: grid; gap: 1.25rem; max-width: 62rem; margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto 0; }
.ka-src { display: grid; gap: 1rem; }
.ka-chip { display: flex; align-items: center; gap: .6rem; height: 3rem; padding: 0 .95rem; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-size: .9375rem; font-weight: 600; }
.ka-chip .icon { width: 1.15rem; height: 1.15rem; color: var(--navy-700); }
.ka-lines { display: none; }
.ka-chat { display: grid; gap: .8rem; padding: 1rem 1.25rem 1.25rem; border: 1px solid var(--navy-100); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-m); }
.kc-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .9375rem; }
.kc-head span:last-child { color: var(--muted); font-size: .8125rem; }
.kc-q { justify-self: end; max-width: 82%; padding: .6rem .95rem; border-radius: 14px 14px 4px 14px; background: var(--navy-900); color: var(--paper-100); font-size: .9375rem; line-height: 1.4; }
.kc-a { justify-self: start; max-width: 88%; padding: .7rem .95rem .85rem; border: 1px solid var(--navy-100); border-radius: 14px 14px 14px 4px; background: var(--navy-50); color: var(--ink); font-size: .9375rem; line-height: 1.4; }
.kc-bars { display: flex; align-items: flex-end; gap: .35rem; height: 3.4rem; margin-top: .75rem; }
.kc-bars i { flex: 0 1 1.5rem; height: var(--h); border-radius: 3px 3px 0 0; background: var(--navy-200); }
.kc-bars .is-hot { background: var(--coral-400); }
@media (min-width: 800px) {
  .ka { grid-template-columns: 11rem 5rem minmax(0, 1fr); gap: 0; align-items: center; }
  .ka-lines { display: block; width: 5rem; height: 11rem; overflow: visible; fill: none; stroke: var(--navy-300); stroke-width: 1.5; }
}
@media (max-width: 799px) { .ka-src { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .ka-chip { height: 2.75rem; padding: 0 .6rem; font-size: .8125rem; gap: .4rem; } }

/* ---------- crawl, walk, run: three cards that step up, an agent dot on each tread, a coral check as each is done */
.climb { display: grid; gap: 1rem; }
.cl { position: relative; padding: 1.6rem 1.5rem 1.6rem; border: 1px solid var(--line); border-top: 3px solid var(--navy-300); border-radius: 4px 4px var(--r-m) var(--r-m); background: var(--surface); box-shadow: var(--shadow-s); }
.cl-2 { border-top-color: var(--navy-500); }
.cl-3 { border-top-color: var(--navy-900); }
.cl-dot { position: absolute; left: 1.35rem; top: -.62rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--coral-400); box-shadow: 0 0 0 3px var(--paper-100); }
.section--warm .cl-dot { box-shadow: 0 0 0 3px var(--paper-200); }
.cl-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.cl-head h3 { font-size: var(--fs-h3); }
.cl-head .g-check { margin-left: auto; width: 1.6rem; height: 1.6rem; }
.cl-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1.5px solid var(--coral-400); border-radius: 50%; color: var(--navy-900); }
.cl-ic .icon { width: 1.15rem; height: 1.15rem; }
.cl p { max-width: 24rem; }
@media (min-width: 900px) {
  .climb { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 1.25rem; }
  .cl-1 { min-height: 12rem; }
  .cl-2 { min-height: 15rem; }
  .cl-3 { min-height: 18rem; }
}

/* ---------- the workflow map: a monthly newsletter passes through five people. Before, calls, texts and emails tangle with it;
   after, it is one clean line and each person is asked once. The caption, the labels and the toggle all follow the state. */
.transit { max-width: clamp(34rem, calc((100svh - 13rem) * 1.47), 66rem); margin: clamp(2rem, 1rem + 3vw, 3.25rem) auto clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.tr-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-m); }
.tr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.tr-cap { display: grid; flex: 1 1 22rem; margin: 0; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.tr-cap > span { grid-area: 1 / 1; transition: opacity 280ms ease; }
.cap-today { opacity: 0; }
.transit[data-state="today"] .cap-today { opacity: 1; }
.transit[data-state="today"] .cap-clear { opacity: 0; }
.tr-stage { position: relative; aspect-ratio: 1000 / 680; overflow: hidden; }
.tr-stage[data-portrait] { aspect-ratio: 680 / 1080; }
.tr-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-labels { position: absolute; inset: 0; pointer-events: none; }
.tr-labels li { position: absolute; left: var(--x); top: var(--y); --gap: 1.75rem; margin-top: var(--gap); translate: -50% 0; display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: .3rem; width: max-content; min-width: 8.25rem; max-width: 10.5rem; padding: .4rem .65rem .45rem; border: 1px solid var(--navy-100); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--text); font-size: .8125rem; line-height: 1.2; text-align: center; will-change: transform; }
.tr-labels .tl-who { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .45rem; line-height: 1.2; }
/* the picture of each person sits on their stop on the line, so you can follow the job from stop to stop */
.tl-ic { position: absolute; left: 50%; top: calc(var(--gap) * -1); translate: -50% -50%; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--navy-900); color: var(--paper-100); box-shadow: 0 0 0 3px #fff, 0 2px 8px #0f1f3333; transition: background-color 240ms ease, color 240ms ease; }
.tl-ic .icon { width: 1.3rem; height: 1.3rem; stroke-width: 2; }
.tr-labels li.is-done .tl-ic { background: var(--coral-400); color: var(--navy-900); }
.tr-labels b { color: var(--ink); font-size: .875rem; font-weight: 700; }
.tr-labels em { display: inline-flex; align-items: center; gap: .2rem; color: var(--muted); font-size: .75rem; font-style: normal; font-weight: 600; line-height: 1.2; }
.tr-labels em .icon { width: .95em; height: .95em; color: var(--navy-700); }
.tr-labels li > .tl-today, .tr-labels li > .tl-clear { grid-area: 2 / 1; transition: opacity 280ms ease; }
.tl-today { opacity: 0; }
.transit[data-state="today"] .tl-today { opacity: 1; }
.transit[data-state="today"] .tl-clear { opacity: 0; }
/* the people's complaints arrive one by one, in the order the job passes through them */
.tr-labels li.is-hold { opacity: 0; scale: .9; }
.tr-labels li { transition: opacity 320ms ease, scale 320ms var(--ease-out); }
.tr-labels li.is-done::after { content: ""; position: absolute; right: -.4rem; top: -.4rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--coral-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1f33' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat; }
.tr-train { position: absolute; left: 0; top: 0; width: 3.1rem; height: 3.1rem; margin: -1.55rem 0 0 -1.55rem; border-radius: 50%; border: 3px solid var(--coral-400); opacity: 0; pointer-events: none; }
.tr-ask { position: absolute; left: 0; top: 0; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem; border: 4px solid var(--c, var(--navy-900)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff; opacity: 0; pointer-events: none; }
.tr-toggle { display: inline-flex; padding: .2rem; border: 1px solid var(--paper-300); border-radius: var(--r-pill); background: var(--paper-100); }
.tr-toggle button { min-height: 2.25rem; padding: .3rem .95rem; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--navy-800); font-size: .875rem; font-weight: 620; transition: transform 160ms var(--ease-out); }
.tr-toggle button:active { transform: scale(.96); }
.tr-toggle button[aria-pressed="true"] { background: var(--navy-900); color: var(--paper-100); }
.tr-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; padding: .7rem 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; }
.tr-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.tr-legend i { width: 1.1rem; height: .35rem; border-radius: 3px; background: var(--c); }
.tr-legend i.job { height: .5rem; background: var(--coral-400); }
.tr-legend i.tr-person { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--navy-900); color: var(--paper-100); }
.tr-legend i.tr-person .icon { width: .75rem; height: .75rem; }
@media (max-width: 699px) {
  .tr-labels li { --gap: 1.6rem; min-width: 8.5rem; max-width: 9.5rem; padding: .35rem .4rem .4rem; font-size: .6875rem; }
  .tr-labels b { font-size: .8125rem; }
  .tr-labels em { font-size: .6875rem; }
  .tl-ic { width: 2rem; height: 2rem; }
  .tl-ic .icon { width: 1.1rem; height: 1.1rem; }
  .tr-train { width: 2.7rem; height: 2.7rem; margin: -1.35rem 0 0 -1.35rem; }
}
}
}
@media (prefers-reduced-motion: reduce) { .tr-labels li, .tr-labels li > .tl-today, .tr-labels li > .tl-clear, .tr-cap > span { transition: none; } }

/* ---------- services: AI transformation as a roadmap, and three small pictures of what AI does on your data */
ol.road { position: relative; padding-left: 3.5rem; }
.road > li { position: relative; padding-block: 1.1rem; }
.road > li b { display: block; margin-bottom: .2rem; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; color: var(--ink); }
.rd-n { position: absolute; z-index: 1; left: -3.5rem; top: 1rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--coral-400); color: var(--navy-900); font-family: var(--font-display); font-weight: 800; box-shadow: 0 0 0 4px var(--paper-100); }
.road::before, .road::after { content: ""; position: absolute; left: 1.125rem; top: 2rem; bottom: 2rem; width: 2px; margin-left: -1px; }
.road::before { background: var(--paper-300); }
.road::after { background: var(--coral-400); transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .road.is-waiting::after { transform: scaleY(0); }
  .road.is-playing::after { animation: grow-y 1900ms 200ms cubic-bezier(.45, 0, .2, 1) backwards; }
}
.stages--arts li { border-top: 0; padding-top: 0; }
.mini { display: grid; align-content: center; gap: .55rem; min-height: 10.5rem; padding: 1rem; border-radius: 14px; background: var(--paper-200); font-size: .8125rem; line-height: 1.3; color: var(--ink); }
.section--warm .mini { background: var(--paper-100); }
.mn-q { justify-self: end; max-width: 90%; padding: .45rem .7rem; border-radius: 12px 12px 3px 12px; background: var(--navy-900); color: var(--paper-100); }
.mn-a { justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding: .45rem .7rem; border: 1px solid var(--navy-100); border-radius: 12px 12px 12px 3px; background: var(--surface); }
.mn-src { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .45rem; border-radius: var(--r-pill); background: var(--navy-50); color: var(--navy-700); font-style: normal; font-weight: 600; }
.mn-src .icon { width: .9rem; height: .9rem; }
.mn-a .g-check { width: 1.15rem; height: 1.15rem; }
.mn-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: center; gap: .6rem; }
.mn-row b { font-weight: 650; }
.mn-bar { position: relative; display: block; height: .7rem; border-radius: 4px; background: var(--paper-300); }
.mn-bar u { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px; background: var(--navy-300); text-decoration: none; }
.mn-bar u.is-gap { left: var(--l); border-radius: 0 4px 4px 0; background: var(--coral-400); }
.mn-note { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border: 1px solid var(--navy-100); border-radius: 8px; background: var(--surface); font-weight: 600; }
.mn-note .icon { width: .95rem; height: .95rem; color: var(--coral-600); }
.mn-line { display: flex; align-items: center; gap: .5rem; padding: .4rem .65rem; border: 1px solid var(--navy-100); border-radius: 8px; background: var(--surface); }
.mn-line b { flex: 1; font-weight: 600; }
.mn-line .icon { width: .95rem; height: .95rem; color: var(--coral-600); }
.mn-line em { color: var(--coral-700); font-style: normal; font-weight: 600; }
.mn-line.is-flag { border-color: var(--coral-300); }
.mn-line.is-ghost { border-style: dashed; background: transparent; }

/* ---------- services: the revenue example and the flagged budget lines */
.rev, .bva { display: grid; gap: .7rem; max-width: 46rem; margin-top: 1.75rem; padding: 1.25rem 1.4rem; border: 1px solid var(--navy-100); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-size: .9375rem; }
.rv-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: .8rem; margin: 0; }
.rv-row b, .bv-row b { font-weight: 600; }
.rv-bar, .bv-bar { position: relative; display: flex; align-items: center; gap: .6rem; height: .9rem; border-radius: 5px; background: var(--paper-200); }
.rv-bar i, .bv-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 5px; background: var(--navy-300); }
.rv-bar .g-check { position: absolute; right: .3rem; top: 50%; translate: 0 -50%; width: 1.4rem; height: 1.4rem; }
.rv-why { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .1rem; padding-left: 10.3rem; }
.rv-why span { padding: .3rem .7rem; border: 1px solid var(--coral-300); border-radius: var(--r-pill); background: var(--coral-50); color: var(--coral-800); font-size: .8125rem; font-weight: 600; }
.rv-one .rv-bar i { background: var(--navy-800); }
.rv-one b { color: var(--ink); font-weight: 750; }
.bv-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; margin: 0; }
.bv-row.is-flag .bv-bar i { background: var(--coral-400); }
.bv-note { display: inline-flex; align-items: center; gap: .4rem; color: var(--coral-700); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.bv-note .icon { width: .95rem; height: .95rem; }
.bv-ok { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-weight: 600; }
.bv-ok .g-check { width: 1.4rem; height: 1.4rem; }
@media (max-width: 699px) {
  .rv-row { grid-template-columns: 1fr; gap: .3rem; }
  .rv-why { padding-left: 0; }
  .bv-row { grid-template-columns: 5rem minmax(0, 1fr); }
  .bv-note { grid-column: 1 / -1; white-space: normal; }
}

/* the dark "how we'll work" steps: a thin line joins the four icons, drawn in as they arrive */
@media (min-width: 900px) {
  .steps { position: relative; }
  .steps li { position: relative; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; top: calc(1.25rem + 1.5rem); left: 4rem; width: calc(100% - 3.5rem + 2.5rem); height: 2px; background: #ffffff47; transform-origin: 0 50%; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .steps.is-waiting li::after { transform: scaleX(0); }
  .steps.is-drawing li::after { animation: grow-x 700ms var(--ease-in-out) both; animation-delay: calc(var(--sd, 0ms) + 360ms); }
}

/* ---------- pricing: the hero's three steps climb, each with its price tag; the tiers carry a crawl, walk, run meter */
.stairs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .75rem; width: 100%; max-width: 30rem; justify-self: center; margin: 0; }
.sr-col { position: relative; display: grid; justify-items: stretch; }
.sr-tag { display: grid; gap: .1rem; margin-bottom: 1.1rem; padding: .5rem .65rem .55rem; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-size: .8125rem; line-height: 1.25; text-wrap: balance; }
.sr-tag b { color: var(--muted); font-weight: 600; }
.sr-tag span { font-family: var(--font-display); font-size: 1rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sr-dot { position: absolute; left: 50%; bottom: calc(var(--h) - .45rem); width: .9rem; height: .9rem; margin-left: -.45rem; border-radius: 50%; background: var(--coral-400); box-shadow: 0 0 0 3px var(--paper-100); z-index: 2; }
.sr-1 { --h: 7rem; } .sr-2 { --h: 10.5rem; } .sr-3 { --h: 14rem; }
.sr-block { position: relative; display: grid; align-content: start; justify-items: start; gap: .5rem; height: var(--h); padding: 1rem .9rem; border: 1px solid var(--line); border-top: 3px solid var(--navy-300); border-radius: 4px 4px var(--r-m) var(--r-m); background: var(--surface); box-shadow: var(--shadow-s); }
.sr-2 .sr-block { border-top-color: var(--navy-500); }
.sr-3 .sr-block { border-top-color: var(--navy-900); }
.sr-block i { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--coral-400); border-radius: 50%; color: var(--navy-900); }
.sr-block i .icon { width: 1.05rem; height: 1.05rem; }
.sr-block b { color: var(--ink); font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.sr-block .g-check { position: absolute; right: .7rem; top: .85rem; width: 1.4rem; height: 1.4rem; }
.tiers { gap: 1rem; }
.tier { padding: 1.4rem 1.4rem 1.5rem; border: 1px solid var(--line); border-top: 3px solid var(--navy-300); border-radius: 4px 4px var(--r-l) var(--r-l); background: var(--surface); box-shadow: var(--shadow-s); }
.tier:nth-child(2) { border-top-color: var(--navy-500); }
.tier:nth-child(3) { border-top-color: var(--navy-900); }
.tier--apart { border: 1.5px dashed var(--paper-400); background: transparent; box-shadow: none; border-radius: var(--r-l); }
.tier-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.tier-step { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .65rem; border-radius: var(--r-pill); background: var(--paper-200); color: var(--navy-800); font-size: .8125rem; font-weight: 620; }
.tier-meter { display: inline-flex; gap: 3px; }
.tier-meter i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--coral-400); }
.tier-meter i.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--navy-200); }
@media (max-width: 899px) { .stairs { max-width: 26rem; } }

/* ---------- who we help: one agent in the middle, six kinds of team around it, each ticked off in turn */
.hub { position: relative; width: 100%; max-width: 30rem; aspect-ratio: 1; justify-self: center; margin: 0; container-type: inline-size; font-size: clamp(.75rem, 2.9cqw, .9375rem); }
.hb-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--navy-200); stroke-width: .35; }
.hb-node { position: absolute; left: 50%; top: 50%; width: 15cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--navy-900); box-shadow: 0 0 0 1.6cqw var(--paper-100); }
.hb-node::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--coral-400); }
.hb-chip { position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: .5em; padding: .5em .6em .5em .7em; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-weight: 600; line-height: 1.1; white-space: nowrap; }
.hb-chip > .icon { width: 1.25em; height: 1.25em; color: var(--navy-700); }
.hb-chip .g-check { width: 1.3em; height: 1.3em; }

/* ---------- home: the pains as paper notes, the agent's four verbs on a line, the three aims, the services as tiles */
@media (min-width: 1000px) { .bw-list li { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) 15.5rem; } }
.bn { position: relative; display: grid; align-content: start; gap: .3rem; grid-column: 1 / -1; max-width: 19rem; margin-top: .6rem; padding: .7rem .85rem .85rem; border-radius: 4px 4px 8px 4px; box-shadow: var(--shadow-s); color: var(--ink); font-size: .8125rem; line-height: 1.3; }
@media (min-width: 1000px) { .bn { grid-column: auto; margin-top: 0; } .bw-list li:nth-child(odd) .bn { rotate: -1.2deg; } .bw-list li:nth-child(even) .bn { rotate: 1deg; } }
.bn--cool { background: var(--navy-100); }
.bn--warm { background: var(--paper-200); box-shadow: inset 0 0 0 1px var(--paper-300), var(--shadow-s); }
.bn b { font-weight: 650; }
.bn-meta, .bn-type { color: var(--text); }
.bn-bars { display: grid; gap: .3rem; padding-block: .2rem; }
.bn-bars i { display: block; width: var(--w); height: .35rem; border-radius: 3px; background: var(--navy-400, var(--navy-300)); }
.bn-stamp { justify-self: start; margin-top: .25rem; padding: .1rem .5rem; border: 1.5px solid var(--coral-600); border-radius: 6px; background: #ffffffb3; color: var(--coral-700); font-style: normal; font-size: .75rem; font-weight: 700; rotate: -3deg; }
.own-fig { position: relative; display: block; width: min(100%, 34rem); aspect-ratio: 12 / 5; margin: 2.25rem 0 0; container-type: inline-size; font-size: clamp(.75rem, 2.8cqw, .9375rem); color: var(--ink); }
.own-fig .bf-node { box-shadow: 0 0 0 1cqw var(--paper-100); }
.verbs { position: relative; }
.verbs::before { content: ""; position: absolute; left: 1.625rem; top: 3.2rem; bottom: 3.2rem; width: 2px; margin-left: -1px; background: var(--coral-400); opacity: .45; transform-origin: 50% 0; }
.v-ic { position: relative; z-index: 1; background: var(--paper-100); }
@media (prefers-reduced-motion: no-preference) {
  .verbs.is-waiting::before { transform: scaleY(0); }
  .verbs.is-playing::before { animation: grow-y 1400ms var(--ease-in-out) 250ms backwards; transform-origin: 50% 0; }
}
.aims { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.75rem; }
@media (max-width: 639px) { .aims { grid-template-columns: 1fr; } }
.aims li { position: relative; display: grid; align-content: start; gap: .5rem; min-height: 8.5rem; padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-s); }
.aims li > b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.am-ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--coral-400); border-radius: 50%; color: var(--navy-900); }
.am-ic .icon { width: 1.05rem; height: 1.05rem; }
.am-row { position: relative; display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); align-items: center; gap: .5rem; font-size: .75rem; color: var(--muted); }
.am-row u { text-decoration: none; }
.am-row i { display: block; height: .5rem; border-radius: 3px; }
.am-was { background: var(--paper-300); }
.am-now { width: var(--w); background: var(--coral-400); transform-origin: 0 50%; }
.am-cols { display: flex; align-items: flex-end; gap: .35rem; height: 3.25rem; }
.am-cols i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--navy-300); }
.am-cols .am-top { background: var(--coral-400); }
.more-list { gap: .75rem; border-top: 0; }
@media (min-width: 700px) { .more-list { column-gap: .75rem; } }
.more-list li { border-bottom: 0; }
.more-list a { height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-s); justify-content: flex-start; transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.ml-ic { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border: 1.5px solid var(--coral-400); border-radius: 50%; color: var(--navy-900); }
.more-list .ml-ic .icon { width: 1.15rem; height: 1.15rem; color: inherit; }
.ml-go { margin-left: auto; display: grid; }
@media (hover: hover) and (pointer: fine) { .more-list a:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); } .more-list a:hover .ml-go .icon { transform: translateX(3px); } }
.teaser-static text { font-family: var(--font-text); fill: var(--ink); font-size: 12px; font-weight: 600; }
.teaser-static .ts-lab { fill: var(--muted); }
.teaser-static .ts-p { font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.teaser-static .ts-win { fill: var(--coral-700); }

/* ---------- finance: Keel in the hero, the three notes, the questions as a chat, two teams joined into one agent */
.hero-fig { min-width: 0; }
.hero-fig .ka { margin-top: 0; max-width: 34rem; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.hero-fig .ka .ka-src { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.hero-fig .ka .ka-chip { height: 2.75rem; padding: 0 .6rem; font-size: .8125rem; gap: .4rem; }
.hero-fig .ka .ka-lines { display: none; }
.note-row { display: grid; gap: .75rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .note-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .note-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.note-row .bn { grid-column: auto; max-width: none; margin-top: 0; }
.note-row .bn:nth-child(odd) { rotate: -1deg; }
.note-row .bn:nth-child(even) { rotate: 1deg; }
.ask-chat { display: grid; gap: 1.1rem; }
.ask-chat li { display: grid; gap: .5rem; }
.ac-q { justify-self: end; max-width: 92%; padding: .65rem 1rem; border-radius: 14px 14px 4px 14px; background: var(--navy-900); color: var(--paper-100); font-weight: 600; line-height: 1.35; }
.ac-a { display: flex; align-items: flex-start; gap: .6rem; justify-self: start; max-width: 92%; padding: .7rem 1rem; border: 1px solid var(--paper-300); border-radius: 14px 14px 14px 4px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); line-height: 1.4; }
.ac-a .g-check { margin-top: .1rem; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(2rem, 7rem) auto minmax(2rem, 7rem) minmax(0, 1fr); align-items: center; max-width: 54rem; margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto clamp(2rem, 1.5rem + 2vw, 3rem); }
.du-chip { display: grid; justify-items: start; gap: .15rem; padding: .65rem .9rem; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-weight: 650; line-height: 1.2; }
.du-chip .icon { width: 1.2rem; height: 1.2rem; margin-bottom: .2rem; color: var(--navy-700); }
.du-chip small { color: var(--muted); font-size: .8125rem; font-weight: 500; }
.du-line { width: 100%; height: .6rem; overflow: visible; fill: none; stroke: var(--navy-300); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.du-line path { vector-effect: non-scaling-stroke; }
.du-node { display: grid; justify-items: center; gap: .35rem; color: var(--ink); font-size: .8125rem; font-weight: 700; }
.du-node i { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--navy-900); box-shadow: 0 0 0 .35rem var(--paper-100); position: relative; }
.du-node i::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--coral-400); }
@media (max-width: 639px) { .duo { grid-template-columns: minmax(0, 1fr) 2rem auto 2rem minmax(0, 1fr); } .du-chip small { display: none; } .du-chip { font-size: .8125rem; padding: .55rem .6rem; } }
.next-list li.pt { align-items: start; }

/* ---------- case studies and about: rules that tick, real against simulated, what the agent does in each step, giving back */
.rl-ic { display: block; }
.real-grid li { display: flex; align-items: flex-start; gap: .7rem; }
.real-grid li > span { flex: 1; min-width: 0; }
.real-grid li .g-check, .real-grid li .g-sim { margin-top: .1rem; }
.g-sim { display: grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; border: 1.5px dashed var(--coral-500); border-radius: 50%; color: var(--coral-700); }
.g-sim .icon { width: .75em; height: .75em; }
.g-flag { display: grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; border: 1.5px solid var(--coral-500); border-radius: 50%; background: var(--surface); color: var(--coral-700); }
.g-flag .icon { width: .75em; height: .75em; }
.wa-tag { flex: none; padding: .1rem .5rem; border-radius: var(--r-pill); background: var(--paper-200); color: var(--navy-800); font-size: .6875rem; font-style: normal; font-weight: 650; white-space: nowrap; }
.wa-row--ask { border-color: var(--coral-400); }
.wa-row--ask .wa-tag { background: var(--coral-100); color: var(--coral-700); }
.wa-row > span:not(.wa-tag) { flex: 1; min-width: 0; }
.term-list--checks li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .9rem; align-items: start; }
.term-list--checks .g-check { width: 1.5rem; height: 1.5rem; margin-top: .1rem; }
.ar-side { display: grid; gap: .7rem; grid-column: 2; }
.ar-side .who-art { grid-column: auto; max-width: none; margin-top: 0; }
.ar-side .ar-check { margin-top: 0; }
@media (min-width: 960px) { .agent-rows .ar-side { grid-column: auto; margin-top: .35rem; } }

/* == lead: paragraph rhythm in split sections == */
.split p + p { margin-top: .9rem; }

/* == lead: examples use the full width on desktop: words left, figure right == */
@media (min-width: 900px) {
  .example { display: grid; grid-template-columns: 5fr 7fr; column-gap: 4rem; align-items: start; }
  .example > * { grid-column: 1; max-width: none; }
  .example > figure { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; max-width: none; }
}

/* == lead: verbs list, calmer: no row rules, short connectors between the icons only == */
.verbs li { position: relative; padding-block: 1.1rem; border-bottom: 0; align-items: center; }
.verbs li:first-child { padding-top: 1.75rem; }
.verbs::before { display: none; }
.verbs li:not(:last-child)::after { content: ""; position: absolute; left: 1.625rem; width: 2px; margin-left: -1px; top: calc(50% + 1.625rem + .3rem); height: calc(100% - 3.25rem - .6rem); background: var(--coral-300); transform-origin: 50% 0; }
.verbs li:first-child:not(:last-child)::after { top: calc(50% + .325rem + 1.625rem + .3rem); }
.verbs h3 { margin-bottom: .25rem; }
@media (prefers-reduced-motion: no-preference) {
  .verbs.is-waiting li::after { transform: scaleY(0); }
  .verbs.is-playing li::after { animation: grow-y 420ms var(--ease-out) backwards; }
  .verbs.is-playing li:nth-child(1)::after { animation-delay: 450ms; }
  .verbs.is-playing li:nth-child(2)::after { animation-delay: 650ms; }
  .verbs.is-playing li:nth-child(3)::after { animation-delay: 850ms; }
}

/* == lead: on-this-page navigation (services). Phones and tablets: a sticky bar under the header with previous,
   the current section (tap for the list) and next. Wide screens: a fixed list in the left margin. == */
.toc { position: sticky; top: var(--hdr, 4.25rem); z-index: 40; }
.toc-bar { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; align-items: center; height: 3rem; background: var(--paper-100); border-block: 1px solid var(--line); }
.toc-step, .toc-cur { height: 100%; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.toc-step { display: grid; place-items: center; }
.toc-step .icon { width: 1.1rem; height: 1.1rem; }
.toc-prev .icon { rotate: 180deg; }
.toc-step:disabled { color: var(--paper-400); cursor: default; }
.toc-cur { display: flex; align-items: center; justify-content: center; gap: .6rem; min-width: 0; font-weight: 650; font-size: .9375rem; }
.toc-cur span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-cur small { flex: none; color: var(--muted); font-weight: 500; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.toc-panel { display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + .5rem); max-height: 65vh; overflow: auto; padding: .75rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-m); }
.toc.is-open .toc-panel { display: block; }
.toc-head { padding: .25rem .6rem .5rem; color: var(--muted); font-size: .8125rem; }
.toc-list a { display: block; padding: .55rem .6rem; border-radius: 8px; color: var(--text); font-size: .9375rem; text-decoration: none; }
.toc-list a[aria-current="true"] { color: var(--ink); font-weight: 650; background: var(--paper-200); }
.page-services section[id] { scroll-margin-top: calc(var(--hdr, 4.25rem) + 3.5rem); }
@media (min-width: 1200px) {
  /* a small floating card, so the list reads cleanly over every section band it passes */
  .toc { position: fixed; top: calc(var(--hdr, 4.25rem) + 2.5rem); left: max(var(--gutter), calc((100vw - var(--max) - 15.5rem) / 2 + var(--gutter))); width: 11.75rem; padding: .85rem .9rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-m); opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease-out); }
  .toc.is-on { opacity: 1; pointer-events: auto; }
  .toc-bar { display: none; }
  .toc-panel { display: block; position: static; max-height: none; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; }
  .toc-list { border-left: 2px solid var(--line); }
  .toc-list a { position: relative; margin-left: -2px; padding: .4rem 0 .4rem .9rem; border-radius: 0; border-left: 2px solid transparent; font-size: .875rem; color: var(--muted); transition: color 160ms, border-color 160ms; }
  .toc-list a:hover { color: var(--ink); }
  .toc-list a[aria-current="true"] { color: var(--ink); background: none; border-left-color: var(--coral-400); }
  .page-services main > section > .wrap { max-width: calc(var(--max) + 15.5rem); padding-left: calc(var(--gutter) + 15.5rem); }
  .page-services section[id] { scroll-margin-top: calc(var(--hdr, 4.25rem) + 1.5rem); }
}

/* == lead: partner logos on the finance page == */
.pl-logo { display: flex; align-items: center; height: 4rem; margin-bottom: 1rem; }
.pl-logo--img { width: auto; height: 4rem; }
.pl-logo--ds { gap: .55rem; font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; color: var(--navy-900); }
.pl-logo--ds i { font-style: normal; color: var(--coral-400); }
.pl-mark { width: 2.4rem; height: 2.9rem; fill: var(--coral-400); }

/* == lead: Keel answers with inline charts == */
.ask-chat .ac-a { display: block; width: min(100%, 26rem); }
.ac-a > p { margin: 0; }
.ac-a b { font-weight: 700; color: var(--ink); }
.kc-bars { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 4.5rem; margin-top: .8rem; }
.kc-bars i { flex: 1; border-radius: 4px 4px 1px 1px; background: var(--navy-200); transform-origin: 50% 100%; }
.kc-bars i.is-hi { background: var(--coral-400); }
.kc-bars i.is-lo { background: var(--coral-300); }
.kc-pay { position: absolute; left: 0; right: 0; bottom: 38%; border-top: 2px dashed var(--navy-700); transform-origin: 0 50%; }
.kc-pay em { position: absolute; right: 0; top: -1.35rem; font-style: normal; font-size: .75rem; font-weight: 650; color: var(--navy-700); background: var(--surface); padding-left: .3rem; }
.kc-axis { display: flex; justify-content: space-between; margin-top: .35rem !important; color: var(--muted); font-size: .75rem; }
.kc-h { position: relative; display: grid; gap: .45rem; margin-top: .8rem; }
.kc-h p { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: .6rem; margin: 0; font-size: .8125rem; color: var(--muted); }
.kc-h i { display: block; height: .7rem; width: var(--w); border-radius: 99px; background: var(--navy-200); transform-origin: 0 50%; }
.kc-h p:first-child i { background: var(--navy-700); }
.kc-h i.is-hi { background: var(--coral-400); }
.kc-cash { position: absolute; top: -.2rem; bottom: -.2rem; left: calc(6.5rem + .6rem + (100% - 7.1rem) * .8); width: 0; border-left: 2px dashed var(--navy-700); }
.kc-file { display: flex; gap: .7rem; align-items: center; padding: .6rem .7rem; border: 1px solid var(--paper-300); border-radius: 10px; background: var(--paper-100); }
.kc-file .icon { flex: none; width: 1.4rem; height: 1.4rem; color: var(--navy-700); }
.kc-file span { display: grid; }
.kc-file small { color: var(--muted); font-size: .8125rem; }
.kc-sent { display: flex; align-items: center; gap: .5rem; margin-top: .6rem !important; font-size: .9375rem; color: var(--ink); }
.kc-note { margin-top: .9rem; }

/* == lead: keep "Our agent negotiates for you." on one line on wide screens (the map column is empty beside it) == */
@media (min-width: 60rem) { #barter-title { width: max-content; white-space: nowrap; } }

/* == part: about-why.css == */
/* ---------- about: "Who we are, and why." (abw-). A small picture under the heading: a project card fills as the work is
   built, a thin coral slice lifts off the end of the bar and drops into a "Nonprofit work" card, which then checks.
   It uses the site's play system (data-play, pt, pt-pop, pt-line with --d delays) plus one flight for the slice.
   Resting state = finished (slice already delivered, heart filled, check shown), so no JS, reduced motion and ?lp=1
   all show the end. Only transform, opacity and scale move. */

/* layout: heading and picture stack in the left column, the copy sits on the right. On a phone: heading, copy, picture. */
@media (min-width: 900px) {
  .abw-split { grid-template-areas: "head copy" "art copy"; grid-template-rows: auto 1fr; }
  .abw-split > h2 { grid-area: head; }
  .abw-split > .abw-copy { grid-area: copy; }
  .abw-split > .abw-art { grid-area: art; }
}

.abw-art {
  --p: .75rem; --c: 1rem; --h: 2.25rem; --sl: 2.5rem; --bar: .5rem; --np: 3.75rem; --g: 1.25rem;
  /* where the slice ends up, from where it starts (the dashed slot at the end of the bar) */
  --dx: calc(2 * var(--c) + var(--h) / 2 + var(--sl) / 2 - 100cqw);
  --gy: calc(var(--bar) / 2 + var(--c) + var(--g) / 2);
  --dy: calc(var(--np) / 2 + var(--g) + var(--c) + var(--bar) / 2);
  position: relative; container-type: inline-size; display: grid; gap: var(--g); width: 100%; max-width: 32rem; margin: 0; padding: var(--p);
  border-radius: 14px; background: var(--paper-200); color: var(--ink); font-size: .875rem; font-weight: 560; line-height: 1.25;
}
.abw-art b { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.abw-card { background: var(--surface); border: 1px solid var(--navy-100); border-radius: 12px; box-shadow: var(--shadow-s); }

/* the project card */
.abw-proj { display: grid; gap: .55rem; padding: .85rem var(--c) var(--c); }
.abw-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .1rem; font-size: .9375rem; }
.abw-ico { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--navy-900); color: var(--paper-100); }
.abw-ico .icon { width: 1rem; height: 1rem; }
.abw-rows { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.abw-rows li { display: flex; align-items: center; gap: .65rem; margin: 0; }
.abw-box { position: relative; flex: none; width: 1.375rem; height: 1.375rem; border: 1.5px solid var(--navy-200); border-radius: 50%; }
.abw-box .g-check { position: absolute; inset: -1.5px; width: auto; height: auto; }
.abw-box .g-check .icon { width: .8rem; height: .8rem; }
.abw-track { display: grid; grid-template-columns: minmax(0, 1fr) var(--sl); gap: .3rem; height: var(--bar); margin-top: .35rem; }
.abw-bar { display: block; overflow: hidden; border-radius: 99px; background: var(--navy-100); }
.abw-fill { display: block; width: 100%; height: 100%; border-radius: 99px; background: var(--navy-800); }
.abw-slot { display: block; border: 1.5px dashed var(--coral-300); border-radius: 99px; }

/* the nonprofit card */
.abw-np { display: flex; align-items: center; gap: .7rem; height: var(--np); padding: 0 var(--c); font-size: .9375rem; }
.abw-np > b { flex: 1; min-width: 0; }
.abw-heart { position: relative; flex: none; display: grid; place-items: center; width: var(--h); height: var(--h); border: 1.5px dashed var(--coral-300); border-radius: 50%; background: var(--surface); color: var(--navy-200); }
.abw-heart .icon { width: 1.1rem; height: 1.1rem; }
.abw-heart-base, .abw-heart-in { display: grid; place-items: center; }
.abw-heart-in { position: absolute; inset: -2px; border-radius: 50%; background: var(--coral-100); color: var(--coral-700); }
.abw-ok { position: relative; display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--coral-100); color: var(--coral-700); }
.abw-ok .icon { width: .85rem; height: .85rem; stroke-width: 3; }
.abw-ok::after { content: ""; position: absolute; inset: -1.5px; border: 1.5px solid var(--coral-300); border-radius: 50%; opacity: 0; pointer-events: none; }

/* the slice: it rests invisible (it has already arrived); it plays from the end of the bar to the heart */
.abw-slice {
  position: absolute; right: calc(var(--p) + var(--c)); bottom: calc(var(--p) + var(--np) + var(--g) + var(--c));
  width: var(--sl); height: var(--bar); border-radius: 99px; background: var(--coral-400); opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .abw-art.is-playing .abw-slice {
    animation: abw-x 1000ms 1250ms cubic-bezier(.5, 0, .25, 1) backwards, abw-y 1000ms 1250ms linear backwards, abw-fx 1000ms 1250ms linear backwards;
  }
  .abw-art.is-playing .abw-ok::after { animation: abw-ring 700ms calc(var(--d) + 100ms) var(--ease-out); }
}
/* the slice lifts a little, drops into the gap between the cards, glides across to above the heart, then drops in and shrinks */
@keyframes abw-x { 0%, 26% { translate: 0 0; animation-timing-function: cubic-bezier(.45, 0, .3, 1); } 74%, 100% { translate: var(--dx) 0; } }
@keyframes abw-y {
  0% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  12% { transform: translateY(-.3rem) scale(1); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  34%, 66% { transform: translateY(var(--gy)) scale(1); animation-timing-function: cubic-bezier(.5, 0, .8, .6); }
  88% { transform: translateY(var(--dy)) scale(1); animation-timing-function: ease-in; }
  100% { transform: translateY(var(--dy)) scale(.35); }
}
@keyframes abw-fx { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes abw-ring { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

/* == part: blog.css == */
/* Insights (blog): the index, the home teaser and the post pages. Every class is prefixed ins-. */

/* ---------- topic filter (index): shown only when JS runs; without JS every post is listed */
.ins-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.ins-bar .sec-title { margin-bottom: 0; }
.ins-filters { display: none; flex-wrap: wrap; gap: .25rem 1.5rem; }
.js .ins-filters { display: flex; }
.ins-filter { min-height: 2.75rem; padding: .4rem 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font: inherit; font-size: 1.0625rem; font-weight: 620; cursor: pointer; transition: color 160ms ease, border-color 160ms ease; }
.ins-filter:hover { color: var(--ink); }
.ins-filter[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--coral-400); }

/* ---------- the list: one row per post, a rule between rows, no icons or boxes */
.ins-list { list-style: none; margin: 0; padding: 0; }
.ins-item { display: grid; gap: .6rem 2rem; padding-block: clamp(1.25rem, 1rem + .8vw, 1.75rem); border-bottom: 1px solid var(--line); }
.ins-item[hidden] { display: none; }
@media (min-width: 760px) { .ins-item { grid-template-columns: 11rem minmax(0, 1fr); } }
.ins-item h3 { font-size: var(--fs-h3); line-height: 1.15; }
.ins-item h3 a { color: var(--ink); text-decoration: none; }
.ins-item h3 a:hover { text-decoration: underline; text-decoration-color: var(--coral-400); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.ins-item-body p { margin-top: .5rem; max-width: 40rem; color: var(--muted); }
.ins-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem 1rem; margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.ins-meta > span:not(.ins-cat) { display: inline-flex; align-items: center; gap: .35rem; }
@media (min-width: 760px) { .ins-item .ins-meta { flex-direction: column; align-items: flex-start; gap: .15rem; padding-top: .4rem; } }
.ins-cat { color: var(--navy-600); font-weight: 650; }
.ins-all { margin-top: 2rem; }

/* ---------- index: the latest post as the first row */
.ins-lead { padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-bottom: 1px solid var(--line); }
.ins-feature { display: grid; gap: 2rem; align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--r-l); background: var(--navy-900); color: var(--navy-100); text-decoration: none; }
@media (min-width: 900px) { .ins-feature { grid-template-columns: 1.25fr 1fr; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a.ins-feature { transition: transform 240ms var(--ease-out); }
  a.ins-feature:hover { transform: translateY(-3px); }
}
.ins-feature h2 { font-size: var(--fs-h2); line-height: 1.05; color: var(--paper-100); }
.ins-feature-dek { margin-top: 1rem; max-width: 36rem; color: var(--navy-100); }
.ins-feature .ins-meta { margin-top: 1.25rem; color: var(--navy-200); }
.ins-feature .ins-cat { color: var(--navy-100); }
.ins-feature-side { display: grid; gap: 1.5rem; align-content: end; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: 14px; background: var(--navy-800); }
.ins-feature-quote { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; color: var(--paper-100); text-wrap: balance; }
.ins-feature .ins-by-text { color: var(--navy-200); }
.ins-feature .ins-by-text b { color: var(--paper-100); }
.ins-feature .ins-photo { background: var(--navy-700); }

/* ---------- author: small round photo beside the name */
.ins-by { display: flex; align-items: center; gap: .85rem; }
.ins-photo { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; background: var(--navy-50); }
.ins-photo--lg { width: 4rem; height: 4rem; }
.ins-by-text { display: grid; gap: .2rem; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.ins-by-text b { color: var(--ink); font-weight: 650; }
.ins-role { white-space: nowrap; }

/* ---------- post pages: header and reading column */
.ins-post-hero .wrap, .ins-article > .wrap { max-width: 52rem; }
.ins-post-hero { padding-bottom: clamp(.5rem, .25rem + 1vw, 1.25rem); }
.ins-post-hero h1 { font-size: var(--fs-h2); max-width: 22ch; }
.ins-byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 2rem; }
.ins-article { padding-top: clamp(1rem, .5rem + 1vw, 1.5rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* Long reading: about 65 characters a line, generous leading. Headings sit closer to the paragraph they start. */
.ins-body { max-width: 65ch; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.7; color: var(--text); }
.ins-body > * + * { margin-top: 1.25em; }
.ins-body p { text-wrap: pretty; }
.ins-body b { color: var(--ink); }
.ins-body span[lang="ar"] { font-size: 1.08em; }
.ins-body h2 { margin-top: 2.25em; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.015em; }
.ins-body h2 + * { margin-top: .45em; }
.ins-body .ins-pull { margin-top: 1.6em; margin-bottom: .5em; padding-top: 1.1em; position: relative; font-family: var(--font-display); font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem); font-weight: 800; line-height: 1.16; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.ins-body .ins-pull::before { content: ""; position: absolute; left: 0; top: 0; width: 3.25rem; height: 4px; border-radius: 2px; background: var(--coral-400); }
.ins-body .ins-pull p { margin: 0; }

/* Closing note: who wrote it, the way to talk to us, and the quieter LinkedIn link. */
.ins-end { max-width: 65ch; margin-top: 2.75rem; padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); border-radius: var(--r-l); background: var(--paper-200); }
.ins-end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.5rem; }

.ins-related { margin-top: 3rem; }
.ins-related h2 { margin-bottom: .5rem; font-size: var(--fs-h3); }

/* == Insights hero illustration: an essay being written on a small stack of pages, with its topics, read time and
   "Shared on LinkedIn" landing around it. Built from the site's pt / pt-pop / pt-line pieces, so it shows the finished
   state without JS, under reduced motion and under .lp. The pen's small wobble is the only extra motion. == */
.ins-art { position: relative; justify-self: center; width: min(100%, 30rem); aspect-ratio: 6 / 5; margin: 0; }
.ins-art-sheet { position: absolute; inset: 9% 13% 10% 15%; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-50); box-shadow: var(--shadow-s); }
.ins-art-sheet--back { rotate: -7deg; translate: -4% 2%; background: var(--paper-200); }
.ins-art-sheet--mid { rotate: 4deg; translate: 5% -1%; }
.ins-art-page { position: absolute; inset: 7% 15% 12% 13%; display: flex; flex-direction: column; gap: .62rem; padding: 1.15rem 1.25rem 1.3rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-l); rotate: -1.5deg; }
.ins-art-by { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-size: .8125rem; color: var(--ink); }
.ins-art-faces { display: flex; }
.ins-art-faces img { width: 1.75rem; height: 1.75rem; border: 2px solid var(--surface); border-radius: 50%; object-fit: cover; background: var(--navy-50); }
.ins-art-faces img + img { margin-left: -.55rem; }
.ins-art-draft { margin-left: auto; padding: .1rem .5rem; border: 1px solid var(--coral-200); border-radius: var(--r-pill); color: var(--coral-700); font-size: .6875rem; font-weight: 650; }
.ins-art-title, .ins-art-text, .ins-art-quote { display: block; width: var(--w, 100%); border-radius: 4px; }
.ins-art-title { height: .85rem; background: var(--navy-900); }
.ins-art-title + .ins-art-title { margin-bottom: .45rem; }
.ins-art-text { height: .42rem; background: var(--paper-300); }
.ins-art-quote { height: .75rem; margin-block: .25rem; background: var(--coral-300); }
.ins-art-chart { display: flex; align-items: flex-end; gap: .4rem; height: 3.6rem; margin-block: .35rem .2rem; padding: .5rem .6rem 0; border-radius: 10px; background: var(--paper-100); }
.ins-art-chart i { flex: 1; height: var(--h, 50%); border-radius: 4px 4px 0 0; background: var(--navy-200); transform-origin: 50% 100%; }
.ins-art-chart i.is-hi { background: var(--coral-400); }
.ins-art-text--last { position: relative; }
.ins-art-pen { position: absolute; right: -1.55rem; top: 50%; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-top: -.95rem; border-radius: 50%; background: var(--navy-900); color: var(--paper-100); box-shadow: var(--shadow-s); }
.ins-art-pen .icon { width: .95rem; height: .95rem; }
.ins-art-tag { position: absolute; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-size: .8125rem; font-weight: 650; }
.ins-art-tag--a { left: 0; top: 22%; rotate: -6deg; }
.ins-art-tag--b { right: 2%; top: 4%; rotate: 5deg; }
.ins-art-tag--c { right: 0; top: 48%; rotate: -3deg; }
.ins-art-note { position: absolute; left: 4%; bottom: 3%; padding: .9rem .85rem .75rem; background: var(--coral-300); color: var(--navy-900); font-family: var(--font-display); font-size: .9375rem; font-weight: 800; letter-spacing: -.01em; box-shadow: 0 10px 18px -10px #0f1f3366; rotate: -5deg; }
.ins-art-shared { position: absolute; right: 3%; bottom: 0; display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-m); color: var(--ink); font-size: .8125rem; font-weight: 650; }
.ins-art-shared > .icon { width: 1.05rem; height: 1.05rem; color: var(--navy-600); }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.lp) .ins-art.is-done .ins-art-pen .icon, .js:not(.lp) .ins-art.is-playing .ins-art-pen .icon { animation: ins-pen 1.6s ease-in-out 2.2s 3; }
}
@keyframes ins-pen { 0%, 100% { transform: rotate(0deg) translateX(0); } 50% { transform: rotate(-14deg) translateX(-2px); } }
@media (max-width: 999px) { .ins-art { width: min(100%, 26rem); } }

/* == part: cases-hero.css == */
/* ==========================================================================================================
   Case studies hero (cxh-): an open case file. Four client tabs on the folder, a report page clipped inside it where
   a messy before-line turns into one clean line that ends on a coral point, a "Shipped" stamp that lands, and a
   sticky note. Built from the site's pt / pt-line / pt-draw / pt-pop pieces, so the finished state shows without JS,
   under reduced motion and under .lp. Only transform, opacity and stroke-dashoffset move.
   Order: tabs, page slides out of the folder, report writes itself, before-line, clean line, the point, the stamp,
   the note (about 3 seconds). No numbers, logos or cards from the case list below.
   ========================================================================================================== */
.cxh-art {
  --cxh-kraft: #d9d0c1; --cxh-kraft-2: #cfc5b4; --cxh-flap: #e7e0d4;
  position: relative; justify-self: center; width: min(100%, 36rem); aspect-ratio: 8 / 7; margin: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr); container-type: inline-size;
  color: var(--ink); font-size: .8125rem; line-height: 1.3;
}
@media (min-width: 1000px) and (max-width: 1199px), (max-width: 560px) { .cxh-art { aspect-ratio: 1 / 1; } }

/* the folder: tabs on top of a kraft back, a lighter front flap over the bottom of the page */
.cxh-tabs { position: relative; z-index: 1; display: flex; gap: 3px; margin-left: 4%; }
.cxh-tab { padding: .5rem .8rem .55rem; border-radius: 10px 10px 0 0; background: var(--cxh-kraft-2); color: var(--text); font-size: .75rem; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.cxh-tab.is-on { background: var(--cxh-kraft); color: var(--ink); }
.cxh-back { border-radius: 14px; background: var(--cxh-kraft); box-shadow: var(--shadow-m); }
.cxh-flap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 27%; border-radius: 10px 10px 14px 14px; background: var(--cxh-flap); box-shadow: inset 0 1px 0 #fffc, 0 -10px 18px -12px #0f1f3359; }

/* the report page */
.cxh-page { position: absolute; z-index: 2; left: 8%; right: 8%; top: 16%; bottom: 5%; display: flex; flex-direction: column; padding: 4.2cqi 4.8cqi 0; border-radius: 10px 10px 4px 4px; background: var(--surface); box-shadow: 0 1px 2px #0f1f330f, 0 8px 18px -8px #0f1f3340; }
.cxh-head { display: grid; gap: .4rem; }
.cxh-title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: max(.9375rem, 3.4cqi); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.cxh-ln { display: block; width: var(--w); height: .4rem; border-radius: 3px; background: var(--paper-300); }
.cxh-chart { display: block; width: 100%; height: auto; margin-top: 3cqi; overflow: visible; }
.cxh-grid { stroke: var(--paper-300); stroke-width: 1; }
.cxh-turn { stroke: var(--paper-400); stroke-width: 1; stroke-dasharray: 3 4; }
.cxh-mess { stroke: var(--navy-300); stroke-width: 2; stroke-linecap: butt; stroke-linejoin: round; }
.cxh-clean { stroke: var(--navy-900); stroke-width: 3.5; stroke-linecap: butt; }
.cxh-dot { fill: var(--coral-500); stroke: var(--surface); stroke-width: 2.5; }
.cxh-ping { fill: var(--coral-400); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.cxh-circ { stroke: var(--navy-700); stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: round; opacity: .55; }
.cxh-axis { display: grid; grid-template-columns: 40.7% 1fr; margin-top: .3rem; color: var(--muted); font-size: .75rem; font-weight: 600; line-height: 1.2; }
.cxh-axis span:last-child { justify-self: end; }

.cxh-label { position: absolute; right: 7%; bottom: 14%; padding: .2rem .6rem; border-radius: 3px; background: var(--paper-50); box-shadow: inset 0 0 0 1px var(--paper-300); color: var(--muted); font-size: .75rem; font-weight: 650; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; white-space: nowrap; }

/* paperclip, stamp, sticky note */
.cxh-clip { position: absolute; z-index: 4; right: 13%; top: max(6.5%, 2.1rem); width: 4.4cqi; height: auto; overflow: visible; }
.cxh-clip path { stroke: var(--navy-500); stroke-width: 2.4; stroke-linecap: round; }
.cxh-stamp { position: absolute; z-index: 5; right: 7%; bottom: 18%; padding: .3em .7em .3em .85em; border: 2.5px solid var(--coral-600); border-radius: 6px; outline: 1px solid var(--coral-600); outline-offset: 2px; color: var(--coral-600); font-family: var(--font-display); font-size: max(.8125rem, 3.7cqi); font-weight: 800; letter-spacing: .14em; line-height: 1.1; text-transform: uppercase; rotate: -9deg; opacity: .92; }
.cxh-note { position: absolute; z-index: 5; left: 5%; bottom: 8%; display: grid; gap: .1rem; width: 36%; margin: 0; padding: .8rem .8rem .85rem; border-radius: 2px 2px 14px 2px; background: linear-gradient(#0f1f3314 0 0) top / 100% .5rem no-repeat, var(--navy-100); box-shadow: 0 12px 16px -12px #0f1f3380, 0 2px 3px #0f1f3326; color: var(--navy-900); font-family: var(--font-display); font-size: max(.8125rem, 3.1cqi); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; rotate: -3deg; }
.cxh-note span:first-child { color: var(--navy-600); }

@container (max-width: 420px) {
  .cxh-tab { padding: .45rem .5rem .5rem; }
  .cxh-tabs { margin-left: 2%; gap: 2px; }
  .cxh-note { width: 40%; padding: .6rem .6rem .65rem; }
}

@media (prefers-reduced-motion: no-preference) {
  /* the stamp comes down from above: larger, then it lands with a small settle */
  [data-play].is-playing .cxh-stamp { animation-name: cxh-stamp; animation-duration: 460ms; animation-timing-function: cubic-bezier(.3, 1.3, .5, 1); }
  /* one soft ring leaves the coral point when it lands */
  [data-play].is-playing .cxh-ping { animation: ping 900ms var(--ease-out) 1960ms forwards; }
}
@keyframes cxh-stamp { from { opacity: 0; transform: scale(1.7); } 55% { opacity: .92; } }

/* == part: cases-index.css == */
/* ==========================================================================================================
   Case studies index (csx-). Each card has a small picture of what happened in that case, built from the
   pieces the case pages already use (.g-check, the data-play primitives pt, pt-pop, pt-grow, pt-line, pt-draw).
   The hero is a results board: the client logos pinned to their numbers. Every picture shows its finished state
   in the HTML, so no JS, reduced motion and ?lp=1 all show the complete picture. Labels stay at 12px or larger.
   ========================================================================================================== */

/* shared frame: a picture fills the .cs-art box (a fixed height in site.css) and scales its parts with the card */
.csx-art { position: relative; width: 100%; height: 100%; min-height: 0; margin: 0; container-type: inline-size; color: var(--ink); font-size: .8125rem; line-height: 1.3; }
.csx-live { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .45rem; border-radius: var(--r-pill); background: var(--coral-50); color: var(--coral-700); font-size: .75rem; font-weight: 650; line-height: 1.5; }
.csx-live::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--coral-500); }

/* 1. LaunchGood: two growth bars and a Slack-style answer */
.csx-lg-bars { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.csx-lg-col { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
.csx-lg-val { font-family: var(--font-display); font-size: clamp(.9375rem, calc(.6rem + 3.6cqi), 1.25rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.csx-lg-bar { align-self: end; height: var(--h); border-radius: 8px 8px 3px 3px; background: var(--navy-100); }
.csx-lg-bar--b { background: var(--navy-900); box-shadow: inset 0 -5px 0 var(--coral-400); }
.csx-lg-col > small { margin-top: .45rem; color: var(--muted); font-size: .75rem; font-weight: 600; line-height: 1.25; }
.csx-lg-bubble { position: absolute; right: 0; top: 14%; width: 36%; display: grid; gap: .3rem; padding: .6rem .65rem .65rem; border: 1px solid var(--navy-100); border-radius: 12px 12px 12px 3px; background: var(--surface); box-shadow: var(--shadow-m); }
.csx-lg-av { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 7px; background: var(--navy-900); color: var(--coral-300); }
.csx-lg-av .icon { width: .9rem; height: .9rem; }
.csx-lg-bubble > b { color: var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.15; }
.csx-lg-bubble > span:last-child { color: var(--muted); font-size: .75rem; line-height: 1.3; }

/* 2. Human Development Fund: eight systems, one line each, merging into one warehouse */
.csx-hdf { display: grid; align-content: center; }
.csx-hdf-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.csx-hdf-row li { display: grid; place-items: center; justify-self: center; width: 80%; aspect-ratio: 1; border: 1px solid var(--navy-100); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-s); }
.csx-hdf-row .icon { width: .9rem; height: .9rem; color: var(--navy-700); }
.csx-hdf-fan { display: block; width: 100%; height: 3.25rem; overflow: visible; fill: none; stroke: var(--navy-300); stroke-width: .5; }
.csx-hdf-node { justify-self: center; display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem .85rem; white-space: nowrap; border-radius: 12px; background: var(--navy-900); color: var(--paper-100); box-shadow: var(--shadow-m); font-size: .875rem; font-weight: 700; line-height: 1.2; }
.csx-hdf-node .icon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--coral-400); }

/* 3. Barter: the request, then three quotes with the best one picked */
.csx-bar { display: grid; align-content: center; gap: .9rem; }
.csx-bar-ask { justify-self: start; max-width: 94%; display: flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border-radius: 12px 12px 12px 3px; background: var(--navy-900); color: var(--paper-100); font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.csx-bar-ask .icon { width: 1rem; height: 1rem; flex: none; color: var(--coral-400); }
.csx-bar-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.csx-bar-quotes li { position: relative; display: grid; align-content: start; gap: .3rem; padding: .6rem .45rem .65rem; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); }
.csx-bar-quotes li > span { color: var(--muted); font-size: .75rem; font-weight: 600; line-height: 1.25; }
.csx-bar-quotes li > b { color: var(--ink); font-family: var(--font-display); font-size: clamp(.9375rem, calc(.5rem + 3.2cqi), 1.125rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.csx-bar-quotes .csx-pick { border-color: var(--coral-300); box-shadow: 0 0 0 1px var(--coral-300), var(--shadow-m); translate: 0 -.4rem; }
.csx-pick > .g-check { position: absolute; top: -.8rem; left: 50%; translate: -50% 0; width: 1.35rem; height: 1.35rem; box-shadow: 0 0 0 2px var(--surface); }
.csx-nb { white-space: nowrap; }

/* 4. Islamic Society of Baltimore: a mosque, three live tiles and the privacy shield */
.csx-isb-building { position: absolute; left: 0; top: 0; width: 36%; height: 66%; }
.csx-isb-ground { position: absolute; left: -6%; right: -6%; bottom: 0; height: 2px; border-radius: 2px; background: var(--navy-300); }
.csx-isb-hall { position: absolute; left: 16%; right: 16%; bottom: 2px; height: 46%; border-radius: 2px; background: var(--navy-900); }
.csx-isb-dome { position: absolute; left: 27%; right: 27%; bottom: calc(2px + 46%); height: 24%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--navy-700); }
.csx-isb-dome::before { content: ""; position: absolute; left: 50%; top: -.4rem; width: .3rem; height: .3rem; translate: -50% 0; border-radius: 50%; background: var(--coral-400); }
.csx-isb-min { position: absolute; bottom: 2px; width: 10%; height: 72%; border-radius: 3px 3px 0 0; background: var(--navy-700); }
.csx-isb-min--l { left: 4%; }
.csx-isb-min--r { right: 4%; }
.csx-isb-min::before { content: ""; position: absolute; left: 50%; top: -.55rem; width: 0; height: 0; translate: -50% 0; border-left: .32rem solid transparent; border-right: .32rem solid transparent; border-bottom: .55rem solid var(--coral-400); }
.csx-isb-door { position: absolute; left: 50%; bottom: 2px; width: 14%; height: 22%; translate: -50% 0; border-radius: 50% 50% 0 0 / 60% 60% 0 0; background: var(--paper-100); }
.csx-isb-win { position: absolute; bottom: calc(2px + 16%); width: 12%; height: 10%; border-radius: 2px; background: var(--navy-300); }
.csx-isb-win--l { left: 24%; }
.csx-isb-win--r { right: 24%; }
.csx-isb-tiles { position: absolute; right: 0; top: 0; bottom: 0; width: 60%; display: grid; align-content: space-between; gap: .5rem; }
.csx-isb-tile { display: grid; gap: .4rem; padding: .5rem .6rem .55rem; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); }
.csx-isb-tile > b { display: flex; align-items: center; gap: .35rem; color: var(--ink); font-size: .8125rem; font-weight: 650; line-height: 1.2; }
.csx-isb-tile > b > .icon { width: .95rem; height: .95rem; flex: none; color: var(--navy-700); }
.csx-meter { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.csx-meter i { height: .45rem; border-radius: 2px; background: var(--navy-100); }
.csx-meter i.is-hot { background: var(--coral-400); }
.csx-cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.csx-cells i { height: .6rem; border: 1px solid var(--navy-200); border-radius: 2px; background: var(--surface); }
.csx-cells i.is-taken { border-color: var(--navy-700); background: var(--navy-700); }
.csx-tag { justify-self: start; padding: .05rem .45rem; border-radius: var(--r-pill); background: var(--navy-50); color: var(--navy-800); font-size: .75rem; font-weight: 650; line-height: 1.5; }
.csx-isb-shield { position: absolute; left: 0; bottom: 0; width: 38%; display: flex; align-items: center; gap: .4rem; padding: .45rem .55rem; border-radius: 10px; background: var(--navy-900); color: var(--paper-100); box-shadow: var(--shadow-m); font-size: .75rem; font-weight: 650; line-height: 1.25; }
.csx-isb-shield .icon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--coral-400); }
@container (max-width: 260px) {
  .csx-isb-tiles { width: 56%; }
  .csx-isb-shield { width: 43%; padding: .4rem .45rem; }
  .csx-isb-shield > .icon, .csx-isb-tile .csx-live { display: none; }
}

/* 5. Rent the Runway: three sources flow into one live inventory view with three bars */
.csx-rtr-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--navy-300); stroke-width: .5; }
.csx-rtr-src { position: absolute; left: 0; width: 37%; height: 27%; display: flex; align-items: center; gap: .4rem; padding: 0 .5rem; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-size: .75rem; font-weight: 650; line-height: 1.2; }
.csx-rtr-src--a { top: 0; }
.csx-rtr-src--b { top: 36.5%; }
.csx-rtr-src--c { top: 73%; }
.csx-rtr-src > .icon { width: .95rem; height: .95rem; flex: none; color: var(--navy-700); }
.csx-rtr-view { position: absolute; right: 0; top: 8%; bottom: 8%; width: 50%; display: grid; align-content: center; gap: .6rem; padding: .6rem .65rem; border: 1px solid var(--navy-100); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-m); }
.csx-rtr-view > b { display: flex; align-items: center; gap: .35rem; color: var(--ink); font-size: .8125rem; font-weight: 650; line-height: 1.2; }
.csx-rtr-view > b > .icon { width: .95rem; height: .95rem; flex: none; color: var(--navy-700); }
.csx-rtr-bar { display: grid; gap: .25rem; }
.csx-rtr-bar > span { color: var(--muted); font-size: .75rem; font-weight: 600; line-height: 1.2; }
.csx-rtr-bar > i { display: block; height: .5rem; width: var(--w); border-radius: 4px; background: var(--navy-700); }
.csx-rtr-bar > i.is-hot { background: var(--coral-400); }
@container (max-width: 300px) { .csx-rtr-src > .icon { display: none; } }
@container (max-width: 260px) { .csx-rtr-view { padding: .5rem; } .csx-rtr-view .csx-live { display: none; } .csx-rtr-src { padding: 0 .4rem; } }

/* 6. Monthly newsletter: a photo, a story and a sign-off snap into an envelope */
.csx-nl-piece { position: absolute; display: block; height: 84%; width: 29%; padding: .5rem .45rem; border: 1px solid var(--navy-100); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-s); }
.csx-nl-piece--photo { left: 6%; top: 16%; rotate: -4deg; }
.csx-nl-piece--story { left: 36%; top: 7%; rotate: 1.5deg; }
.csx-nl-piece--sign { left: 66%; top: 14%; rotate: 4deg; }
.csx-nl-photo { position: relative; display: block; height: 3.25rem; border-radius: 6px; background: var(--navy-50); overflow: hidden; }
.csx-nl-sun { position: absolute; right: 18%; top: 16%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--coral-400); }
.csx-nl-hill { position: absolute; left: -15%; right: -15%; bottom: -35%; height: 80%; border-radius: 50% 50% 0 0; background: var(--navy-300); }
.csx-nl-head { display: block; width: 72%; height: .4rem; border-radius: 2px; background: var(--navy-700); }
.csx-nl-line { display: block; height: .3rem; margin-top: .45rem; border-radius: 2px; background: var(--navy-100); }
.csx-nl-line--m { width: 86%; }
.csx-nl-line--s { width: 58%; }
.csx-nl-sig { display: block; width: 100%; height: 1.5rem; overflow: visible; fill: none; stroke: var(--navy-700); stroke-width: 1.3; }
.csx-nl-piece--sign > .g-check { position: absolute; top: 2.6rem; right: .45rem; width: 1.2rem; height: 1.2rem; }
.csx-nl-env { position: absolute; left: 5%; right: 5%; bottom: 0; z-index: 3; height: 46%; border-radius: 10px; background: var(--navy-900); box-shadow: var(--shadow-m); overflow: hidden; }
.csx-nl-flap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--navy-500); stroke-width: .5; }


/* == part: cases.css == */
/* ==========================================================================================================
   Case studies: the rules shared by the six case pages (cases-). The client line in the hero is a rule, the
   client's logo, then one line of text. Each logo is sized by height, so a wordmark and a round mark carry about
   the same weight. The hero uses the client block from site.css (.client, .client-logo, .client-who).
   ========================================================================================================== */

/* the client line under the call to action: stacked, aligned to the hero's text column */
.cases-client { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: .85rem; margin-top: clamp(2rem, 1.2rem + 2vw, 3rem); padding-top: 1.5rem; }
.cases-client .client-logo { height: 2.25rem; margin-bottom: 0; object-fit: contain; }
.cases-client .cases-logo--tall { height: 3rem; }
.cases-client .cases-logo--mark { height: 4rem; }
/* a long wordmark (LaunchGood) at the same visual weight as the marks */
.cases-client .cases-logo--wide { height: 1.4rem; }
.cases-client .client-who p + p { margin-top: .4rem; }

/* the links at the foot of a page, with no second call to action above the footer band */
.cases-next { margin-top: 0; }

/* paper notes that sit in a row: no tilt, so the headings line up */
.cases-flat .bn:nth-child(n) { rotate: none; }

/* == part: contact-art.css == */
/* ==========================================================================================================
   Contact hero art: "your week, before and after".
   A packed week (Mon to Fri) and a small agent card. On play, the busywork blocks lift off one by one, fly into
   "Your agent", and a coral check lands for each. The freed week then fills with one coral block.
   The finished picture (no JS, reduced motion, ?lp=1) is the freed week: five pale day columns with one coral block of
   real work across the middle, and the checked agent below. The blocks stay hidden until the flight plays, so the static
   state never shows them. Under 520px the days are rows and the coral block covers Tue to Thu, so it stays centred.
   Everything is in cqw (the figure is the container), so the drawing scales as one piece. Under 520px the week
   turns into rows (one row per day), and the flight vectors switch to match (--mx, --my).
   ========================================================================================================== */
.ct-art { position: relative; width: 100%; max-width: 36rem; min-width: 0; justify-self: center; margin: 0; container-type: inline-size; }
.ct-stage { position: relative; aspect-ratio: 100 / 58; }

/* the week card */
.ct-cal { position: absolute; left: 0; top: 0; width: 100%; height: 38.4cqw; border: 1px solid var(--navy-100); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-m); }
.ct-head { position: absolute; left: 3cqw; right: 3cqw; top: 3cqw; height: 5cqw; display: flex; align-items: center; justify-content: space-between; }
.ct-title { font-family: var(--font-display); font-size: clamp(.9375rem, 2.6cqw, 1.0625rem); font-weight: 800; letter-spacing: -.01em; line-height: 1; color: var(--ink); }
.ct-clock { width: 5cqw; height: 5cqw; color: var(--navy-700); overflow: visible; }
.ct-clock circle { fill: var(--surface); }
.ct-clock path { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ct-days { position: absolute; left: 3cqw; right: 3cqw; top: 9.6cqw; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6cqw; }
.ct-day { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 1.2cqw; }
.ct-day::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-s); background: var(--paper-200); }
.ct-dn { position: relative; height: 3.4cqw; display: flex; align-items: center; padding-left: 1.2cqw; font-family: var(--font-display); font-size: clamp(.75rem, 2.1cqw, .8125rem); font-weight: 700; line-height: 1; color: var(--navy-500); }

/* busywork blocks: hidden in the static state, shown by the flight (see the keyframes below) */
.ct-b { position: relative; z-index: 2; height: 10cqw; margin-inline: .8cqw; box-sizing: border-box; display: flex; align-items: center; padding: .8cqw 1.2cqw; border: 1px solid var(--navy-100); border-radius: var(--r-s); background: var(--surface); box-shadow: var(--shadow-s); color: var(--navy-800); font-family: var(--font-display); font-size: clamp(.75rem, 2.1cqw, .8125rem); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; opacity: 0; --tx: var(--dx); --ty: var(--dy); }

/* the freed week */
.ct-free { position: absolute; z-index: 1; left: 3.8cqw; top: 18.3cqw; width: 92.4cqw; height: 13cqw; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0 3cqw; text-align: center; border-radius: var(--r-m); background: var(--coral-400); color: var(--navy-900); font-family: var(--font-display); font-size: clamp(1rem, 3.3cqw, 1.3125rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }

/* the agent card */
.ct-agent { position: absolute; z-index: 3; left: 27cqw; top: 43cqw; width: 46cqw; height: 14cqw; box-sizing: border-box; padding: 2.2cqw 3cqw; display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--r-m); background: var(--navy-900); color: var(--paper-100); box-shadow: var(--shadow-m); }
.ct-name { display: flex; align-items: center; gap: .55em; font-family: var(--font-display); font-size: clamp(.9375rem, 2.6cqw, 1.125rem); font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.ct-name::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--coral-400); }
.ct-tray { display: flex; gap: max(2px, .5cqw); }
.ct-tray li { flex: none; width: max(.6875rem, 2.8cqw); height: max(.6875rem, 2.8cqw); display: grid; place-items: center; border-radius: 50%; background: var(--coral-400); color: var(--navy-900); }
.ct-tray .icon { width: 62%; height: 62%; stroke-width: 3.2; }

/* the small touches */
.ct-sticky { position: absolute; z-index: 3; right: 2cqw; top: 43.4cqw; width: 19cqw; box-sizing: border-box; padding: 1.6cqw 2cqw; border-radius: 4px; background: var(--coral-100); color: var(--navy-900); font-family: var(--font-display); font-size: clamp(.8125rem, 2.3cqw, .9375rem); font-weight: 700; line-height: 1.2; rotate: -3deg; box-shadow: var(--shadow-s); }
.ct-cup { position: absolute; z-index: 3; left: 2cqw; top: 45cqw; width: 10.5cqw; height: auto; overflow: visible; color: var(--navy-900); }
.ct-cup path[fill="none"] { fill: none; }
.ct-cup path:not([fill]) { fill: var(--surface); }

/* the flight: lift about 1cqw, then travel into the agent card and fade (900ms, transform and opacity only) */
@keyframes ct-fly {
  0% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  14% { opacity: 1; transform: translate(0, -1.2cqw) scale(1.04); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { opacity: 0; transform: translate(calc(var(--tx) * 1cqw), calc(var(--ty) * 1cqw)) scale(.25); }
}
@keyframes ct-open { from { clip-path: inset(0 100% 0 0 round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
@media (prefers-reduced-motion: no-preference) {
  [data-play].is-playing .ct-b { animation-name: ct-fly; animation-duration: 900ms; animation-delay: var(--f, 0ms); animation-fill-mode: both; }
  [data-play].is-waiting .ct-free { clip-path: inset(0 100% 0 0 round 12px); }
  [data-play].is-playing .ct-free { animation: ct-open 620ms cubic-bezier(.16, 1, .3, 1) var(--f, 0ms) both; }
}

/* under 520px: one row per day, two blocks side by side, the agent card below */
@container (max-width: 519px) {
  .ct-stage { aspect-ratio: 100 / 104; }
  .ct-cal { height: 81cqw; }
  .ct-head { left: 4cqw; right: 4cqw; top: 4cqw; height: 7cqw; }
  .ct-clock { width: 6.5cqw; height: 6.5cqw; }
  .ct-days { left: 4cqw; right: 4cqw; top: 14cqw; grid-template-columns: minmax(0, 1fr); gap: 2cqw; }
  .ct-day { display: grid; grid-template-columns: 13cqw minmax(0, 1fr) minmax(0, 1fr); gap: 2cqw; }
  .ct-dn { height: 11cqw; }
  .ct-b { height: 11cqw; margin-inline: 0; --tx: var(--mx); --ty: var(--my); }
  .ct-free { left: 20cqw; top: 28cqw; width: 75cqw; height: 35cqw; }
  .ct-agent { left: 27cqw; top: 86cqw; width: 46cqw; height: 18cqw; }
  .ct-sticky { left: 1.5cqw; right: auto; top: 86.5cqw; width: 24cqw; }
  .ct-cup { left: auto; right: 2cqw; top: 86.6cqw; width: 13cqw; }
}

/* the finished picture under reduced motion and ?lp=1 is the static state: the freed week and the checked agent */

/* == part: csa.css == */
/* ==========================================================================================================
   Case studies: LaunchGood and Human Development Fund (csa-). A growth bar and eight systems merging into one
   warehouse in the hero, the steps as cards, the numbers large, a quote.
   Pictures play once through data-play (site.js). The finished state is the default, so no JS, reduced motion
   and ?lp=1 all show the complete picture.
   ========================================================================================================== */

/* ---------- hero, right column: a growth bar with three chips that tick */
.csa-growth { position: relative; width: 100%; max-width: 30rem; margin: 0; padding: clamp(1rem, .8rem + 1vw, 1.5rem); border: 1px solid var(--navy-100); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-m); color: var(--ink); }
.csa-gr-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; color: var(--muted); font-size: .9375rem; font-weight: 600; }
.csa-gr-cap em { font-style: normal; color: var(--coral-700); font-weight: 650; }
.csa-gr-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; height: 15rem; margin-top: 1.25rem; }
.csa-gr-col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; height: 100%; }
.csa-gr-val { margin-bottom: .5rem; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.csa-gr-bar { display: block; height: var(--h); border-radius: 10px 10px 4px 4px; }
.csa-gr-bar--a { background: var(--navy-100); }
.csa-gr-bar--b { background: var(--navy-900); box-shadow: inset 0 -6px 0 var(--coral-400); }
.csa-gr-col small { margin-top: .5rem; color: var(--muted); font-size: .8125rem; font-weight: 600; }
.csa-gr-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.csa-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .6rem .4rem .55rem; border: 1px solid var(--navy-100); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-size: .8125rem; font-weight: 650; line-height: 1.2; }
.csa-chip > .icon { width: 1rem; height: 1rem; color: var(--navy-700); }
.csa-chip .g-check { width: 1.15rem; height: 1.15rem; }
.csa-chip .g-check .icon { width: .75em; height: .75em; }

/* ---------- hero, right column: eight systems, one line each, merging into one warehouse card */
.csa-merge { width: 100%; max-width: 34rem; margin: 0; color: var(--ink); }
.csa-mg-cap { display: flex; align-items: center; gap: .45rem; margin-bottom: .75rem; color: var(--muted); font-size: .9375rem; font-weight: 600; }
.csa-mg-cap .icon { width: 1rem; height: 1rem; color: var(--navy-700); }
.csa-mg-box { position: relative; aspect-ratio: 3 / 2; container-type: inline-size; font-size: clamp(.8125rem, 2.8cqw, .9375rem); }
@media (max-width: 559px) { .csa-mg-box { aspect-ratio: 1 / 1; } }
.csa-mg-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--navy-300); stroke-width: 1.5; }
.csa-mg-lines path { vector-effect: non-scaling-stroke; }
.csa-mg-src { position: absolute; top: 0; bottom: 0; left: 0; width: 36%; }
.csa-mg-src li { position: absolute; left: 0; width: 100%; top: var(--y); translate: 0 -50%; }
.csa-mg-src li > span { display: flex; align-items: center; justify-content: center; height: 2.1em; border: 1px solid var(--navy-100); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-s); }
.csa-mg-src .icon { width: 1.15em; height: 1.15em; color: var(--navy-700); }
.csa-mg-node { position: absolute; left: 62%; top: 50%; width: 36%; translate: 0 -50%; display: grid; gap: .35em; padding: .85em .9em; border: 1px solid var(--navy-100); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-m); }
.csa-mg-node i { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--navy-900); color: var(--paper-100); }
.csa-mg-node i .icon { width: 1.1em; height: 1.1em; }
.csa-mg-node b { color: var(--ink); font-size: 1.05em; font-weight: 700; line-height: 1.15; }
.csa-mg-node small { color: var(--muted); font-size: .9em; line-height: 1.35; }

/* ---------- steps as cards: a grid of two, so every card in a row has the same height and heading line */
.csa-cards { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 1rem + 2vw, 3rem); }
@media (min-width: 760px) { .csa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.csa-card { position: relative; display: grid; align-content: start; gap: .6rem; padding: clamp(1.25rem, .9rem + 1vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s); }
.csa-card h3 { font-size: var(--fs-h4); line-height: 1.2; }
.csa-card p { max-width: 36rem; color: var(--text); }
.csa-n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: .4rem; border-radius: 50%; background: var(--coral-400); color: var(--navy-900); font-family: var(--font-display); font-size: 1rem; font-weight: 800; }

/* ---------- what the fund has now: a checked list under the prose */
.csa-have { margin-top: 1.5rem; padding-top: .25rem; }
.csa-have li { display: flex; align-items: center; gap: .75rem; padding-block: .7rem; border-bottom: 1px solid var(--paper-400); color: var(--ink); font-weight: 560; }
.csa-have .g-check { width: 1.5rem; height: 1.5rem; }

/* ---------- a short line of text between the pictures */
.csa-note { max-width: 48rem; margin-top: 2rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }

/* ---------- the numbers, large: before and after, then smaller stat cards */
.csa-cmp { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.75rem; }
.csa-cmp-side { display: grid; gap: .45rem; }
.csa-cmp-lab { color: var(--muted); font-size: .9375rem; font-weight: 600; }
.csa-cmp-num { font-family: var(--font-display); font-size: clamp(3.25rem, 2rem + 5vw, 6.5rem); font-weight: 800; letter-spacing: -.045em; line-height: .9; color: var(--ink); font-variant-numeric: tabular-nums; }
.csa-cmp-from .csa-cmp-num { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); color: var(--paper-600); }
.csa-cmp-arrow { padding-bottom: .4em; color: var(--coral-500); font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); font-weight: 800; line-height: 1; }
@media (max-width: 639px) {
  .csa-cmp { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .csa-cmp-arrow { padding-bottom: 0; rotate: 90deg; }
}
.csa-stats { display: grid; gap: 1rem; margin-top: clamp(2rem, 1rem + 2vw, 3rem); }
@media (min-width: 700px) { .csa-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .csa-stats--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.csa-stat { display: grid; align-content: start; padding: clamp(1.25rem, .9rem + 1vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.csa-stat b { min-height: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem); font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.csa-stat .csa-stat-word { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -.02em; }
.csa-stat span { margin-top: .6rem; color: var(--text); }

/* ---------- the quote: a dark band, the words large, no border on the quote */
.csa-quote { margin: 0; max-width: 58rem; }
.csa-quote blockquote { margin: 0; }
.csa-quote-mark { display: block; height: .6em; overflow: hidden; color: var(--coral-300); font-family: var(--font-display); font-size: clamp(4rem, 3rem + 4vw, 6rem); font-weight: 800; line-height: 1; }
.csa-quote p { margin-top: 1rem; font-family: var(--font-display); font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.22; color: var(--paper-100); text-wrap: pretty; }
.csa-quote figcaption { margin-top: 1.5rem; color: var(--navy-200); }
.csa-quote figcaption b { display: block; color: var(--paper-100); font-size: 1.0625rem; }



/* == part: csb.css == */
/* ---------- case studies: Islamic Society of Baltimore and Rent the Runway (csb-). Shapes are plain boxes and the
   motion comes from the shared data-play classes (pt, pt-pop, pt-line, pt-draw, .tw), so reduced motion, .lp and
   no-JS already show the finished pictures. */

/* hero pictures: one box, positioned in percentages, so the parts keep their places at every width */
.csb-art { position: relative; width: 100%; max-width: 30rem; justify-self: center; aspect-ratio: 5 / 4; margin: 0; container-type: inline-size; font-size: clamp(.75rem, .55rem + .9vw, .9375rem); color: var(--ink); }
.csb-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--navy-300); stroke-width: .3; }

/* Islamic Society of Baltimore: a building with three live tiles */
.csb-isb { aspect-ratio: 5 / 4; }
.csb-ground { position: absolute; left: 2%; width: 46%; top: 84%; height: 2px; border-radius: 2px; background: var(--navy-300); }
.csb-min { position: absolute; top: 30%; width: 6%; height: 54%; border-radius: 3px 3px 0 0; background: var(--navy-700); }
.csb-min--l { left: 6%; }
.csb-min--r { left: 36%; }
.csb-min::before { content: ""; position: absolute; left: 0; right: 0; top: -10%; height: 10%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--coral-400); }
.csb-hall { position: absolute; left: 10%; width: 32%; top: 52%; height: 32%; border-radius: 2px; background: var(--navy-900); }
.csb-dome { position: absolute; left: 14%; width: 24%; top: 34%; height: 20%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--navy-700); }
.csb-door { position: absolute; left: 24%; width: 8%; top: 66%; height: 18%; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: var(--paper-100); }
.csb-win { position: absolute; width: 4%; height: 6%; border-radius: 2px; background: var(--navy-300); }
.csb-tile { position: absolute; left: 56%; width: 40%; display: grid; align-content: start; gap: .5em; padding: .6em .7em .7em; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); }
.csb-tile > b, .csb-view > b { display: flex; align-items: center; gap: .4em; color: var(--ink); font-weight: 650; }
.csb-tile > b .icon, .csb-view > b .icon { width: 1.15em; height: 1.15em; flex: none; color: var(--navy-700); }
.csb-live { margin-left: auto; display: inline-flex; align-items: center; gap: .3em; padding: .05em .55em; border-radius: var(--r-pill); background: var(--coral-50); color: var(--coral-700); font-size: .75em; font-weight: 650; line-height: 1.6; }
.csb-live::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: var(--coral-500); }
.csb-meter { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.csb-meter i { height: .6em; border-radius: 2px; background: var(--navy-100); }
.csb-meter i.is-hot { background: var(--coral-400); }
.csb-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.csb-cells i { aspect-ratio: 1.5; border: 1px solid var(--navy-200); border-radius: 3px; background: var(--surface); }
.csb-cells i.is-taken { border-color: var(--navy-700); background: var(--navy-700); }
.csb-type { display: block; color: var(--ink); font-weight: 600; line-height: 1.3; }
.csb-tag { justify-self: start; display: inline-flex; align-items: center; gap: .3em; padding: .15em .6em .15em .4em; border-radius: var(--r-pill); background: var(--navy-50); color: var(--navy-800); font-size: .8em; font-weight: 650; }
.csb-tag .icon { width: 1em; height: 1em; color: var(--coral-600); }
.csb-alert { position: absolute; left: 3%; top: 88%; display: inline-flex; align-items: center; gap: .45em; padding: .35em .7em; border-radius: 8px; background: var(--navy-900); color: var(--paper-100); font-weight: 650; box-shadow: var(--shadow-m); }
.csb-alert .icon { width: 1.1em; height: 1.1em; flex: none; color: var(--coral-400); }

/* Rent the Runway: three sources flow into one inventory view */
.csb-rtr { aspect-ratio: 5 / 4; max-width: 34rem; }
.csb-src--a { top: 10%; }
.csb-src--b { top: 42%; }
.csb-src--c { top: 74%; }
.csb-src { position: absolute; left: 2%; width: 37%; height: 18%; display: flex; align-items: center; gap: .6em; padding: 0 .7em; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); }
.csb-src > .icon { width: 1.4em; height: 1.4em; flex: none; color: var(--navy-700); }
.csb-src > span { display: grid; gap: .15em; min-width: 0; }
.csb-src b { color: var(--ink); font-size: .9em; font-weight: 650; line-height: 1.2; }
.csb-src small { color: var(--muted); font-size: .75em; line-height: 1.25; }
.csb-view { position: absolute; left: 52%; top: 19%; width: 46%; height: 62%; display: grid; align-content: center; gap: .9em; padding: .8em .9em; border: 1px solid var(--navy-100); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-m); }
.csb-bar { display: grid; grid-template-columns: minmax(0, 6.6em) minmax(0, 1fr); gap: .6em; align-items: center; color: var(--muted); font-size: .85em; }
.csb-bar i { display: block; height: .7em; width: var(--w); border-radius: 4px; background: var(--navy-700); }
.csb-bar i.is-hot { background: var(--coral-400); }
.csb-view-foot { display: flex; align-items: center; gap: .4em; color: var(--ink); font-size: .85em; font-weight: 650; }
.csb-view-foot .icon { width: 1.1em; height: 1.1em; color: var(--coral-600); }

/* steps as cards */
.csb-steps { display: grid; gap: 1rem; }
@media (min-width: 680px) { .csb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .csb-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.csb-step { display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.25rem, .9rem + 1vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s); }
.csb-step-top { display: flex; align-items: center; justify-content: space-between; }
.csb-ic { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1.5px solid var(--coral-400); border-radius: 50%; color: var(--navy-900); }
.csb-ic .icon { width: 1.3rem; height: 1.3rem; }
.csb-n { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; letter-spacing: -.01em; color: var(--coral-600); }
.csb-step h3 { font-size: var(--fs-h4); line-height: 1.2; }
.csb-step p { color: var(--muted); line-height: 1.55; }

/* big numbers: one row of equal cards on desktop; in between, two to a row with the last card across both */
.csb-stats { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .csb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csb-stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .csb-stats--five > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .csb-stats--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .csb-stats--five > :last-child:nth-child(odd) { grid-column: auto; }
  .csb-stats--five .csb-big { font-size: clamp(2.5rem, 1.5rem + 1.6vw, 3.75rem); }
}
.csb-stat { display: grid; align-content: start; gap: .7rem; padding: clamp(1.25rem, .9rem + 1.2vw, 2rem); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s); }
.csb-big { display: block; font-family: var(--font-display); font-size: clamp(3.25rem, 2rem + 3.5vw, 5.5rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.csb-unit { color: var(--coral-500); }
.csb-stat--word .csb-big { font-size: clamp(2.5rem, 1.6rem + 2.4vw, 4.25rem); letter-spacing: -.03em; min-height: calc(clamp(3.25rem, 2rem + 3.5vw, 5.5rem) * .9); }
.csb-stat p { color: var(--text); font-size: 1.0625rem; line-height: 1.4; }
.csb-more { max-width: 40rem; margin-top: clamp(2rem, 1rem + 2vw, 3rem); font-size: var(--fs-lead); line-height: 1.5; }

/* privacy: the does and does-not list */
.csb-no { display: grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; margin-top: .1rem; border: 1.5px dashed var(--coral-500); border-radius: 50%; }
.csb-no::before { content: ""; width: .55em; height: 2px; border-radius: 2px; background: var(--coral-700); }

/* business impact and tools */
.csb-impact { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.csb-impact h3 { padding-bottom: .6rem; font-size: var(--fs-h4); }
.csb-impact ul { display: grid; }
@media (min-width: 800px) { .csb-impact ul { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.csb-impact li { display: flex; align-items: center; gap: .75rem; padding-block: .85rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.csb-impact .g-check { width: 1.5rem; height: 1.5rem; }
.csb-stack { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.csb-stack > p { color: var(--muted); font-size: .9375rem; font-weight: 600; }
.csb-stack ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.csb-stack li { padding: .35rem .85rem; border: 1px solid var(--navy-200); border-radius: var(--r-pill); background: var(--navy-50); color: var(--navy-900); font-size: .9375rem; font-weight: 600; }
.csb-stack > .csb-stack-note { margin-top: 1.5rem; color: var(--ink); font-size: var(--fs-lead); font-weight: 500; }

/* section head with a lead under the title */
.csb-head h2 { margin-bottom: 0; }
.csb-head .lead { margin-top: 1rem; margin-bottom: clamp(2rem, 1rem + 2vw, 3rem); }

/* small screens: the pictures stack, so the labels stay readable */
.csb-lines--m { display: none; }
@media (max-width: 599px) {
  .csb-isb { aspect-ratio: 1 / 1; }
  .csb-rtr { aspect-ratio: 1 / 1.15; max-width: none; }
  .csb-rtr .csb-lines:not(.csb-lines--m) { display: none; }
  .csb-lines--m { display: block; }
  .csb-src { top: 0; width: 31%; height: 24%; flex-direction: column; align-items: flex-start; justify-content: center; gap: .3em; padding: .5em .55em; }
  .csb-src--a { left: 0; }
  .csb-src--b { left: 34.5%; }
  .csb-src--c { left: 69%; }
  .csb-view { top: 46%; left: 3%; width: 94%; height: 50%; }
}

/* == part: cva.css == */
/* ==========================================================================================================
   Case studies: LaunchGood, Human Development Fund and Rent the Runway (cva-). Each small picture shows the thing
   its text describes, and uses only facts from that page. They are plain boxes that play once through the shared
   data-play classes (pt, pt-pop, pt-line, pt-grow, pt-x), so reduced motion, .lp and no-JS show the finished picture.
   ========================================================================================================== */

/* the frame: a paper panel with one picture inside */
.cva-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 10.5rem; padding: .9rem; border-radius: 14px; background: var(--paper-200); container-type: inline-size; font-size: .8125rem; line-height: 1.3; color: var(--ink); }
.cva-art .icon { width: 1.15em; height: 1.15em; flex: none; }
.cva-art b { color: var(--ink); font-weight: 650; }

/* shared parts: a white tile, a navy hub, a coral arrow */
.cva-box { display: flex; align-items: center; gap: .45em; min-width: 0; padding: .5em .65em; border: 1px solid var(--navy-100); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-weight: 650; line-height: 1.2; }
.cva-box .icon, .cva-merge-src .icon, .cva-loc .icon { color: var(--navy-700); }
.cva-box--stack { display: grid; align-content: start; justify-items: start; gap: .4em; }
.cva-hub { display: grid; justify-items: center; align-content: center; gap: .4em; padding: .75em .85em; border-radius: 12px; background: var(--navy-900); box-shadow: var(--shadow-m); color: var(--paper-100); font-weight: 650; line-height: 1.2; text-align: center; }
.cva-hub .icon { width: 1.5em; height: 1.5em; color: var(--coral-300); }
.cva-hub b { color: var(--paper-100); }
.cva-arrow { display: grid; place-items: center; flex: none; }
.cva-arrow .icon { width: 1.25em; height: 1.25em; color: var(--coral-600); }
.cva-arrow--down { rotate: 90deg; }

/* 1 · an interview note */
.cva-note { display: grid; gap: .5em; width: 100%; max-width: 17rem; margin-inline: auto; padding: .8em .95em .9em; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-m); }
.cva-note-top { display: flex; align-items: center; gap: .45em; color: var(--muted); font-weight: 650; }
.cva-note-top .icon { width: 1.05em; height: 1.05em; }
.cva-note-row { color: var(--text); }
.cva-note-q { display: flex; align-items: stretch; gap: .6em; margin-top: .15em; color: var(--ink); font-family: var(--font-display); font-size: 1.25em; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.cva-note-q > span { display: block; }
.cva-bar { display: block; flex: none; width: 3px; border-radius: 2px; background: var(--coral-400); }
.cva-art .cva-bar { transform-origin: 50% 100%; }

/* 2 · three spreadsheets that merge into one warehouse */
.cva-merge { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, 1fr); width: 100%; height: 8.25rem; }
.cva-merge-src { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.cva-merge-src li { display: flex; align-items: center; gap: .4em; min-width: 0; padding: 0 .55em; border: 1px solid var(--navy-100); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-weight: 650; white-space: nowrap; }
.cva-merge-src .icon { width: 1em; height: 1em; }
.cva-merge-lines { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--navy-300); stroke-width: 1.25; }
.cva-merge .cva-hub { align-self: center; }

/* 3 · one hire, then five people, each with a small dashboard tile */
.cva-team { display: grid; gap: .7rem; width: 100%; }
.cva-cap { color: var(--muted); font-size: .8125rem; font-weight: 650; }
.cva-people { display: flex; align-items: center; gap: .45rem; }
.cva-people i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border: 1.5px solid var(--navy-200); border-radius: 50%; background: var(--surface); color: var(--navy-700); }
.cva-people i.is-first { background: var(--navy-900); border-color: var(--navy-900); color: var(--paper-100); }
.cva-people .icon { width: 1.05em; height: 1.05em; }
.cva-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
@container (min-width: 22rem) { .cva-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cva-tile { display: grid; align-content: start; gap: .4em; min-width: 0; padding: .45em .5em .5em; border: 1px solid var(--navy-100); border-radius: 7px; background: var(--surface); }
.cva-tile b { font-size: .75rem; line-height: 1.2; }
.cva-tile span { display: grid; gap: 3px; }
.cva-tile i { display: block; height: .38em; width: var(--w); border-radius: 3px; background: var(--navy-200); }
.cva-tile i:first-child { background: var(--navy-700); }

/* 4 · a Slack question and a reply */
.cva-chat { display: grid; gap: .55rem; width: 100%; max-width: 19rem; margin-inline: auto; }
.cva-msg--bot { position: relative; }
.cva-msg { display: flex; align-items: flex-start; gap: .5em; }
.cva-msg > i { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border: 1px solid var(--navy-100); border-radius: 8px; background: var(--surface); color: var(--navy-700); }
.cva-msg > i .icon { width: 1.05em; height: 1.05em; }
.cva-msg > span { padding: .5em .7em; border-radius: 4px 12px 12px 12px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); line-height: 1.35; }
.cva-msg--bot > i { background: var(--navy-900); border-color: var(--navy-900); color: var(--paper-100); }
.cva-msg--bot > span { background: var(--navy-50); }
.cva-reply { display: grid; gap: .5em; min-width: 0; }
.cva-reply > small { color: var(--muted); font-size: .75rem; font-weight: 600; }
.cva-bars { display: grid; gap: 4px; }
.cva-bars i { display: block; height: .45em; width: var(--w); border-radius: 3px; background: var(--navy-700); }
.cva-bars i:nth-child(2) { background: var(--navy-500); }
.cva-bars i:nth-child(3) { background: var(--navy-300); }
/* the typing dots: shown for a moment while the reply is on its way. They are hidden in the finished picture, so no JS,
   reduced motion and ?lp=1 never show them. */
.cva-msg--bot > .cva-typing { position: absolute; left: 2.6em; top: 0; display: inline-flex; align-items: center; gap: 5px; padding: .75em .85em; opacity: 0; }
.cva-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--navy-300); }
@media (prefers-reduced-motion: no-preference) {
  [data-play].is-playing .cva-typing { animation: cva-typing 880ms var(--ease-out) 700ms both; }
  [data-play].is-playing .cva-typing i { animation: typing-dot 880ms ease-in-out 2; }
  [data-play].is-playing .cva-typing i:nth-child(2) { animation-delay: 120ms; }
  [data-play].is-playing .cva-typing i:nth-child(3) { animation-delay: 240ms; }
}
@keyframes cva-typing { 0% { opacity: 0; transform: translateX(-8px); } 14%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Human Development Fund: pipelines fill one warehouse, and three outputs read it. One centered axis: the pipeline card and the
   warehouse share a width, the three outputs are equal columns, and the lines are plain CSS bars so every stroke is the same 2px.
   The branch is aligned to the outputs: the grid gap is 4%, so each column centre sits at 15.333%, 50% and 84.667%. */
.cva-flow { display: grid; justify-items: center; width: 100%; max-width: 32rem; margin-top: 2rem; color: var(--ink); font-size: .9375rem; line-height: 1.25; }
.cva-flow .icon { width: 1.25em; height: 1.25em; flex: none; color: var(--navy-700); }
.cva-flow b { color: var(--ink); font-weight: 650; }
.cva-flow-card { position: relative; box-sizing: border-box; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); }
.cva-flow-src, .cva-flow-hub { width: min(100%, 17rem); }
.cva-flow-src { display: grid; gap: .65rem; padding: .8rem .85rem .85rem; }
.cva-flow-head { display: flex; align-items: center; gap: .6rem; }
.cva-flow-head > span { display: grid; gap: .1rem; }
.cva-flow-head small { color: var(--muted); font-size: .75rem; font-weight: 600; }
.cva-flow-srcs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .25rem; }
.cva-flow-srcs li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: var(--paper-200); }
.cva-flow-srcs .icon { width: .9rem; height: .9rem; }
.cva-flow-hub { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; border-color: var(--navy-900); background: var(--navy-900); box-shadow: var(--shadow-m); }
.cva-flow-hub b { color: var(--paper-100); }
.cva-flow-hub .icon { color: var(--coral-300); }
.cva-flow-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4%; width: 100%; }
.cva-flow-out { display: grid; align-content: start; justify-items: center; gap: .45rem; min-height: 4.75rem; padding: .8rem .4rem .7rem; text-align: center; }
.cva-flow-out b { font-size: .875rem; line-height: 1.2; }
.cva-flow-hub::before, .cva-flow-out::before, .cva-model-outs .cva-box::before { content: ""; position: absolute; left: 50%; top: -.35rem; translate: -50% 0; border: .35rem solid transparent; border-top-color: var(--coral-500); border-bottom-width: 0; }
.cva-ln { display: block; width: 2px; border-radius: 2px; background: var(--navy-300); }
:is(.cva-flow, .cva-art) .cva-ln { transform-origin: 50% 0; }
.cva-ln--link { height: 1.5rem; }
.cva-fan { --a: 15.333%; position: relative; width: 100%; height: 2.5rem; }
.cva-fan--two { --a: 24%; height: 1.5rem; }
.cva-fan .cva-ln { position: absolute; }
.cva-ln--stem { left: calc(50% - 1px); top: 0; height: 50%; }
:is(.cva-flow, .cva-art) .cva-ln--bus-l, :is(.cva-flow, .cva-art) .cva-ln--bus-r { top: calc(50% - 1px); width: auto; height: 2px; }
.cva-ln--bus-l { left: var(--a); right: 50%; }
.cva-ln--bus-r { left: 50%; right: var(--a); }
:is(.cva-flow, .cva-art) .cva-ln--bus-l { transform-origin: 100% 50%; }
:is(.cva-flow, .cva-art) .cva-ln--bus-r { transform-origin: 0 50%; }
.cva-ln--drop { top: 50%; height: 50%; }
.cva-ln--d1 { left: calc(var(--a) - 1px); }
.cva-ln--d2 { left: calc(50% - 1px); }
.cva-ln--d3 { left: calc(100% - var(--a) - 1px); }

.cva-art--swap { gap: .6rem; }

/* small screens: each track is exactly the width of the page, so a picture cannot push its card past the edge */
@media (max-width: 759px) { .csa-cards { grid-template-columns: minmax(0, 1fr); } .csa-card { min-width: 0; } }
@media (max-width: 679px) { .csb-steps { grid-template-columns: minmax(0, 1fr); } .csb-step { min-width: 0; } }
@media (max-width: 899px) { .cva-built.split { grid-template-columns: minmax(0, 1fr); } }

/* Rent the Runway 2 · three sources at three speeds */
.cva-lanes { display: grid; gap: .65rem; width: 100%; }
.cva-lane { display: grid; gap: .35em; }
.cva-lane-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.cva-lane-top span { color: var(--ink); font-weight: 650; }
.cva-lane-top small { color: var(--muted); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.cva-track { display: block; height: .5em; border-radius: 999px; background: var(--navy-700); }
.cva-track--api { position: relative; background: var(--navy-200); }
.cva-track--api::before, .cva-track--api::after { content: ""; position: absolute; top: 50%; width: .9em; height: .9em; translate: 0 -50%; border-radius: 50%; background: var(--navy-700); }
.cva-track--api::before { left: 0; }
.cva-track--api::after { right: 0; background: var(--coral-400); }
.cva-blocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.cva-blocks i { height: .5em; border-radius: 3px; background: var(--navy-700); }

/* Rent the Runway 3 · one model, two outputs */
.cva-model { display: grid; justify-items: center; gap: 0; width: 100%; }
.cva-model .cva-hub { width: min(100%, 12.5rem); grid-auto-flow: column; gap: .5em; padding: .55em .8em; }
.cva-model .cva-hub .icon { width: 1.25em; height: 1.25em; }
.cva-model-outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4%; width: 100%; }
.cva-model-outs .cva-box { position: relative; }

/* Rent the Runway 4 · six locations, one view */
.cva-locs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; width: 100%; }
.cva-loc { display: grid; gap: .4em; padding: .45em .5em .5em; border: 1px solid var(--navy-100); border-radius: 7px; background: var(--surface); }
.cva-loc .icon { width: 1em; height: 1em; }
.cva-loc i { display: block; height: .38em; width: var(--w); border-radius: 3px; background: var(--navy-700); }


/* == part: cvb.css == */
/* ---------- case studies: ISB fix hub, Barter rules check and the newsletter draft (cvb-). Built on the shared
   primitives (pt, pt-pop, pt-draw, g-check), so reduced motion, .lp and no-JS already show the finished pictures. */

/* ISB: the four problems each connect to one data hub. Boxes are positioned in percentages, like csb-art. */
.cvb-fix-head { display: grid; gap: 1.5rem 3rem; align-items: center; margin-bottom: clamp(2rem, 1rem + 2vw, 3rem); }
.cvb-fix-head .lead { margin-bottom: 0; }
@media (min-width: 900px) { .cvb-fix-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.cvb-hub { position: relative; width: 100%; max-width: 30rem; aspect-ratio: 5 / 4; margin: 0; justify-self: center; color: var(--ink); }
@media (min-width: 900px) { .cvb-hub { justify-self: end; } }
@media (max-width: 599px) { .cvb-hub { aspect-ratio: 1 / 1; } }
.cvb-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--navy-300); stroke-width: .35; }
.cvb-node { position: absolute; width: 40%; height: 26%; display: grid; align-content: center; gap: .2em; padding: .55em .75em; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); }
.cvb-node--tl { left: 0; top: 4%; }
.cvb-node--tr { right: 0; top: 4%; }
.cvb-node--bl { left: 0; bottom: 4%; }
.cvb-node--br { right: 0; bottom: 4%; }
.cvb-node b { display: flex; align-items: center; gap: .4em; color: var(--ink); font-size: clamp(.8125rem, .76rem + .25vw, .9375rem); font-weight: 650; line-height: 1.2; }
.cvb-node b .icon { width: 1.1em; height: 1.1em; flex: none; color: var(--navy-700); }
.cvb-node small { color: var(--muted); font-size: clamp(.75rem, .72rem + .15vw, .8125rem); line-height: 1.3; }
.cvb-node em { position: absolute; top: .6em; right: .75em; font-style: normal; font-family: var(--font-display); font-size: .8125rem; font-weight: 800; color: var(--coral-600); }
.cvb-core { position: absolute; left: 36%; top: 35%; width: 28%; height: 30%; display: grid; place-content: center; justify-items: center; gap: .4em; border-radius: 12px; background: var(--navy-900); box-shadow: var(--shadow-m); }
.cvb-core .icon { width: 1.5em; height: 1.5em; color: var(--coral-400); }
.cvb-core b { color: var(--paper-100); font-size: clamp(.8125rem, .76rem + .25vw, .9375rem); font-weight: 650; }

/* Barter: the rules, checked against the Indigo offer */
.cvb-check { margin: 2rem 0 0; max-width: 30rem; padding: clamp(1rem, .8rem + .8vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s); }
.cvb-check-h { padding-bottom: .4rem; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 800; line-height: 1.25; }
.cvb-check-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .8rem; border-top: 1px solid var(--line); }
.cvb-check-row > span { display: grid; gap: .15rem; min-width: 0; color: var(--ink); font-size: .9375rem; line-height: 1.35; }
.cvb-check-row b { color: var(--muted); font-size: .8125rem; font-weight: 650; }
.cvb-check-row .g-check { width: 1.5rem; height: 1.5rem; }
.cvb-check-wait { flex: none; width: 1.5rem; height: 1.5rem; border: 1.5px dashed var(--coral-500); border-radius: 50%; }

/* Newsletter: the photos, the story and the list come together into one draft (a white card on the paper panel the other rows use) */
.cvb-draft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 .8rem; align-items: start; padding: .7rem .75rem .75rem; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); }
.cvb-draft-top, .cvb-draft-foot { grid-column: 1 / -1; }
.cvb-draft-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .6rem; font-size: .8125rem; }
.cvb-draft-top b { font-family: var(--font-display); font-size: .875rem; font-weight: 800; }
.cvb-draft-top span { color: var(--muted); font-size: .75rem; font-weight: 650; }
.cvb-draft-cap { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .75rem; font-weight: 650; line-height: 1.2; }
.cvb-draft-photo { position: relative; display: block; height: 3.6rem; overflow: hidden; border-radius: 6px; background: var(--navy-50); }
.cvb-draft-photo i { position: absolute; display: block; }
.cvb-draft-sun { right: 14%; top: 18%; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--coral-300); }
.cvb-draft-hill { left: -8%; right: -8%; bottom: -30%; height: 75%; border-radius: 50% 50% 0 0; background: var(--navy-200); }
.cvb-draft-story { display: grid; gap: .35rem; }
.cvb-draft-story .cvb-draft-cap { margin-bottom: 0; }
.cvb-draft-story i { display: block; height: .38rem; border-radius: 3px; background: var(--paper-300); }
.cvb-draft-story i:first-of-type { width: 62%; height: .5rem; background: var(--navy-700); }
.cvb-draft-story i:nth-of-type(3) { width: 90%; }
.cvb-draft-story i:nth-of-type(4) { width: 66%; }
.cvb-draft-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .65rem; padding-top: .55rem; border-top: 1px solid var(--line); font-size: .75rem; font-weight: 650; }
.cvb-draft-foot > span { display: inline-flex; align-items: center; gap: .4em; }
.cvb-draft-foot .icon { width: .9rem; height: .9rem; color: var(--navy-700); }
.cvb-draft-foot .cvb-draft-ok { color: var(--coral-700); }
.cvb-draft-foot .cvb-draft-ok .icon { color: var(--coral-600); }

/* == part: cvm.css == */
/* ---------- copy pass visuals (prefix cvm-): small pictures under text-only cards. Each one shows a fact already on its page.
   The entrance uses the site's pt classes inside data-play, so the finished state shows without JS and under reduced motion. */

/* three questions: each card is a column, so the pictures line up along the bottom edge */
.np-q > li:has(> .cvm-mini) { display: flex; flex-direction: column; }
.np-q > li:has(> .cvm-mini) > p { margin: 0 0 1rem; }
.np-q > li > .cvm-mini { margin-top: auto; }

.cvm-mini { margin-top: 1rem; padding: .85rem .95rem; border: 1px solid var(--navy-100); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-size: .875rem; line-height: 1.3; }
.cvm-mini .cvm-cap { margin: 0 0 .5rem; color: var(--muted); font-size: .8125rem; font-weight: 600; line-height: 1.3; }

/* cost by event: three lines, each one checked off on its own */
.cvm-split .cvm-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0; padding: .5rem 0; border-top: 1px solid var(--paper-300); color: var(--ink); font-weight: 600; }
.cvm-split .g-check { width: 1.25rem; height: 1.25rem; }
.cvm-split .g-check .icon { width: .75rem; height: .75rem; }

/* one event, then the next: two nodes joined by a line, with a question at the end */
.cvm-back { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.cvm-back .cvm-cap { flex-basis: 100%; }
@media (max-width: 479px) {
  .cvm-back { display: grid; grid-template-columns: auto auto; justify-content: start; justify-items: start; gap: .35rem .6rem; }
  .cvm-back .cvm-cap { grid-column: 1 / -1; }
  .cvm-back > .cvm-node, .cvm-back > .cvm-arrow { grid-column: 1; }
  .cvm-arrow { flex: none; width: 2px; height: .9rem; margin-left: 1.05rem; }
}
.cvm-node { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .55rem; border: 1px solid var(--navy-100); border-radius: 8px; background: var(--paper-100); color: var(--ink); font-weight: 600; }
.cvm-node > .icon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--navy-700); }
.cvm-arrow { display: block; flex: 0 0 1.6rem; height: 2px; background: var(--navy-300); }
.cvm-ask { display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--coral-400); color: var(--navy-900); font-style: normal; }
.cvm-ask > .icon { width: 1rem; height: 1rem; }

/* the one line, and the three things behind it */
.cvm-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cvm-needs li { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; padding: .6rem .65rem; border: 1px solid var(--navy-100); border-radius: 8px; background: var(--paper-100); color: var(--ink); font-weight: 600; }
.cvm-needs > li > .icon { width: 1.1rem; height: 1.1rem; color: var(--navy-700); }

@media (max-width: 379px) {
  .cvm-needs { grid-template-columns: minmax(0, 1fr); }
}

/* == part: enterprise.css == */
/* ---------- enterprise (/enterprise/): prefix en-. The hero's systems converge on one hub with the agent card on top;
   the systems fold into one bar; the agent rows reuse who-list; the steps reuse the dark process band. */

/* hero: six systems converge on one hub, and the agent card sits on top of it */
.en-hero-fig { position: relative; width: 100%; max-width: 32rem; aspect-ratio: 1; justify-self: center; margin: 0; container-type: inline-size; font-size: clamp(.6875rem, 2.7cqw, .9375rem); color: var(--ink); }
.en-hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--navy-200); stroke-width: .35; }
.en-sys { position: absolute; width: 34%; translate: 0 -50%; display: flex; align-items: center; gap: .5em; padding: .5em .6em; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); font-weight: 600; line-height: 1.1; white-space: nowrap; }
.en-sys--l { left: 0; }
.en-sys--r { left: 66%; }
.en-sys > .icon { width: 1.25em; height: 1.25em; flex: none; color: var(--navy-700); }
.en-hub { position: absolute; left: 50%; top: 60%; width: 17cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--navy-900); box-shadow: 0 0 0 1.6cqw var(--paper-100); }
.en-hub::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--coral-400); }
.en-agent { position: absolute; left: 50%; top: 2%; width: 68%; translate: -50% 0; display: flex; align-items: center; gap: .75em; padding: .75em .9em; border-radius: 12px; background: var(--navy-900); color: var(--navy-100); box-shadow: var(--shadow-l); }
.en-agent-ic { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--navy-700); color: var(--paper-100); }
.en-agent-ic .icon { width: 1.2em; height: 1.2em; }
.en-agent-txt { flex: 1; min-width: 0; line-height: 1.25; }
.en-agent-txt b { display: block; color: var(--paper-100); font-family: var(--font-display); font-size: 1.15em; font-weight: 800; letter-spacing: -.01em; }
.en-agent .g-check { margin-left: auto; }

/* systems became one: eight tiles fan into one bar, the one set of numbers */
.en-hdf { max-width: 46rem; margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.en-fold { position: relative; width: 100%; max-width: 36rem; margin: 2rem 0 0; }
.en-fold-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .4rem; }
.en-fold-tiles li { display: grid; place-items: center; height: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--navy-700); }
.en-fold-tiles .icon { width: 1.15rem; height: 1.15rem; }
.en-fold-lines { display: block; width: 100%; height: auto; aspect-ratio: 100 / 14; overflow: visible; fill: none; stroke: var(--navy-300); stroke-width: .3; }
.en-fold-bar { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .9rem 1rem; border-radius: 12px; background: var(--navy-900); color: var(--paper-100); font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; box-shadow: var(--shadow-m); }
.en-fold-bar > .icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--coral-300); }
.en-fold-bar > span { flex: 1; }
.en-fold-bar .g-check { width: 1.6rem; height: 1.6rem; }

/* proof: the Rent the Runway card, one card with no nested boxes */
.en-rtr { display: grid; gap: 1.5rem; height: auto; margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); }
@media (min-width: 900px) { .en-rtr { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem 3.5rem; align-items: start; } }
.en-rtr h3 { margin-bottom: .6rem; }
.en-results { display: grid; align-content: start; }
.en-results p { color: var(--text); }
.en-results p + p { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.en-results b { display: block; margin-bottom: .25rem; color: var(--ink); font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.en-results .link-arrow { justify-self: start; margin-top: 1.5rem; }

/* agent rows: the mini pictures sit on the page, not in a panel, so no card holds another card */
.en-work .who-art { padding: 0; background: none; }

/* small links and notes under the lists */
.en-see { max-width: 46rem; margin-top: clamp(2rem, 1rem + 2vw, 3rem); color: var(--text); }
.en-see .link-arrow { margin-top: .4rem; }

/* the header paragraph sits a little off its heading; the steps start below the lead */
.page-enterprise .sec-head:not(.sec-head--row) > p { max-width: 40rem; margin-top: 1.25rem; font-size: var(--fs-lead); line-height: 1.5; }
.en-steps { margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); }

/* how we work: the closing line under the four steps */
.en-after { max-width: 40rem; margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; color: var(--paper-100); }

/* who you work with: three people in a row */
.en-people { display: grid; gap: 2.5rem 2rem; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 700px) { .en-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.en-people img { width: 9rem; aspect-ratio: 1; object-fit: cover; margin-bottom: 1rem; border-radius: var(--r-m); background: var(--navy-50); }
@media (min-width: 700px) { .en-people img { width: 100%; max-width: 16rem; } }
.en-people h3 { font-size: var(--fs-h4); }
.en-people .role { margin: .15rem 0 .5rem; color: var(--coral-700); font-size: .9375rem; font-weight: 650; }
.en-people p { font-size: .9375rem; line-height: 1.5; }

/* closing call */

/* == part: industries-art.css == */
/* == Who we help: one small picture per industry row (ind-). Each picture shows that row's job, built from the site's own
   parts: white cards, navy, coral and paper tokens, the alive primitives (pt, pt-pop, pt-x, pt-line, pt-grow, pt-draw),
   g-check and g-flag. The finished picture is in the HTML, so no JS, reduced motion and ?lp=1 all show it whole.
   The art keeps the grid place of the old who-art block; text stays at 12px or larger. */

.who-list .ind-art { grid-column: 2; display: grid; gap: .5rem; align-content: center; width: 100%; max-width: 19rem; padding: .65rem; border-radius: 14px; background: var(--paper-200); color: var(--ink); font-size: .8125rem; font-weight: 560; line-height: 1.25; }
@media (min-width: 960px) { .who-list .ind-art { grid-column: auto; } }
@media (min-width: 960px) and (max-width: 1239px) { .who-list .ind-art { grid-column: 3; } }
.ind-art .icon { width: 1rem; height: 1rem; color: var(--navy-700); }
.ind-art b { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ind-card { background: var(--surface); border: 1px solid var(--navy-100); border-radius: 10px; box-shadow: var(--shadow-s); }
.ind-rep-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ind-pill, .ind-tag { display: inline-flex; align-items: center; gap: .3rem; justify-self: start; padding: .15rem .5rem; border-radius: 999px; background: var(--navy-50); color: var(--navy-800); font-size: .75rem; font-weight: 650; line-height: 1.3; white-space: nowrap; }
.ind-pill .icon, .ind-tag .icon { width: .8rem; height: .8rem; color: inherit; }
.ind-pill--ok, .ind-tag--ok { background: var(--navy-900); color: var(--paper-100); }
.ind-tag--ok .icon { color: var(--coral-300); }
.ind-pill--flag { background: var(--coral-100); color: var(--coral-700); }
.ind-bar { display: block; height: .4rem; border-radius: 99px; background: var(--navy-200); width: var(--w); }
.ind-bar--off { background: var(--coral-400); }
.ind-track { display: block; height: .4rem; border-radius: 99px; background: var(--paper-300); overflow: hidden; }
.ind-fill { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--coral-400); }

/* accounting: two columns, one line per row; the row that does not match is flagged */
.ind-led-card { display: grid; gap: .3rem; padding: .55rem .7rem .6rem; }
.ind-led { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) minmax(0, 1fr) 1.2rem; align-items: center; gap: .45rem; }
.ind-led-head { padding-bottom: .35rem; border-bottom: 1px solid var(--paper-300); color: var(--muted); font-size: .75rem; font-weight: 650; }
.ind-led .g-check, .ind-led .g-flag { width: 1.2rem; height: 1.2rem; }
.ind-led .g-flag .icon { width: .7rem; height: .7rem; }
.ind-led--off .ind-pill { grid-column: 2 / -1; }

/* multi-location: three sites, one line each, into one weekly report */
.ind-sites { display: grid; gap: 0; }
.ind-site-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ind-site { display: grid; justify-items: center; gap: .2rem; margin-inline: .2rem; padding: .35rem .2rem .4rem; border: 1px solid var(--navy-100); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); font-weight: 650; text-align: center; white-space: nowrap; }
.ind-links { display: block; width: 100%; height: 1.5rem; overflow: visible; fill: none; stroke: var(--navy-300); stroke-width: 1.5; }
.ind-report { display: grid; gap: .35rem; padding: .55rem .7rem .6rem; }

/* distributors: two supplier quotes, then a late order with a truck due date */
.ind-q-list { display: grid; }
.ind-q { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; }
.ind-q + .ind-q { border-top: 1px solid var(--paper-300); }
.ind-q > b { flex: 1; min-width: 0; font-size: .8125rem; }
.ind-late { display: grid; gap: .45rem; padding: .6rem .7rem .7rem; }
.ind-late .ind-q { padding: 0; }
.ind-late small { color: var(--muted); font-size: .75rem; font-weight: 600; }

/* service and construction: job notes become a drafted change order that waits for a yes */
.ind-change { gap: 0; }
.ind-notes { display: grid; gap: .25rem; padding: .5rem .7rem; background: var(--paper-50); }
.ind-note { position: relative; padding-left: .9rem; font-weight: 600; color: var(--text); }
.ind-note::before { content: ""; position: absolute; left: 0; top: .42em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--navy-300); }
.ind-down { position: relative; justify-self: center; width: 2px; height: 1rem; margin-block: .2rem .3rem; border-radius: 2px; background: var(--coral-400); transform-origin: 50% 0; }
.ind-down::after { content: ""; position: absolute; left: 50%; bottom: -.3rem; translate: -50% 0; border: .3rem solid transparent; border-top-color: var(--coral-400); border-bottom-width: 0; }
.ind-co { display: grid; gap: .35rem; padding: .55rem .7rem .6rem; }
.ind-co > p { margin: 0; font-weight: 600; color: var(--text); }
.ind-ask { display: flex; align-items: center; gap: .4rem; margin-top: .1rem; font-weight: 650; }
.ind-ask > span:first-child { margin-right: auto; }
.ind-btn { padding: .2rem .6rem; border: 1.5px solid var(--navy-900); border-radius: 999px; background: var(--surface); color: var(--navy-900); font-size: .75rem; font-weight: 650; line-height: 1.3; }
.ind-btn--yes { background: var(--coral-400); border-color: var(--coral-400); }

/* property: a tenant's question, the agent's reply, then the owner report */
.ind-bubble { max-width: 85%; padding: .4rem .65rem; border-radius: 12px; font-weight: 600; line-height: 1.3; }
.ind-bubble--in { justify-self: start; border: 1px solid var(--navy-100); border-bottom-left-radius: 4px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); }
.ind-bubble--out { justify-self: end; border-bottom-right-radius: 4px; background: var(--navy-900); color: var(--paper-100); }
.ind-owner { display: grid; gap: .3rem; margin-top: .1rem; padding: .55rem .7rem .6rem; }
.ind-owner-row { display: flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--text); }
.ind-owner-row .g-check { width: 1.15rem; height: 1.15rem; }

/* nonprofits: reminders on a week of dots, and a grant report that fills to ready */
.ind-cal { display: grid; gap: .55rem; padding: .6rem .7rem .7rem; }
.ind-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); color: var(--muted); font-size: .75rem; font-weight: 650; text-align: center; }
.ind-day { display: grid; justify-items: center; gap: .3rem; }
.ind-day i { width: .45rem; height: .45rem; border-radius: 50%; }
.ind-day--on i { background: var(--navy-700); }
.ind-prog { display: grid; gap: .5rem; padding: .6rem .7rem .7rem; }


/* == part: nonprofit.css == */
/* ---------- nonprofit page (np-). Pictures reuse the alive-pass primitives (pt, pt-pop, pt-line, g-check, wa-row, agent-rows).
   Only the classes below are new. Every animation is one the site already has, so reduced motion and .lp show the finished state. */

/* hero: a donor record whose gifts and follow-up fill in once. One card, no boxes inside it. */
.np-donor { position: relative; width: 100%; max-width: 27rem; margin: 0; justify-self: center; }
.np-donor figcaption { margin-top: .9rem; color: var(--muted); font-size: .8125rem; }
.np-card { padding: clamp(1rem, .6rem + 1.2vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-l); }
.np-card-head { display: flex; align-items: center; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.np-avatar { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--coral-50); color: var(--coral-700); }
.np-avatar .icon { width: 1.3rem; height: 1.3rem; }
.np-who { display: grid; gap: .1rem; min-width: 0; line-height: 1.25; }
.np-who b { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.np-who small { color: var(--muted); font-size: .8125rem; }
.np-gifts li { display: flex; align-items: center; gap: .6rem; padding: .75rem 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .9375rem; font-weight: 600; }
.np-gifts li > .icon { width: 1.1rem; height: 1.1rem; flex: none; color: var(--navy-700); }
.np-gifts li > span { flex: 1; min-width: 0; }
.np-gifts .g-check { width: 1.3rem; height: 1.3rem; }
.np-next { display: flex; align-items: center; gap: .55rem; padding-top: .9rem; color: var(--ink); font-size: .9375rem; font-weight: 600; }
.np-next > .icon { width: 1.1rem; height: 1.1rem; flex: none; color: var(--navy-700); }
.np-next > span { flex: 1; }
.np-next em { padding: .15rem .55rem; border-radius: var(--r-pill); background: var(--coral-400); color: var(--navy-900); font-style: normal; font-size: .8125rem; font-weight: 700; }

/* the text beside a picture: a little air under each heading */
.np-copy > h2 + p { margin-top: 1.25rem; }
.np-copy > p + p { margin-top: 1.1rem; }
.np-pull { margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); max-width: 34rem; }
.np-pull p { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.np-pull footer { margin-top: .75rem; color: var(--muted); font-size: .9375rem; }

/* the leaky bucket: gifts come in, drip out, and one follow-up catches the donor */
.np-leak { position: relative; display: grid; justify-items: center; gap: .6rem; width: 100%; max-width: 24rem; margin: 0 auto; color: var(--ink); font-size: .875rem; }
.np-in { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.np-gift { display: flex; align-items: center; gap: .4rem; padding: .4rem .65rem; border: 1px dashed var(--navy-300); border-radius: 8px; background: var(--surface); font-weight: 600; line-height: 1.2; }
.np-gift > .icon { width: 1.05rem; height: 1.05rem; color: var(--coral-600); }
.np-pail { display: block; width: 62%; max-width: 15rem; height: auto; overflow: visible; }
.np-drips { position: relative; width: 62%; max-width: 15rem; height: 5.5rem; }
.np-drips::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed var(--coral-400); opacity: .6; }
.np-drip { position: absolute; left: 50%; width: .75rem; height: .75rem; translate: -50% -50%; border-radius: 50%; background: var(--coral-400); }
.np-lost { position: absolute; left: 58%; top: 40%; color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.np-patch { max-width: 16rem; }

/* three questions: a ruled list, numbered */
.np-q { display: grid; gap: 2.5rem; margin-top: clamp(2rem, 1rem + 3vw, 3rem); }
@media (min-width: 900px) { .np-q { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.np-q li { display: grid; align-content: start; gap: .5rem; padding-top: 1.5rem; }
.np-num { font-family: var(--font-display); font-size: 3.5rem; font-weight: 800; line-height: .9; letter-spacing: -.03em; color: var(--coral-500); }
.np-q h3 { margin-top: .6rem; }
.np-q p { color: var(--text); }

/* two results: ruled columns, the big number set large */
.np-proofs { display: grid; gap: 3.5rem; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 900px) { .np-proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; } }
.np-proof { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.5rem; }
.np-proof h3 { font-size: var(--fs-h4); }
.np-big { font-family: var(--font-display); font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem); font-weight: 800; line-height: .95; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.np-caption { margin-top: -.4rem; color: var(--text); font-size: 1.0625rem; }
.np-bars { display: grid; gap: .8rem; margin-top: .5rem; }
.np-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; align-items: baseline; color: var(--muted); font-size: .875rem; }
.np-bar b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.np-bar .np-track { grid-column: 1 / -1; }
.np-track { display: block; height: .55rem; border-radius: 999px; background: var(--paper-300); overflow: hidden; }
.np-track i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--navy-400); }
.np-quote { margin: .5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.np-quote p { color: var(--ink); font-size: .9375rem; line-height: 1.55; }
.np-quote footer { margin-top: .6rem; color: var(--muted); font-size: .875rem; }
.np-quote footer b { color: var(--ink); font-weight: 650; }
.np-proof .link-arrow { margin-top: auto; align-self: flex-start; }

/* == part: quotes.css == */
/* ==========================================================================================================
   Client quotes: tone and key phrases. The quote text sits a step quieter; the phrases that matter (.qh) come up
   to full strength as the quote comes into view, and the few key words (.qh-u, .qh-c: same look) get a thin
   straight coral rule that sweeps in under them. Without JS, under reduced motion and under .lp, the finished
   state shows. Dark quote bands also carry the site's faint ambient threads behind them (partial:threads).
   ========================================================================================================== */
.q-tone.q-tone { --qh-base: var(--muted); --qh-strong: var(--ink); color: var(--qh-base); }
.section--dark .q-tone.q-tone { --qh-base: var(--navy-300); --qh-strong: var(--paper-100); }
.q-tone .qh { color: var(--qh-strong); }
.qh-u, .qh-c { padding-bottom: .04em; background: linear-gradient(var(--coral-400), var(--coral-400)) no-repeat 0 100% / 100% .09em; }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.lp) [data-play].is-waiting .qh { color: var(--qh-base); }
  .js:not(.lp) [data-play].is-waiting :is(.qh-u, .qh-c) { background-size: 0 .09em; }
  .js:not(.lp) [data-play].is-playing .qh { transition: color 900ms var(--ease-out) var(--qd, 300ms); }
  .js:not(.lp) [data-play].is-playing :is(.qh-u, .qh-c) { transition: color 900ms var(--ease-out) var(--qd, 300ms), background-size 800ms var(--ease-in-out) calc(var(--qd, 300ms) + 250ms); }
}

/* == Home: "In their words", a mix of client quotes and results, each linking to its case study == */
.qp-grid { display: grid; gap: 1rem; }
@media (min-width: 760px) { .qp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .qp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qp-wide { grid-column: span 2; } }
.qp-card { display: flex; flex-direction: column; gap: .9rem; height: 100%; padding: clamp(1.25rem, 1rem + .8vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow-s); transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .qp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); } }
.qp-logo { display: flex; align-items: center; height: 2.25rem; }
.qp-logo img { width: auto; height: 100%; max-width: 11rem; object-fit: contain; object-position: left center; }
.qp-logo img.is-wide { height: 1.2rem; }
.qp-quote { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.qp-who { color: var(--muted); font-size: .875rem; }
.qp-who b { color: var(--ink); font-weight: 650; }
.qp-num { font-family: var(--font-display); font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem); font-weight: 800; line-height: .95; letter-spacing: -.035em; color: var(--ink); }
.qp-num .accent { color: var(--coral-500); }
.qp-what { color: var(--text); font-size: 1rem; line-height: 1.4; }
.qp-card .link-arrow { margin-top: auto; align-self: flex-start; gap: .5rem; min-height: 2.6rem; padding: .45rem 1rem; border: 2px solid var(--navy-900); border-radius: var(--r-pill); font-size: .9375rem; transition: background-color 160ms, color 160ms; }
@media (hover: hover) and (pointer: fine) { .qp-card:hover .link-arrow { background: var(--navy-900); color: var(--paper-100); } .qp-card:hover .link-arrow .icon { transform: translateX(3px); } }
.qp-card--all .link-arrow { background: var(--navy-900); color: var(--paper-100); }
.qp-card--all { justify-content: center; border-style: dashed; background: transparent; box-shadow: none; }
.qp-card--all .qp-quote { color: var(--ink); }

/* == part: tool-logos.css == */
/* ---------- tool logos (prefix tl-): a named product shows its logo in navy, at the height of the icon it replaces.
   Logos are static images, so nothing here animates. */
.tl-logo { display: block; width: auto; height: 1.15rem; flex: none; }
.en-sys .tl-logo { height: 1.25em; }
.ka-chip .tl-logo--word { height: 1.1rem; }

/* finance hero, phone widths: the chips size to their labels so a name never runs into the border */
@media (max-width: 799px) {
  .tl-ka .ka-src { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
  .tl-ka .ka-chip { flex: 0 0 auto; }
}

/* Rent the Runway: the stack is one row of logo and name, not pills */
.csb-stack .tl-row { gap: .9rem 1.75rem; }
.csb-stack .tl-tool { display: inline-flex; align-items: center; gap: .5rem; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 1rem; font-weight: 600; }
.csb-stack .tl-tool .tl-logo { height: 1.3rem; }

/* HDF: each source tile reads icon, then label; left-aligned so the icons share one column */
.csa-mg-src .tl-tile { justify-content: flex-start; gap: .45em; padding: 0 .6em; }
.csa-mg-src .tl-label { color: var(--ink); font-size: .9em; font-weight: 600; line-height: 1; white-space: nowrap; }

/* == part: wfx.css == */
/* workflow automation (services): the one short note under the map, as wide as the map */
.wfx-after { max-width: clamp(34rem, calc((100svh - 13rem) * 1.47), 66rem); margin: 0 auto; }
/* no stranded last word */
.wfx-lead, .wfx-after { text-wrap: pretty; }
@media (min-width: 700px) { .wfx-lead, .wfx-after { text-wrap: balance; } }
/* no JavaScript on a phone: the map stays flat and wide, so each tag shrinks to the name (the ticks stay) */
@media (max-width: 699px) {
  html:not(.js) .tr-labels li { --gap: 1.25rem; min-width: 0; max-width: 3.8rem; padding: .2rem .25rem; }
  html:not(.js) .tr-labels em, html:not(.js) .tr-labels li > .tl-today, html:not(.js) .tr-labels li > .tl-clear { display: none; }
}