/* ──────────────────────────────────────────────────────────
   Corporate skin for the case-study pages.

   The homepage had two looks and the case studies had one, so
   clicking a work card took you from the clean corporate homepage
   to a page still wearing the studio design — the one break in the
   illusion, on the exact path a reader takes.

   The case studies were already light, so this is not a rebuild.
   It's three substitutions applied across the cs-* component set:

     1. The teal/blue accents (#006b80, #004bb0) become corporate's
        single accent, or plain ink where an accent was doing
        decoration rather than carrying meaning.
     2. The tinted "glass" panels — a blue-cast wash with a blue
        border and 14-20px radii — become flat surface + hairline.
     3. The display sizes come down. A 105px case-study title and a
        63px section heading are studio scale; corporate reads
        quieter and lets the writing do the work.

   Tokens come from corporate.css, which these pages now link ahead
   of this file. Everything is scoped to [data-style="corporate"],
   so the studio look is untouched.
   ────────────────────────────────────────────────────────── */

/* ─── Page shell ────────────────────────────────────────── */
[data-style="corporate"] body {
  background: var(--c-bg) !important;
  color: var(--c-ink);
  font-family: var(--c-font);
}
/* The studio pages paint a grid and a gradient behind everything. */
[data-style="corporate"] .grid-bg,
[data-style="corporate"] body::before,
[data-style="corporate"] body::after { display: none !important; }

/* Reading progress bar — accent, but hairline rather than a glow. */
[data-style="corporate"] .cs-progress { background: transparent; }
[data-style="corporate"] .cs-progress-fill {
  background: var(--c-accent) !important;
  box-shadow: none !important;
}

/* ─── Header / back link ────────────────────────────────── */
[data-style="corporate"] .cs-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
[data-style="corporate"] .cs-back {
  background: none !important;
  border: 1px solid var(--c-line-firm) !important;
  border-radius: 8px !important;
  color: var(--c-ink-soft) !important;
  font-family: var(--c-mono) !important;
  letter-spacing: 0.06em !important;
  transition: border-color 0.18s ease, color 0.18s ease;
}
[data-style="corporate"] .cs-back:hover {
  border-color: var(--c-ink-faint) !important;
  color: var(--c-ink) !important;
  background: none !important;
}

/* ─── Hero ──────────────────────────────────────────────── */
[data-style="corporate"] .cs-title {
  font-family: var(--c-font) !important;
  font-size: clamp(36px, 5.2vw, 64px) !important;
  font-weight: 660 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  color: var(--c-ink) !important;
}
[data-style="corporate"] .cs-subtitle {
  font-size: clamp(16.5px, 1.6vw, 20px) !important;
  line-height: 1.6 !important;
  color: var(--c-ink-soft) !important;
  max-width: 68ch;
}
/* A hairline rule, not a fading coloured beam. */
[data-style="corporate"] .cs-divider {
  background: var(--c-line-firm) !important;
  height: 1px !important;
  opacity: 1 !important;
}

/* The "try the prototype" call to action. */
[data-style="corporate"] .cs-jump-btn {
  background: var(--c-ink) !important;
  color: var(--c-bg) !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: var(--c-font) !important;
  font-size: 14px !important;
  font-weight: 550 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: opacity 0.18s ease;
}
[data-style="corporate"] .cs-jump-btn:hover { opacity: 0.86; }

/* ─── Sections and body copy ────────────────────────────── */
[data-style="corporate"] .cs-section-title {
  font-family: var(--c-font) !important;
  font-size: clamp(24px, 2.8vw, 34px) !important;
  font-weight: 640 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: var(--c-ink) !important;
}
[data-style="corporate"] .cs-section-body p,
[data-style="corporate"] .cs-section-body li {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--c-ink-soft) !important;
}
[data-style="corporate"] .cs-section-body strong { color: var(--c-ink) !important; }
[data-style="corporate"] .cs-section-tag {
  font-family: var(--c-mono) !important;
  color: var(--c-ink-faint) !important;
}

/* ─── Panels ────────────────────────────────────────────────
   Every boxed component on these pages shares one treatment in the
   studio look: a blue-tinted wash, a blue-tinted border and a soft
   radius. Corporate flattens all of them to the same flat surface
   and hairline so the page reads as one system. */
[data-style="corporate"] .glass-card,
[data-style="corporate"] .cs-meta-row,
[data-style="corporate"] .cs-callout,
[data-style="corporate"] .cs-quote,
[data-style="corporate"] .cs-hmw-card,
[data-style="corporate"] .cs-problem,
[data-style="corporate"] .cs-learning,
[data-style="corporate"] .cs-stat,
[data-style="corporate"] .cs-iter,
[data-style="corporate"] .cs-twocol .glass-card,
[data-style="corporate"] .cs-cell-text {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Small uppercase labels across the panels. */
[data-style="corporate"] .cs-meta-label,
[data-style="corporate"] .cs-hmw-card .label,
[data-style="corporate"] .cs-problem .num,
[data-style="corporate"] .cs-iter .label,
[data-style="corporate"] .cs-twocol h4,
[data-style="corporate"] .cs-colsrow .cs-cell-text h4,
[data-style="corporate"] .cs-stat-label {
  font-family: var(--c-mono) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--c-ink-faint) !important;
}
[data-style="corporate"] .cs-meta-value,
[data-style="corporate"] .cs-hmw-card,
[data-style="corporate"] .cs-problem p,
[data-style="corporate"] .cs-learning p,
[data-style="corporate"] .cs-twocol p,
[data-style="corporate"] .cs-twocol li,
[data-style="corporate"] .cs-cell-text p {
  color: var(--c-ink-soft) !important;
}
[data-style="corporate"] .cs-hmw-card strong,
[data-style="corporate"] .cs-learning h4,
[data-style="corporate"] .cs-iter h4,
[data-style="corporate"] .cs-hmw-card h4 {
  color: var(--c-ink) !important;
  font-family: var(--c-font) !important;
}

/* The studio gives each problem card a different coloured left edge.
   Corporate uses one accent for all of them. */
[data-style="corporate"] .cs-problem { border-left: 3px solid var(--c-accent) !important; }
[data-style="corporate"] .cs-problem .num,
[data-style="corporate"] .cs-problem:nth-child(2) .num,
[data-style="corporate"] .cs-problem:nth-child(3) .num { color: var(--c-ink-faint) !important; }
[data-style="corporate"] .cs-problem:nth-child(2),
[data-style="corporate"] .cs-problem:nth-child(3) { border-left-color: var(--c-accent) !important; }
[data-style="corporate"] .cs-hmw-card .label,
[data-style="corporate"] .cs-hmw-card:nth-child(2) .label,
[data-style="corporate"] .cs-hmw-card:nth-child(3) .label { color: var(--c-ink-faint) !important; }

/* Quotes: the studio hangs oversized coloured quote marks off them. */
[data-style="corporate"] .cs-quote {
  font-style: normal !important;
  font-size: 19px !important;
  line-height: 1.6 !important;
  color: var(--c-ink) !important;
  border-left: 3px solid var(--c-accent) !important;
  border-radius: 0 var(--c-radius) var(--c-radius) 0 !important;
}
[data-style="corporate"] .cs-quote::before,
[data-style="corporate"] .cs-quote::after { display: none !important; }

/* Callout — the one place the accent tint earns its keep. */
[data-style="corporate"] .cs-callout {
  background: var(--c-accent-soft) !important;
  border-color: var(--c-line) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--c-ink) !important;
}
[data-style="corporate"] .cs-callout strong { color: var(--c-accent) !important; }

/* Stats: the studio paints the number with a gradient clipped to the
   text. Corporate sets it solid — a gradient numeral reads as
   decoration on a page whose whole argument is the numbers. */
[data-style="corporate"] .cs-stat-num {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--c-ink) !important;
  font-family: var(--c-font) !important;
  font-size: clamp(26px, 3vw, 34px) !important;
  font-weight: 660 !important;
  letter-spacing: -0.02em !important;
}

/* Iteration cards — the issue/fix pills. */
[data-style="corporate"] .cs-iter .pill {
  font-family: var(--c-mono) !important;
  border-color: var(--c-line-firm) !important;
  color: var(--c-ink-faint) !important;
}
[data-style="corporate"] .cs-iter .pill.bad { color: #b4442c !important; border-color: #e7c4bb !important; }
[data-style="corporate"] .cs-iter .pill.good { color: #1f7a4d !important; border-color: #bcdcc9 !important; }
[data-style="corporate"] .cs-iter .ik-issue { color: #b4442c !important; }
[data-style="corporate"] .cs-iter .ik-fix { color: #1f7a4d !important; }
[data-style="corporate"] .cs-iter p { color: var(--c-ink-soft) !important; }
[data-style="corporate"] .cs-iter em { color: var(--c-ink) !important; }
[data-style="corporate"] .cs-learning-num {
  font-family: var(--c-mono) !important;
  color: var(--c-ink-faint) !important;
}

/* ─── Imagery ───────────────────────────────────────────── */
[data-style="corporate"] .cs-imgrow img,
[data-style="corporate"] .cs-colsrow figure img,
[data-style="corporate"] .cs-cover-image img {
  border-radius: var(--c-radius) !important;
  border: 1px solid var(--c-line);
  box-shadow: none !important;
}
[data-style="corporate"] .cs-imgrow.cs-uniform > figure {
  box-shadow: none !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius) !important;
}

/* ─── Device toggle ─────────────────────────────────────── */
[data-style="corporate"] .cs-device-toggle {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 8px !important;
}
[data-style="corporate"] .cs-device-toggle button {
  font-family: var(--c-font) !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--c-ink-soft) !important;
  background: none !important;
  border-radius: 6px !important;
}
[data-style="corporate"] .cs-device-toggle button.active {
  background: var(--c-bg) !important;
  color: var(--c-ink) !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}

/* ─── Next / footer ─────────────────────────────────────── */
[data-style="corporate"] .cs-next { border-top: 1px solid var(--c-line-firm); }
[data-style="corporate"] .cs-next-label {
  font-family: var(--c-mono) !important;
  color: var(--c-ink-faint) !important;
}
[data-style="corporate"] .cs-next-link {
  font-family: var(--c-font) !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  font-weight: 620 !important;
  letter-spacing: -0.02em !important;
  color: var(--c-ink) !important;
}
[data-style="corporate"] .cs-next-link:hover { color: var(--c-accent) !important; }
[data-style="corporate"] .cs-footer {
  border-top: 1px solid var(--c-line);
  font-family: var(--c-mono) !important;
  color: var(--c-ink-faint) !important;
}
[data-style="corporate"] .cs-footer span { color: var(--c-ink-faint) !important; }

/* ─── Motion ────────────────────────────────────────────────
   The studio reveals each section with a 40px lift. Corporate keeps
   the content still — a reader shouldn't wait for a paragraph. */
[data-style="corporate"] .fade-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}