/* =========================================================================
   Case Studies — Option A template + public index
   Scoped to .template-casestudy (study page) and .template-case-studies (index).
   Dark Work theme tokens (--w-*) come from work.css. Inter loads in header.
   ========================================================================= */

/* ---- shared bits ---- */
.template-casestudy .cs-wrap,
.template-case-studies .cs-wrap {
  max-width: 672px;
  margin: 0 auto;
  padding: 0 32px;
}
.template-casestudy .cs-beat-label,
.template-case-studies .cs-beat-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--w-coral);
}

/* media (image + video) */
.template-casestudy .cs-img-wrap img,
.template-casestudy .cs-pillar-fig img,
.template-casestudy .cs-media video {
  display: block;
  max-width: 100%;
  max-height: 560px;
  width: auto;
  margin-inline: auto;
  border: 1px solid var(--w-border);
  border-radius: 5px;
  background: #0e0e0e;
}
.template-casestudy .cs-img-caption,
.template-casestudy .cs-media figcaption,
.template-casestudy .cs-pillar-fig figcaption {
  font-size: 13px;
  color: var(--w-muted);
  margin-top: 10px;
  line-height: 1.5;
  text-align: center;
}

/* =========================================================================
   STUDY PAGE
   ========================================================================= */
.template-casestudy .cs-page { padding: var(--nav-h) 0 0; }

/* work pagehead + sub-nav, shared by the study page and the index. 48px top matches .work-index-header on the other Work pages. */
.template-casestudy .cs-pagehead,
.template-case-studies .cs-pagehead { padding: 48px 0 36px; border-bottom: 1px solid rgba(240,235,224,0.15); margin-bottom: 40px; }
.template-casestudy .cs-pagelabel,
.template-case-studies .cs-pagelabel {
  font-size: 13px; font-weight: 500; letter-spacing: .35em; text-transform: uppercase; color: var(--w-muted); margin-bottom: 24px;
}
.template-casestudy .cs-pagelabel a,
.template-case-studies .cs-pagelabel a { color: inherit; text-decoration: none; }
.template-casestudy .cs-pagelabel a:hover,
.template-case-studies .cs-pagelabel a:hover { color: var(--w-cream); }
.template-casestudy .cs-head { margin-top: 0; }

.template-casestudy .cs-eyebrow {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--w-muted);
}
.template-casestudy .cs-title {
  font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em;
  margin: 18px 0 0; color: var(--w-cream);
}
.template-casestudy .cs-thesis {
  font-size: 21px; line-height: 1.45; font-weight: 400; margin-top: 22px; color: var(--w-cream); opacity: .92;
}
.template-casestudy .cs-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px;
  border-top: 1px solid var(--w-border); border-bottom: 1px solid var(--w-border); padding: 22px 0;
}
.template-casestudy .cs-meta dt {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--w-muted); margin-bottom: 7px;
}
.template-casestudy .cs-meta dd { font-size: 14px; line-height: 1.4; color: var(--w-cream); }
.template-casestudy .cs-contrib {
  font-style: italic; color: #cfc9bd; font-size: 16px; line-height: 1.6; margin-top: 32px;
  padding-left: 20px; border-left: 2px solid var(--w-coral);
}

/* body blocks */
.template-casestudy .cs-body { margin-top: 8px; }
.template-casestudy .cs-beat-head { margin-top: 56px; }
.template-casestudy .cs-beat-head .cs-beat-label { margin-bottom: 14px; }
.template-casestudy .cs-beat-head h3 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--w-cream); margin: 0;
}
.template-casestudy .cs-body .cs-section { margin-top: 14px; }
.template-casestudy .cs-body .cs-section p {
  font-size: 14px; color: var(--w-cream); line-height: 1.75; margin: 0;
}
.template-casestudy .cs-body .cs-section p + p { margin-top: 16px; }
.template-casestudy .cs-img-wrap,
.template-casestudy .cs-media { margin-top: 24px; }

/* pillars */
.template-casestudy .cs-pillars { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: p; }
.template-casestudy .cs-pillars li {
  counter-increment: p; padding: 28px 0; border-top: 1px solid var(--w-border);
  display: grid; grid-template-columns: 40px 1fr; column-gap: 18px;
}
.template-casestudy .cs-pillars li:last-child { border-bottom: 1px solid var(--w-border); }
.template-casestudy .cs-pillar-num {
  font-size: 14px; font-weight: 600; color: var(--w-coral); font-variant-numeric: tabular-nums; padding-top: 3px;
}
.template-casestudy .cs-pillar-num::before { content: "0" counter(p); }
.template-casestudy .cs-pillar-body h4 { font-size: 17px; font-weight: 600; color: var(--w-cream); margin: 0 0 6px; }
.template-casestudy .cs-pillar-body p { font-size: 14px; color: var(--w-cream); line-height: 1.7; margin: 0; }
.template-casestudy .cs-pillar-fig { grid-column: 2; margin: 16px 0 0; }

/* metrics */
.template-casestudy .cs-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px;
  border-top: 1px solid var(--w-border); border-bottom: 1px solid var(--w-border); padding: 32px 0;
}
.template-casestudy .cs-metric-val {
  font-size: 38px; font-weight: 600; color: var(--w-coral); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.template-casestudy .cs-metric-lbl { font-size: 13px; color: var(--w-muted); margin-top: 8px; line-height: 1.4; }
.template-casestudy .cs-metric-detail { font-size: 12px; color: var(--w-dim); margin-top: 4px; }

/* When the metrics band directly follows the pillars list, the pillars' closing hairline
   already frames the band: drop the band's own top gap + border so there isn't a second
   hairline with empty space stacked above it. */
.template-casestudy .cs-pillars + .cs-section { margin-top: 0; }
.template-casestudy .cs-pillars + .cs-section .cs-metrics { margin-top: 0; border-top: none; }

/* takeaway: a plain text block following the final metrics reads as the closer */
.template-casestudy .cs-metrics + .cs-section p { font-size: 14px; color: var(--w-cream); line-height: 1.75; }
.template-casestudy .cs-metrics + .cs-section { margin-top: 40px; }

/* self-hosted video: click-to-play */
.template-casestudy .cs-video { position: relative; }
.template-casestudy .cs-video .cs-play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(232,80,58,.92); color: #fff; border: none; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s;
}
.template-casestudy .cs-video .cs-play:hover { transform: scale(1.06); }
.template-casestudy .cs-video.is-playing .cs-play { display: none; }

/* =========================================================================
   INDEX PAGE (public)
   ========================================================================= */
.template-case-studies .cs-index { padding: var(--nav-h) 0 0; }

/* leadership intro */
.template-case-studies .cs-lead { padding-top: 16px; }
.template-case-studies .cs-lead h1 {
  font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--w-cream); margin: 0;
}
.template-case-studies .cs-lead .cs-section { margin-top: 20px; }
.template-case-studies .cs-lead .cs-section p {
  font-size: 14px; line-height: 1.75; color: var(--w-cream); margin: 0;
}
.template-case-studies .cs-lead .cs-section p + p { margin-top: 14px; }
.template-case-studies .cs-lead .cs-section strong { color: var(--w-cream); font-weight: 600; }

/* how I lead list */
.template-case-studies .cs-leadlist { margin-top: 40px; }
.template-case-studies .cs-leadlist .cs-beat-label { margin-bottom: 16px; }
.template-case-studies .cs-leadlist ul { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.template-case-studies .cs-leadlist li {
  display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 14px; color: var(--w-cream);
}
.template-case-studies .cs-leadlist li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--w-coral); margin-top: 10px;
}

/* teams table */
.template-case-studies .cs-teams { margin-top: 44px; border-top: 1px solid var(--w-border); }
.template-case-studies .cs-teams-cap { color: var(--w-coral) !important; margin: 18px 0 4px; }
.template-case-studies .cs-teams table { width: 100%; border-collapse: collapse; }
.template-case-studies .cs-teams td { padding: 13px 0; border-bottom: 1px solid var(--w-border); vertical-align: baseline; font-size: 14px; }
.template-case-studies .cs-teams td.co { color: var(--w-cream); font-weight: 600; width: 22%; }
.template-case-studies .cs-teams td.tm { color: var(--w-cream); width: 52%; }
.template-case-studies .cs-teams td.sz { color: var(--w-cream); text-align: right; font-variant-numeric: tabular-nums; }

/* studies list */
.template-work .cs-studies { margin-top: 44px; }
.template-work .cs-studies-cap {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--w-coral);
  padding-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline;
}
.template-work .cs-studies-cap .cs-gate { color: var(--w-dim); letter-spacing: .04em; text-transform: none; }
.template-work .cs-study {
  display: grid; grid-template-columns: 34px 1fr 200px; gap: 24px; align-items: center;
  padding: 28px 0; border-top: 1px solid var(--w-border); text-decoration: none; color: inherit; transition: background .18s;
}
.template-work .cs-study:last-of-type { border-bottom: none; }
.template-work .cs-study-num {
  font-size: 13px; font-weight: 600; color: var(--w-coral); font-variant-numeric: tabular-nums; align-self: start; padding-top: 5px;
}
.template-work .cs-study-text h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--w-cream); margin: 0; transition: color .18s; }
.template-work .cs-study-meta { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--w-muted); margin-top: 7px; }
.template-work .cs-study-desc { font-size: 15px; color: var(--w-muted); line-height: 1.55; margin-top: 10px; max-width: 46ch; }
.template-work .cs-study-thumb {
  aspect-ratio: 16/10; border: 1px solid var(--w-border); border-radius: 5px; overflow: hidden;
  display: block; transition: border-color .18s;
}
.template-work .cs-study-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.template-work .cs-study:hover { background: #1b1b19; }
.template-work .cs-study:hover .cs-study-text h3 { color: var(--w-coral); }
.template-work .cs-study:hover .cs-study-thumb { border-color: var(--w-muted); }

.template-case-studies .cs-footnote { margin-top: 80px; color: var(--w-dim); font-size: 13px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 640px) {
  .template-casestudy .cs-wrap,
  .template-case-studies .cs-wrap { padding: 0 20px; }
  /* match .work-index-header's mobile padding on the other Work pages (patents/resume/overview)
     so the sub-nav sits at the same vertical position */
  .template-casestudy .cs-pagehead,
  .template-case-studies .cs-pagehead { padding: 40px 0 28px; }
  .template-casestudy .cs-title { font-size: 26px; }
  .template-casestudy .cs-thesis { font-size: 18px; }
  .template-casestudy .cs-meta { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .template-casestudy .cs-pillars li { grid-template-columns: 28px 1fr; }
  .template-casestudy .cs-pillar-fig { grid-column: 1 / -1; }
  .template-casestudy .cs-metrics { grid-template-columns: 1fr; row-gap: 24px; }

  .template-case-studies .cs-lead h1 { font-size: 30px; }
  .template-work .cs-study { grid-template-columns: 24px 1fr; gap: 14px; }
  .template-work .cs-study-thumb { display: none; }
  .template-case-studies .cs-teams td.sz { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .template-casestudy .cs-video.is-auto video { /* still loops; honor by not forcing */ }
}

/* =========================================================================
   Bigger media + lightbox
   ========================================================================= */
.template-casestudy .cs-zoom { cursor: zoom-in; }

/* standalone beat images + videos break out wider than the 672 text column */
@media (min-width: 820px) {
  .template-casestudy .cs-img-wrap,
  .template-casestudy .cs-media {
    width: calc(100% + 200px);
    margin-left: -100px;
  }
  .template-casestudy .cs-img-wrap img,
  .template-casestudy .cs-media video { max-height: 680px; }
  /* the image breaks out wider than the text, but its caption stays bound to the
     main content column (the breakout is centered on the column, so margin-auto re-aligns it) */
  .template-casestudy .cs-img-caption,
  .template-casestudy .cs-media figcaption {
    max-width: 608px;
    margin-inline: auto;
  }
}

.cs-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center;
  background: rgba(8,8,8,0.92); padding: 32px; cursor: zoom-out;
}
.cs-lightbox.is-open { display: flex; }
.cs-lightbox-fig { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; cursor: default; }
.cs-lightbox img {
  max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto;
  border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); cursor: default;
}
.cs-lightbox-cap { margin-top: 16px; color: #cfc9bd; font-size: 14px; line-height: 1.5; text-align: center; max-width: 70ch; cursor: default; }
.cs-lightbox-close {
  position: fixed; top: 18px; right: 22px; width: 40px; height: 40px;
  background: none; border: none; color: var(--w-cream, #F0EBE0); font-size: 30px;
  line-height: 1; cursor: pointer; opacity: .8;
}
.cs-lightbox-close:hover { opacity: 1; }

/* tighten the gap between the contribution pull-quote and the first beat */
.template-casestudy .cs-body .cs-beat-head:first-child { margin-top: 28px; }

/* floating App Store CTA (mirrors the homepage badge, fixed so it floats) */
.template-casestudy .cs-app-cta {
  position: fixed; z-index: 50;
  left: calc(50% + 360px); bottom: clamp(20px, 4vh, 40px);
  transform-origin: left bottom;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 24px; background: var(--w-coral); color: #fff; text-decoration: none;
  border-radius: 100px; text-align: center; transform: rotate(6deg);
  transition: transform .2s ease; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.template-casestudy .cs-app-cta:hover { transform: rotate(4deg) scale(1.04); }
.template-casestudy .cs-app-cta-name { font-size: 15px; font-weight: 700; line-height: 1.3; color: #fff; }
.template-casestudy .cs-app-cta-sub { font-size: 11px; font-weight: 400; line-height: 1.3; color: rgba(255,255,255,.85); }
/* not enough right margin to sit beside the column: fall back to the corner */
@media (max-width: 1240px) {
  .template-casestudy .cs-app-cta { left: auto; right: 24px; }
}
@media (max-width: 640px) {
  .template-casestudy .cs-app-cta { left: auto; right: 16px; bottom: 12px; padding: 11px 18px; }
}

/* current study dimmed in its own bottom list; divider above the list on study pages */
.template-work .cs-study.is-current { opacity: .45; pointer-events: none; }
.template-casestudy .cs-studies { margin-top: 88px; padding-top: 8px; border-top: 1px solid var(--w-border); }

/* pull quotes */
.template-casestudy .cs-quotes { margin-top: 28px; display: grid; gap: 28px; }
.template-casestudy .cs-quote { margin: 0; padding-left: 22px; border-left: 2px solid var(--w-coral); }
.template-casestudy .cs-quote p { font-size: 20px; line-height: 1.5; color: var(--w-cream); font-style: italic; margin: 0; }
.template-casestudy .cs-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; letter-spacing: .04em; color: var(--w-muted); }