/* ============================================================
   case-detail.css - client story detail pages (work-*.html)
   Self-contained: depends only on tokens in styles.css.
   Reuses layout classes from cases.css (cs-case, cs-spec, cs-body,
   cs-block, cs-before, cs-ledger, cs-method, cs-slot-row).
   ============================================================ */

/* ---- Hero tweaks ---- */
/* Tighter than the global .page-hero (was 180px / ~144px) so the navy hero
   hugs the content instead of leaving empty space, and the stats card sits
   centered against the headline column rather than stranded at the bottom. */
.cd-hero { padding-top: clamp(122px, 12vw, 144px); padding-bottom: clamp(30px, 4vw, 54px); }
.cd-hero .cs-hero-grid { align-items: center; }
.cd-hero .cs-hero-copy .stamp { margin: 8px 0 18px; }
.cd-hero .cs-hero-copy .page-title { margin-top: 6px; }
.cd-hero .page-sub { max-width: 48ch; margin-top: 24px; }

/* Client logo: the hero's right-hand anchor */
.cd-hero-brand { display: flex; align-items: center; justify-content: center; }
.cd-hero-logo {
  margin: 0; border-radius: 24px;
  background: var(--offwhite); object-fit: contain;
  width: auto; height: auto;
  max-width: clamp(190px, 24vw, 264px); max-height: 184px;
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow: 0 28px 58px -24px rgba(4, 12, 22, 0.6);
}

.cd-crumb {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem; letter-spacing: 0.02em;
  color: var(--paper-dim); margin-bottom: 22px;
}
.cd-crumb a { color: var(--paper-dim); text-decoration: none; transition: color 0.2s var(--ease); }
.cd-crumb a:hover { color: var(--gold); }
.cd-crumb span[aria-hidden] { opacity: 0.4; }
.cd-crumb > span:last-child { color: var(--paper-ink); }

/* ---- Hero topline card ---- */
.cd-topline {
  position: relative;
  align-self: start;
  background: rgba(7, 22, 36, 0.4);
  border-radius: 24px;
  padding: 24px 26px 14px;
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 64px -28px rgba(2, 8, 16, 0.55);
}
.cd-topline::before {
  content: ""; position: absolute; inset: 0; border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(244, 241, 236, 0.12);
  pointer-events: none;
}
.cd-topline-label {
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gold); margin-bottom: 12px;
}
.cd-topline .cs-slot-row { border-color: var(--hairline-dark); }
.cd-topline .cs-slot-row span { color: var(--paper-dim); }
.cd-topline .cs-slot-row b { color: var(--paper-ink); }

/* What's live, as a full-width strip below the hero */
.cd-topline-strip { margin-top: clamp(30px, 4vw, 50px); padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 40px) clamp(22px, 2.6vw, 30px); }
.cd-topline-strip .cd-topline-label { margin-bottom: 20px; }
.cd-topline-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(22px, 3vw, 48px); }
.cd-topline-strip .cs-slot-row { display: flex; flex-direction: column; gap: 7px; padding: 0; border-bottom: 0; }
.cd-topline-strip .cs-slot-row span { order: 1; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.cd-topline-strip .cs-slot-row b { order: 2; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--paper-ink); line-height: 1.32; }
@media (max-width: 720px) {
  .cd-topline-rows { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* ---- Nine automations chips ---- */
.cd-autos {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin: 20px 0 6px;
}
.cd-auto {
  font-size: 0.82rem; font-weight: 600; color: var(--ink-soft);
  background: rgba(71, 168, 154, 0.14);
  padding: 7px 13px; border-radius: 999px;
  line-height: 1;
}
.cd-auto-gold {
  color: var(--navy);
  background: rgba(201, 169, 110, 0.2);
}

/* ---- The 7am briefing panel ---- */
.cd-brief {
  margin: 18px 0 20px;
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 24px 54px -26px rgba(14, 42, 71, 0.3), 0 2px 8px rgba(14, 42, 71, 0.06);
  overflow: hidden;
}
.cd-brief-row {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px;
  padding: 13px 18px; border-bottom: 1px solid var(--hairline-light);
}
.cd-brief-row:last-child { border-bottom: 0; }
.cd-brief-row dt {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal);
  align-self: center;
}
.cd-brief-row dd { font-size: 0.92rem; font-weight: 600; color: var(--navy); line-height: 1.5; }
.cd-brief-gold { background: rgba(201, 169, 110, 0.08); }
.cd-brief-gold dt { color: var(--gold-press); }

/* ---- The dollar find ---- */
.cd-find {
  display: flex; align-items: center; gap: 18px;
  margin: 4px 0 6px; padding: 18px 22px;
  background: var(--navy); border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(4, 12, 22, 0.55);
}
.cd-find b {
  font-family: var(--font-display); font-weight: 800;
  font-size: 2rem; color: var(--gold);
  font-variant-numeric: tabular-nums; flex: none; line-height: 1;
}
.cd-find span { font-size: 0.9rem; line-height: 1.55; color: var(--paper-ink); }

/* ---- Task-by-task time ledger (static, no scroll dependency) ---- */
.tk-ledger {
  margin: 26px 0 4px; padding: 22px 24px;
  background: var(--offwhite);
  border-radius: 22px;
  box-shadow: 0 24px 54px -28px rgba(14, 42, 71, 0.24);
}
.tk-ledger-label {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft);
  margin-bottom: 16px;
}
.tk-cuts { display: block; }
.tk-cut {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline-light);
}
.tk-cut:last-child { border-bottom: 0; }
.tk-cut-name { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.tk-cut i {
  position: relative; display: block; height: 4px; border-radius: 3px;
  background: rgba(14, 42, 71, 0.1);
}
.tk-cut i::after {
  content: ""; position: absolute; inset: 0; width: var(--w);
  background: linear-gradient(90deg, var(--teal), var(--gold));
  border-radius: 3px;
}
.tk-cut b {
  font-size: 0.85rem; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tk-wired {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  font-size: 0.85rem; color: var(--ink-soft);
}
.tk-wired::before { content: ""; width: 12px; height: 2px; border-radius: 2px; background: var(--gold); flex: none; }

/* ---- Stamps (self-contained copies of the homepage variants) ---- */
.wk-stamp {
  display: inline-block; font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  line-height: 1;
}
.wk-stamp-build { background: rgba(201, 169, 110, 0.18); color: var(--gold-press); }

/* ---- "More of our work" cross-link cards ---- */
.cd-more { padding: 52px 0 84px; background: var(--offwhite); }
.cd-more .sec-head { margin-bottom: 34px; }
.cd-more-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
}
/* Only one other case to link to: don't stretch the lone card across both columns */
.cd-more-grid-single { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.cd-more-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 26px 28px; text-decoration: none;
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 20px 46px -26px rgba(14, 42, 71, 0.28);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.cd-more-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px -24px rgba(14, 42, 71, 0.32);
}
.cd-more-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: var(--navy); margin: 0;
}
.cd-more-card p { font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.cd-more-card .link-arrow { margin-top: 2px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .cd-topline { margin-top: 26px; }
}
@media (max-width: 680px) {
  /* Phones: close the dead same-color band between the case section and More work */
  .cs-case { padding-bottom: 84px; }
  .cd-more { padding-top: 48px; }
  .cd-more-grid { grid-template-columns: 1fr; }
  .tk-cut { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
  .tk-cut-name { grid-row: 1; grid-column: 1; }
  .tk-cut i { grid-row: 2; grid-column: 1 / -1; }
  .tk-cut b { grid-row: 1; grid-column: 2; }
  .cd-find { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cd-brief-row { grid-template-columns: 90px minmax(0, 1fr); gap: 10px; }
}

/* Phone: each cut stacks. Name, then the time saved, then the bar. */
@media (max-width: 600px) {
  .tk-cut { grid-template-columns: 1fr; gap: 6px; padding: 13px 0 15px; }
  .tk-cut-name { grid-row: 1; grid-column: 1; }
  .tk-cut b { grid-row: 2; grid-column: 1; justify-self: start; }
  .tk-cut i { grid-row: 3; grid-column: 1; }
}