/* ============================================================
   Case study pages — shared styles
   Reuses the homepage design system (index.html) so detail
   pages look like the same site.
   ============================================================ */

:root {
  --ink: #16181F;
  --muted: #98A1B0;
  --page-bg: #FFFFFF;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--page-bg);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

/* ---- shared layout ---- */
.content-col {
  max-width: 718px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   Header (reused from homepage — now clickable back to /)
   ============================================================ */
.site-header {
  width: 100%;
  background: none;
  border: none;
  box-shadow: none;
}

.header-inner {
  padding-top: 28px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.identity {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow:
    0 0 0 3px #FFFFFF,
    0 0 0 3.5px #E5E7EB,
    0 4px 10px rgba(0, 0, 0, 0.15);
}

.identity-text {
  position: relative;
  height: 36px;
  width: max-content;
  flex-shrink: 0;
}

.name-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  height: 100%;
  opacity: 1;
  transition: opacity 180ms ease;
}

.name {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
}

.title {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
}

.hover-greeting {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  transition: opacity 180ms ease;
  font-family: 'Dancing Script', cursive;
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  white-space: nowrap;
}

.identity:hover .name-title {
  opacity: 0;
}

.identity:hover .hover-greeting {
  opacity: 1;
}

.resume-link {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.resume-link:hover {
  text-decoration: underline;
}

.resume-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--ink);
  opacity: 0;
  transform: translate(-2px, 2px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.resume-arrow svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

.resume-link:hover .resume-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

/* ============================================================
   Section label (matches homepage .section-title)
   ============================================================ */
.section-title {
  margin: 0 0 24px;
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0px;
  text-transform: none;
  color: var(--ink);
}

/* ============================================================
   Case study specific
   ============================================================ */

/* ---- top identity card ---- */
.cs-identity-card {
  display: inline-flex;
  flex-direction: column;
  width: fit-content;
  padding: 10px 14px;
  margin-bottom: 40px;
  background: #F3F4F6;
  border: 1px solid rgba(152, 161, 176, 0.2);
  border-radius: 8px;
}

/* At wide viewports there's enough gutter to the right of the 718px
   column to float the card beside the eyebrow instead of stacking it
   above — top edge aligns with the column's top (i.e. the eyebrow's
   top) since the card is taken out of flow. Below this breakpoint the
   gutter is too narrow, so it stays in normal stacked flow. */
@media (min-width: 1200px) {
  .cs-identity-card {
    position: absolute;
    top: 0;
    left: calc(40px - (100vw - 718px) / 2);
    margin-bottom: 0;
    white-space: nowrap;
  }
}

.cs-identity-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}

.cs-identity-name:hover {
  text-decoration: underline;
}

.cs-identity-meta {
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ---- hero banner: full-bleed, sits above everything ---- */
.cs-hero {
  position: relative;
  width: 100%;
  height: 420px;
  background: #F3F4F6;
  overflow: hidden;
}

.cs-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Generic wide breakout wrapper — used for the page-specific hero,
   inline section images, and the Key flows card. Stays at column
   width below 1000px; from 1000px up it expands symmetrically past
   the 718px column (same centerline) up to a 920px cap.
   ============================================================ */
.cs-wide {
  position: relative;
}

@media (min-width: 1000px) {
  .cs-wide {
    width: min(1080px, calc(100vw - 128px));
    margin-left: calc(50% - min(540px, 50vw - 64px));
  }

  /* Key flows breaks out slightly wider than the other wide elements. */
  .cs-wide--flows {
    width: min(980px, calc(100vw - 128px));
    margin-left: calc(50% - min(490px, 50vw - 64px));
  }
}

/* ---- page hero: NOT full-bleed, sits inside the wide breakout ---- */
.cs-hero-wide {
  width: 100%;
  aspect-ratio: 1546 / 956;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 48px;
}

.cs-hero-wide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-main {
  margin-top: 48px;
  position: relative;
}

/* ---- page hero image: 960px cap, breaks out of the column via
   .cs-wide, centered when wider than the content column ---- */
.cs-hero-image-wrap {
  margin-bottom: 72px;
}

.cs-hero-image {
  display: block;
  width: 1080px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
}

/* ---- top identity card: sits in normal flow, left-aligned with the
   rest of the 718px content column, above the eyebrow/title block. */
.cs-top-card {
  margin-bottom: 32px;
}

.cs-top-card-name {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}

.cs-top-card-name:hover {
  text-decoration: underline;
}

.cs-top-card-meta {
  display: block;
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.back-link {
  display: inline-block;
  margin-bottom: 40px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color 150ms ease;
}

.back-link:hover {
  color: var(--ink);
}

/* ---- overview ---- */
.cs-overview {
  margin-bottom: 72px;
}

.cs-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.3;
  color: var(--ink);
}

.cs-role {
  margin: 12px 0 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
}

/* ---- meta row (role / collaborators / year) ---- */
.cs-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.cs-meta-item {
  display: flex;
  align-items: baseline;
}

.cs-meta-label {
  width: 140px;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
}

.cs-meta-value {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
}

/* ---- generic section prose (problem / solution) ---- */
.cs-block {
  margin-bottom: 72px;
}

/* Narrative beats (What's the problem? / Is this a real problem? /
   Challenges / What did we ship?) get a thin divider + extra top gap
   so each reads as a distinct chapter, not a continuous scroll. */
.cs-block--narrative {
  padding-top: 48px;
  border-top: 1px solid rgba(152, 161, 176, 0.18);
}

.cs-prose {
  margin: 0;
  max-width: 620px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.cs-prose + .cs-prose {
  margin-top: 16px;
}

.cs-prose-list {
  margin: 0;
  padding-left: 20px;
  max-width: 620px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.cs-prose-list li {
  margin-bottom: 12px;
}

.cs-prose-list li::marker {
  font-weight: 600;
}

.cs-prose-list li:last-child {
  margin-bottom: 0;
}

.cs-prose-list strong {
  font-weight: 500;
}

/* ---- wide supporting image (breaks up section prose) ---- */
.cs-wide-img {
  margin-top: 32px;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
}

.cs-wide-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---- inline section image, constrained to the content column
   (not a wide breakout), natural aspect ratio ---- */
.cs-section-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 32px;
  border-radius: 10px;
}

.cs-video-group + .cs-video-group {
  margin-top: 128px;
}

.cs-video-frame-plain {
  position: relative;
  padding: 8px;
  border: 4px solid #000000;
  border-radius: 20px;
  background: #FFFFFF;
}

.cs-section-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.cs-video-replay-btn {
  display: inline-flex;
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background 150ms ease, transform 150ms ease;
}

.cs-video-replay-btn:hover {
  background: #FFFFFF;
  transform: scale(1.06);
}

.cs-video-replay-btn svg {
  width: 15px;
  height: 15px;
}

.cs-impact {
  margin-bottom: 72px;
}

/* ============================================================
   Contact / email copy-to-clipboard — reused from index.html
   ============================================================ */
.cs-contact {
  margin-bottom: 48px;
}

.cs-contact-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.contact-value {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}

.contact-value:hover {
  text-decoration: underline;
}

.email-value {
  position: relative;
  cursor: pointer;
}

.email-tooltip {
  position: absolute;
  bottom: 130%;
  left: 0;
  background: var(--ink);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.email-value:hover .email-tooltip,
.email-tooltip.copied {
  opacity: 1;
}

/* ============================================================
   Closing CTA — full-bleed dark "Next case study" band
   ============================================================ */
.cs-cta-band {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--ink);
  padding: 88px 0;
  overflow: hidden;
}

.cs-cta-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.cs-cta-link:not(:has(.cs-cta-peek)):hover {
  opacity: 0.85;
}

/* Mockup: a screenshot of the next project is fully hidden at rest
   and only appears on hover, sitting close to the text inside a
   900px-wide centered row (not out at the full-bleed band edge). A
   real flex row (not absolute positioning) so the image gets its own
   reserved slot on the right and never overlaps the text, even
   though it's invisible at rest. Desktop only. */
.cs-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
}

.cs-cta-inner .content-col {
  margin: 0;
}

.cs-cta-peek {
  display: none;
  flex-shrink: 0;
  width: 340px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  transform: translateX(20px) rotate(-4deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1), opacity 450ms ease;
}

@media (min-width: 1100px) {
  .cs-cta-peek {
    display: block;
  }
}

.cs-cta-link:hover .cs-cta-peek {
  transform: translateX(0) rotate(0deg);
  opacity: 1;
}

.cs-cta-label {
  display: block;
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: var(--muted);
}

.cs-cta-heading {
  margin: 12px 0 0;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
  color: #FFFFFF;
}

.cs-cta-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  vertical-align: middle;
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}

.cs-cta-arrow svg {
  width: 32px;
  height: 32px;
}

.cs-cta-link:hover .cs-cta-arrow {
  transform: translateX(8px);
}

.cs-cta-subtitle {
  display: block;
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--muted);
}

@media (max-width: 600px) {
  .cs-cta-band {
    padding: 48px 0;
  }

  .cs-cta-heading {
    font-size: 22px;
  }

  .cs-cta-subtitle {
    font-size: 14px;
  }
}

.cs-thing-caption {
  margin: 10px 0 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
  text-align: left;
}

.cs-video-group .cs-thing-caption {
  text-align: center;
}

.cs-overview-text {
  margin: 24px 0 0;
  max-width: 620px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.cs-overview-text strong {
  font-weight: 600;
}

.cs-overview-text + .cs-overview-text {
  margin-top: 10px;
}

/* ---- key screens ---- */
.cs-screens {
  margin-bottom: 72px;
}

.cs-video-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cs-video-item {
  margin: 0;
}

.cs-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  background: #F3F4F6;
  overflow: hidden;
}

.cs-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #F3F4F6;
}

.cs-video-caption {
  margin: 12px 0 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* image inside a media frame (e.g. the info-architecture flow) */
.cs-video-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #F3F4F6;
}

/* ============================================================
   Key flows — pill tabs sitting inside the top of a single framed
   card, video panel below the tabs, caption below the video.
   ============================================================ */
.cs-flows {
  position: relative;
  margin-bottom: 72px;
}

.cs-flows .section-title {
  margin-bottom: 16px;
}

.cs-flows-card {
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  padding: 12px;
  background: #FFFFFF;
}

.cs-flows-tabs {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.cs-flows-tab-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: #F3F4F6;
  border-radius: 8px;
  pointer-events: none;
}

.cs-flows-tab {
  position: relative;
  z-index: 1;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.cs-flows-tab.active {
  border-color: transparent;
  color: var(--ink);
}

.cs-flows-tab:hover {
  color: var(--ink);
}

.cs-flows-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 1652 / 1080;
  border-radius: 8px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(2, 8, 23, 0.10);
  transition: opacity 150ms ease;
}

.cs-flows-media {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-flows-media.active {
  display: block;
}

.cs-flows-replay-btn {
  display: none;
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background 150ms ease, transform 150ms ease;
}

.cs-flows-replay-btn.visible {
  display: inline-flex;
}

.cs-flows-replay-btn:hover {
  background: #FFFFFF;
  transform: scale(1.06);
}

.cs-flows-replay-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

.cs-flows-caption {
  margin: 12px 4px 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
}

.cs-wide-caption {
  margin: 12px 4px 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
}

/* ---- outcome ---- */
.cs-outcome {
  margin-bottom: 72px;
}

.cs-outcome-text {
  margin: 0 0 24px;
  max-width: 620px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.cs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.cs-stat {
  flex: 1 1 160px;
  min-width: 150px;
  padding: 20px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #FFFFFF;
}

.cs-stat-num {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--ink);
}

.cs-stat-label {
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ============================================================
   Scroll-reveal (video blocks + stat cards)
   Base state visible; hidden only when JS confirms motion is OK,
   so no-JS / reduced-motion users always see content.
   ============================================================ */
.reveal {
  transition: opacity 500ms ease-out, transform 500ms ease-out;
  will-change: opacity, transform;
}

.anim-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
}

.anim-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
  }
  .anim-ready .reveal,
  .anim-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Closing illustration — full-bleed (direct child of body),
   sits right above cs-next
   ============================================================ */
.cs-illustration {
  width: 100%;
}

.cs-illustration img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   Next case study block — full-bleed dark band. Plain 100% when a
   direct child of body; the vw breakout only when nested inside the
   centered column (agent page).
   ============================================================ */
.cs-next {
  width: 100%;
  background: #0B0E14;
  padding: 72px 0;
}

.cs-main .cs-next {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.next-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.next-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6B7280;
}

.next-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.next-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.3;
  color: #F5F6F8;
  transition: transform 350ms cubic-bezier(.22, 1, .36, 1);
}

.next-arrow {
  font-family: 'Inter', sans-serif;
  font-size: 30px;
  line-height: 1;
  color: #F5F6F8;
  transition: transform 350ms cubic-bezier(.22, 1, .36, 1);
}

.next-subtitle {
  display: block;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  color: #8A93A6;
}

.next-link:hover .next-title {
  transform: translateX(10px);
}

.next-link:hover .next-arrow {
  transform: translateX(26px);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px) {
  .content-col {
    padding-left: 20px;
    padding-right: 20px;
  }

  .cs-hero {
    height: 280px;
  }
}

@media (max-width: 600px) {
  .cs-title {
    font-size: 24px;
  }

  .cs-overview-text,
  .cs-outcome-text,
  .cs-prose,
  .cs-prose-list {
    font-size: 13px;
  }

  .next-title {
    font-size: 28px;
  }

  .next-arrow {
    font-size: 24px;
  }

  .cs-next {
    padding: 56px 0;
  }
}

/* ============================================================
   Mobile 375px — additions
   ============================================================ */
@media (max-width: 480px) {
  /* Header: tighten vertical padding */
  .header-inner {
    padding-top: 20px;
    padding-bottom: 14px;
  }

  /* Identity card: full width, don't clip at narrow viewport */
  .cs-identity-card {
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }

  /* Hero banner: shorter on mobile */
  .cs-hero {
    height: 200px;
  }

  /* Wide breakout: collapse to column width on mobile */
  .cs-wide {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Stat cards: single column */
  .cs-stats {
    flex-direction: column;
  }

  .cs-stat {
    flex: none;
    width: 100%;
    min-width: 0;
  }

  /* Section spacing: tighten to reduce excessive scroll */
  .cs-overview,
  .cs-block,
  .cs-screens,
  .cs-flows,
  .cs-outcome,
  .cs-impact,
  .cs-contact {
    margin-bottom: 48px;
  }

  /* CTA band inner padding */
  .cs-cta-inner {
    padding: 0 20px;
  }

  .cs-cta-heading {
    font-size: 20px;
  }

  /* Next section title */
  .next-title {
    font-size: 22px;
  }

  .next-arrow {
    font-size: 20px;
  }

  /* Meta label: reduce fixed width so value doesn't wrap awkwardly */
  .cs-meta-label {
    width: 110px;
  }

  /* Wide hero image: ensure it doesn't overflow */
  .cs-hero-wide {
    border-radius: 6px;
    margin-bottom: 32px;
  }

  /* flows tabs: wrap on mobile */
  .cs-flows-tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
}