/* Case studies page. Builds on styles.css and projects.css. */

/* Intro: title and why case studies matter */
.cs-intro { padding: clamp(4rem, 9vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(25%); }
    to { opacity: 1; transform: translateY(0); }
  }
  .cs-intro h1 { animation: fadeInUp 0.3s ease-in-out both; }
  .cs-intro h1 + .cs-why { animation: fadeInUp 0.3s ease-in-out 0.1s both; }
  .cs-sec-head h2, .spot-head h2 { opacity: 0; }
  .cs-sec-head h2.is-in, .spot-head h2.is-in { animation: fadeInUp 0.3s ease-in-out forwards; }
}
.cs-intro h1 { font-size: var(--title-size); letter-spacing: -0.045em; line-height: .95; }
.cs-intro { position: relative; overflow: hidden; }
.cs-intro-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.cs-acorn { display: block; width: 100%; height: clamp(320px, 34vw, 460px); }
.cs-why { display: grid; gap: 1.75rem; margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (max-width: 860px) {
  .cs-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .cs-acorn { order: -1; height: 240px; }
}
.cs-why p { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; color: var(--on-dark); letter-spacing: -0.02em; }
.cs-why ul { display: grid; gap: .8rem; }
.cs-why li { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; color: var(--on-dark-muted); font-size: .98rem; }
.cs-why li::before { content: ""; width: 16px; height: 16px; margin-top: .2rem; border-radius: 50%; background: var(--mint); -webkit-mask: radial-gradient(circle, transparent 3px, #000 3.5px); mask: radial-gradient(circle, transparent 3px, #000 3.5px); }

/* Grid of live case cards */
.cs-grid-wrap { padding-bottom: clamp(4rem, 8vw, 6rem); }
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.case-card {
  --accent: var(--mint);
  display: flex; flex-direction: column; text-align: left; width: 100%;
  background: var(--window); border: 1px solid var(--line-dark); border-radius: var(--radius);
  color: var(--on-dark); font: inherit; cursor: pointer; padding: 0; overflow: hidden;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out), scale 140ms var(--ease-out);
}
.case-card:focus-visible { border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .case-card:hover { border-color: var(--accent); transform: translateY(-3px); } }
.case-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line-dark); }
.case-tags { font-size: .8rem; color: var(--on-dark-faint); }

/* Client mark: a prominent logo plate for named clients, or an anonymized badge */
.client-logo { display: inline-grid; place-items: center; background: var(--paper); border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.client-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.client-logo .logo-ph { font-size: .72rem; font-weight: 500; color: var(--graphite); border: 1.5px dashed rgba(14, 37, 27, .3); border-radius: 4px; padding: .25rem .55rem; }
.client-logo-sm { width: 64px; height: 22px; padding: 3px 6px; margin-right: .6rem; vertical-align: middle; }
.client-logo-sm .logo-ph { font-size: .55rem; padding: 0 .3rem; border-width: 1px; }
.client-logo-md { width: 150px; height: 46px; padding: 8px 14px; }
.client-logo-lg { width: 240px; height: 84px; padding: 14px 22px; }
.client-logo-lg .logo-ph { font-size: .85rem; padding: .4rem .9rem; }
.client-anon { display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 500; }
.anon-dot { width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed rgba(247, 243, 234, .45); flex: none; }
.case-top.has-logo { padding: 1rem 1.1rem; }
.case-top-mark { display: inline-flex; align-items: center; gap: .5rem; }
.cs-client { display: flex; align-items: center; gap: 1.25rem; padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--line-dark); }
.cs-client-meta { display: grid; gap: .15rem; }
.cs-client-meta span { font-size: .8rem; color: var(--on-dark-faint); }
.cs-client-meta strong { font-weight: 500; font-size: 1.15rem; }
.modal-crumb { display: inline-flex; align-items: center; }
.mark { display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 500; }
.mark-logo { width: 72px; height: 24px; border-radius: 4px; border: 1px dashed rgba(247, 243, 234, .35); display: grid; place-items: center; font-size: .62rem; color: var(--on-dark-faint); font-weight: 400; }
.mark-anon { width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed rgba(247, 243, 234, .45); }

/* The live automation strip inside each card */
.case-run { padding: 1.1rem; display: grid; gap: .55rem; min-height: 168px; }
.run-line { display: grid; grid-template-columns: 70px 1fr 18px; gap: .6rem; align-items: center; font-size: .9rem; color: var(--on-dark-faint); opacity: .45; transition: opacity 300ms, color 300ms; }
.run-line .run-stage { font-size: .75rem; }
.run-line .tick { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(247, 243, 234, .25); position: relative; transition: background-color 200ms, border-color 200ms; }
.run-line.is-on { opacity: 1; color: var(--on-dark); }
.run-line.is-working .tick { border-color: var(--accent); border-right-color: transparent; animation: spin .8s linear infinite; }
.run-line.is-done .tick { background: var(--accent); border-color: var(--accent); }
.run-line.is-done .tick::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.run-bar { height: 3px; border-radius: 2px; background: rgba(247, 243, 234, .08); overflow: hidden; margin-top: .25rem; }
.run-bar b { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.case-card.is-playing .run-bar b { transform: scaleX(1); transition: transform 2s linear; }
/* A small acorn rolls along the bar as the automation plays */
.run-bar { position: relative; overflow: visible; margin-top: 1.9rem; }
.run-acorn {
  position: absolute; left: 0; bottom: 2px; width: 22px; height: 25px; display: block;
  color: var(--accent); transform-origin: 50% 55%;
}
.run-acorn svg { width: 100%; height: 100%; display: block; overflow: visible; }
.run-acorn polygon { fill: currentColor; }
.case-card.is-playing .run-acorn { animation: acorn-roll 2s linear forwards; }
@keyframes acorn-roll {
  0%   { left: 0; transform: rotate(0deg) translateY(0); }
  8%   { transform: rotate(90deg) translateY(-3px); }
  16%  { transform: rotate(175deg) translateY(0); }
  100% { left: calc(100% - 22px); transform: rotate(1080deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .run-acorn { left: calc(100% - 22px); }
  .case-card.is-playing .run-acorn { animation: none; }
}

.case-bottom { margin-top: auto; padding: 1.1rem; border-top: 1px solid var(--line-dark); display: grid; gap: .5rem; }
.case-result { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.03em; }
.case-result .from { color: var(--on-dark-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.case-result .arrow { color: var(--on-dark-faint); font-size: .7em; }
.case-result .to { color: var(--accent); }
.case-title { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.02em; }
.case-read { font-size: .9rem; color: var(--accent); }
.case-read::after { content: " →"; transition: margin-left 200ms; }
@media (hover: hover) and (pointer: fine) { .case-card:hover .case-read::after { margin-left: 4px; } }

/* Full case study pop-up: a long-form case study in a large dark panel */
.case-modal {
  --people: #FF6B2C; --agents: #CCF664; --data: #22ACF5;
  width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 0; border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: var(--ink); color: var(--on-dark); overflow: hidden;
}
/* Opens in 300ms, closes faster (160ms): one object entering and leaving */
.case-modal {
  opacity: 0; transform: translateY(12px) scale(.985);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), overlay 160ms allow-discrete, display 160ms allow-discrete;
}
.case-modal[open] { display: flex; flex-direction: column; opacity: 1; transform: none; transition-duration: 300ms; }
@starting-style { .case-modal[open] { opacity: 0; transform: translateY(12px) scale(.985); } }
.case-modal::backdrop { background: rgba(4, 12, 9, .82); backdrop-filter: blur(6px); opacity: 0; transition: opacity 160ms ease, overlay 160ms allow-discrete, display 160ms allow-discrete; }
.case-modal[open]::backdrop { opacity: 1; transition-duration: 240ms; }
@starting-style { .case-modal[open]::backdrop { opacity: 0; } }
html.modal-open { overflow: hidden; }

.modal-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex: none;
  padding: .75rem .9rem .75rem 1.5rem; border-bottom: 1px solid var(--line-dark); background: var(--window);
}
.modal-crumb { font-size: .85rem; color: var(--on-dark-faint); }
.modal-crumb b { color: var(--on-dark); font-weight: 500; }
.modal-close {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-dark); background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--on-dark); font-size: 1.3rem; line-height: 1;
}
.modal-close:hover { border-color: var(--mint); color: var(--mint); }
.modal-scroll { overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.75rem, 5vw, 4rem); }

.cs-block { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.cs-label { display: flex; align-items: center; gap: 1rem; font-size: .85rem; color: var(--on-dark-faint); margin-bottom: 1.1rem; }
.cs-label::before { content: "//"; color: var(--mint); font-weight: 500; }
.cs-label::after { content: ""; flex: 1; height: 1px; background: var(--line-dark); }
.cs-block :is(h2, h3).cs-h { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin-bottom: 1.25rem; max-width: 22ch; }
.cs-lede { color: var(--on-dark-muted); font-size: 1.1rem; max-width: 62ch; }
.sample-note { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: var(--radius-sm); background: rgba(255, 107, 44, .1); color: #FFB38F; font-size: .88rem; margin-bottom: 2rem; }

/* Hero */
.cs-name { display: flex; align-items: center; gap: .9rem; }
.cs-icon { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--line-dark); background: var(--window); display: grid; place-items: center; color: var(--accent); }
.cs-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-name strong { display: block; font-weight: 500; font-size: 1.15rem; }
.cs-name span { font-size: .85rem; color: var(--on-dark-faint); }
.cs-hero :is(h1, h2) { font-size: var(--title-size); line-height: 1; margin: 1.75rem 0 1.25rem; max-width: 14ch; }
.cs-hero :is(h1, h2) em { font-style: normal; color: var(--accent); }
.cs-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2.25rem; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.cs-facts div { padding: 1rem 1.25rem 1.1rem 0; display: grid; gap: .3rem; }
.cs-facts div + div { padding-left: 1.25rem; border-left: 1px solid var(--line-dark); }
.cs-facts dt { font-size: .78rem; color: var(--on-dark-faint); }
.cs-facts dd { margin: 0; font-size: .98rem; }
.img-ph {
  aspect-ratio: 16 / 7; border-radius: var(--radius); border: 1.5px dashed rgba(247, 243, 234, .2);
  background: repeating-linear-gradient(-45deg, rgba(247, 243, 234, .025) 0 10px, transparent 10px 20px);
  display: grid; place-items: center; color: var(--on-dark-faint); font-size: .88rem; margin-top: 2.5rem;
}

/* Challenge */
.cs-body { border-left: 2px solid var(--line-dark); padding-left: 1.5rem; display: grid; gap: 1rem; max-width: 70ch; }
.cs-body p { font-size: 1.08rem; line-height: 1.65; color: var(--on-dark-muted); }
.cs-quote { margin: 2rem 0 0; padding: 1.5rem 1.75rem; border-radius: var(--radius); background: var(--window); border: 1px solid var(--line-dark); }
.cs-quote p { font-size: clamp(1.3rem, 2.6vw, 1.85rem); color: var(--accent); letter-spacing: -0.025em; line-height: 1.25; }
.cs-quote footer { margin-top: .75rem; font-size: .82rem; color: var(--on-dark-faint); }
.cs-cards { display: grid; gap: .75rem; margin-top: 1rem; }
.cs-cards.three { grid-template-columns: repeat(3, 1fr); }
.cs-cards.two { grid-template-columns: repeat(2, 1fr); }
.cs-card { border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(247, 243, 234, .025); padding: 1.25rem 1.35rem; }
.cs-card .n { font-size: .78rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.cs-card :is(h3, h4) { font-size: 1.12rem; font-weight: 500; letter-spacing: -0.02em; margin: .45rem 0 .4rem; }
.cs-card p { font-size: .93rem; color: var(--on-dark-muted); line-height: 1.55; }

/* Flow diagram */
.flow { margin-top: 2rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--window); padding: 1.5rem; }
.flow-row { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 2.25rem; }
.flow-col { display: grid; gap: .5rem; align-content: start; }
.flow-who { font-size: .8rem; color: var(--on-dark-faint); display: flex; align-items: center; gap: .4rem; }
.flow-who::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--k); }
.flow-node {
  position: relative; min-height: 64px; display: flex; align-items: center; padding: .8rem .95rem;
  border: 1.5px solid var(--k); border-radius: var(--radius-sm); font-size: .9rem; line-height: 1.35;
  background: color-mix(in srgb, var(--k) 10%, transparent);
  opacity: .35; transition: opacity 400ms var(--acorn-ease-settle), box-shadow 400ms var(--acorn-ease-settle);
}
.flow.is-shown .flow-node { opacity: 1; }
.flow-col + .flow-col .flow-node.main::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 2.25rem; height: 1.5px; background: rgba(247, 243, 234, .45);
}
.flow-col + .flow-col .flow-node.main::after {
  content: ""; position: absolute; right: calc(100% - 1px); top: calc(50% - 4px); border: 4px solid transparent; border-left-color: rgba(247, 243, 234, .6); border-right: 0;
}
.flow-node.data { margin-top: 2rem; }
.flow-node.data::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 2rem; background: rgba(247, 243, 234, .45); }
.flow-node.data + .flow-who, .flow-col .flow-who.data-who { margin-top: .25rem; }
.flow-loop { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--line-dark); }
.flow-loop .lbl { font-size: .8rem; color: var(--agents); margin-right: .4rem; }
.flow-loop .pill { padding: .35rem .8rem; border-radius: 999px; border: 1px dashed rgba(204, 246, 100, .55); font-size: .85rem; }
.flow-loop .arr { color: var(--on-dark-faint); font-size: .8rem; }
.flow-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.1rem; font-size: .78rem; color: var(--on-dark-faint); }
.flow-legend { display: flex; gap: 1.1rem; }
.flow-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.flow-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--k); }
.flow.is-shown .flow-col:nth-child(1) .flow-node { transition-delay: 0ms; }
.flow.is-shown .flow-col:nth-child(2) .flow-node { transition-delay: 250ms; }
.flow.is-shown .flow-col:nth-child(3) .flow-node { transition-delay: 500ms; }
.flow.is-shown .flow-col:nth-child(4) .flow-node { transition-delay: 750ms; }

/* Platform design */
.cs-split { display: grid; grid-template-columns: 1fr 1.45fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.mini { margin-top: 1.75rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--window); padding: 1.25rem; display: grid; justify-items: center; gap: 0; }
.mini-core { width: 100%; text-align: center; padding: .7rem; border: 1.5px solid var(--agents); border-radius: var(--radius-sm); background: rgba(204, 246, 100, .08); font-size: .9rem; }
.mini-stem { width: 1.5px; height: 14px; background: rgba(247, 243, 234, .4); }
.mini-branches { width: 100%; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: .5rem; border-top: 1.5px solid rgba(247, 243, 234, .4); padding-top: 14px; position: relative; }
.mini-branches span { position: relative; text-align: center; padding: .5rem .3rem; border: 1.5px solid var(--people); border-radius: var(--radius-sm); background: rgba(255, 107, 44, .08); font-size: .82rem; }
.mini-branches span::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 14px; background: rgba(247, 243, 234, .4); }
.mini-note { margin-top: .9rem; font-size: .78rem; color: var(--on-dark-faint); }
.cs-list { border-top: 1px solid var(--line-dark); }
.cs-list li { display: grid; grid-template-columns: 40px 1fr; gap: .75rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-dark); }
.cs-list .n { font-size: .8rem; color: var(--on-dark-faint); padding-top: .2rem; font-variant-numeric: tabular-nums; }
.cs-list strong { display: block; font-weight: 500; margin-bottom: .2rem; }
.cs-list p { font-size: .93rem; color: var(--on-dark-muted); }

/* Results */
.cs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: .5rem; }
.cs-stat { display: grid; gap: .9rem; align-content: start; }
.cs-stat-tile { border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--window); padding: 1.75rem 1rem; text-align: center; display: grid; gap: .6rem; min-height: 160px; align-content: center; }
.cs-stat-tile strong { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--accent); }
.cs-stat-tile span { font-size: .8rem; color: var(--on-dark-faint); }
.cs-stat p { font-size: .9rem; color: var(--on-dark-muted); line-height: 1.55; padding: 0 .25rem; }
.cs-stat p b { color: var(--on-dark); font-weight: 500; }
.cs-end { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--line-dark); }
.cs-end :is(h2, h3) { font-size: clamp(1.6rem, 3.2vw, 2.4rem); max-width: 20ch; }
.cs-end .actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Sample tag on cards */
.case-sample { font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; background: rgba(255, 107, 44, .12); color: #FFB38F; margin-left: .5rem; }

@media (max-width: 860px) {
  .cs-why, .cs-grid { grid-template-columns: 1fr; }
  .cs-facts, .cs-stats { grid-template-columns: 1fr 1fr; }
  .cs-facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .cs-cards.three, .cs-cards.two, .cs-split { grid-template-columns: 1fr; }
  .flow-row { grid-template-columns: 1fr; gap: 1rem; }
  .flow-col + .flow-col .flow-node.main::before, .flow-col + .flow-col .flow-node.main::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .case-modal, .case-modal::backdrop { transition: none; transform: none; }
  .flow-node { opacity: 1; transition: none; }
  .run-line.is-working .tick { animation: none; }
}
.client-logo-sm .logo-ph { font-size: 0; width: 100%; height: 100%; padding: 0; }

/* Case hero visual: brand roots (Channels card crop) until a real image is supplied */
.cs-hero-art { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 1.5rem; }

/* No roots on this page: no rolling acorn on the run bars, and no roots placeholder in the pop-out
   (a real case photo, without aria-hidden, still shows) */
.run-acorn { display: none; }
.cs-hero-art[aria-hidden="true"] { display: none; }

/* No underlines on this page: links, or the current page in the nav */
body a, body a:hover { text-decoration: none; }
.nav-links a[aria-current="page"] { box-shadow: none; }

/* ---------- Header: the same Fashion White nav as the v2 pages (copied from v2/v2.css; this page keeps its own dark body) ---------- */
.nav[data-tone="paper"] { background: var(--paper); color: var(--ink); border-bottom-color: rgba(14, 37, 27, .1); }
.nav[data-tone="paper"] .nav-links a { color: #4E5A53; }
.nav[data-tone="paper"] .nav-links a:hover, .nav[data-tone="paper"] .nav-links a[aria-current="page"] { color: var(--ink); }
.nav[data-tone="paper"] .cmdk-trigger { color: var(--ink); border-color: rgba(14, 37, 27, .18); background: transparent; }
.nav[data-tone="paper"] .cmdk-trigger kbd { color: #4E5A53; border-color: rgba(14, 37, 27, .18); background: rgba(14, 37, 27, .04); }
.nav[data-tone="paper"] .nav-toggle { color: var(--ink); border-color: rgba(14, 37, 27, .18); }
.nav-logo .logo-on-paper { display: none; }
.nav[data-tone="paper"] .nav-logo .logo-on-ink { display: none; }
.nav[data-tone="paper"] .nav-logo .logo-on-paper { display: block; }
@media (max-width: 860px) {
  .nav[data-tone="paper"] .nav-links { background: var(--paper); border-bottom-color: rgba(14, 37, 27, .1); }
}

/* Featured cases first, then every case grouped by industry */
/* Featured: a photo accordion on Fashion White */
.cs-featured { padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--paper); color: var(--ink); }
.cs-featured .cs-sec-head h2 { color: var(--ink); }
.cs-featured .kicker { color: #3F4B44; }
.cs-featured .kicker::before { color: var(--forest); }
.cs-acc { display: flex; gap: .75rem; height: 30rem; }
.cs-ac { position: relative; flex: 1; min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius); background: var(--ink); color: var(--paper); font: inherit; text-align: left; cursor: pointer; transition: flex 800ms cubic-bezier(.2, .8, .3, 1); }
.cs-ac.is-open { flex: 3.2; }
.cs-ac-photo { position: absolute; inset: 0; }
.cs-ac-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.75); transition: filter 600ms, transform 6s linear; }
.cs-ac.is-open .cs-ac-photo img { filter: none; transform: scale(1.06); }
.cs-ac-shade { position: absolute; inset: 0; background: rgba(14, 37, 27, .55); transition: background-color 600ms; }
.cs-ac.is-open .cs-ac-shade { background: linear-gradient(90deg, rgba(14, 37, 27, .92) 0%, rgba(14, 37, 27, .55) 45%, rgba(14, 37, 27, 0) 75%); }
.cs-ac-side { position: absolute; left: 1.2rem; bottom: 1.4rem; writing-mode: vertical-rl; rotate: 180deg; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; transition: opacity 300ms; }
.cs-ac.is-open .cs-ac-side { opacity: 0; }
.cs-ac-body { position: absolute; left: 0; bottom: 0; display: grid; gap: .6rem; width: min(26rem, 85%); padding: 1.8rem; opacity: 0; translate: 0 16px; transition: opacity 300ms, translate 300ms; }
.cs-ac.is-open .cs-ac-body { opacity: 1; translate: 0 0; transition: opacity 600ms 350ms, translate 600ms 350ms cubic-bezier(.2, .8, .3, 1); }
.cs-ac-ind { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--accent); }
.cs-ac-meta { font-size: .82rem; color: rgba(247, 243, 234, .7); }
.cs-ac-title { font-size: 1.2rem; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.cs-ac-result { display: grid; gap: .1rem; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.03em; }
.cs-ac-result small { font-size: .82rem; font-weight: 400; letter-spacing: 0; color: rgba(247, 243, 234, .7); }
.cs-ac-read { font-weight: 500; color: var(--accent); }
.cs-ac-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(247, 243, 234, .12); opacity: 0; }
.cs-ac-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.is-auto:not(.is-hover) .cs-ac.is-open .cs-ac-bar { opacity: 1; }
.is-auto:not(.is-hover) .cs-ac.is-open .cs-ac-bar i { animation: cs-ac-fill 6s linear forwards; }
@keyframes cs-ac-fill { to { width: 100%; } }
.cs-ac:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cs-ac, .cs-ac-photo img, .cs-ac-body { transition: none; } }
@media (max-width: 960px) {
  .cs-acc { flex-direction: column; height: auto; }
  .cs-ac { min-height: 5rem; flex: none; }
  .cs-ac.is-open { min-height: 26rem; flex: none; }
  .cs-ac-side { writing-mode: horizontal-tb; rotate: none; top: 1.6rem; bottom: auto; }
}
.cs-sec-head { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.cs-sec-head h2 { margin: 0; }
.cs-grid-wrap { padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--line-dark); overflow: hidden; }
/* Industry tabs above the slider */
.cs-ind-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.cs-ind-tab { padding: .55rem 1rem; border: 1px solid var(--line-dark); border-radius: 999px; background: transparent; color: var(--on-dark-muted); font: inherit; font-size: .92rem; cursor: pointer; transition: background-color 200ms, color 200ms, border-color 200ms; }
.cs-ind-tab span { margin-left: .3rem; color: var(--on-dark-faint); }
.cs-ind-tab:hover { border-color: var(--mint); color: var(--paper); }
.cs-ind-tab[aria-selected="true"] { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.cs-ind-tab[aria-selected="true"] span { color: rgba(14, 37, 27, .65); }
.cs-by-ind .spot-card { border: 0; font: inherit; text-align: left; cursor: pointer; }

/* A case study page: the write-up in the same column as every other page */
.case-page {
  --people: #FF6B2C; --agents: #CCF664; --data: #22ACF5;
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6rem);
}
.case-pager { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.case-pager a { display: grid; gap: .3rem; padding: 1rem 1.15rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(247, 243, 234, .025); }
.case-pager a small { font-size: .78rem; color: var(--on-dark-faint); }
.case-pager a span { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.02em; }
.case-pager-next { text-align: right; }
.case-pager a:hover { border-color: var(--accent); }
@media (max-width: 640px) {
  .case-pager { grid-template-columns: 1fr; }
  .case-pager-next { text-align: left; }
}

/* One grid of every case study, using the homepage proof cards (spotlight.css). */
.cs-all {
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(4.5rem, 8vw, 6.5rem);
  background: #0A1C14;
  color: var(--paper);
}
.cs-all h1 {
  margin: 0;
  max-width: 12em;
  font-size: clamp(2.65rem, 4.5vw, 3.65rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--paper);
}
.cs-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem 1rem;
}
.cs-proof-grid .proof-card {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  opacity: 1;
  transform: none;
}
.cs-all-intro {
  margin: 1rem 0 clamp(1.75rem, 3.5vw, 2.75rem);
  font-size: 1.1rem;
  color: var(--on-dark-muted);
}
.cs-proof-grid .proof-photo {
  height: auto;
  aspect-ratio: 1 / 1.25;
}
.cs-proof-grid .proof-card.is-lead { grid-column: 1 / -1; }
.cs-proof-grid .is-lead .proof-photo { aspect-ratio: 2.4 / 1; }
@media (hover: hover) and (pointer: fine) {
  .cs-proof-grid .proof-card:hover .proof-photo img { scale: 1.03; }
}
@media (max-width: 900px) {
  .cs-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cs-all h1 { font-size: var(--title-size); }
  .cs-proof-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-proof-grid .is-lead .proof-photo { aspect-ratio: 1 / 1.25; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-proof-grid .proof-card:hover .proof-photo img { scale: 1; }
}