/* =============================================================
   Boon - Case Study detail page styles
   =============================================================
   Page-specific layout: top nav, hero with big pull quote and
   metric card, meta band, prose sections with sticky section
   headers on desktop, pull quote breaks, by-the-numbers grid,
   "more stories" card grid, and the end-of-page CTA.

   Color tinting per study is driven by a CSS custom property:
   --cs-accent (peach, amber, or terracotta). All colored
   surfaces derive from that single hue so swapping between
   studies changes one declaration.

   Depends on /styles.css for design tokens (colors, typography,
   buttons, warm-bg backgrounds).
   ============================================================= */

/* -------- Per-study accent color --------
   Pages set --cs-accent on :root. Defaults provided as peach. */
:root {
  --cs-accent-50:  rgb(255, 245, 230);   /* wash / subtle fill */
  --cs-accent-100: rgb(255, 223, 188);   /* hero tint base */
  --cs-accent-200: rgb(245, 196, 148);   /* stronger tint / borders */
  --cs-accent-400: rgb(210, 135,  72);   /* accent line, dots, meta chip */
  --cs-accent-700: rgb(142,  82,  40);   /* deep text accent */
}

/* =============================================================
   PAGE SHELL
   ============================================================= */
main {
  /* Center-aligned reading column on desktop, edge-to-edge on mobile */
  width: 100%;
}
.cs-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .cs-wrap { padding: 0 40px; }
}

/* =============================================================
   NAV BAR
   Simplified vs. homepage - fixed top bar, logo on the left,
   inline "back" breadcrumb in the middle on desktop, and the
   Get started CTA on the right. No scroll-collapse behavior.
   ============================================================= */
.cs-nav {
  position: fixed;
  top: 16px;
  left: 0; right: 0;
  z-index: 100;
  pointer-events: none;  /* children restore */
}
.cs-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: auto;
}
@media (min-width: 640px) {
  .cs-nav-inner { padding: 0 16px; gap: 16px; }
}
/* Pill needs min-width:0 so the flex child can shrink below its
   intrinsic content width - that's what lets the chip inside truncate
   instead of pushing the pill past the viewport edge on mobile. */
.cs-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  min-width: 0;
  max-width: 100%;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15,14,12,0.04),
              0 8px 24px -10px rgba(15,14,12,0.10);
}
@media (min-width: 640px) {
  .cs-nav-pill { gap: 10px; padding: 8px 10px 8px 18px; }
}
/* Logo is the primary identity anchor - shrink slightly on very narrow
   viewports so the rotating chip has room to breathe. */
.cs-nav-pill a.logo img { height: 20px; }
@media (min-width: 640px) {
  .cs-nav-pill a.logo img { height: 22px; }
}
/* Keep the right-hand CTA at its natural width - the pill is the only
   thing that should shrink when viewport runs out. */
.cs-nav-inner .btn-dark-nav { flex-shrink: 0; }
.cs-nav-pill a.logo {
  display: inline-flex;
  align-items: center;
}
.cs-nav-pill a.logo img {
  width: auto;
  display: block;
}
.cs-nav-pill .sep {
  width: 1px; height: 18px;
  background: rgba(15,14,12,0.14);
}
/* On mobile the "All case studies" back link is hidden, so the sep
   that precedes it is redundant (it would sit next to .cs-next-sep).
   Hide it by default and restore at the breakpoint where .back shows. */
.cs-nav-pill > .sep:not(.cs-next-sep) { display: none; }
.cs-nav-pill .back {
  display: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2A251F;
  padding: 0 4px 0 0;
  transition: color .25s ease;
}
.cs-nav-pill .back:hover { color: #0F0E0C; }
@media (min-width: 640px) {
  .cs-nav-pill .back { display: inline-flex; align-items: center; gap: 8px; }
  .cs-nav-pill > .sep:not(.cs-next-sep) { display: inline-block; }
}

/* =============================================================
   Next-study rotating chip
   Small JetBrains-Mono chip injected into the right side of the nav
   pill. Cross-fades through the OTHER two case studies every ~6s so
   a reader finishing one story is always one tap away from another.
   Same hover-pause / off-screen-pause / prefers-reduced-motion
   contract as the homepage hero pill (initHeroCasePill), just smaller.
   Driven by initCaseNextPill() in /case-studies/case-study.js.
   ============================================================= */
/* Chip itself: min-width:0 lets the rotator inside truncate; flex:0 1
   auto prevents the chip from forcing the pill wider than available
   space. The rotator is the actual truncation target via the rules
   further down. */
.cs-nav-pill .cs-next-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;                /* compact on mobile, bumped up on md+ */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2A251F;
  padding: 0 2px 0 0;
  white-space: nowrap;
  transition: color .25s ease;
  overflow: hidden;
}
.cs-nav-pill .cs-next-link:hover { color: var(--cs-accent-700); }
.cs-nav-pill .cs-next-link .cs-next-prefix {
  /* "NEXT:" prefix is md+ only. On mobile the chip is already short
     enough that the prefix adds noise without value. */
  display: none;
  color: rgba(15,14,12,0.5);
}
.cs-nav-pill .cs-next-link .cs-next-rotator {
  /* Opacity-faded during variant swaps (JS adds .is-fading). Also the
     truncation surface - if a mobile variant is still too long for the
     remaining pill space we let the text clip with an ellipsis rather
     than blow out the nav layout. */
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 200ms ease;
  color: var(--cs-accent-700);
  font-weight: 500;
}
.cs-nav-pill .cs-next-link.is-fading .cs-next-rotator { opacity: 0; }
.cs-nav-pill .cs-next-link .cs-next-arrow {
  font-family: 'JetBrains Mono', monospace;
  transition: transform .25s ease;
}
.cs-nav-pill .cs-next-link:hover .cs-next-arrow { transform: translateX(3px); }

/* Mobile sep is a shorter line to match the reduced pill height. The
   sep is always visible because the chip is always visible; on mobile
   the pill reads [logo] | [rotating study name →]. */
.cs-nav-pill .cs-next-sep {
  display: inline-block;
}

@media (min-width: 640px) {
  .cs-nav-pill .cs-next-link {
    font-size: 12px;              /* match .back weight at md+ */
    gap: 8px;
    padding-right: 4px;
  }
  .cs-nav-pill .cs-next-link .cs-next-prefix { display: inline; }
}

/* Reduced-motion: kill the opacity cross-fade. JS already short-circuits
   the rotation interval; this covers the brief initial paint. */
@media (prefers-reduced-motion: reduce) {
  .cs-nav-pill .cs-next-link .cs-next-rotator { transition: none; }
}

/* =============================================================
   HERO
   Big centered headline, large pull quote, metric card.
   Warm-bg creates the orbiting blob background; the accent color
   modulates the top-edge vignette to signal which study this is.
   ============================================================= */
.cs-hero {
  position: relative;
  padding: 120px 0 60px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) {
  .cs-hero { padding: 180px 0 100px; }
}

/* Accent vignette: a gentle radial wash in the study's accent
   color, layered on top of the warm-bg. Gives each detail page a
   subtle identity without overwhelming the shared warm palette. */
.cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 55% at 50% 0%,
    var(--cs-accent-100) 0%,
    transparent 70%
  );
  opacity: 0.55;
  mix-blend-mode: multiply;
}

.cs-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2A251F;
}
.cs-hero-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--cs-accent-400);
}

.cs-hero-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-weight: 400;
  letter-spacing: -0.03em;
  font-size: 44px;
  line-height: 1.05;
  color: #0F0E0C;
  max-width: 20ch;
  margin: 0 auto;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .cs-hero-title { font-size: 56px; }
}
@media (min-width: 1024px) {
  .cs-hero-title { font-size: 72px; max-width: 18ch; }
}
.cs-hero-title .italic {
  font-family: 'Instrument Serif', 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.cs-hero-sub {
  margin: 28px auto 0;
  max-width: 620px;
  color: #2A251F;
  font-size: 17px;
  line-height: 1.55;
}
@media (min-width: 768px) {
  .cs-hero-sub { font-size: 18.5px; }
}

/* Hero metric card: three-column stat row pinned to bottom of hero.
   On mobile this is a vertical stack. */
.cs-hero-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  max-width: 720px;
  margin: 60px auto 0;
  padding: 4px;
  background: rgba(15,14,12,0.06);
  border-radius: 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (min-width: 640px) {
  .cs-hero-metrics { grid-template-columns: repeat(3, 1fr); }
}
.cs-hero-metric {
  background: rgba(255,255,255,0.85);
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
}
.cs-hero-metric .n {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.025em;
  font-size: 40px;
  line-height: 1;
  color: #0F0E0C;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
  .cs-hero-metric .n { font-size: 48px; }
}
.cs-hero-metric .k {
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5A5247;
}

/* =============================================================
   META BAND
   Horizontal strip between hero and body: Services, Founder,
   Location, Engagement. Reads like a business card.
   ============================================================= */
.cs-meta {
  border-top: 1px solid rgba(15,14,12,0.08);
  border-bottom: 1px solid rgba(15,14,12,0.08);
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Meta grid: 2×2 on mobile (saves half the vertical space vs the old
   4-stacked pattern - at 390px the previous layout was ~240px tall),
   2 cols with narrower cells on sm, 4 wide on lg. Borders are
   recomputed at each breakpoint so interior dividers read cleanly. */
.cs-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 1024px) {
  .cs-meta-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cs-meta-cell {
  padding: 18px 16px;
  border-top: 1px solid rgba(15,14,12,0.06);
}
.cs-meta-cell:nth-child(-n+2) { border-top: 0; }
.cs-meta-cell:nth-child(even) { border-left: 1px solid rgba(15,14,12,0.06); }
@media (min-width: 640px) {
  .cs-meta-cell { padding: 26px 24px; }
}
@media (min-width: 1024px) {
  /* Reset the 2-col borders and apply the 4-col pattern */
  .cs-meta-cell:nth-child(even) { border-left: 0; }
  .cs-meta-cell:nth-child(-n+4) { border-top: 0; }
  .cs-meta-cell + .cs-meta-cell { border-left: 1px solid rgba(15,14,12,0.06); }
}
.cs-meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8B8073;
  margin-bottom: 8px;
}
.cs-meta-value {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.01em;
  font-size: 18px;
  line-height: 1.3;
  color: #0F0E0C;
}

/* =============================================================
   PROSE SECTIONS
   Repeatable "eyebrow + H2 + paragraphs" block. On desktop the
   eyebrow+H2 sit in a left column and the body reads on the right,
   creating a magazine-style two-column rhythm.
   ============================================================= */
.cs-section {
  padding: 70px 0;
  border-top: 1px solid rgba(15,14,12,0.06);
}
@media (min-width: 768px) {
  .cs-section { padding: 100px 0; }
}
.cs-section:first-of-type { border-top: 0; }

.cs-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 1024px) {
  .cs-section-grid {
    grid-template-columns: 280px 1fr;
    gap: 80px;
    align-items: start;
  }
}
.cs-section-head {
  position: relative;
}
@media (min-width: 1024px) {
  .cs-section-head {
    position: sticky;
    top: 100px;
  }
}
.cs-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-accent-700);
}
.cs-section-eyebrow::before {
  content: "";
  width: 24px; height: 1.5px;
  background: var(--cs-accent-400);
  border-radius: 2px;
}
.cs-section-title {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 32px;
  line-height: 1.1;
  color: #0F0E0C;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .cs-section-title { font-size: 38px; }
}

.cs-prose {
  color: #2A251F;
  font-size: 17px;
  line-height: 1.65;
  max-width: 62ch;
}
@media (min-width: 768px) {
  .cs-prose { font-size: 18px; }
}
.cs-prose p + p { margin-top: 1.2em; }
.cs-prose ul {
  margin: 1.2em 0;
  padding: 0;
  list-style: none;
}
.cs-prose li {
  position: relative;
  padding-left: 24px;
  margin: 0.6em 0;
}
.cs-prose li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 1.5px;
  background: var(--cs-accent-400);
  border-radius: 2px;
}
.cs-prose strong { color: #0F0E0C; font-weight: 600; }

/* Inline pull quote nested inside prose */
.cs-prose .cs-inline-quote {
  margin: 1.8em 0;
  padding-left: 22px;
  border-left: 2px solid var(--cs-accent-400);
}
.cs-prose .cs-inline-quote p {
  font-family: 'Instrument Serif', 'Fraunces', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: #0F0E0C;
}
@media (min-width: 768px) {
  .cs-prose .cs-inline-quote p { font-size: 26px; }
}
.cs-prose .cs-inline-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5A5247;
}

/* =============================================================
   PULL QUOTE BREAK
   Full-width centered quote between major sections.
   ============================================================= */
.cs-pullquote {
  padding: 80px 0;
  text-align: center;
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%,
      var(--cs-accent-50) 0%,
      transparent 70%);
}
@media (min-width: 768px) {
  .cs-pullquote { padding: 120px 0; }
}
.cs-pullquote-mark {
  display: block;
  font-family: 'Instrument Serif', 'Fraunces', serif;
  font-size: 72px;
  line-height: 1;
  color: var(--cs-accent-400);
  margin-bottom: 8px;
}
.cs-pullquote-text {
  font-family: 'Instrument Serif', 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #0F0E0C;
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .cs-pullquote-text { font-size: 52px; }
}
@media (min-width: 1024px) {
  .cs-pullquote-text { font-size: 64px; }
}
.cs-pullquote-cite {
  display: block;
  margin-top: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5A5247;
}

/* =============================================================
   BY THE NUMBERS
   Four-card grid of hard results. Each card has a giant number
   and a caption. Mobile stacks to 2 cols, desktop spans 4.
   ============================================================= */
.cs-bytn {
  padding: 70px 0;
  background: rgba(15,14,12,0.02);
}
@media (min-width: 768px) {
  .cs-bytn { padding: 100px 0; }
}
.cs-bytn-head {
  text-align: center;
  margin-bottom: 48px;
}
.cs-bytn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* gap was 12/16 - bumped to 20/28 so the four numeric cards read as
     distinct stats rather than a banded row. Still keeps the 2-col
     mobile layout on small screens; the extra horizontal gap is the
     most visible change at md+. */
  gap: 20px;
}
@media (min-width: 768px) {
  .cs-bytn-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
}
.cs-bytn-card {
  padding: 24px 20px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 18px;
  text-align: left;
}
@media (min-width: 768px) {
  .cs-bytn-card { padding: 32px 28px; }
}
.cs-bytn-card .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8B8073;
  margin-bottom: 14px;
}
.cs-bytn-card .n {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.025em;
  font-size: 40px;
  line-height: 1;
  color: #0F0E0C;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .cs-bytn-card .n { font-size: 52px; }
}
.cs-bytn-card .c {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #5A5247;
}

/* =============================================================
   MORE STORIES
   Two cards linking to the other two case studies. Each inherits
   its linked study's accent color for continuity.
   ============================================================= */
.cs-more {
  padding: 80px 0;
  border-top: 1px solid rgba(15,14,12,0.08);
}
@media (min-width: 768px) {
  .cs-more { padding: 110px 0; }
}
.cs-more-head {
  margin-bottom: 40px;
}
.cs-more-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .cs-more-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
.cs-more-card {
  position: relative;
  display: block;
  padding: 32px;
  background: var(--ms-tint, #FFF5EA);
  border-radius: 22px;
  text-decoration: none;
  color: #0F0E0C;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow .35s ease;
}
.cs-more-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -20px rgba(15,14,12,0.18);
}
.cs-more-card .ms-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15,14,12,0.6);
  margin-bottom: 20px;
}
.cs-more-card .ms-title {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0F0E0C;
  margin-bottom: 16px;
  max-width: 20ch;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .cs-more-card .ms-title { font-size: 32px; }
}
.cs-more-card .ms-metric {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.025em;
  font-size: 42px;
  line-height: 1;
  color: #0F0E0C;
  font-variant-numeric: tabular-nums;
}
.cs-more-card .ms-metric-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15,14,12,0.6);
  margin-top: 6px;
}
.cs-more-card .ms-cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #0F0E0C;
  font-weight: 500;
}
.cs-more-card .ms-cta .arrow {
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cs-more-card:hover .ms-cta .arrow { transform: translateX(5px); }

/* Per-card accent tints - match homepage testimonial panel hues */
.cs-more-card.tint-peach       { --ms-tint: rgb(255, 225, 196); }
.cs-more-card.tint-amber       { --ms-tint: rgb(250, 210, 150); }
.cs-more-card.tint-terracotta  { --ms-tint: rgb(225, 172, 140); }

/* =============================================================
   END CTA
   Dark band with the standard Calendly button.
   ============================================================= */
.cs-end {
  padding: 100px 0;
  background: #0F0E0C;
  color: #FBF7F0;
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cs-end::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 60% 55% at 50% 50%,
    rgba(232, 165, 74, 0.18) 0%,
    transparent 65%
  );
}
.cs-end-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}
.cs-end-title {
  margin-top: 24px;
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 40px;
  line-height: 1.1;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .cs-end-title { font-size: 56px; }
}
.cs-end-sub {
  max-width: 540px;
  margin: 24px auto 0;
  color: rgba(255,255,255,0.65);
  font-size: 17px;
  line-height: 1.55;
}
.cs-end-actions {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.cs-end .btn-light {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: #FBF7F0;
}
.cs-end .btn-light:hover { background: rgba(255,255,255,0.14); }

/* =============================================================
   FOOTER
   Lighter version of homepage footer - kept minimal since the
   end CTA already does the conversion work.
   ============================================================= */
.cs-footer {
  background: #0F0E0C;
  color: rgba(255,255,255,0.6);
  padding: 40px 0 44px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cs-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.cs-footer .logo img {
  height: 20px; width: auto;
  filter: invert(1);
  display: block;
}
.cs-footer .cs-footer-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}