/* Case-study detail pages (public/case-studies/*.html).
   Loaded after styles.css + theme-performance.css, so every colour and
   font comes from the dark Performance tokens. */

.cs-detail { --cs-measure: 68ch; }
.cs-detail .text-measure { max-width: var(--cs-measure); }
.cs-detail .section { padding-block: clamp(56px, 7vw, 96px); }

/* ---------- Type ---------- */
.cs-detail h1,
.cs-detail h2,
.cs-detail h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
.cs-detail h1 {
  margin: 18px 0 20px;
  max-width: 20ch;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.032em;
}
.cs-detail h2 {
  margin: 16px 0 18px;
  max-width: 24ch;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.cs-detail h3 {
  margin: 0 0 8px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.cs-detail .body-copy { color: var(--ink-soft); line-height: 1.65; }
.cs-detail .body-copy + .body-copy { margin-top: 14px; }
.cs-detail .body-copy strong { color: var(--ink); font-weight: 600; }
.cs-detail .body-copy em { color: var(--accent); font-style: normal; }

/* ---------- Hero ---------- */
.cs-detail-hero { padding-top: clamp(40px, 6vw, 80px); }
.cs-back-link {
  display: inline-flex;
  margin-bottom: 28px;
  color: var(--ink-muted);
  font-size: 14px;
  transition: color .2s ease;
}
.cs-back-link:hover { color: var(--accent); }

.cs-detail-hero-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) {
  .cs-detail-hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 56px; }
}

.cs-at-a-glance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 32px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--line);
}
.cs-at-a-glance div {
  display: flex;
  flex-direction: column-reverse; /* value above its label */
  justify-content: flex-end;
  gap: 6px;
  padding: 18px 20px;
  background: var(--bg-soft);
}
.cs-at-a-glance dt { color: var(--ink-muted); font-size: 13px; line-height: 1.4; }
.cs-at-a-glance dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.cs-detail .cs-client-card { padding: 28px; }
.cs-client-card-kicker {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cs-detail .cs-client-card h2 { max-width: none; margin: 8px 0 18px; font-size: 22px; }
.cs-client-card-list { display: grid; margin: 0; padding: 0; list-style: none; }
.cs-client-card-list li {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
}
.cs-client-card-list span { color: var(--ink-muted); }
.cs-client-card-list strong { color: var(--ink); font-weight: 500; }

/* ---------- Sections ---------- */
.cs-block { max-width: 1040px; }
.cs-detail-section--muted {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0));
}

/* Numbered challenge list */
.cs-numbered-list {
  display: grid;
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: cs;
}
@media (min-width: 900px) { .cs-numbered-list { grid-template-columns: 1fr 1fr; } }
.cs-numbered-list li {
  position: relative;
  padding: 24px 24px 24px 68px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .02);
  counter-increment: cs;
}
.cs-numbered-list li::before {
  content: counter(cs, decimal-leading-zero);
  position: absolute;
  top: 26px;
  left: 24px;
  color: var(--accent);
  font: 500 14px/1 var(--font-display);
  letter-spacing: .04em;
}

/* Approach steps */
.cs-step-grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 760px) { .cs-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-detail .cs-step { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.cs-step-index { color: var(--accent); font: 500 13px/1 var(--font-display); letter-spacing: .06em; }
.cs-detail .cs-step h3 { margin: 0; }

/* Results */
.cs-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.cs-detail .cs-result { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; }
.cs-result .metric-number {
  color: var(--ink);
  font: 500 clamp(40px, 4vw, 56px)/1 var(--font-display);
  letter-spacing: -0.03em;
}
.cs-result .metric-unit { margin-left: 2px; color: var(--accent); font-size: .45em; letter-spacing: 0; }
.cs-result .metric-label { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.cs-detail .cs-footnote { margin-top: 20px; color: var(--ink-muted); font-size: 13px; }

/* What's next */
.cs-next-list { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.cs-next-list li {
  position: relative;
  padding: 16px 20px 16px 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.cs-next-list li::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 20px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(57, 255, 20, .6);
}
.cs-next-list strong { color: var(--ink); font-weight: 600; }

/* Takeaway */
.cs-detail .cs-takeaway {
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid rgba(57, 255, 20, .25);
  border-radius: 24px;
  background:
    radial-gradient(640px 320px at 0% 0%, rgba(57, 255, 20, .10), transparent 70%),
    var(--surface);
}

@media (max-width: 599px) {
  .cs-at-a-glance div { padding: 16px; }
  .cs-numbered-list li { padding: 20px 20px 20px 56px; }
  .cs-numbered-list li::before { left: 20px; top: 22px; }
  .cs-client-card-list li { grid-template-columns: 92px minmax(0, 1fr); }
}

/* Closing CTA keeps its centred heading (the h2 rule above resets margins). */
.cs-detail .final-cta h2 { margin-inline: auto; max-width: 22ch; }

/* These pages have no mobile menu, and styles.css hides every header button
   below 760px. Keep the primary action reachable. */
@media (max-width: 760px) {
  .header-right .btn-primary {
    display: inline-flex;
    min-height: 40px;
    padding: 0 16px;
    font-size: 14px;
  }
}

/* Header nav: five links now (AI Automation joined). It sits absolutely
   centred between the logo and the buttons, so it never wraps and steps
   aside below 1200px, where it would run into Client Login (it already did
   below ~1100px with four links). The back link, Get in touch and the
   footer still carry every destination there. */
.case-study-page .header-inner > .nav a { white-space: nowrap; }
@media (max-width: 1365px) {
  .case-study-page .header-inner > .nav { gap: 24px; }
}
@media (max-width: 1199px) {
  .case-study-page .header-inner > .nav { display: none; }
}

/* Three Signals lockup (header + footer): the outlined wordmark replaces the old
   mark + "Arctis Labs" text; -ads variant because case studies are Performance pages. */
.logo-lockup { display: block; width: auto; height: 24px; }