/* ==========================================================================
   RIA Advisory — FEATURED CASE STUDY  (2026-08-06)

   Client sent a reference shot of their existing product-site case study and
   asked for "something like this, animation smooth — not exact same but like
   this". So this is the same INFORMATION ARCHITECTURE — category tag → title →
   one-line framing → three headline stats → a Before/After comparison where
   "after" is the elevated dark panel → a footnote explaining the maths — but
   rebuilt on this site's tokens and type rather than copied pixel for pixel.

   Deliberate departures from the reference, both driven by standing client
   feedback (see [[ria-client-preferences]]):
     · NO circular decoration. The reference has a quarter-circle in the dark
       panel and a dotted halftone block; the client has twice rejected circles
       and blobs, so the only ornament here is a soft LINEAR corner wash.
     · The dark navy panel STAYS. "No dark sections" means no full-bleed dark
       bands used as a bare design choice — here the dark is the contrast
       device that makes before-vs-after legible at a glance, it is a card not
       a section, and it is exactly what the client's own reference does.

   MOTION: no new JS. The card hooks into the two mechanisms round3-final.js
   already provides — `[data-r]` (adds `.in` once the element scrolls into
   view) and `[data-count]` (count-up, which self-guards for reduced motion and
   has a 3s set-final safety net). The Before/After panels slide in from
   opposite sides off the wrapper's `.in`, which is what gives the section its
   "smooth" arrival without any bespoke observer.

   RULES: clamp()/calc() need SPACES around +/- ; grid/flex text kids need
   min-width: 0.
   ========================================================================== */

.cs-feat { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line);
  border-radius: 22px; padding: clamp(1.5rem, 1.1rem + 2vw, 3rem);
  box-shadow: 0 40px 80px -58px rgba(11,24,48,.42); }

/* Corner wash — linear, never radial, so it can't read as a blob. */
.cs-feat::before { content: ""; position: absolute; top: 0; left: 0; z-index: 0;
  width: min(48%, 460px); height: min(52%, 340px); pointer-events: none;
  background: linear-gradient(142deg, rgba(247,148,31,.11), rgba(247,148,31,.03) 46%, rgba(247,148,31,0) 74%); }
.cs-feat > * { position: relative; z-index: 1; }

.cs-feat__tag { display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono, monospace); font-size: .7rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--sky); }
.cs-feat__tag svg { width: 14px; height: 14px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.cs-feat__tag:hover svg { transform: translateX(4px); }

.cs-feat h3 { font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.15rem); line-height: 1.14;
  letter-spacing: -.026em; margin: .8rem 0 .6rem; }
.cs-feat__sub { color: var(--slate); font-size: 1rem; line-height: 1.64; max-width: 72ch; }

/* --------------------------------------------------------------------------
   HEADLINE STATS — one bordered rail, hairline dividers between cells.
   -------------------------------------------------------------------------- */
/* Explicit reset: the shared stylesheets only strip markers from some list
   contexts, so without this the stat cells render stray bullets. */
.cs-feat__stats, .cs-ba__ul { list-style: none; margin-left: 0; padding-left: 0; }
.cs-feat__stats li, .cs-ba__ul li { list-style: none; }

.cs-feat__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(1.4rem, 1.1rem + 1.1vw, 2.2rem) 0; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; }
.cs-feat__stats li { min-width: 0; text-align: center; border-left: 1px solid var(--line);
  padding: clamp(1rem, .85rem + .7vw, 1.6rem) 1rem; }
.cs-feat__stats li:first-child { border-left: 0; }
.cs-feat__stats b { display: block; font-family: var(--font-display, inherit);
  font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.7rem); line-height: 1;
  letter-spacing: -.022em; color: var(--sky); font-variant-numeric: tabular-nums; }
/* Direct child only. A bare `.cs-feat__stats span` would also catch the
   count-up's inner `<span class="value">`, which shrinks the figure to label
   size and pushes the "%" onto its own line. */
.cs-feat__stats > li > span { display: block; margin-top: .5rem; font-size: .86rem; line-height: 1.4; color: var(--slate); }
.cs-feat__stats b .value { display: inline; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.cs-feat__stats em { font-style: normal; opacity: .68; }

/* --------------------------------------------------------------------------
   BEFORE / AFTER — the "after" panel overlaps and lifts above "before", so the
   improvement reads as literally on top of the old way of working.
   -------------------------------------------------------------------------- */
.cs-ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.cs-ba__col { min-width: 0; border-radius: 16px; padding: clamp(1.2rem, 1rem + .9vw, 1.9rem);
  opacity: 0; transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.cs-ba__col--before { background: #e7ecf2; color: var(--ink); transform: translateX(-26px); }
.cs-ba__col--after { background: var(--navy); color: #fff; transform: translateX(26px);
  box-shadow: 0 34px 64px -30px rgba(11,24,48,.62); }
/* Driven off the CARD's `.in`, not the `.cs-ba` wrapper's.
   `.cs-ba` must NOT carry [data-r]: this site's reveal applies
   `clip-path: inset(0px)`, and clip-path clips to the element's own box even
   at inset(0) — which silently ate the "after" panel's 13px lift above and
   below, its rounded right corners and its whole drop shadow, making the
   comparison render flat and flush. The card is a safe trigger because it
   already has overflow:hidden and fully contains both panels. */
.cs-feat.in .cs-ba__col { opacity: 1; transform: none; }
.cs-feat.in .cs-ba__col--after { transition-delay: .12s; }

@media (min-width: 861px) {
  .cs-ba__col--before { padding-right: 3rem; }
  .cs-ba__col--after { position: relative; z-index: 2; margin-left: -1.7rem; margin-block: -.8rem; }
}

.cs-ba__k { font-family: var(--font-mono, monospace); font-size: .62rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; opacity: .7; }
.cs-ba__col h4 { font-size: 1.1rem; letter-spacing: -.012em; margin: .45rem 0 1.05rem; }
/* round3-final.css sets `.r3 h1,.r3 h2,.r3 h3,.r3 h4 { color: var(--ink) }`,
   which beats the white inherited from `.cs-ba__col--after` and left this
   heading dark-on-navy (unreadable). The snip gallery never showed the bug
   because that page doesn't load round3-final.css. Must be explicit here. */
.cs-ba__col--after h4 { color: #fff; }
.cs-ba__col--before h4 { color: var(--ink); }
.cs-ba__ul li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem;
  line-height: 1.5; margin-bottom: .68rem; }
.cs-ba__ul li:last-child { margin-bottom: 0; }
/* font-style: normal — these carry a bullet glyph (&#9679;), not an icon font,
   so the default italic <i> would skew them. Matches the snip Option 02 build. */
.cs-ba__ul i { flex: none; margin-top: .18rem; font-size: .84rem; font-style: normal; }
.cs-ba__col--before .cs-ba__ul i { color: #c2563c; }
.cs-ba__col--after .cs-ba__ul i { color: #7ed3a5; }

/* --------------------------------------------------------------------------
   FOOTNOTE — where the numbers come from. Keeps the stats honest.
   -------------------------------------------------------------------------- */
.cs-feat__note { display: flex; gap: .8rem; align-items: flex-start;
  margin-top: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem); padding: clamp(.95rem, .85rem + .5vw, 1.3rem);
  background: var(--sky-tint, #eef3f9); border-radius: 12px;
  font-size: .88rem; line-height: 1.62; color: var(--slate); }
.cs-feat__note i { flex: none; margin-top: .18rem; color: var(--orange); font-style: normal; }

/* --------------------------------------------------------------------------
   PLACEHOLDER STATE — used on the industry pages until the client sends their
   real case studies. Same shape, obviously unfinished, no invented numbers.
   Removing [data-placeholder] promotes the card to live.
   -------------------------------------------------------------------------- */
/* 2026-08-06: the placeholder state used to grey the whole card out — dashed
   border, muted copy, a flat grey "After" panel with no shadow. The client
   flagged that it no longer read as the Option 02 design they picked, and they
   were right: killing the shadow also killed the visible overlap, so the two
   panels just butted together. Placeholders now render in the REAL treatment.
   The only cue that a card is unfinished is the em-dash metrics plus the
   "Content coming soon" line below it. */
.cs-feat[data-placeholder] .cs-feat__stats b { color: var(--slate); opacity: .5; }
.cs-soon { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem;
  font-family: var(--font-mono, monospace); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate); opacity: .78; }

@media (max-width: 860px) {
  .cs-ba { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .cs-ba__col--before, .cs-ba__col--after { transform: translateY(20px); }
}
@media (max-width: 620px) {
  .cs-feat__stats { grid-template-columns: minmax(0, 1fr); }
  .cs-feat__stats li { border-left: 0; border-top: 1px solid var(--line); }
  .cs-feat__stats li:first-child { border-top: 0; }
}

/* ==========================================================================
   OPTION 01 · SPLIT SPOTLIGHT — 2026-08-13
   Client picked Option 01 from the section-snips case-study gallery to replace
   Option 02 (before/after) across every page. Ported from `.cv1-*` in
   section-snips/case-studies.html onto the live token set.

   NOTE the port trap: the snip page does NOT load round3-final.css, so it got
   white/ink heading colours by inheritance. Here `.r3 h1..h4 { color: var(--ink) }`
   wins, so any heading on a tinted or dark surface must be set explicitly.
   ========================================================================== */
.cs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch; background: #fff; border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -60px rgba(11,24,48,.45); }
.cs-split > * { min-width: 0; }

.cs-split__media { position: relative; overflow: hidden; min-height: 420px; }
.cs-split__media img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .9s cubic-bezier(.22,1,.36,1); }
.cs-split:hover .cs-split__media img { transform: scale(1.05); }
/* Linear only — no radial washes anywhere on this project. */
.cs-split__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(29,65,121,.34), rgba(11,24,48,.12) 55%, rgba(247,148,31,.14)); }
.cs-split__badge { position: absolute; left: 1.3rem; bottom: 1.3rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem;
  border-radius: 20px; background: rgba(11,24,48,.6); border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(6px); color: #fff; font-family: var(--font-mono, monospace);
  font-size: .64rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }

.cs-split__copy { display: flex; flex-direction: column;
  padding: clamp(1.6rem, 1.1rem + 2vw, 2.9rem); }
.cs-split__tag { font-family: var(--font-mono, monospace); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.cs-split__copy h3 { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.95rem); line-height: 1.16;
  letter-spacing: -.024em; margin: .7rem 0 .55rem; color: var(--ink); }
.cs-split__sub { color: var(--slate); font-size: .97rem; line-height: 1.62; }

.cs-split__stats { list-style: none; margin: clamp(1.3rem, 1rem + 1vw, 1.9rem) 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs-split__stats li { list-style: none; min-width: 0; border-left: 1px solid var(--line);
  padding: clamp(.95rem, .8rem + .6vw, 1.35rem) .8rem; }
.cs-split__stats li:first-child { border-left: 0; padding-left: 0; }
.cs-split__stats b { display: block; font-family: var(--font-display, inherit); font-weight: 800;
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.35rem); line-height: 1; letter-spacing: -.022em;
  color: var(--navy); font-variant-numeric: tabular-nums; }
/* Direct child only — a bare `span` also catches the count-up's `.value`. */
.cs-split__stats b .value { display: inline; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.cs-split__stats > li > span { display: block; margin-top: .45rem; font-size: .8rem; line-height: 1.4; color: var(--slate); }

.cs-split__out { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.cs-split__out li { list-style: none; display: flex; gap: .6rem; align-items: flex-start;
  font-size: .9rem; line-height: 1.55; color: var(--ink); margin-bottom: .6rem; }
.cs-split__out li:last-child { margin-bottom: 0; }
.cs-split__out i { flex: none; margin-top: .32rem; font-size: .78rem; color: var(--sky); font-style: normal; }

.cs-split__foot { margin-top: auto; display: flex; align-items: center; gap: .5rem;
  font-size: .88rem; font-weight: 600; color: var(--navy); }
.cs-split__foot svg { width: 15px; height: 15px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.cs-split:hover .cs-split__foot svg { transform: translateX(5px); }

/* Placeholder state for .cs-split — mirrors .cs-feat[data-placeholder] above:
   same real treatment, only cue is muted em-dash stats + the .cs-soon badge.
   Used on service pages that don't have a matching published case study yet. */
.cs-split[data-placeholder] .cs-split__stats b { color: var(--slate); opacity: .5; }
.cs-split[data-placeholder] .cs-split__copy .cs-soon { margin-top: 0; margin-bottom: 1.4rem; }

@media (max-width: 900px) {
  .cs-split { grid-template-columns: minmax(0, 1fr); }
  .cs-split__media { min-height: 260px; }
}
@media (max-width: 520px) {
  .cs-split__stats { grid-template-columns: minmax(0, 1fr); }
  .cs-split__stats li { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .cs-split__stats li:first-child { border-top: 0; }
}