/* ============================================================
   KORA — Case Studies page (cases.html)
   Fixed-px metrics taken from the original desktop layout.
   Loaded AFTER style.css — reuses tokens, nav, buttons, footer.
   ============================================================ */

.cases-main { background: var(--paper); }

/* ---------- HERO ---------- */
.cases-hero { padding: 12.125rem 3.75rem 0; max-width: 95.625rem; margin-inline: auto; }
.cases-hero h1 {
  font-size: var(--h-page); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1;
}
.cases-hero .sub {
  margin-top: 1.625rem; max-width: 38.75rem;
  font-size: var(--t-lead); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1.3;
}

/* ---------- FEATURED CASE ---------- */
.feat {
  margin-top: 3.75rem;
  background: var(--beige-2); border-radius: 2.5rem; padding: 0.625rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem;
}
.feat__col { display: flex; flex-direction: column; gap: 0.625rem; }
.feat__info { background: var(--cream); border-radius: 1.875rem; padding: 1.875rem; flex: 1; display: flex; flex-direction: column; }
.feat__info time { font-size: 0.8125rem; font-weight: 600; color: var(--gray); }
.feat__info h2 { margin-top: 1.125rem; font-size: var(--t-lead-2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; max-width: 40rem; }
.feat__meta { margin-top: auto; padding-top: 1.625rem; display: grid; gap: 0.875rem; }
.feat__meta .row {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  font-size: 0.8125rem; font-weight: 600;
}
/* metric pill — identical on the featured card and inside a case study */
.feat__meta .mpill, .cs-meta .mpill {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.4375rem;
  background: var(--beige-2); border-radius: 6.25rem; padding: 0.4375rem 0.8125rem; color: var(--dark);
}
.feat__meta .mv { color: var(--dark); }
.feat__metrics { background: var(--cream); border-radius: 1.875rem; min-height: 15.625rem; display: grid; grid-template-columns: 1fr 1fr; }
.feat__metrics .cell { position: relative; padding: 1.875rem; display: flex; flex-direction: column; }
.feat__metrics .cell + .cell { border-left: 1px solid var(--line); }
.feat__metrics .mi {
  position: absolute; top: 1.5rem; right: 1.5rem; width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; color: var(--dark); background: var(--paper);
}
.feat__metrics .v { font-size: 3.75rem; font-weight: 600; letter-spacing: -0.03em; margin-top: auto; }
.feat__metrics .v sup { font-size: 0.42em; font-weight: 700; color: var(--green); margin-left: 2px; }
.feat__metrics .l { font-size: 0.8125rem; font-weight: 600; color: var(--gray); margin-top: 0.875rem; }
.feat__side { background: var(--cream); border-radius: 1.875rem; min-height: 9.5625rem; display: grid; grid-template-columns: 1fr 1fr; }
.feat__side .svc { padding: 1.625rem 1.25rem 1.5rem 1.875rem; }
.feat__side .svc .lbl { font-size: 0.8125rem; font-weight: 600; color: var(--dark); }
.feat__side .chips { display: flex; flex-wrap: wrap; gap: 0.4375rem; margin-top: 0.875rem; }
.feat__side .chips li { background: var(--beige-2); border-radius: 6.25rem; padding: 0.3125rem 0.75rem; font-size: 0.8125rem; font-weight: 600; }
.feat__side .chips li.more { background: var(--dark); color: var(--cream); }
.feat__side .qq { padding: 1.5rem 1.875rem 1.5rem 1.75rem; border-left: 1px solid var(--line); }
.feat__side .qq .stars { display: block; color: var(--green); font-size: 0.5625rem; letter-spacing: 0.25rem; margin-bottom: 0.625rem; }
.feat__side .qq p { font-size: 0.8125rem; font-weight: 600; line-height: 1.55; color: var(--gray); }
.feat__side .who { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.875rem; }
.feat__side .who img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
.feat__side .who span { font-size: 0.8125rem; font-weight: 600; color: var(--dark); }
.feat__photo { position: relative; border-radius: 1.875rem; overflow: hidden; height: 23.875rem; background: var(--dark); }
.feat__photo img { width: 100%; height: 100%; object-fit: cover; }
.feat__logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--cream); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
  text-shadow: 0 2px 0.875rem rgba(0,0,0,0.25);
}

/* View Case Study buttons: dark resting dot on the green one */
/* .btn--vc moved to style.css (shared with the homepage case section) */

/* ---------- CASES GRID ---------- */
.cases-intro {
  margin: 9.375rem auto 0; max-width: 38.75rem; text-align: center;
  font-size: var(--t-lead); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1.3; padding-inline: 1.5rem;
}
.cases-intro em { font-style: normal; color: var(--gray-2); }
.cases-logos { margin-top: 4.625rem; max-width: 83.125rem; margin-inline: auto; padding-inline: 1.5rem; }
.cases-logos .marquee { width: 100%; align-self: auto; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cases-logos .lg { color: rgba(30,30,28,0.72); font-size: 1.5rem; }
.cases-logos .lg--1 { font-size: 1.1875rem !important; }

.cgrid {
  margin: 5.625rem auto 0; max-width: 83.125rem; padding-inline: 1.5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6.6875rem 5.5625rem;
}
.ccard { background: var(--beige-2); border-radius: 2.5rem; padding: 0.625rem; display: flex; flex-direction: column; gap: 0.5625rem; }
.ccard__img { position: relative; border-radius: 1.875rem; overflow: hidden; height: 28.1875rem; background: var(--dark); }
.ccard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.ccard:hover .ccard__img img { transform: scale(1.04); }
.ccard__logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--cream); color: var(--dark); height: 2.125rem; padding: 0 1.375rem;
  display: grid; place-items: center;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
}
.ccard__body { background: var(--cream); border-radius: 1.875rem; padding: 1.75rem 1.6875rem 0; flex: 1; display: flex; flex-direction: column; }
.ccard__body time { font-size: 0.8125rem; font-weight: 600; color: var(--gray); }
.ccard__body h3 { margin-top: 0.75rem; margin-bottom: 1.5rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; }
/* lines bleed to the card edges (row escapes the body side padding) */
.ccard__mrow { margin: auto -1.6875rem 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.ccard__mrow .cell { padding: 1.875rem 0 1.6875rem 1.6875rem; }
.ccard__mrow .cell + .cell { border-left: 1px solid var(--line); padding-left: 1.875rem; }
.ccard__mrow .v { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.02em; }
.ccard__mrow .l { font-size: 0.8125rem; font-weight: 600; color: var(--gray); margin-top: 0.4375rem; }
.ccard .btn--vc { height: 3.5rem; }

/* ---------- CASE DETAIL PAGE (case-sitemark.html) ---------- */
.cs-wrap { max-width: calc(92.5rem + 3rem); margin-inline: auto; padding-inline: 1.5rem; }
.cs-hero { padding-top: 12.125rem; }
.cs-hero__top { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: start; }
.cs-hero__top h1 { font-size: var(--h-page); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.cs-hero__top .sub { margin-top: 6.25rem; max-width: 40.625rem; font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.04em; line-height: 1.3; color: var(--gray); }
/* services block sits at the level of the subtitle, chips are beige pills */
.cs-hero__svc { align-self: end; min-width: 22.5rem; }
.cs-hero__svc .lbl { font-size: 0.8125rem; font-weight: 600; }
.cs-hero__svc .list { display: flex; flex-wrap: wrap; gap: 0.5625rem; margin-top: 1rem; max-width: 25rem; }
.cs-hero__svc .list li { font-size: 0.8125rem; font-weight: 600; background: var(--beige-2); border-radius: 6.25rem; padding: 0.4375rem 0.875rem; }

.cs-shell { margin-top: 3.75rem; background: var(--beige-2); border-radius: 2.5rem; padding: 0.625rem; display: flex; flex-direction: column; gap: 0.625rem; }
.cs-shell__photo { position: relative; border-radius: 1.875rem; overflow: hidden; aspect-ratio: 1460 / 973; background: var(--dark); }
.cs-shell__photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-shell__row { display: grid; grid-template-columns: 755fr 695fr; gap: 0.625rem; }
.cs-meta { background: var(--cream); border-radius: 1.875rem; padding: 1.875rem; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.cs-meta__logo { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 1.625rem; }
.cs-meta .row { display: grid; grid-template-columns: 20.25rem 1fr; align-items: center; padding: 0.75rem 0; font-size: 0.8125rem; font-weight: 600; }
.cs-meta .mv { color: var(--gray); }
.cs-metrics { min-height: 16.375rem; }
/* value floats mid-cell, label pinned to the bottom (like the original) */
.cs-metrics .v { margin-top: auto; }
.cs-metrics .l { margin-top: auto; }

.cs-art { padding-top: 9.375rem; }
.cs-art__date { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 1.625rem; }
.cs-art__title { font-size: var(--h-page-2); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; max-width: 75rem; }
.cs-block { margin-top: 6.875rem; display: grid; grid-template-columns: 23.9375rem 1fr; align-items: start; }
.cs-block .lbl { padding-left: 0; }
.lpill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--beige-2); border-radius: 6.25rem; padding: 0.5rem 0.9375rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.02em; color: var(--dark);
}
.cs-block .lead, .results-intro { max-width: 55rem; font-size: clamp(1.625rem, 2.4vw, 2.5rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.3; color: var(--dark); }
.cs-block .body { max-width: 48rem; margin-top: 2.75rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.5; color: var(--gray); }
/* Results checklist. Narrower and tighter than the rest of the case column,
   as in the original: the pills stop at 36.25rem instead of running the full
   55rem, which keeps the longest line just inside the text box and lets the
   authored break in the last item read as a deliberate two-liner. Row pitch
   lands at 77px (62 + 15) against the 100px the wide version produced.
   Tones are nested the way the original has them — the panel carries the
   beige and each state sits on it in cream, not the other way round. The
   38.5rem cap is 36.25 + the 1.125rem padding on both sides, so the pills
   themselves still measure 580px. */
.cs-block .results {
  max-width: 38.5rem; margin-top: 3.25rem; display: grid; gap: 0.9375rem;
  background: var(--beige-2); border-radius: 2rem; padding: 1.125rem;
}
.cs-block .results li {
  display: flex; align-items: center; gap: 0.875rem;
  background: var(--cream); border-radius: 1.25rem; padding: 1.125rem 1.25rem;
  font-size: 1.0625rem; line-height: 1.5; font-weight: 600; letter-spacing: -0.03em;
}
.cs-block .results li::before {
  content: "✓"; flex: none; width: 1.625rem; height: 1.625rem; border-radius: 50%;
  background: var(--green); color: var(--cream); display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700;
}
/* 5:3 instead of the original 4:3 — full container width, but the height now
   clears the usable viewport on common screens: ~1110px-wide column on a
   1440x900 laptop gives 666px, a 1480px column on 1920x1080 gives 888px,
   both inside the window with browser chrome on. */
.cs-fig { margin-top: 6.25rem; border-radius: 1.875rem; overflow: hidden; aspect-ratio: 5 / 3; background: var(--green); }
.cs-fig img { width: 100%; height: 100%; object-fit: cover; }
/* video figure: same frame as the stills, but the clip's own 16:9 so the
   player is never letterboxed, plus the poster/play affordance */
.cs-fig--video { position: relative; aspect-ratio: 16 / 9; cursor: pointer; background: var(--dark); }
/* the YouTube badge — the shape people read as "this plays on YouTube" */
.cs-fig--video .play {
  position: absolute; inset: 0; margin: auto; width: 5.75rem; height: 4rem; border-radius: 1.125rem;
  background: rgba(211,0,0,0.88); color: #fff; display: grid; place-items: center; border: 0;
  transition: transform 0.3s var(--ease), background 0.3s, opacity 0.3s; z-index: 2;
}
.cs-fig--video .play svg { width: 1.75rem; height: 1.75rem; }
.cs-fig--video:hover .play { transform: scale(1.08); background: #ff0000; }
/* a wordmark in the corner, so the source is named and not just implied */
.cs-fig--video .src {
  position: absolute; z-index: 2; right: 1.5rem; bottom: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.375rem 0.75rem; border-radius: 6.25rem;
  background: rgba(13,13,13,0.5); -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem);
  color: var(--cream); font-size: 0.75rem; font-weight: 600; letter-spacing: -0.01em;
  transition: opacity 0.3s;
}
.cs-fig--video .src svg { width: 1rem; height: 1rem; color: #ff0000; }
.cs-fig--video figcaption {
  position: absolute; z-index: 2; left: 1.5rem; bottom: 1.5rem; color: var(--cream);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em;
  text-shadow: 0 0.125rem 0.75rem rgba(13,13,13,0.45); transition: opacity 0.3s;
}
.cs-fig--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.cs-fig--video.is-playing { cursor: default; }
.cs-fig--video.is-playing .play, .cs-fig--video.is-playing figcaption,
.cs-fig--video.is-playing .src { opacity: 0; pointer-events: none; }
/* two concept shots side by side; collapses to a stack on mobile */
/* the pair reads as two separate cards: a shell-gap between them, no shared
   background, and each half carries its own rounded corners. */
/* ---------- live prototype embed ----------
   The prototype is a self-contained page in an iframe. Its inner layout is
   fixed px (a 375x812 device plus rail and toolbar), so the frame height is
   px too — rem here would drift against the page's fluid root size.
   Below 760px the iframe is dropped for a link: the prototype stacks its rail
   on top at that width and reads far better as its own full-screen page. */
.cs-proto {
  position: relative; margin-top: 6.25rem;
  border: 1px solid var(--line); border-radius: 1.875rem; overflow: hidden;
  background: var(--paper);
}
.cs-proto iframe { display: block; width: 100%; height: 1045px; border: 0; }
.cs-proto__ph {
  display: grid; place-items: center; height: 1045px; margin: 0;
  color: var(--gray-2); font-size: 0.8125rem; font-weight: 600;
}
.cs-proto__open {
  /* bottom-right: the page’s sticky nav lives in the top corners */
  position: absolute; z-index: 2; right: 1.25rem; bottom: 1.25rem;
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.5rem 0.9375rem; border-radius: 6.25rem;
  background: var(--dark); color: var(--cream);
  font-size: 0.75rem; font-weight: 600; letter-spacing: -0.01em;
  transition: background 0.3s, transform 0.3s var(--ease);
}
.cs-proto__open:hover { background: var(--green); color: var(--ink); transform: translateY(-2px); }
.cs-proto__small { display: none; }

@media (max-width: 760px) {
  .cs-proto { margin-top: 3.5rem; }
  .cs-proto__frame, .cs-proto__open { display: none; }
  .cs-proto__small { display: block; padding: 2rem 1.5rem; text-align: left; }
  .cs-proto__small p { color: var(--gray); font-size: 0.9375rem; font-weight: 600; margin-bottom: 1.25rem; }
}

/* ---------- concept slider ----------
   Two stills of the same screens, swapped in place. The first image stays in
   flow so it sets the figure's height; the rest sit on top of it and cross-fade,
   which keeps the box from jumping between slides. */
.cs-slider { position: relative; }
.cs-slider__track { position: relative; display: block; }
.cs-slider__track img { display: block; width: 100%; height: auto; transition: opacity 0.45s var(--ease); }
.cs-slider__track img + img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.cs-slider__track img:not(.is-on) { opacity: 0; }

.cs-slider__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(255,255,250,0.22);
  background: rgba(13,13,13,0.45); -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem);
  color: var(--cream); display: grid; place-items: center; cursor: pointer;
  transition: background 0.3s, transform 0.3s var(--ease), opacity 0.3s;
}
.cs-slider__nav:hover { background: var(--green); color: var(--ink); transform: translateY(-50%) scale(1.08); }
.cs-slider__nav--prev { left: 1.25rem; }
.cs-slider__nav--prev svg { transform: rotate(180deg); }
.cs-slider__nav--next { right: 1.25rem; }

/* the bar rides at the top of the frame: progress first, then the caption
   under it (column-reverse keeps the markup in reading order) */
.cs-slider__bar {
  position: absolute; z-index: 3; left: 1.5rem; right: 1.5rem; top: 1.5rem;
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 0.75rem; pointer-events: none;
}
.cs-slider__cap {
  padding: 0.375rem 0.875rem; border-radius: 6.25rem;
  background: rgba(13,13,13,0.5); -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem);
  color: var(--cream); font-size: 0.75rem; font-weight: 600; letter-spacing: -0.01em;
}
/* segmented progress: one track per slide, the current one fills over
   --dur and hands over to the next when it lands */
.cs-slider__prog { display: flex; align-self: stretch; gap: 0.5rem; pointer-events: auto; }
.cs-slider__prog button {
  flex: 1; height: 0.25rem; padding: 0; border: 0; border-radius: 6.25rem; cursor: pointer;
  background: rgba(255,255,250,0.28); overflow: hidden;
}
.cs-slider__prog i {
  display: block; height: 100%; border-radius: inherit; background: var(--cream);
  transform: scaleX(0); transform-origin: left center;
}
.cs-slider__prog button.is-done i { transform: scaleX(1); }
.cs-slider__prog button.is-on i { animation: cs-fill var(--dur, 5.5s) linear forwards; }
/* the fill only runs while the figure is on screen and nobody is reading it */
.cs-slider:not(.is-live) .cs-slider__prog button.is-on i,
.cs-slider:hover .cs-slider__prog button.is-on i,
.cs-slider:focus-within .cs-slider__prog button.is-on i { animation-play-state: paused; }
@keyframes cs-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .cs-slider__prog button.is-on i { animation: none; transform: scaleX(1); }
}

@media (max-width: 700px) {
  .cs-slider__nav { width: 2.5rem; height: 2.5rem; }
  .cs-slider__nav--prev { left: 0.75rem; }
  .cs-slider__nav--next { right: 0.75rem; }
  .cs-slider__bar { left: 0.875rem; right: 0.875rem; top: 0.875rem; }
  .cs-slider__cap { font-size: 0.6875rem; }
  .cs-slider__bar { gap: 0.625rem; }
}

/* figure that keeps the image’s own proportions */
.cs-fig--nat { aspect-ratio: auto; background: none; }
.cs-fig--nat img { height: auto; object-fit: contain; display: block; }

.cs-fig--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; aspect-ratio: auto; background: none; overflow: visible; }
.cs-fig--duo img { border-radius: 1.875rem; }
.cs-fig--duo img { aspect-ratio: 740 / 888; } /* two cells = the same 5:3 overall */
@media (max-width: 700px) { .cs-fig--duo { grid-template-columns: 1fr; } .cs-fig--duo img { aspect-ratio: 740 / 1110; } }
/* square crops keep their own shape in the pair, on both layouts */
.cs-fig--duosq img { aspect-ratio: 1 / 1; }
@media (max-width: 700px) { .cs-fig--duosq img { aspect-ratio: 1 / 1; } }
/* landscape duo: pairs exported as two wide halves (Copytrading case) —
   each cell keeps the source's own 1.37 ratio instead of the portrait cells */
.cs-fig--duow img { aspect-ratio: 740 / 541; }
@media (max-width: 700px) { .cs-fig--duow img { aspect-ratio: 740 / 541; } }
/* quote: green rounded card, everything centered, logo on top */
.cs-quote {
  margin: 8.125rem 0 0; background: var(--green); color: var(--cream);
  border-radius: 2.5rem; padding: clamp(3.75rem, 7vw, 7.5rem) clamp(1.5rem, 6vw, 5.625rem);
  text-align: center;
}
.cs-quote__logo { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; }
.cs-quote .q { max-width: 56.25rem; margin: 4.375rem auto 0; font-size: var(--t-lead-2); font-weight: 600; letter-spacing: -0.04em; line-height: 1.3; }
.cs-quote .who { margin: 4.375rem auto 0; display: flex; align-items: center; justify-content: center; gap: 0.875rem; text-align: left; }
.cs-quote .who img { width: 2.8125rem; height: 2.8125rem; border-radius: 50%; object-fit: cover; }
.cs-quote .who .n { font-size: 0.9375rem; font-weight: 600; color: var(--cream); }
.cs-quote .who .r { font-size: 0.8125rem; color: rgba(255,255,255,0.9); }

.cs-more { padding-top: 10.625rem; }
.cs-more__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.cs-more__head h2 { font-size: var(--h-page-2); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.cs-more__head .sub { margin-top: 1.375rem; font-size: 1.25rem; font-weight: 600; color: var(--gray); max-width: 35rem; }
.cgrid--tight { margin-top: 3.75rem; padding-inline: 0; max-width: none; gap: 1.25rem; }

@media (max-width: 1000px) {
  .cs-hero__top { grid-template-columns: 1fr; }
  /* drop the 22.5rem floor once stacked — it overflowed narrow phones */
  .cs-hero__svc { min-width: 0; }
  .cs-shell__row { grid-template-columns: 1fr; }
  .cs-meta .row { grid-template-columns: 1fr 1fr; }
  .cs-block { grid-template-columns: 1fr; gap: 1.375rem; }
  .cs-block .lbl, .cs-block .results li::before { padding-left: 0; left: 0; }
  .cs-block .results li { padding-left: 1.25rem; }
  .cs-more__head { flex-direction: column; }
  .cgrid--tight { grid-template-columns: 1fr; }
}

/* ---------- DARK CTA (contact variant) ---------- */
.cta-dark { margin: 9.375rem 1.25rem 0; }
.cta-dark .cta-card {
  background: var(--dark); color: var(--cream); border-radius: 2.5rem;
  padding: clamp(3rem, 7vw, 7.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 5rem);
}
.cta-dark .in {
  max-width: 88.125rem; margin-inline: auto;
  display: grid; grid-template-columns: 1fr minmax(26.25rem, 33.75rem); gap: clamp(2rem, 6vw, 7.5rem);
}
.cta-dark h2 { font-size: clamp(2.75rem, 5.2vw, 5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; max-width: 32.5rem; }
.cta-dark h2 .w { opacity: 0.18; display: inline-block; }
.cta-dark .feats { margin-top: 2.75rem; display: grid; gap: 1.125rem; }
.cta-dark .feats li { display: flex; align-items: center; gap: 0.875rem; font-size: 0.9375rem; font-weight: 600; }
.cta-dark .feats .ic { color: var(--green); }
.cta-dark .q { margin-top: 5.625rem; max-width: 35rem; }
.cta-dark .q .lbl { font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,250,0.6); margin-bottom: 0.875rem; }
.cta-dark .q p { font-size: clamp(1.125rem, 1.7vw, 1.5625rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; }
.cta-dark .q .who { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.375rem; }
.cta-dark .q .who img { width: 2.625rem; height: 2.625rem; border-radius: 50%; object-fit: cover; }
.cta-dark .q .who .n { font-size: 0.9375rem; font-weight: 700; }
.cta-dark .q .who .r { font-size: 0.8125rem; color: rgba(255,255,250,0.6); }

/* glass form on dark */
.cta-dark .cform {
  background: rgba(227,227,227,0.18); backdrop-filter: blur(1.25rem);
  border: 1px solid rgba(255,255,250,0.14); border-radius: 1.875rem;
  color: var(--cream);
}
.cta-dark .cform label { color: rgba(255,255,250,0.8); }
.cta-dark .cform input[type="text"], .cta-dark .cform input[type="email"], .cta-dark .cform textarea {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,250,0.18); color: var(--cream);
}
.cta-dark .cform input::placeholder, .cta-dark .cform textarea::placeholder { color: rgba(255,255,250,0.45); }
.cta-dark .cform .chips button {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,250,0.18); color: var(--cream);
}
.cta-dark .cform .chips button.is-on { background: var(--green); border-color: var(--green); color: var(--cream); }
.cta-dark .cform .chips button .rb { border-color: rgba(255,255,250,0.5); }
.cta-dark .cform .lead em { color: rgba(255,255,250,0.6); }
.cta-dark .cform .note { color: rgba(255,255,250,0.55); }
.cta-dark .cform .btn--dark { background: var(--cream); color: var(--dark); }
.cta-dark .cform .btn--dark .fill { background: var(--green); }
.cta-dark .cform .btn--dark:hover { color: var(--cream); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .cta-dark .in { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .cases-hero { padding: 8.125rem 1.25rem 0; }
  .feat { grid-template-columns: 1fr; }
  .feat__photo { height: 18.75rem; }
  .cgrid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ccard__img { height: 20rem; }
  .feat__side { grid-template-columns: 1fr; }
  .feat__side .qq { padding: 0 1.875rem 1.5rem; }
  .feat__metrics .v { font-size: 2.75rem; }
}

/* ---------- case hero: bright product shot ---------- */
/* the bare wordmark was made for the dark Kora photo; on a light mockup it
   lands on the phone screen and stops being readable, so it gets the same
   frosted pill as the cover badges. it stays centred — the pill is what
   carries the contrast — and drops to the foot of the frame so it isn't
   sitting in the middle of the phone UI. */
.cs-shell__photo .feat__logo,
.feat__photo .feat__logo {
  left: 50%; top: auto; bottom: 1.875rem; transform: translateX(-50%);
  font-size: 1rem; padding: 0.5rem 0.9375rem; border-radius: 999px;
  background: rgba(36, 36, 36, 0.55);
  -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem);
  text-shadow: none;
}