.elementor-7816 .elementor-element.elementor-element-4c1619e{overflow:visible;}/* Start custom CSS *//* =============================================================================
   MAD DIGI – CASE STUDY TEMPLATE  |  CSS  |  v1.0
   -----------------------------------------------------------------------------
   Paste this whole file into ONE of these places (see the guide, Step 2):
     • Elementor > Site Settings > Custom CSS         (Elementor Pro)
     • Page Settings > Advanced > Custom CSS          (Elementor Pro)
     • Appearance > Customize > Additional CSS        (any WordPress site)
     • or inside <style> ... </style> at the top of the HTML widget (no Pro needed)

   Every body.elementor-page-7816 starts with ".md-case-study" so nothing leaks into your theme,
   Elementor, or other plugins. No global body / heading / button rules.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS  (change colours, radius, widths and fonts HERE)
   ----------------------------------------------------------------------------- */
.md-case-study {
  /* Brand colours – replace with Mad Digi's real brand values */
  --md-cs-accent: #FAAF19;          /* buttons, links, highlights            */
  --md-cs-accent-hover: #000000;    /* button hover                           */
  --md-cs-accent-soft: #FFFFFF;     /* light tint behind accent text          */

  --md-cs-ink: #0f1222;             /* headings + primary dark                */
  --md-cs-text: #3a3f52;            /* body copy                              */
  --md-cs-muted: #646a80;           /* captions, labels                       */
  --md-cs-bg: #ffffff;              /* page background of the template        */
  --md-cs-surface: #f6f7fb;         /* cards / table header                   */
  --md-cs-border: #e3e6ef;          /* borders                                */
  --md-cs-dark: #0f1222;            /* dark panels (summary + final CTA)      */
  --md-cs-on-dark: #ffffff;
  --md-cs-on-dark-muted: #c3c8dc;
  --md-cs-focus: #FAAF19;           /* keyboard focus ring                    */
  --md-cs-positive: #0f7a4a;        /* table trend: improvement               */
  --md-cs-negative: #b42318;        /* table trend: decline                   */

  /* Shape + layout */
  --md-cs-radius: 16px;
  --md-cs-radius-sm: 10px;
  --md-cs-max-width: 1200px;
  --md-cs-shadow: 0 1px 2px rgba(15, 18, 34, .04), 0 8px 24px rgba(15, 18, 34, .06);

  /* Height of your sticky site header (the JS can also set this – see config
     "settings.stickyHeaderOffset"). Used so anchor links don't hide under it. */
  --md-cs-sticky-offset: 120px;

  /* FONTS – by default the template inherits your theme's fonts.
     To force a font, UNCOMMENT and edit these two lines:
  --md-cs-font-body: "Inter", Arial, sans-serif;
  --md-cs-font-heading: "Poppins", Arial, sans-serif;
  */

  display: block;
  width: 100%;
  max-width: 100%;
  background: var(--md-cs-bg);
  color: var(--md-cs-text);
  font-family: var(--md-cs-font-body, inherit);
  font-size: 17px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  text-align: left;
}


/* -----------------------------------------------------------------------------
   2. SCOPED RESETS  (only inside the template)
   ----------------------------------------------------------------------------- */
.md-case-study *,
.md-case-study *::before,
.md-case-study *::after { box-sizing: border-box; }

.md-case-study img { display: block; max-width: 100%; height: auto; border: 0; }

.md-case-study :is(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table) { margin: 0; padding: 0; }

.md-case-study :is(ul, ol) { list-style: none; }

.md-case-study :is(h1, h2, h3, h4) {
  font-family: var(--md-cs-font-heading, inherit);
  color: var(--md-cs-ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
  text-transform: none;
}

.md-case-study a { text-decoration: none; }

.md-case-study :is(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--md-cs-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* sections receive focus after a TOC click; no ring needed on the container */
.md-case-study .md-case-study-section:focus { outline: none; }

.md-case-study-container {
  width: 100%;
  max-width: var(--md-cs-max-width);
  margin: 0 auto;
  padding: 0 20px;
}


/* -----------------------------------------------------------------------------
   3. SHARED PIECES  (buttons, text, lists, figures, cards)
   ----------------------------------------------------------------------------- */
.md-case-study-demo-badge {
  display: block;
  padding: 10px 20px;
  background: #fff4d6;
  border-bottom: 1px solid #f0d58a;
  color: #6b4a00;
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
}

.md-case-study-noscript,
.md-case-study-error {
  max-width: var(--md-cs-max-width);
  margin: 24px auto;
  padding: 16px 20px;
  border: 1px solid var(--md-cs-border);
  border-radius: var(--md-cs-radius-sm);
  background: var(--md-cs-surface);
}

.md-case-study-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.md-case-study-btn:hover { transform: translateY(-1px); }

.md-case-study-btn-primary { background: var(--md-cs-accent); color: #fff; }
.md-case-study-btn-primary:hover { background: var(--md-cs-accent-hover); color: #fff; }

.md-case-study-btn-secondary { background: transparent; color: var(--md-cs-ink); border-color: var(--md-cs-border); }
.md-case-study-btn-secondary:hover { border-color: var(--md-cs-ink); color: var(--md-cs-ink); }

.md-case-study-btn-light { background: #fff; color: var(--md-cs-ink); }
.md-case-study-btn-light:hover { background: var(--md-cs-accent-soft); color: var(--md-cs-ink); }

.md-case-study-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.md-case-study-text { max-width: 70ch; margin-top: 16px; }
.md-case-study-text:first-child { margin-top: 0; }

.md-case-study-h2 { font-size: clamp(1.65rem, 3.2vw, 2.4rem); }
.md-case-study-h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.md-case-study-h4 { font-size: 1.125rem; }

.md-case-study-kicker {
  margin-bottom: 10px;
  color: var(--md-cs-accent);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.md-case-study-lead { max-width: 70ch; margin-top: 16px; font-size: 1.125rem; color: var(--md-cs-text); }

/* tick-style list used for challenges, block lists and outcomes */
.md-case-study-list { display: grid; gap: 10px; margin-top: 16px; max-width: 70ch; }
.md-case-study-list-item { position: relative; padding-left: 30px; }
.md-case-study-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--md-cs-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.2 2.2 4.8-5' fill='none' stroke='%23FAAF19' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* card-style list (challenge points) */
.md-case-study-card-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
.md-case-study-card-list-item {
  padding: 16px 18px 16px 52px;
  position: relative;
  background: var(--md-cs-surface);
  border: 1px solid var(--md-cs-border);
  border-radius: var(--md-cs-radius-sm);
  transition: border-color .2s ease, transform .2s ease;
}
.md-case-study-card-list-item:hover { border-color: var(--md-cs-accent); transform: translateY(-2px); }
.md-case-study-card-list-item::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--md-cs-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.5v4M8 11.2v.1' fill='none' stroke='%23FAAF19' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* numbered list (objectives) */
.md-case-study-number-list { display: grid; gap: 12px; margin-top: 20px; counter-reset: md-cs-num; }
.md-case-study-number-list-item { position: relative; padding-left: 48px; counter-increment: md-cs-num; max-width: 70ch; }
.md-case-study-number-list-item::before {
  content: counter(md-cs-num);
  position: absolute;
  left: 0;
  top: 2px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--md-cs-ink);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
}

.md-case-study-figure { margin: 0; }
.md-case-study-figure img {
  width: 100%;
  border: 1px solid var(--md-cs-border);
  border-radius: var(--md-cs-radius);
  background: var(--md-cs-surface);
}
.md-case-study-figcaption { margin-top: 10px; color: var(--md-cs-muted); font-size: .875rem; line-height: 1.5; }

.md-case-study-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.md-case-study-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--md-cs-accent-soft);
  color: var(--md-cs-accent-hover);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
}

.md-case-study-subsection { margin-top: 48px; }


/* -----------------------------------------------------------------------------
   4. HERO
   ----------------------------------------------------------------------------- */
.md-case-study-hero { padding: 40px 0 32px; }

.md-case-study-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.md-case-study-hero-grid-no-image { max-width: 860px; }

.md-case-study-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }

.md-case-study-client-logo {
  width: 52px;
  height: 52px;
  padding: 6px;
  object-fit: contain;
  border: 1px solid var(--md-cs-border);
  border-radius: 12px;
  background: #fff;
}

.md-case-study-eyebrow-text { display: flex; flex-direction: column; line-height: 1.3; }
.md-case-study-eyebrow-label { color: var(--md-cs-muted); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.md-case-study-eyebrow-client { color: var(--md-cs-ink); font-size: 1.0625rem; font-weight: 700; }

.md-case-study-category {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--md-cs-accent-soft);
  color: var(--md-cs-accent-hover);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.md-case-study-title { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; }
.md-case-study-intro { max-width: 60ch; margin-top: 20px; font-size: 1.125rem; }

.md-case-study-hero-figure img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--md-cs-shadow); }


/* -----------------------------------------------------------------------------
   5. METRIC CARDS
   ----------------------------------------------------------------------------- */
.md-case-study-metrics-section { padding: 8px 0 8px; }

.md-case-study-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.md-case-study-metric-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 22px 20px;
  background: var(--md-cs-bg);
  border: 1px solid var(--md-cs-border);
  border-top: 3px solid var(--md-cs-accent);
  border-radius: var(--md-cs-radius);
  box-shadow: var(--md-cs-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.md-case-study-metric-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15, 18, 34, .05), 0 14px 32px rgba(15, 18, 34, .1); }

.md-case-study-metric-value {
  color: var(--md-cs-ink);
  font-family: var(--md-cs-font-heading, inherit);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.md-case-study-metric-label { color: var(--md-cs-ink); font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.md-case-study-metric-note { color: var(--md-cs-muted); font-size: .8125rem; line-height: 1.4; }

.md-case-study-subsection > .md-case-study-metrics { margin-top: 24px; }


/* -----------------------------------------------------------------------------
   6. PROJECT OVERVIEW
   ----------------------------------------------------------------------------- */
.md-case-study-overview { padding: 48px 0 0; }

.md-case-study-overview-card {
  margin-top: 20px;
  padding: 24px;
  background: var(--md-cs-surface);
  border: 1px solid var(--md-cs-border);
  border-radius: var(--md-cs-radius);
}

.md-case-study-overview-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; }
.md-case-study-overview-item-wide { grid-column: 1 / -1; }

.md-case-study-overview-term {
  color: var(--md-cs-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.md-case-study-overview-value { margin-top: 4px; color: var(--md-cs-ink); font-weight: 600; line-height: 1.5; }


/* -----------------------------------------------------------------------------
   7. LAYOUT: TABLE OF CONTENTS + CONTENT
   ----------------------------------------------------------------------------- */
.md-case-study-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-top: 56px;
  padding-bottom: 72px;
}

/* TOC – mobile: sticky horizontal pill bar */
.md-case-study-toc {
  position: sticky;
  top: var(--md-cs-sticky-offset);
  z-index: 10;
  margin: 0 -20px;
  padding: 0 20px;
  background: var(--md-cs-bg);
  border-bottom: 1px solid var(--md-cs-border);
}
.md-case-study-toc-title { display: none; }

.md-case-study-toc-list {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.md-case-study-toc-list::-webkit-scrollbar { display: none; }

.md-case-study-toc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  background: var(--md-cs-bg);
  border: 1px solid var(--md-cs-border);
  border-radius: 999px;
  color: var(--md-cs-ink);
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.md-case-study-toc-link:hover { border-color: var(--md-cs-ink); color: var(--md-cs-ink); }
.md-case-study-toc-link.md-case-study-is-active { background: var(--md-cs-ink); border-color: var(--md-cs-ink); color: #fff; }
.md-case-study-toc-index { display: none; font-size: .75rem; opacity: .7; font-variant-numeric: tabular-nums; }

/* Content */
.md-case-study-content { min-width: 0; }

.md-case-study-section { scroll-margin-top: calc(var(--md-cs-sticky-offset) + 76px); }
.md-case-study-section + .md-case-study-section {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--md-cs-border);
}
.md-case-study-section-head { margin-bottom: 8px; }


/* -----------------------------------------------------------------------------
   8. STRATEGY BLOCKS + TIMELINE
   ----------------------------------------------------------------------------- */
.md-case-study-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 40px;
  align-items: center;
}
.md-case-study-block-number {
  display: block;
  margin-bottom: 8px;
  color: var(--md-cs-accent);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.md-case-study-block-body .md-case-study-text { margin-top: 12px; }

.md-case-study-timeline { margin-top: 24px; }
.md-case-study-timeline-step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-bottom: 28px; }
.md-case-study-timeline-step:last-child { padding-bottom: 0; }
.md-case-study-timeline-step::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: 2px;
  width: 2px;
  background: var(--md-cs-border);
}
.md-case-study-timeline-step:last-child::before { display: none; }

.md-case-study-timeline-marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--md-cs-accent);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
}
.md-case-study-timeline-label { margin-bottom: 2px; color: var(--md-cs-accent-hover); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.md-case-study-timeline-body .md-case-study-text { margin-top: 6px; }


/* Execution steps as tabs (compact alternative to the long timeline) */
.md-case-study-steptabs {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.md-case-study-steptabs-list {
  position: relative;
  display: flex;
  gap: 8px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.md-case-study-steptabs-list::-webkit-scrollbar { display: none; }

.md-case-study-steptab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 16px 0 10px;
  background: var(--md-cs-bg);
  border: 1px solid var(--md-cs-border);
  border-radius: 999px;
  color: var(--md-cs-ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.md-case-study-steptab:hover { border-color: var(--md-cs-ink); }
.md-case-study-steptab-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--md-cs-accent-soft);
  color: var(--md-cs-accent-hover);
  font-size: .8125rem;
  font-weight: 800;
}
.md-case-study-steptab[aria-selected="true"] { background: var(--md-cs-ink); border-color: var(--md-cs-ink); color: #fff; }
.md-case-study-steptab[aria-selected="true"] .md-case-study-steptab-num { background: var(--md-cs-accent); color: #fff; }

.md-case-study-steppanel {
  padding: 24px;
  background: var(--md-cs-surface);
  border: 1px solid var(--md-cs-border);
  border-radius: var(--md-cs-radius);
}
.md-case-study-steppanel[hidden] { display: none; }
.md-case-study-steppanel .md-case-study-timeline-body .md-case-study-text { margin-top: 8px; }

@media (min-width: 768px) {
  .md-case-study-steptabs { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
  .md-case-study-steptabs-list { flex-direction: column; overflow: visible; padding: 0; }
  .md-case-study-steptab { width: 100%; white-space: normal; border-radius: var(--md-cs-radius-sm); }
  .md-case-study-steppanel { padding: 32px; min-height: 180px; }
}

/* -----------------------------------------------------------------------------
   9. RESULTS: TABLE + GALLERY
   ----------------------------------------------------------------------------- */
.md-case-study-table-wrap {
  margin-top: 20px;
  overflow-x: auto;
  border: 1px solid var(--md-cs-border);
  border-radius: var(--md-cs-radius-sm);
  -webkit-overflow-scrolling: touch;
}

.md-case-study-table { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--md-cs-bg); font-size: .9375rem; }
.md-case-study-table-caption { padding: 14px 16px; color: var(--md-cs-muted); font-size: .875rem; text-align: left; caption-side: top; }

.md-case-study-table th,
.md-case-study-table td { padding: 14px 16px; border-bottom: 1px solid var(--md-cs-border); text-align: left; vertical-align: top; }

.md-case-study-table thead th {
  background: var(--md-cs-surface);
  color: var(--md-cs-ink);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.md-case-study-table tbody th { position: sticky; left: 0; background: var(--md-cs-bg); color: var(--md-cs-ink); font-weight: 700; }
.md-case-study-table tbody tr:last-child th,
.md-case-study-table tbody tr:last-child td { border-bottom: 0; }
.md-case-study-table tbody tr:hover td,
.md-case-study-table tbody tr:hover th { background: var(--md-cs-surface); }

.md-case-study-trend-up { color: var(--md-cs-positive); font-weight: 700; }
.md-case-study-trend-down { color: var(--md-cs-negative); font-weight: 700; }

.md-case-study-table-hint { margin-top: 8px; color: var(--md-cs-muted); font-size: .8125rem; }
.md-case-study-table-note { margin-top: 10px; color: var(--md-cs-muted); font-size: .875rem; max-width: 70ch; }

.md-case-study-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }


/* -----------------------------------------------------------------------------
   10. TOOLS
   ----------------------------------------------------------------------------- */
.md-case-study-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }

.md-case-study-tool-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
  background: var(--md-cs-bg);
  border: 1px solid var(--md-cs-border);
  border-radius: var(--md-cs-radius);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.md-case-study-tool-card:hover { transform: translateY(-3px); border-color: var(--md-cs-accent); box-shadow: var(--md-cs-shadow); }

.md-case-study-tool-icon,
.md-case-study-tool-initials {
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border-radius: 12px;
}
.md-case-study-tool-icon { padding: 8px; object-fit: contain; background: var(--md-cs-surface); border: 1px solid var(--md-cs-border); }
.md-case-study-tool-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-cs-accent-soft);
  color: var(--md-cs-accent-hover);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
}
.md-case-study-tool-category { color: var(--md-cs-accent-hover); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.md-case-study-tool-desc { margin-top: 4px; font-size: .9375rem; line-height: 1.55; }


/* -----------------------------------------------------------------------------
   11. CONCLUSION
   ----------------------------------------------------------------------------- */
.md-case-study-takeaways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; counter-reset: md-cs-take; }
.md-case-study-takeaway {
  position: relative;
  padding: 22px;
  counter-increment: md-cs-take;
  background: var(--md-cs-surface);
  border: 1px solid var(--md-cs-border);
  border-radius: var(--md-cs-radius);
  transition: transform .2s ease, border-color .2s ease;
}
.md-case-study-takeaway:hover { transform: translateY(-3px); border-color: var(--md-cs-accent); }
.md-case-study-takeaway::before {
  content: counter(md-cs-take, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  color: var(--md-cs-accent);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.md-case-study-takeaway-title { margin-bottom: 6px; }

.md-case-study-summary {
  margin-top: 48px;
  padding: 28px;
  background: var(--md-cs-dark);
  border-radius: var(--md-cs-radius);
  color: var(--md-cs-on-dark-muted);
}
.md-case-study-summary .md-case-study-h3 { color: var(--md-cs-on-dark); }
.md-case-study-summary .md-case-study-text { margin-top: 12px; }


/* -----------------------------------------------------------------------------
   12. FINAL CTA
   ----------------------------------------------------------------------------- */
.md-case-study-cta { padding: 0 0 72px; scroll-margin-top: calc(var(--md-cs-sticky-offset) + 16px); }
.md-case-study-cta-panel {
  padding: 48px 24px;
  background: var(--md-cs-dark);
  border-radius: calc(var(--md-cs-radius) + 6px);
  text-align: center;
}
.md-case-study-cta-panel .md-case-study-h2 { max-width: 22ch; margin: 0 auto; color: var(--md-cs-on-dark); }
.md-case-study-cta-text { margin: 16px auto 0; color: var(--md-cs-on-dark-muted); font-size: 1.0625rem; }
.md-case-study-cta-panel .md-case-study-actions { justify-content: center; }


/* -----------------------------------------------------------------------------
   13. EDITOR TOOL (optional "copy static HTML" button)
   ----------------------------------------------------------------------------- */
.md-case-study-export-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--md-cs-ink);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--md-cs-shadow);
}


/* -----------------------------------------------------------------------------
   14. RESPONSIVE
   ----------------------------------------------------------------------------- */

/* ≥ 480px  (large phones) */
@media (min-width: 480px) {
  .md-case-study-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-case-study-actions .md-case-study-btn { min-width: 200px; }
}

/* ≥ 768px  (tablet) */
@media (min-width: 768px) {
  .md-case-study { font-size: 18px; }
  .md-case-study-container { padding: 0 32px; }
  .md-case-study-toc { margin: 0 -32px; padding: 0 32px; }

  .md-case-study-hero { padding: 64px 0 40px; }
  .md-case-study-metrics { grid-template-columns: repeat(var(--md-cs-metrics-tablet, 2), minmax(0, 1fr)); }

  .md-case-study-overview-card { padding: 32px; }
  .md-case-study-overview-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .md-case-study-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .md-case-study-block { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
  .md-case-study-block-no-image { grid-template-columns: minmax(0, 1fr); }
  .md-case-study-block-reverse .md-case-study-block-body { order: 2; }

  .md-case-study-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-case-study-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-case-study-takeaways { grid-template-columns: repeat(var(--md-cs-takeaways-cols, 3), minmax(0, 1fr)); }

  .md-case-study-table-hint { display: none; }
  .md-case-study-summary { padding: 40px; }
  .md-case-study-cta-panel { padding: 72px 48px; }
}

/* ≥ 1024px  (laptop / desktop): sticky sidebar TOC */
@media (min-width: 1024px) {
  .md-case-study-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; }
  .md-case-study-hero-grid-no-image { grid-template-columns: minmax(0, 1fr); }

  .md-case-study-metrics { grid-template-columns: repeat(var(--md-cs-metrics-desktop, 4), minmax(0, 1fr)); }
  .md-case-study-overview-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md-case-study-overview-item-wide { grid-column: 1 / -1; }

  .md-case-study-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; }
  .md-case-study-layout-no-toc { grid-template-columns: minmax(0, 1fr); }

  .md-case-study-toc {
    top: calc(var(--md-cs-sticky-offset) + 24px);
    margin: 0;
    padding: 0;
    background: transparent;
    border-bottom: 0;
  }
  .md-case-study-toc-title {
    display: block;
    margin-bottom: 12px;
    color: var(--md-cs-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .md-case-study-toc-list { flex-direction: column; gap: 2px; padding: 0; overflow: visible; border-left: 2px solid var(--md-cs-border); }
  .md-case-study-toc-link {
    min-height: 44px;
    margin-left: -2px;
    padding: 8px 14px;
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    font-size: .9375rem;
    white-space: normal;
  }
  .md-case-study-toc-link:hover { background: var(--md-cs-surface); }
  .md-case-study-toc-link.md-case-study-is-active { background: var(--md-cs-accent-soft); border-left-color: var(--md-cs-accent); color: var(--md-cs-accent-hover); }
  .md-case-study-toc-index { display: inline; }

  .md-case-study-section { scroll-margin-top: calc(var(--md-cs-sticky-offset) + 24px); }
  .md-case-study-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ≥ 1440px (large desktop) */
@media (min-width: 1440px) {
  .md-case-study { font-size: 18px; }
  .md-case-study-hero { padding: 80px 0 48px; }
}


/* -----------------------------------------------------------------------------
   15. REDUCED MOTION
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .md-case-study *,
  .md-case-study *::before,
  .md-case-study *::after { transition: none !important; animation: none !important; }
  .md-case-study-btn:hover,
  .md-case-study-metric-card:hover,
  .md-case-study-tool-card:hover,
  .md-case-study-takeaway:hover,
  .md-case-study-card-list-item:hover { transform: none; }
}/* End custom CSS */