/* ============================================
   XLEY.AI Brand Campaign Dashboard — cs01.html
   Page-specific styles. Independent of casestudy.css
   (shared by cs02–cs04) so this restructure cannot
   affect the other case study pages.
   ============================================ */

.cs1-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.cs1 img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--divider);
  border-radius: 4px;
}

/* -------------------- Section label (shared) -------------------- */

.cs1-label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.cs1-label-on-dark {
  color: var(--muted);
}

.cs1-subheading {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 24px;
  color: var(--text);
  margin-bottom: 40px;
}

/* -------------------- Back link -------------------- */

.cs1-back-wrap {
  padding-top: 0;
  margin-bottom: 48px;
}

.cs1-back {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--muted);
  transition: color 0.2s ease;
}

.cs1-back:hover { color: var(--text); }

/* -------------------- Hero -------------------- */

.cs1-hero {
  padding-bottom: 0;
}

.cs1-tag {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}

.cs1-headline {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 24px;
}

.cs1-outcome {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 600px;
  margin-bottom: 32px;
}

.cs1-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.cs1-pills span {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--muted);
  padding: 0 20px;
}

.cs1-pills span:first-child { padding-left: 0; }

.cs1-pills span + span {
  border-left: 1px solid var(--divider);
}

.cs1-divider {
  border: none;
  border-top: 1px solid var(--divider);
  max-width: var(--container-max);
  margin: 48px auto;
}

/* -------------------- Generic section -------------------- */

.cs1-section {
  padding-bottom: 80px;
}

/* -------------------- The Problem -------------------- */

.cs1-problem-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--gutter);
  align-items: start;
}

.cs1-problem-main h2 {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 28px;
  color: var(--text);
  margin-bottom: 20px;
}

.cs1-problem-main p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 480px;
}

.cs1-problem-main p + p {
  margin-top: 18px;
}

.cs1-problem-scan {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cs1-scan-label {
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}

.cs1-scan-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

/* -------------------- Before / Explorations screen rows -------------------- */

.cs1-shot-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.cs1-shot-row--pair {
  grid-template-columns: repeat(2, 1fr);
}

.cs1-shot figcaption {
  font-family: var(--font-label);
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 12px;
}

/* Only the standalone full-width shot that follows a shot-row (Solution
   section's screen 3) needs its own top margin — shots inside a row are
   spaced by the grid's own gap, and adding margin-top there would push
   items 2/3 down and misalign the row. */
.cs1-shot-row + .cs1-shot {
  margin-top: var(--gutter);
}

/* -------------------- Explorations -------------------- */

.cs1-explore-block {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--gutter);
  align-items: start;
}

.cs1-explore-block + .cs1-explore-block {
  margin-top: 64px;
}

.cs1-explore-label {
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
}

.cs1-explore-body h3 {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 22px;
  color: var(--text);
  margin-bottom: 14px;
}

.cs1-explore-body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 56ch;
}

.cs1-reject-label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 20px;
  margin-bottom: 8px;
}

.cs1-reject-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  max-width: 56ch;
}

/* -------------------- The Decision -------------------- */

.cs1-decision {
  width: 100%;
  background: var(--surface);
}

.cs1-decision-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 64px var(--gutter);
}

.cs1-decision-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.cs1-decision-num {
  display: block;
  font-family: var(--font-headline);
  font-size: 48px;
  color: var(--text);
  opacity: 0.1;
  line-height: 1;
  margin-bottom: 12px;
}

.cs1-decision-label {
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}

.cs1-decision-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* -------------------- AI Campaign Builder -------------------- */

.cs1-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: start;
}

.cs1-ai-text h2 {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 24px;
  color: var(--text);
  margin-bottom: 20px;
}

.cs1-ai-text p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}

.cs1-ai-text p + p {
  margin-top: 18px;
}

/* -------------------- Outcome -------------------- */

.cs1-outcome-section {
  width: 100%;
  background: var(--text);
  color: var(--bg);
}

.cs1-outcome-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 80px var(--gutter);
}

.cs1-outcome-headline {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.25;
  color: var(--bg);
  max-width: 720px;
  margin-bottom: 40px;
}

.cs1-outcome-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}

.cs1-outcome-row p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(242, 241, 235, 0.6);
}

/* -------------------- Reflection -------------------- */

.cs1-reflection {
  padding-top: 80px;
  padding-bottom: 80px;
}

.cs1-reflection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: start;
}

.cs1-reflection-quote {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 20px;
  color: var(--text);
  line-height: 1.4;
}

.cs1-reflection-body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}

.cs1-reflection-body p + p {
  margin-top: 18px;
}

/* -------------------- Next project -------------------- */

.cs1-next {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 80px var(--gutter);
  border-top: 1px solid var(--divider);
}

.cs1-next-left {
  display: block;
}

.cs1-next-label {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  transition: color 0.2s ease;
}

.cs1-next-title {
  display: block;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 28px;
  color: var(--text);
  transition: color 0.2s ease;
}

.cs1-next-left:hover .cs1-next-label,
.cs1-next-left:hover .cs1-next-title {
  color: var(--accent);
}

.cs1-next-right {
  font-family: var(--font-label);
  font-size: 13px;
  color: var(--accent);
  transition: color 0.2s ease;
}

.cs1-next-right:hover { color: var(--text); }

/* -------------------- Responsive -------------------- */

@media (max-width: 860px) {
  .cs1-problem-grid,
  .cs1-shot-row,
  .cs1-shot-row--pair,
  .cs1-explore-block,
  .cs1-decision-row,
  .cs1-ai-grid,
  .cs1-outcome-row,
  .cs1-reflection-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cs1-explore-block + .cs1-explore-block {
    margin-top: 48px;
  }
}

@media (max-width: 480px) {
  .cs1-headline { font-size: clamp(32px, 9vw, 48px); }
  .cs1-decision-inner,
  .cs1-outcome-inner { padding-top: 48px; padding-bottom: 48px; }
  .cs1-next { padding-top: 56px; padding-bottom: 56px; }
}