/* ============================================================
   COGENT.CSS — Case Study Page Styles
   Palette: white/light grey page, teal + yellow as accents only
   Font: Inter throughout (--font-body). No waves. No dark bg sections.
   ============================================================ */

/* ── Page base ──────────────────────────────────────────────── */
.cs-page {
  background: var(--color-cs-page-bg);
  color: var(--color-cs-ink);
  font-family: var(--font-cs-body);
  overflow-x: hidden;
}

/* ── Navbar: transparent, dark ink on light hero ── */
.cs-page .navbar { background: transparent; }
.cs-page .navbar .nav-logo {
  color: var(--color-cs-ink-muted);
}
.cs-page .navbar .nav-links li a {
  font-family: var(--font-cs-mono);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-cs-ink-muted);
}
.cs-page .navbar .nav-logo:hover,
.cs-page .navbar .nav-links li a:hover { color: var(--color-cs-ink); }
.cs-page .navbar .hamburger-line { background-color: var(--color-cs-ink); }

/* ── Back link ──────────────────────────────────────────────── */
.cs-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================================
   HERO — full viewport, three zones
   ============================================================ */
.cs-hero {
  height: 100vh;
  min-height: 640px;
  background-color: #f5f3ee;
  border-bottom: 1px solid rgba(50,64,79,0.1);
  display: flex;
  flex-direction: column;
  position: relative;
}


.cs-hero-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  padding: calc(var(--nav-height) + var(--space-8)) var(--space-8) var(--space-6) var(--space-8);
  gap: var(--space-6);
  overflow: hidden;
}

/* Chrome shows video zone, Safari shows image zone */
.cs-hero-main--safari { display: none; }
.is-safari .cs-hero-main--chrome { display: none; }
.is-safari .cs-hero-main--safari { display: flex; }

/* Safari flex-chain fix: explicit height lets the inner container resolve. */
.is-safari .cs-hero-inner {
  height: 100%;
}

/* Safari: don't rely on flex-chain for video size.
   align-items:flex-start lets items use their natural height
   (not stretch to a collapsed container). overflow:visible
   ensures results aren't clipped. */
.is-safari .cs-hero-main {
  overflow: visible;
  align-items: flex-start;
}

/* Video gets a viewport-relative height (no parent dependency)
   and a vw cap so it can't consume the full row width. */
.is-safari .cs-hero-video {
  height: 44vh;
  width: auto;
  max-width: 60vw;
  max-height: none;
}

/* Safari image zone: give the container an explicit height so child
   dimensions resolve without relying on the flex chain. */
.is-safari .cs-hero-main--safari {
  flex: none;
  height: 360px;
  align-items: center;
  justify-content: center;
}

.is-safari .cs-hero-img-wrap {
  width: 660px;
  height: 340px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #23252e;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* ── Zone 1: Title (cinema-style) ──────────────────────────── */
.cs-hero-title-zone {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-hero-index {
  display: block;
  font-family: var(--font-cs-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(50, 64, 79, 0.4);
}

.cs-hero-cs-title {
  font-family: tiemposText, serif;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 400;
  color: rgb(39, 41, 50);
  line-height: 1.3;
  margin: 0;
}

.cs-hero-cs-title em {
  font-style: normal;
  color: var(--color-accent-secondary);
}

.cs-hero-cs-meta {
  font-family: var(--font-cs-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(39, 41, 50, 0.7);
  margin: 0;
}

/* ── Zone 2: Hero image ────────────────────────────────────── */
.cs-hero-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--space-12);
  overflow: hidden;
}

.cs-hero-img-wrap {
  width: 665.82px;
  height: 344px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

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

.cs-hero-video-zone {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
}

.cs-hero-video {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  border-radius: 10px;
  mix-blend-mode: multiply;
  display: block;
}

/* PS zone — full width at bottom, problem | solution side by side */
.cs-hero-ps {
  flex-shrink: 0;
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(50, 64, 79, 0.15);
}

/* ── Results column (right of video) ───────────────────────── */
.cs-hero-results {
  width: fit-content;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
}

.cs-hero-result-item {
  display: flex;
  flex-direction: column;
}

.cs-hero-status-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(232, 197, 71, 0.18);
  border: 1px solid rgba(232, 197, 71, 0.45);
  color: #e8c547;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cs-hero-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.15;
  color: var(--color-cs-ink);
  letter-spacing: -0.02em;
}

/* ── Zone 2: Screens ───────────────────────────────────────── */
.cs-hero-screens-zone {
  position: relative;
  flex: 1;
  min-height: 320px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.cs-hero-screens-zone::-webkit-scrollbar { display: none; }

.cs-hero-screens-track {
  display: flex;
  gap: var(--space-4);
  height: 100%;
  min-width: 100%;
  width: max-content;
  align-items: stretch;
}

/* Each screen card — grows equally to fill available width */
.cs-hero-screen-card {
  position: relative;
  flex: 1 0 auto;
  height: min(100%, 360px);
  border-radius: 0;
  overflow: hidden;
  cursor: default;
}

/* Image: fills card, maintains aspect ratio */
.cs-hero-screen-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
}

/* Enlarge button — CTA color bg */
.mobile-enlarge-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-primary);
  color: #0d2e29;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 2;
}

.mobile-enlarge-btn:hover {
  background: var(--color-accent-hover);
}

/* Reveal on hero card hover */
.cs-hero-screen-card:hover .mobile-enlarge-btn {
  opacity: 1;
  transform: scale(1);
}

/* Reveal on context image hover */
.cs-context-img-card:hover .mobile-enlarge-btn {
  opacity: 1;
  transform: scale(1);
}

/* Ensure context images have relative positioning for absolute button */
.cs-context-img-card {
  position: relative;
}

/* Lightbox override — hero images are landscape, not portrait */
#lightbox .lightbox-img {
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  border-radius: 14px;
}

/* Lightbox content wrapper — keeps arrows flush to image */
.lightbox-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Lightbox nav arrows */
.lightbox-nav {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.08);
}

/* Arrow is centred to the track (which is centred to the zone) */
.cs-hero-screens-zone .cs-hero-scroll-arrow {
  top: 50%;
  transform: translateY(-50%);
}


/* Arrow buttons — left and right edges, vertically centred */
.cs-hero-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: #0d2e29;
  border: 1.5px solid #b8922a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.18s ease;
  z-index: 2;
}

.cs-hero-scroll-arrow--right { right: 0; }
.cs-hero-scroll-arrow--left  { left: 0; }

.cs-hero-scroll-arrow[hidden] { display: none; }

.cs-hero-scroll-arrow:hover {
  background: #f0f0f0;
  transform: translateY(-50%) scale(1.08);
}

.cs-hero-ps-col {
  display: flex;
  flex-direction: column;
}

.cs-hero-ps-label {
  font-family: var(--font-cs-serif);
  font-size: var(--text-cs-title);
  font-weight: var(--font-regular);
  line-height: var(--leading-cs-title);
  color: var(--color-cs-ink);
  margin: 0;
}

.cs-hero-ps-body {
  font-family: var(--font-cs-body);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  color: var(--color-cs-ink-muted);
  line-height: var(--leading-cs-sm);
}

.cs-hero-ps-status {
  color: #e8c547;
  font-weight: 600;
  font-size: 16px;
}

/* ── Hero entrance animations ──────────────────────────────── */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cs-hero-animate-1 { animation: fade-in-up 0.55s ease both 0.05s; }
.cs-hero-animate-2 { animation: fade-in-up 0.55s ease both 0.2s; }
.cs-hero-animate-3 { animation: fade-in-up 0.55s ease both 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .cs-hero-animate-1,
  .cs-hero-animate-2,
  .cs-hero-animate-3 { animation: none; opacity: 1; }
}

/* ── Lightbox overlay ──────────────────────────────────────── */

/* ============================================================
   REUSABLE IMAGE WRAP — zoomable in-place
   Use .cs-img-wrap.cs-zoomable > img.cs-img-wrap__img
   ============================================================ */
.cs-img-wrap {
  position: relative;
  display: block;
  margin-top: var(--space-8);
  border-radius: 0;
  overflow: hidden;
}

/* Subtle shadow + rounded corners */
#cs-user-research .cs-img-wrap,
#cs-pushback .cs-img-wrap,
#cs-inspiration .cs-img-wrap,
#cs-trust .cs-img-wrap,
#cs-design-flow .cs-design-agent-item .cs-img-wrap {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  border-radius: 8px;
}

/* Round the img element directly so overflow:visible on annotation cards still clips corners */
#cs-user-research .cs-hero-screen-img,
#cs-pushback .cs-hero-screen-img,
#cs-inspiration .cs-hero-screen-img,
#cs-trust .cs-hero-screen-img,
#cs-design-flow .cs-design-agent-item .cs-hero-screen-img {
  border-radius: 8px;
}

.cs-img-wrap__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.cs-img-wrap--capped .cs-img-wrap__img {
  max-height: 397px;
  object-fit: cover;
  object-position: top;
}

/* Zoom cursor on hover (default state) */
.cs-zoomable {
  cursor: zoom-in;
}

/* While zoomed in — switch container to clip the panned image */
.cs-zoomable.is-zoomed {
  cursor: grab;
  overflow: hidden;
}
.cs-zoomable.is-zoomed:active,
.cs-zoomable.is-dragging {
  cursor: grabbing;
}

/* The image transform is driven by JS inline styles */
.cs-zoomable .cs-img-wrap__img {
  transition: transform 0.25s ease;
  will-change: transform;
  user-select: none;
}
.cs-zoomable.is-dragging .cs-img-wrap__img {
  transition: none;
}

/* "Press Esc to zoom out" hint — shown only while zoomed */
.cs-zoom-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(13, 46, 41, 0.78);
  color: #fff;
  font-size: 11px;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 3;
}
.cs-zoomable.is-zoomed .cs-zoom-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cs-img-caption {
  font-family: var(--font-cs-body);
  font-size: var(--text-cs-sm);
  font-weight: 500;
  font-style: italic;
  color: var(--color-cs-ink-muted);
  line-height: var(--leading-cs-sm);
  margin-top: var(--space-2);
  padding: 0 var(--space-1);
  text-align: center;
}

/* ── Research image — small, left-aligned ──────────────────── */
.cs-research-img-small {
  max-width: 400px;
  margin-left: 0;
}

.cs-research-needs.cs-research-needs--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

/* ── Image annotation labels ────────────────────────── */
.cs-ann-box {
  position: absolute;
  background: #ede5ff;
  border: 1.5px solid #6D28D9;
  border-radius: 6px;
  padding: 10px 12px;
  width: 148px;
  pointer-events: none;
  z-index: 3;
  margin-left: 2px;
}

.cs-ann-box::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 1.5px;
  background: #6D28D9;
}

.cs-ann-box--line-at-title::before {
  top: 14px;
  transform: none;
}

.cs-ann-box--long-line::before {
  width: 200px;
}

.cs-ann-box--longer-line::before {
  width: 230px;
}

.cs-ann-box--left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 2px;
}

.cs-ann-box--left::before {
  right: auto;
  left: 100%;
}



/* ── Image stage container */
.cs-img-stage {
  background: rgba(245, 243, 238, 0.6);
  border: 1px solid rgba(109, 40, 217, 0.15);
  border-radius: 0;
  padding: 0;
  margin-top: var(--space-8);
}

.cs-img-stage .cs-context-images-col,
.cs-img-stage .cs-design-flow-grid {
  margin-top: 0;
}

/* Research section: padded stage, slightly smaller images */
#cs-user-research .cs-img-stage {
  padding: 40px 40px 0 40px;
}

#cs-user-research .cs-img-stage .cs-context-images-col {
  margin-top: 0 !important;
  padding-bottom: 40px;
}

#cs-user-research .cs-img-wrap,
#cs-user-research .cs-hero-screen-img,
#cs-user-research .cs-ann-box {
  border-radius: 0;
}

/* Design Inspiration — first grid: smaller images */
.cs-img-stage--insp-grid {
  padding: 40px;
}

.cs-img-stage--insp-grid .cs-design-flow-grid {
  margin-top: 0 !important;
}

/* Rejected & Accepted Design Approach — same treatment as Research */
.cs-img-stage--rejected,
.cs-img-stage--accepted {
  padding: 40px 40px 0 40px;
}

.cs-img-stage--rejected .cs-context-images-col,
.cs-img-stage--accepted .cs-context-images-col {
  margin-top: 0 !important;
  padding-bottom: 40px;
}

#cs-inspiration .cs-img-stage--rejected .cs-img-wrap,
#cs-inspiration .cs-img-stage--rejected .cs-hero-screen-img,
#cs-inspiration .cs-img-stage--rejected .cs-ann-box,
#cs-inspiration .cs-img-stage--accepted .cs-img-wrap,
#cs-inspiration .cs-img-stage--accepted .cs-hero-screen-img,
#cs-inspiration .cs-img-stage--accepted .cs-ann-box {
  border-radius: 0;
}

/* Garnering User Trust — same treatment as Research */
.cs-img-stage--trust {
  padding: 40px 40px 0 40px;
}

.cs-img-stage--trust .cs-context-images-col {
  margin-top: 0 !important;
  padding-bottom: 40px !important;
}

#cs-trust .cs-img-stage--trust .cs-img-wrap,
#cs-trust .cs-img-stage--trust .cs-hero-screen-img,
#cs-trust .cs-img-stage--trust .cs-ann-box {
  border-radius: 0;
}

/* Final Designs — same treatment as Research, with arrow + smaller agent grid */
.cs-img-stage--final {
  padding: 40px 40px 0 40px;
}

.cs-img-stage--final .cs-design-flow-grid:first-child {
  margin-top: 0 !important;
}

.cs-img-stage--final .cs-final-agent-grid {
  padding: 0 60px;
  padding-bottom: 40px;
  margin-top: var(--space-8) !important;
}

#cs-design-flow .cs-img-stage--final .cs-img-wrap,
#cs-design-flow .cs-img-stage--final .cs-hero-screen-img {
  border-radius: 0;
}

/* Scope Pushback — same treatment as Research */
#cs-pushback .cs-img-stage {
  padding: 40px 40px 0 40px;
}

#cs-pushback .cs-img-stage .cs-context-images-col {
  margin-top: 0 !important;
  padding-bottom: 40px;
}

#cs-pushback .cs-img-wrap,
#cs-pushback .cs-hero-screen-img,
#cs-pushback .cs-ann-box {
  border-radius: 0;
}

.cs-ann-title {
  font-weight: 700;
  color: #6D28D9;
  font-size: 11px;
  margin: 0 0 4px 0;
  line-height: 1.3;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}

.cs-ann-body {
  font-size: 11px;
  color: var(--color-cs-ink);
  line-height: 1.45;
  margin: 0;
  font-family: var(--font-body);
}

.cs-context-images-col {
  padding: 0 12%;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.cs-context-images-col .cs-img-caption {
  margin-top: calc(var(--space-2) * -1);
}

.cs-research-img-full {
  max-width: 100%;
  margin-left: 0;
  aspect-ratio: 4 / 3;
}

.cs-research-img-full .cs-hero-screen-img {
  object-fit: cover;
}

/* ── Project meta row ──────────────────────────────────────── */
.cs-meta-row-section .cs-inner {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.cs-meta-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.cs-meta-item {
  display: flex;
  flex-direction: column;
}

.cs-meta-item .cs-section-body {
  margin-bottom: 0;
}

/* ============================================================
   PAGE LAYOUT — sidenav column | content column
   ============================================================ */
.cs-page-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-10) 0 var(--space-16);
  gap: var(--space-8);
  align-items: start;
}

/* ============================================================
   STICKY SIDE NAV
   ============================================================ */
.cs-sidenav {
  position: sticky;
  top: 90px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--space-4);
}

.cs-sidenav-label { display: none; }

.cs-sidenav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-sidenav-dot { display: none; }

/* Back link */
.cs-sidenav-back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: 8px;
  font-family: var(--font-cs-mono);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  color: var(--color-cs-ink-muted);
  text-decoration: none;
  opacity: 0.7;
  margin-bottom: var(--space-2);
  transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.cs-sidenav-back:hover {
  color: var(--color-cs-ink);
  opacity: 1;
  background: var(--color-bg-warm);
}

/* Nav links */
.cs-sidenav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: 8px;
  font-family: var(--font-cs-mono);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  color: var(--color-cs-ink-muted);
  opacity: 0.7;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.cs-sidenav-link:hover {
  color: var(--color-cs-ink);
  opacity: 1;
  background: var(--color-bg-warm);
}
.cs-sidenav-link.is-active {
  color: var(--color-cs-ink);
  font-weight: var(--font-semibold);
  opacity: 1;
  background: rgba(13,46,41,0.04);
}

/* Sub-nav hidden */
.cs-sidenav-sub { display: none; }

.cs-sidenav-link--sub {
  font-size: var(--text-cs-sm);
  padding: 4px var(--space-2);
  color: var(--color-cs-ink-muted);
}

.cs-sidenav-link--sub:hover { color: var(--color-cs-ink); }

.cs-sidenav-link--sub.is-active {
  color: var(--color-cs-ink);
  font-weight: var(--font-semibold);
  background: rgba(13, 46, 41, 0.04);
}

/* ============================================================
   MAIN CONTENT COLUMN
   ============================================================ */
.cs-main-content {
  min-width: 0;
}

/* ============================================================
   SECTION BASE
   ============================================================ */
.cs-section {
  background: none;
  border: none;
  border-radius: 0;
  /* no padding here — cs-inner handles it */
}

.cs-section--hmw {
  background: none;
  border: none;
}

/* Grey container variant — matches cogent's .cs-problem-banner-wrapper tone */
.cs-section--grey {
  background: var(--color-cs-section-a);
}

/* ── Section divider — vertical breathing room between sections */
.cs-section-divider {
  height: var(--space-10);
}

/* ── Inner padding ─────────────────────────────────────────── */
.cs-inner {
  padding: var(--space-10) var(--space-8);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.cs-section-header {
  margin-bottom: var(--space-8);
}

.cs-eyebrow {
  font-family: var(--font-cs-mono);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-cs-ink-muted);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--cs-block-gap);
  display: block;
}

.cs-section-title {
  font-family: var(--font-cs-serif);
  font-size: var(--text-cs-title);
  font-weight: var(--font-regular);
  line-height: var(--leading-cs-title);
  color: var(--color-cs-ink);
  letter-spacing: 0;
  margin-bottom: var(--cs-block-gap);
}

/* Body text — used in content sections */
.cs-section-body {
  font-family: var(--font-cs-body);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  color: var(--color-cs-ink-muted);
  line-height: var(--leading-cs-sm);
  margin-bottom: var(--space-5);
}

/* Inline bold weight for emphasis within body text */
.cs-body-bold {
  font-weight: 500;
}

/* ============================================================
   LABEL — reusable label class (12px all-caps, like metadata keys)
   Used for: Problem 1, Problem 2, Business Need, User Need, etc.
   ============================================================ */
.cs-label {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #202020;
  margin-bottom: var(--space-2);
}

/* ============================================================
   PROBLEM BANNER — truly full-width colored container (outside sections)
   Positioned between sections with proper vertical spacing
   Background: --color-text-secondary (#a8c4bc)
   ============================================================ */
.cs-problem-banner-wrapper {
  background: var(--color-cs-section-a);
  border-radius: 0;
}

.cs-problem-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  max-width: 100%;
  border-radius: 0;
}

.cs-problem-banner-label {
  font-family: var(--font-cs-serif);
  font-size: var(--text-cs-subhead);
  font-weight: var(--font-regular);
  line-height: var(--leading-cs-subhead);
  color: var(--color-cs-ink);
  margin: 0 0 var(--cs-block-gap) 0;
}

.cs-problem-banner-text {
  font-family: var(--font-cs-body);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  color: var(--color-cs-ink-muted);
  line-height: var(--leading-cs-sm);
}

.cs-problem-banner--left {
  align-items: flex-start;
  text-align: left;
}

.cs-problem-banner--right {
  align-items: flex-end;
  text-align: right;
}

/* Designs banner — warm tone distinct from problem banner teal */
.cs-designs-banner-wrapper {
  background: #d4c5a8;
  border-radius: 12px;
}

.cs-designs-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  max-width: 100%;
  border-radius: 12px;
}

.cs-designs-banner-label {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #202020;
  margin: 0;
}

.cs-designs-banner-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  color: #202020;
  letter-spacing: 0;
  margin: 10px 0 0 0;
}

.cs-context-banner-heading {
  font-family: var(--font-cs-mono);
  font-weight: var(--font-regular);
  font-size: var(--text-cs-sm);
  line-height: var(--leading-cs-sm);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-cs-ink-muted);
  margin: 0 0 var(--cs-block-gap) 0;
}

.cs-context-banner-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  width: 100%;
}

.cs-context-banner-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-context-banner-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #202020;
  margin: 0;
}

.cs-context-banner-item-body {
  font-size: 14px;
  font-weight: 400;
  color: #3a3a3a;
  line-height: 1.6;
  margin: 0;
}

/* Bordered focus box — wraps goals list or other focal content */
.cs-focus-box {
  border: 1px solid #e8e6e0;
  border-radius: 12px;
  padding: var(--space-5);
  background: #ffffff;
}

/* Three-column focus area row (Iterations section) */
.cs-iterations-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.cs-focus-area-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-focus-area-card .cs-theme-card-icon {
  width: 38px;
  height: 38px;
}

.cs-focus-area-card .cs-research-need-label {
  margin-bottom: 0;
}

/* Read-aloud wrapper — gives the button an anchor point */
.cs-read-aloud-wrap {
  position: relative;
}

/* Read-aloud button — mirrors enlarge btn, revealed on container hover */
.cs-read-aloud-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-accent-primary);
  border: none;
  color: var(--color-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.18s ease, transform 0.2s ease, background 0.15s ease;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(13, 46, 41, 0.25);
}

.cs-read-aloud-wrap:hover .cs-read-aloud-btn {
  opacity: 1;
  transform: scale(1);
}

.cs-read-aloud-btn:hover {
  background: var(--color-accent-hover);
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(13, 46, 41, 0.3);
}

/* Active/playing state — inverted colors to indicate reading */
.cs-read-aloud-btn.is-playing {
  background: var(--color-bg-primary);
  color: var(--color-accent-primary);
  opacity: 1;
  transform: scale(1);
}

.cs-section-subtitle {
  font-size: var(--text-md);
  font-weight: 400;
  color: #666;
  line-height: 1.6;
  width: 100%;
  max-width: none;
}

/* ============================================================
   IMAGE PLACEHOLDERS
   ============================================================ */
.cs-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border-radius: 12px;
  border: 1.5px dashed #d5d2cb;
  background: #f2f0eb;
  color: #aaa;
  transition: border-color 0.2s;
}

.cs-img-placeholder:hover {
  border-color: #aaa;
}

.cs-img-placeholder-label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-align: center;
  padding: 0 var(--space-4);
  opacity: 0.7;
  color: #888;
}

.cs-img-placeholder--hero-screen { height: 340px; }
.cs-img-placeholder--discovery   { height: 220px; margin-bottom: var(--space-5); }
.cs-img-placeholder--tall         { height: 400px; }
.cs-img-placeholder--design       { height: 280px; }

/* ============================================================
   GENERIC TWO-COLUMN GRID
   Used for Overview, Reflection two-col cards
   ============================================================ */
.cs-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 59px;
  align-items: start;
}

/* ── sticky-right variant: left scrolls, right sticks ────────
   The parent section does NOT set overflow: hidden so that
   position: sticky on the right child can escape the section.
   We achieve the "right column follows left" feel by making
   the right child sticky within the scroll container.         */
.cs-two-col--sticky-right {
  align-items: start;
}

.cs-two-col--sticky-right > *:last-child {
  position: sticky;
  top: 110px;
}

/* ── sticky-left variant: right scrolls, left sticks ────────
   The left child remains sticky while right column scrolls.   */
.cs-two-col--sticky-left > *:first-child {
  position: sticky;
  top: 110px;
  height: fit-content;
}

/* ============================================================
   GENERIC CARD
   ============================================================ */
.cs-card {
  background: #f7f6f3;
  border: 1px solid #e5e3dd;
  border-radius: 12px;
  padding: var(--space-6);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cs-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.07);
}

.cs-card--accent-top-dark  { border-top: 3px solid #0d2e29; }
.cs-card--accent-top-yellow { border-top: 3px solid #e8c547; }

.cs-card-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  margin-bottom: var(--space-2);
}

.cs-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: #111;
  margin-bottom: var(--space-3);
  line-height: 1.35;
}

.cs-card-body {
  font-size: var(--text-sm);
  color: #555;
  line-height: 1.65;
}

/* Bullet list inside cards */
.cs-bullet-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-bullet-list li {
  font-size: var(--text-sm);
  color: #555;
  padding-left: var(--space-4);
  position: relative;
  line-height: 1.55;
}

.cs-bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e8c547;
}

/* Need card icon */
.cs-need-card-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,46,41,0.07);
  border-radius: 8px;
  margin-bottom: var(--space-3);
  color: #0d2e29;
  transition: transform 0.2s;
}

.cs-card:hover .cs-need-card-icon {
  transform: rotate(-6deg) scale(1.1);
}

/* ============================================================
   CONTEXT: left column + goals focus box
   ============================================================ */
.cs-context-left {
  display: flex;
  flex-direction: column;
}

.cs-context-goals-label {
  font-family: var(--font-cs-serif);
  font-size: var(--text-cs-title);
  font-weight: var(--font-regular);
  line-height: var(--leading-cs-title);
  color: var(--color-cs-ink);
  margin-bottom: var(--space-3);
}

/* Goal cards — individual bordered items inside the focus box */
.cs-goal-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid #e8e6e0;
  border-radius: 10px;
  background: #fafaf8;
  margin-bottom: var(--space-3);
  transition: background 0.15s, transform 0.15s;
}

.cs-goal-card:hover {
  background: #f0ede6;
  transform: translateX(3px);
}

.cs-goal-card:last-of-type {
  margin-bottom: 0;
}

.cs-goal-card-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--color-bg-primary);
  transition: transform 0.2s;
}

.cs-goal-card:hover .cs-goal-card-icon {
  transform: rotate(-6deg) scale(1.1);
}

.cs-goal-card-text {
  font-size: 16px;
  font-weight: 400;
  color: #202020;
  line-height: 1.6;
}

/* kept for safety — no longer rendered */
.cs-context-goals-list {
  list-style: decimal;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-context-goals-list li {
  font-size: 16px;
  font-weight: 400;
  color: #202020;
  line-height: 1.6;
}

/* (kept for potential reuse elsewhere) */
.cs-goals-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.cs-goal-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border-radius: 12px;
  background: #f7f6f3;
  border: 1px solid #e5e3dd;
  transition: background 0.15s;
}

.cs-goal-item:hover {
  background: #f0ede6;
}

.cs-goal-number {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-2xl);
  color: #e8c547;
  line-height: 1;
  padding-top: 2px;
}

.cs-goal-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: #111;
  margin-bottom: var(--space-2);
  line-height: 1.35;
}

.cs-goal-body {
  font-size: var(--text-sm);
  color: #555;
  line-height: 1.6;
}

/* ============================================================
   CONTEXT: metadata right col
   ============================================================ */
.cs-metadata-col {
  /* sticky is applied by .cs-two-col--sticky-right > *:last-child */
}

.cs-metadata-table {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

.cs-metadata-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid #e8e6e0;
  transition: background 0.12s;
}

.cs-metadata-row:last-child {
  border-bottom: 1px solid #e8e6e0;
}

.cs-metadata-key {
  font-family: var(--font-cs-mono);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-cs-ink-muted);
  padding-top: 1px;
}

.cs-metadata-value {
  font-family: var(--font-cs-body);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  color: var(--color-cs-ink-muted);
  line-height: var(--leading-cs-sm);
}

/* ============================================================
   RESEARCH: two-column layout with left content + right image
   ============================================================ */
.cs-research-left {
  display: flex;
  flex-direction: column;
}


.cs-research-needs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cs-research-need-label {
  font-family: var(--font-cs-serif);
  font-size: var(--text-cs-subhead);
  font-weight: var(--font-regular);
  line-height: var(--leading-cs-subhead);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-cs-ink);
  margin-bottom: var(--cs-block-gap);
}

.cs-research-need-body {
  font-family: var(--font-cs-body);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  color: var(--color-cs-ink-muted);
  line-height: var(--leading-cs-sm);
}

.cs-focus-box--list .cs-research-need-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cs-focus-box--list .cs-research-need-body::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0d2e29;
  flex-shrink: 0;
  margin-top: 7px;
}

.cs-research-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cs-img-placeholder--research {
  height: 360px;
}

/* Context section: scrollable image container — same height as placeholder */
.cs-context-img-scroll {
  height: 360px;
  overflow-y: scroll;
  border-radius: 0;
  border: 1px solid #e8e6e0;
  scrollbar-width: none;
}

.cs-context-img-scroll::-webkit-scrollbar {
  display: none;
}

.cs-context-img-scroll .cs-img-wrap {
  border-radius: 0;
  border: none;
}

.cs-research-caption {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 1.6;
  text-align: center;
}

/* ============================================================
   SCROLLABLE IMAGE GALLERY
   ============================================================ */
.cs-scroll-gallery {
  position: relative;
  height: 360px;
  overflow: hidden;
}

.cs-scroll-gallery:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><circle cx="40" cy="40" r="38" fill="%230d2e29" stroke="%230d2e29" stroke-width="2"/><text x="40" y="35" font-family="Arial" font-size="10" font-weight="700" fill="white" text-anchor="middle" letter-spacing="1">SCROLL</text><line x1="40" y1="42" x2="40" y2="56" stroke="white" stroke-width="2" stroke-linecap="round"/><polyline points="34,50 40,57 46,50" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') 40 40, auto;
}

.cs-scroll-gallery-container {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  padding: var(--space-4);
}

.cs-scroll-gallery-container::-webkit-scrollbar {
  display: none;
}

.cs-scroll-item {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-8);
  min-height: auto;
}

.cs-scroll-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #202020;
  margin-bottom: var(--space-2);
  letter-spacing: 0.02em;
  text-align: center;
}

.cs-scroll-item-img {
  width: 100%;
  height: auto;
  border: 1px solid #e8e6e0;
  border-radius: 0;
  padding: var(--space-3);
  display: block;
  margin-bottom: var(--space-2);
  box-sizing: border-box;
}

.cs-scroll-item-caption {
  font-size: 12px;
  color: rgb(32, 32, 32);
  line-height: 1.5;
  text-align: center;
}

.cs-scroll-hint {
  display: none;
}

/* ============================================================
   VALIDATION & PRIORITIZATION: image left + text/metrics right
   ============================================================ */
.cs-validation-left {
  display: flex;
  flex-direction: column;
}

.cs-sticky-img {
  width: 100%;
  height: auto;
  border-radius: 0;
  display: block;
}

.cs-img-placeholder--validation {
  height: 360px;
}

.cs-validation-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.cs-validation-right {
  display: flex;
  flex-direction: column;
}

/* Metric cards — stacked vertically, matching goal-card pattern */

.cs-metric-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border: 1px solid #e8e6e0;
  border-radius: 10px;
  background: #ffffff;
  margin-bottom: var(--space-3);
}

.cs-metric-card:last-of-type {
  margin-bottom: 0;
}

.cs-metric-label {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #202020;
  margin: 0 0 var(--space-2) 0;
}

.cs-metric-text {
  font-size: 14px;
  font-weight: 400;
  color: #202020;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   RESEARCH: discovery right col (kept for potential reuse)
   ============================================================ */
.cs-discovery-col {
  display: flex;
  flex-direction: column;
}

.cs-findings-block {
  background: #f7f6f3;
  border: 1px solid #e5e3dd;
  border-radius: 12px;
  padding: var(--space-5);
}

.cs-findings-heading {
  font-size: var(--text-base);
  font-weight: 600;
  color: #111;
  margin-bottom: var(--space-2);
}

.cs-findings-subtext {
  font-size: var(--text-sm);
  color: #666;
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.cs-finding-card {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-top: 1px solid #ece9e2;
  transition: transform 0.15s;
}

.cs-finding-card:hover {
  transform: translateX(3px);
}

.cs-finding-number {
  font-weight: 800;
  font-size: var(--text-base);
  color: #e8c547;
  line-height: 1.5;
}

.cs-finding-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #222;
  margin-bottom: var(--space-1);
}

.cs-finding-body {
  font-size: var(--text-xs);
  color: #666;
  line-height: 1.6;
}

/* ============================================================
   COMPETITIVE ANALYSIS: theme cards
   ============================================================ */
.cs-themes-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cs-theme-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) var(--space-4);
  border-radius: 12px;
  border: 1px solid #e5e3dd;
  background: #f7f6f3;
  transition: background 0.15s, transform 0.15s;
}

.cs-theme-card:hover {
  background: #f0ede6;
  transform: translateX(3px);
}

.cs-theme-card-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,46,41,0.07);
  border-radius: 8px;
  color: #0d2e29;
  transition: transform 0.2s;
}

.cs-theme-card:hover .cs-theme-card-icon {
  transform: rotate(-6deg) scale(1.1);
}

.cs-theme-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #111;
  margin-bottom: var(--space-1);
}

.cs-theme-card-body {
  font-size: var(--text-xs);
  color: #666;
  line-height: 1.6;
}

/* ============================================================
   HMW QUOTE BLOCK
   ============================================================ */
.cs-hmw-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-8) var(--space-8);
}

.cs-hmw-inner--sm {
  margin: 0 0 var(--space-8);
  text-align: left;
  padding: var(--space-6) var(--space-6);
  background: #f7f6f3;
  border: 1px solid #e5e3dd;
  border-radius: 12px;
  border-left: 3px solid #e8c547;
}

.cs-hmw-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0d2e29;
  margin-bottom: var(--space-3);
  opacity: 0.7;
}

.cs-hmw-question {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: #222;
  font-style: italic;
  margin: 0;
}

.cs-hmw-inner--sm .cs-hmw-question {
  font-size: var(--text-base);
}

/* ============================================================
   ITERATIONS — 3-col grid
   ============================================================ */
.cs-iterations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.cs-iteration-card {
  background: #f7f6f3;
  border-radius: 12px;
  padding: var(--space-5);
  border: 1px solid #e5e3dd;
  transition: transform 0.2s, box-shadow 0.2s;
}

.cs-iteration-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.cs-iteration-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #0d2e29;
  background: rgba(13,46,41,0.08);
  border-radius: 100px;
  padding: 2px 8px;
  margin-bottom: var(--space-3);
}

.cs-iteration-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: #111;
  margin-bottom: var(--space-2);
}

.cs-iteration-body {
  font-size: var(--text-sm);
  color: #555;
  line-height: 1.65;
  margin-bottom: var(--space-4);
}

.cs-iteration-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cs-iteration-tag {
  font-size: 11px;
  font-weight: 500;
  color: #666;
  background: #eceae3;
  border-radius: 100px;
  padding: 2px 10px;
}

/* ============================================================
   DESIGNS — alternating 2-col rows
   ============================================================ */
.cs-designs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.cs-design-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-6) var(--space-6);
  border-radius: 12px;
  background: #f7f6f3;
  border: 1px solid #e5e3dd;
  transition: background 0.15s;
}

.cs-design-row:hover {
  background: #f0ede6;
}

.cs-design-row--reversed {
  direction: rtl;
}

.cs-design-row--reversed > * {
  direction: ltr;
}

.cs-design-row-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b8922a;
  margin-bottom: var(--space-2);
}

.cs-design-row-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: #111;
  line-height: 1.3;
  margin-bottom: var(--space-3);
}

.cs-design-row-body {
  font-size: var(--text-sm);
  color: #555;
  line-height: 1.65;
  margin-bottom: var(--space-2);
}

.cs-design-row-body:last-child { margin-bottom: 0; }

/* ============================================================
   OUTCOMES — 3-col stat cards
   ============================================================ */
.cs-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-8);
}

.cs-stat-card {
  background: none;
  border-radius: 0;
  padding: 0;
  border: none;
  position: relative;
  overflow: visible;
  transition: none;
}

.cs-stat-card:hover {
  transform: none;
  box-shadow: none;
}


.cs-stat-card-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-cs-serif);
  font-weight: var(--font-regular);
  font-size: var(--text-4xl);
  color: var(--color-cs-ink);
  margin-bottom: var(--cs-block-gap);
  line-height: 1;
}

.cs-stat-card-arrow--up   { color: #2a8a4a; font-size: var(--text-xl); }
.cs-stat-card-arrow--down { color: #e8c547; font-size: var(--text-xl); }

.cs-stat-card-label {
  font-family: var(--font-cs-mono);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  color: var(--color-cs-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--cs-block-gap);
}

.cs-stat-card-detail {
  font-family: var(--font-cs-body);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  color: var(--color-cs-ink-muted);
  line-height: var(--leading-cs-sm);
  margin-bottom: var(--space-5);
}

.cs-stat-card-plus {
  font-size: 0.75em;
  margin-left: 2px;
}

/* ============================================================
   OUTCOMES QUOTES — Feedback cards
   ============================================================ */
.cs-outcomes-quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.cs-quote-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  position: relative;
  overflow: visible;
  transition: none;
}

.cs-quote-card:hover {
  transform: none;
  box-shadow: none;
}

.cs-quote-text {
  font-family: var(--font-cs-body);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  color: var(--color-cs-ink-muted);
  line-height: var(--leading-cs-sm);
  margin: 0 0 var(--space-3) 0;
  font-style: italic;
  position: relative;
}

.cs-quote-source {
  font-family: var(--font-cs-mono);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-cs-ink-muted);
  margin: 0;
}

.cs-quote-subtext {
  font-family: var(--font-cs-body);
  font-size: var(--text-cs-sm);
  color: var(--color-cs-ink-muted);
  line-height: var(--leading-cs-sm);
  margin: 0;
}

/* ============================================================
   REFLECTION — 3-col cards
   ============================================================ */
.cs-reflection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  margin-top: var(--space-8);
}

.cs-reflection-card {
  background: #f7f6f3;
  border-radius: 12px;
  padding: var(--space-5);
  border: 1px solid #e5e3dd;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.cs-reflection-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e8c547, transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.cs-reflection-card:hover::before { opacity: 1; }

.cs-reflection-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.cs-reflection-card-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,46,41,0.07);
  border-radius: 8px;
  color: #0d2e29;
  margin-bottom: var(--space-4);
  transition: transform 0.2s;
}

.cs-reflection-card:hover .cs-reflection-card-icon {
  transform: rotate(-6deg) scale(1.1);
}

.cs-reflection-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: #111;
  margin-bottom: var(--space-3);
}

.cs-reflection-card-body {
  font-size: var(--text-sm);
  color: #555;
  line-height: 1.65;
}

.cs-reflection-cta {
  text-align: left;
}

/* ============================================================
   COMPARISON — side-by-side image grid
   ============================================================ */
.cs-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5); /* 20px */
  /* no margin-top — cs-section-body's margin-bottom: 20px handles spacing */
}

.cs-compare-item {
  display: flex;
  flex-direction: column;
  /* no gap — margins on children control spacing, matching .cs-scroll-item */
}

/* Position context for the enlarge button overlay.
   margin-bottom: 8px matches .cs-scroll-item-img — sets image→caption gap */
.cs-compare-img-wrap {
  position: relative;
  margin-bottom: var(--space-2);
}

/* Reveal enlarge button on hover — same pattern as hero screen cards */
.cs-compare-img-wrap:hover .mobile-enlarge-btn {
  opacity: 1;
  transform: scale(1);
}

/* Real image inside wrapper (replaces placeholder when ready) */
.cs-compare-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #e8e6e0;
  border-radius: 0;
  box-sizing: border-box;
}

/* Comparison section captions — 12px, medium weight */
.cs-compare-item .cs-scroll-item-caption {
  font-weight: 500;
}

/* Placeholder inside wrapper — reset margins set elsewhere */
.cs-compare-img-wrap .cs-img-placeholder {
  margin: 0;
}

@media (max-width: 768px) {
  .cs-compare-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   REVENUE PERFORMANCE — Interactive chart widget
   ============================================================ */

#cs-revenue-performance .cs-two-col,
#cs-revenue-performance-2 .cs-two-col,
#cs-ai-insights .cs-two-col,
#cs-table-views .cs-two-col,
#cs-section-1 .cs-two-col,
#cs-section-2 .cs-two-col {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.cs-revenue-left {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cs-revenue-left .cs-chart-header {
  margin-bottom: var(--space-10);
}

.cs-revenue-left .cs-design-toggle {
  margin-bottom: var(--space-2);
}

.cs-revenue-left .cs-chart-container {
  margin-bottom: var(--space-6);
  height: auto;
  overflow: visible;
}

.cs-revenue-right {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Insights container inside scrollable area */
.cs-revenue-insights {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
}

/* Focus boxes inside revenue insights use standard focus-box styling */
.cs-revenue-insights .cs-focus-box {
  border: 1px solid #e8e6e0;
  border-radius: 12px;
  padding: var(--space-5);
  background: #ffffff;
  margin: 0;
}

.cs-revenue-insights .cs-focus-box:first-child {
  margin-top: 0;
}

/* ── Chart Header ────────────────────────────────────────── */
.cs-chart-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cs-chart-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cs-chart-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  color: #202020;
  margin: 0;
}

.cs-chart-info-btn {
  background: none;
  border: none;
  cursor: help;
  color: #666;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  padding: 0;
}

.cs-chart-info-btn:hover {
  color: #202020;
}

/* ── Filter Pills ────────────────────────────────────────── */
.cs-chart-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cs-chart-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 20px;
  height: 22px;
  background: #eceff1;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #37485d;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: capitalize;
  letter-spacing: 0.4px;
}

.cs-chart-pill:hover {
  background: #dce7f0;
}

.cs-chart-pill--active {
  background: #eceff1;
  border: 1px solid #0883ff;
  font-weight: 600;
}

.cs-chart-pill--active .cs-pill-icon {
  display: inline;
}

.cs-pill-icon {
  display: none;
  margin-right: -3px;
}

/* ── Chart Container ─────────────────────────────────────── */
.cs-chart-container {
  padding: 0;
  border: none;
  background: transparent;
  min-height: 0;
  margin: 0;
}

.cs-chart-image {
  width: 38.3125rem;
  height: 30.75rem;
  display: block;
  margin: 0;
}

/* AI Insights images — sizing handled per-design by JS toggle */
.cs-chart-image--ai {
  display: block;
}

/* ── Design Toggle Switch ──────────────────────────────────── */
.cs-design-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cs-toggle-btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border: 1px solid #d0cec8;
  border-radius: 6px;
  background: transparent;
  color: #202020;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cs-toggle-btn:hover {
  border-color: #a89f94;
  background: #fafaf9;
}

.cs-toggle-btn--active {
  background-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
  font-weight: 600;
  border-color: var(--color-accent-primary);
}

.cs-toggle-btn--active:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ── Chart Header (hidden) ─────────────────────────────────── */
.cs-chart-header {
  display: none;
}

/* ── Insight Box ─────────────────────────────────────────── */
.cs-chart-insight {
  display: none;
  gap: 12px;
  align-items: flex-start;
  background: #f0f8ff;
  border: 1px solid #d9e8f7;
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
}

.cs-insight-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.6;
  color: #37485d;
  margin: 0;
  letter-spacing: 0.4px;
}

.cs-insight-action {
  background: #eceff1;
  border: 2px solid #0883ff;
  border-radius: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0883ff;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  padding: 0;
}

.cs-insight-action:hover {
  background: #0883ff;
  color: #ffffff;
}

/* ── Bullet Points (Right Column) ────────────────────────── */

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cs-chart-container {
    padding: 20px;
  }

  .cs-bars-container {
    padding: 0 12px 12px;
  }

  .cs-chart-y-axis {
    font-size: 11px;
  }

  .cs-bar-label {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  #cs-revenue-performance .cs-two-col {
    grid-template-columns: 1fr;
  }

  .cs-chart-container {
    min-height: 360px;
    padding: 16px;
  }

  .cs-chart-axes {
    height: 240px;
    grid-template-columns: 35px 1fr 35px;
    gap: 12px;
  }

  .cs-chart-header {
    gap: 12px;
  }

  .cs-chart-pills {
    gap: 8px;
  }

  .cs-chart-pill {
    padding: 2px 16px;
    font-size: 11px;
  }

  .cs-chart-legend {
    gap: 16px;
    font-size: 11px;
  }

  .cs-axis-label-y-left,
  .cs-axis-label-y-right {
    font-size: 11px;
  }

  .cs-insight-text {
    font-size: 11px;
  }

  .cs-revenue-right {
    height: auto;
    max-height: 300px;
  }
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.reveal-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.reveal-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .cs-page-layout {
    grid-template-columns: 180px 1fr;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-6) var(--space-12);
  }
}

@media (max-width: 1024px) {
  .cs-page-layout {
    grid-template-columns: 1fr;
    padding: var(--space-6) var(--space-5) var(--space-10);
  }

  .cs-sidenav { display: none; }

  .cs-inner { padding: var(--space-8) var(--space-6); }

  .cs-outcomes-grid { grid-template-columns: repeat(3, 1fr); }
  .cs-outcomes-quotes { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .cs-hero {
    padding-top: calc(var(--nav-height, 72px) + var(--space-8));
    padding-bottom: var(--space-10);
  }

  .cs-hero-images,
  .cs-hero-ps {
    grid-template-columns: 1fr;
  }

  .cs-two-col,
  .cs-two-col--sticky-right,
  .cs-two-col--sticky-left {
    grid-template-columns: 1fr;
  }

  .cs-two-col--sticky-right > *:last-child,
  .cs-two-col--sticky-left > *:first-child {
    position: static;
    top: auto;
  }

  .cs-iterations-grid,
  .cs-reflection-grid {
    grid-template-columns: 1fr;
  }

  .cs-design-row {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .cs-design-row--reversed {
    direction: ltr;
  }

  .cs-inner { padding: var(--space-6) var(--space-4); }

  .cs-hero-title { font-size: 1.75rem; }

  /* Hero screen thumbnails — shorter on mobile */
  .cs-hero-screen-card {
    height: 200px;
  }

  /* Outcomes grid — single column on mobile */
  .cs-outcomes-grid {
    grid-template-columns: 1fr;
  }

  /* Enlarge buttons always visible on mobile (no hover required) */
  .mobile-enlarge-btn,
  .cs-hero-screen-card .mobile-enlarge-btn,
  .cs-design-flow-item .mobile-enlarge-btn,
  .cs-design-agent-item .mobile-enlarge-btn,
  .cs-todo-final-item .mobile-enlarge-btn,
  .cs-todo-iterations-item .mobile-enlarge-btn,
  .cs-context-img-card .mobile-enlarge-btn {
    opacity: 1;
    transform: scale(1);
  }

  /* Sidenav hidden on mobile (already at 1024px, reinforce at 768px) */
  .cs-sidenav { display: none; }
}

/* ============================================================
   TERMS AND CONDITIONS SECTION
   ============================================================ */

.cs-tnc-bullets,
.cs-insight-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-tnc-bullets {
  margin-bottom: var(--space-5);
}

.cs-tnc-bullets li,
.cs-insight-bullets li {
  font-family: var(--font-cs-body);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  color: var(--color-cs-ink-muted);
  line-height: var(--leading-cs-sm);
  padding-left: 16px;
  position: relative;
}

.cs-tnc-bullets li::before,
.cs-insight-bullets li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-cs-ink-muted);
}

.cs-tnc-subtitle {
  font-family: var(--font-cs-serif);
  font-size: var(--text-cs-subhead);
  font-weight: var(--font-regular);
  line-height: var(--leading-cs-subhead);
  color: var(--color-cs-ink);
  letter-spacing: 0;
  margin-bottom: var(--cs-block-gap);
}

/* ── Section eyebrow — small Geist Mono label above each section's h2 ── */
.cs-section-eyebrow {
  font-family: var(--font-cs-mono);
  font-size: var(--text-cs-sm);
  font-weight: var(--font-regular);
  font-style: normal;
  line-height: var(--leading-cs-sm);
  color: var(--color-cs-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--cs-block-gap);
  display: block;
}


/* ============================================================
   DESIGN FLOW — 5-COLUMN IMAGE GRID
   ============================================================ */
.cs-design-flow-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.cs-design-flow-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.cs-design-flow-item {
  display: flex;
  flex-direction: column;
  border: none;
  padding: 0;
  margin: 0;
}

.cs-design-flow-item .cs-img-wrap {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.cs-flow-image {
  width: 100%;
  height: auto;
  display: block;
}

.cs-design-flow-item .mobile-enlarge-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-primary);
  border: none;
  border-radius: 8px;
  color: #0d2e29;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
  z-index: 10;
}

.cs-design-flow-item:hover .mobile-enlarge-btn {
  opacity: 1;
  transform: scale(1);
}

.cs-design-flow-item .mobile-enlarge-btn:hover {
  background: var(--color-accent-hover);
  transform: scale(1.1);
}

.cs-flow-caption {
  font-family: var(--font-cs-body);
  font-size: var(--text-cs-sm);
  font-weight: 500;
  font-style: italic;
  color: var(--color-cs-ink-muted);
  line-height: var(--leading-cs-sm);
  margin-top: var(--space-2);
  text-align: center;
  padding: 0 var(--space-1);
}

/* ── Design Agent Items (Designs section) ───────────────────── */
.cs-design-agent-item {
  position: relative;
}

.cs-design-agent-item:hover .mobile-enlarge-btn {
  opacity: 1;
  transform: scale(1);
}

/* ── To-Do Final Design Item ────────────────────────────────── */
.cs-todo-final-item {
  position: relative;
}

.cs-todo-final-item:hover .mobile-enlarge-btn {
  opacity: 1;
  transform: scale(1);
}

/* ── To-Do Iterations Items ────────────────────────────────── */
.cs-todo-iterations-item {
  position: relative;
}

.cs-todo-iterations-item .cs-img-wrap {
  margin-top: 0;
}

.cs-todo-iterations-item:hover .mobile-enlarge-btn {
  opacity: 1;
  transform: scale(1);
}

.cs-design-flow-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .cs-design-flow-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cs-design-flow-grid--3col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .cs-design-flow-grid {
    grid-template-columns: 1fr;
  }

  .cs-design-flow-grid--3col {
    grid-template-columns: 1fr;
  }

  .cs-outcomes-grid { grid-template-columns: 1fr; }
  .cs-outcomes-quotes { grid-template-columns: 1fr; }
  .cs-stat-card-value { font-size: var(--text-3xl); }
}

/* ── Other Case Studies grid ──────────────────────────────── */
.cs-other-studies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
}

@media (max-width: 768px) {
  .cs-other-studies-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Global heading font: tiemposText serif ── */
.cs-page h1, .cs-page h2, .cs-page h3, .cs-page h4 {
  font-family: var(--font-cs-serif);
  line-height: var(--leading-cs-title);
}

/* ── GOALS FLOAT EXPERIMENT — delete this block to revert ── */
/* Remove outer goals container box */
.cs-focus-box.cs-read-aloud-wrap {
  background: transparent;
  border: none;
  padding: 0;
}

/* Remove fill from individual goal cards, keep outline */
.cs-goal-card {
  background: transparent;
}
.cs-goal-card:hover {
  background: transparent;
}
/* ── END GOALS FLOAT EXPERIMENT ─────────────────────────────── */

/* ── More Work — cinema-style static 2-col cards ── */
.cs-more-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.cs-more-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(39, 41, 50, 0.1);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cs-more-card:hover {
  transform: translateY(-3px);
  opacity: 0.92;
}

.cs-more-card-art {
  width: 100%;
  height: 260px;
  background-color: #f5f3ee;
  background-image:
    linear-gradient(rgba(39,41,50,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39,41,50,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  overflow: hidden;
  position: relative;
}

.cs-more-card-art img,
.cs-more-card-art video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.cs-more-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5) var(--space-5);
}

.cs-more-card-index {
  display: block;
  font-family: var(--font-cs-mono);
  font-size: var(--text-cs-sm);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(50, 64, 79, 0.4);
}

.cs-more-card-title {
  font-family: tiemposText, "tiemposText Fallback", serif;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 400;
  color: rgb(39, 41, 50);
  line-height: 1.35;
  margin: 0;
}

.cs-more-card-title em {
  font-style: normal;
  color: var(--color-accent-secondary);
}

.cs-more-card-meta {
  font-family: var(--font-cs-mono);
  font-size: var(--text-cs-sm);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(39, 41, 50, 0.55);
  margin: 0;
}

/* Lottie container fills the art area */
.cs-more-lottie {
  width: 100%;
  height: 100%;
  display: block;
}

.cs-more-lottie svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}