/* ============================================================
   TechnBrains — Case Study
   Ported from the QA-approved reference (tnb-claude-v2/case-study.css).
   Page-scoped under body.cs-page; the class is added by tnb_case_study_body_class().

   Loaded only on single case_study — see tnb_case_study_enqueue_assets(). Depends on
   tnb-components and tnb-responsive so it lands after them in the cascade, the same
   arrangement about-v2.css uses.
   ============================================================ */

/* ---------- Reference compat layer ----------
   The reference page loads styles.css before this file and inherits eight element rules
   from it. None exist in the theme, which instead supplies its own bare element rules —
   and Bootstrap's reboot is loaded here too — so these are replicated or the port drifts
   from what QA approved.

   Scoped to `main`, not to body: the theme's header and footer are inside body and must
   keep their own margins, padding and link colours.

   SPECIFICITY IS THE WHOLE POINT OF THIS BLOCK. In the reference these are bare element
   rules — `*` at (0,0,0) and `p`, `a`, `img`, `h1`-`h5` at (0,0,1) — so they sit *below*
   every one of case-study.css's own class rules. Scoping them has to preserve that
   position, otherwise the reset beats the design: an earlier version of this layer used
   `.cs-page main *` at (0,1,1), which outranks `.cs-section { padding: … }` at (0,1,0) and
   silently zeroed the padding of every section on the page.

   So the scope goes in `:where()`, which contributes no specificity, leaving each rule at
   (0,0,2) — one step above any bare element rule from the theme or Bootstrap, and still
   below every `.cs-*` rule below. `:not(svg, svg *)` is (0,0,1) rather than (0,0,0), which
   is what lifts the blanket reset clear of Bootstrap's `p { margin-bottom: 1rem }` without
   depending on enqueue order.

   box-sizing is not reset: the parent theme already sets html{box-sizing:border-box} plus
   *{box-sizing:inherit}, which already matches the reference. */
:where(.cs-page) main,
:where(.cs-page) main :not(svg, svg *) { margin: 0; padding: 0; }
:where(.cs-page) main {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The reference's html/body set no line-height, so everything inherits `normal`. The theme
     sets 24px on body, which lengthened all 226 text elements on the page. */
  line-height: normal;
  /* styles.css --fs-b2, the reference's default paragraph size, with its 900px step. */
  --cs-fs-b2: 20px;
}
:where(.cs-page) main a { color: inherit; text-decoration: none; }
/* The theme sets font-size and line-height on button; the reference leaves both at the
   browser's own button defaults. That is not cosmetic — the font-size sets the line box's
   strut, which made each solution tab 4px taller than approved. `revert` asks for exactly
   what the reference gets, the user-agent value, rather than hardcoding one browser's
   number. font-family stays `inherit` because that is what the reference declares. */
:where(.cs-page) main button {
  font-family: inherit;
  font-size: revert;
  line-height: revert;
  cursor: pointer; border: none; background: none;
}
:where(.cs-page) main img { display: block; max-width: 100%; }
:where(.cs-page) main :is(h1, h2, h3, h4, h5) {
  font-family: 'Outfit', system-ui, sans-serif;
  color: #0C2340;              /* styles.css --navy */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
/* styles.css balances every h2 against a 22ch measure. Dropping it let the Impact and
   Engagement headings run a line wider than the approved design. */
:where(.cs-page) main h2 { white-space: normal; text-wrap: balance; max-width: 22ch; }
/* styles.css overrides h3 on its own, after the grouped rule above: 1.2 rather than 1.05. The
   solution panel headings are bare h3s with no class rule, so this is the only thing setting
   them — at 1.05 each panel came out 3.9px short, which the grid then took off the tab rail. */
:where(.cs-page) main h3 { line-height: 1.2; }
/* The reference's later `p` rule wins over its own earlier `p { font-size: 17px }`: the
   effective baseline is --fs-b2 at weight 500, line-height 1.55. */
:where(.cs-page) main p { font-size: var(--cs-fs-b2); font-weight: 500; line-height: 1.55; }
@media (max-width: 900px) {
  :where(.cs-page) main { --cs-fs-b2: 18px; }
}

body.cs-page {
  background: #FFFFFF;
  color: #111111;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

.cs-page {
  --cs-red: #EC1C24;
  --cs-navy: #0C2340;
  --cs-ink: #111111;
  --cs-mute: #555555;
  --cs-mute2: #666666;
  --cs-line: #E5E5E5;
  --cs-gray: #F7F7F8;
  --cs-gray2: #FAFAFA;
  --cs-dark: #07111F;
  --cs-gap: 72px;          /* ~100px section rhythm */
  --cs-cw: 1200px;          /* readable content width */
  --cs-gutter: 92px;        /* narrative gutter room for the thread */
  /* Set at runtime by the reference's tweaks panel (reelSpeed 25) and measured as 25s on
     the approved page. Its only consumer is the csScreensSlide reel on
     .cs-about-screens-track, which these three case studies do not use — the logo
     marquee has its own hardcoded 38s. Declared so the value is not lost if that reel is
     ever used; remove it together with .cs-about-screens-track if that rule is trimmed. */
  --cs-reel-dur: 25s;
}

.cs-wrap { max-width: var(--cs-cw); margin: 0 auto; padding: 0 40px; }

/* ---------- Typography ---------- */
.cs-h1 {
  font-size: clamp(44px, 6vw, 75px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--cs-ink);
}
.cs-h2 {
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--cs-ink);
  text-wrap: balance;
  text-transform: capitalize;
}
.cs-h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--cs-ink);
}
.cs-lead { font-size: clamp(20px, 2vw, 25px); font-weight: 500; line-height: 1.5; color: var(--cs-navy); }
.cs-body { font-size: 20px; font-weight: 400; line-height: 1.62; color: var(--cs-mute); }
.cs-body-sm { font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--cs-mute); }
.cs-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cs-red);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.cs-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--cs-red); display: inline-block; }

/* ---------- Nav — transparent over dark hero (homepage style) ---------- */
.cs-page .nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(90deg, #1a0507 0%, #0a0a12 45%, #0a1424 100%);
  border-bottom: none;
  padding: 22px 40px;
  z-index: 100;
}
.cs-page .nav-logo img { height: 36px; }
.cs-page .nav-links a { color: rgba(255,255,255,0.82); font-weight: 500; }
.cs-page .nav-links a:hover { color: var(--cs-red); }
.cs-page .nav-cta .btn-primary { width: auto; height: 46px; padding: 0 22px; border-radius: 6px; }
.cs-page .btn-primary:hover { background: var(--cs-red); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(236,28,36,0.5); }

/* ---------- Buttons (page-local refinements) ---------- */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 30px; border-radius: 8px;
  font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: 0.005em;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}
.cs-btn-primary { background: var(--cs-red); color: #fff; }
.cs-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(236,28,36,0.55); }
.cs-btn-secondary { background: transparent; color: var(--cs-ink); border-color: #C9CBD1; }
.cs-btn-secondary:hover { border-color: var(--cs-red); color: var(--cs-red); box-shadow: 0 12px 30px -16px rgba(12,35,64,0.4); }
.cs-btn-secondary.on-dark { color: #fff; border-color: rgba(255,255,255,0.3); }
.cs-btn-secondary.on-dark:hover { border-color: var(--cs-red); color: #fff; box-shadow: 0 12px 30px -12px rgba(236,28,36,0.5); }
.cs-btn .arr { transition: transform 0.25s ease; }
.cs-btn:hover .arr { transform: translateX(4px); }

/* ---------- HERO ---------- */
.cs-hero { padding: 116px 0 96px; position: relative; }
.cs-hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cs-navy); background: var(--cs-gray); border: 1px solid var(--cs-line);
  padding: 9px 16px; border-radius: 100px; margin-bottom: 30px;
}
.cs-hero-tag .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--cs-red); box-shadow: 0 0 10px rgba(236,28,36,0.6); }
.cs-hero h1 { max-width: 1040px; }
.cs-hero h1 .hl { color: var(--cs-red); }
.cs-hero-sub { margin-top: 30px; max-width: 720px; }
.cs-hero-meta {
  margin-top: 46px; display: flex; flex-wrap: wrap; gap: 14px 40px;
  padding-top: 30px; border-top: 1px solid var(--cs-line);
}
.cs-hero-meta .mi { display: flex; flex-direction: column; gap: 4px; }
.cs-hero-meta .mi .k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-mute2); font-weight: 600; }
.cs-hero-meta .mi .v { font-size: 18px; font-weight: 600; color: var(--cs-navy); }

/* ================= RICH DARK HERO (Narrative Spine) ================= */
.cs-hero--rich {
  background: #0A0A0B;
  color: #fff;
  padding: 132px 0 104px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cs-hero--rich .cs-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.cs-hero-layout {
  position: relative; z-index: 2;
  display: block;
}
.cs-hero-phonewrap { display: flex; justify-content: center; }
/* animated Spruce logo spark */
.cs-hero-spark { position: relative; width: 300px; height: 300px; display: grid; place-items: center; }
.cs-hero-spark img {
  width: 220px; height: auto; position: relative; z-index: 2;
  animation: csSparkTwinkle 5s ease-in-out infinite, csSparkFloat 8s ease-in-out infinite;
  filter: drop-shadow(0 18px 40px rgba(45,158,117,0.45));
}
.cs-hero-spark-glow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(45,158,117,0.32) 0%, transparent 65%);
  animation: csSparkGlow 5s ease-in-out infinite;
}
@keyframes csSparkTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.92; }
  50% { transform: scale(1.14) rotate(8deg); opacity: 1; }
}
@keyframes csSparkFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -16px; } }
@keyframes csSparkGlow { 0%,100% { opacity: 0.45; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .cs-hero-spark img, .cs-hero-spark-glow { animation: none; } }
.cs-hero-phone-device {
  position: relative; width: 278px; padding: 10px; background: #0b0f17;
  border-radius: 44px; box-shadow: 0 50px 90px -40px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.08);
  animation: csPhoneBob 7s ease-in-out infinite;
}
@keyframes csPhoneBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.cs-hero-phone-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 92px; height: 22px; background: #0b0f17; border-radius: 0 0 14px 14px; z-index: 2; }
.cs-hero-phone-screen { position: relative; height: 540px; border-radius: 34px; overflow: hidden; background: #fff; }
.cs-hero-phone-track { display: flex; flex-direction: column; animation: csPhoneScroll 18s linear infinite; }
.cs-hero-phone-track img { width: 100%; display: block; }
.cs-hero-phonewrap:hover .cs-hero-phone-track { animation-play-state: paused; }
@keyframes csPhoneScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .cs-hero-phone-device { animation: none; } .cs-hero-phone-track { animation: none; } }
.cs-hero-shot { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.cs-hero-shot .cs-about-tablet { display: block; width: 100%; max-width: 480px; }
.cs-hero-shot .cs-about-tablet img { display: block; width: 100%; height: auto; }
.cs-hero-shot .cs-about-phone { position: absolute; left: 0; bottom: -10px; width: 160px; z-index: 2; }
.cs-hero-shot .cs-about-phone img { display: block; width: 100%; height: auto; }
/* proptech background image */
.cs-hero--rich .cs-hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.2;
}
.cs-hero--rich .cs-hero-photo-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,11,0.9) 0%, rgba(10,10,11,0.6) 55%, rgba(10,10,11,0.4) 100%);
}
/* dark-surface overrides for the existing text elements */
.cs-hero--rich .cs-h1 { font-size: clamp(34px, 4vw, 46px); font-weight: 600; line-height: 1.18; max-width: 880px; color: #fff; letter-spacing: -0.02em; }
.cs-hero-centered { text-align: center; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.cs-hero-centered .cs-h1 { max-width: 940px; }
.cs-h1-lead { display: block; font-weight: 700; }
.cs-h1-rest { display: block; font-weight: 500; margin-top: 4px; font-size: 0.72em; }
.cs-hero-centered .cs-hero-lede { margin-left: auto; margin-right: auto; }
.cs-hero-centered .cs-hero-formats { justify-content: center; }
.cs-hero-formats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cs-hero-format {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  padding: 9px 16px; border-radius: 100px;
}
.cs-hero-format svg { color: var(--cs-red); }
/* attractive hero additions */
.cs-hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16); padding: 9px 18px; border-radius: 100px; margin-bottom: 24px;
}
.cs-hero-tag .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-red); box-shadow: 0 0 0 0 rgba(236,28,36,0.6); animation: csHeroPip 1.9s ease-out infinite; }
@keyframes csHeroPip { 0% { box-shadow: 0 0 0 0 rgba(236,28,36,0.5); } 100% { box-shadow: 0 0 0 9px rgba(236,28,36,0); } }
.cs-hero-lede { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.66); max-width: 620px; margin: 22px 0 0; }
.cs-hero-stats { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.12); }
.cs-hero-stat { display: flex; flex-direction: column; gap: 6px; }
.cs-hero-stat .n { font-family: 'Outfit', system-ui, sans-serif; font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: #fff; }
.cs-hero-stat .n i { font-style: normal; font-size: 24px; color: var(--cs-red); margin-left: 2px; }
.cs-hero-stat .l { font-size: 13.5px; color: rgba(255,255,255,0.55); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .cs-hero-tag .pip { animation: none; } }
@media (max-width: 600px) { .cs-hero-stats { gap: 24px; } .cs-hero-stat .n { font-size: 34px; } }
.cs-hero--rich .cs-hero-tag { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.78); }
.cs-hero--rich .cs-hero-sub { color: rgba(255,255,255,0.66); margin-top: 26px; max-width: 720px; }
.cs-hero--rich .cs-hero-meta { border-top-color: rgba(255,255,255,0.12); margin-top: 40px; }
.cs-hero--rich .cs-hero-meta .mi .k { color: rgba(255,255,255,0.45); }
.cs-hero--rich .cs-hero-meta .mi .v { color: #fff; }

/* ---- Visual: operations console ---- */
.cs-hero-visual { position: relative; padding: 60px 8px 42px; }
.cs-hero-visual * { box-sizing: border-box; }
.cs-hv-console {
  position: relative; z-index: 2;
  width: 100%; max-width: 440px; margin: 0 auto;
  background: linear-gradient(165deg, rgba(20,28,42,0.96), rgba(9,13,22,0.96));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px; padding: 22px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: csFloat 8s ease-in-out infinite;
}
@keyframes csFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.cs-hv-console-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cs-hv-prop { display: flex; align-items: center; gap: 12px; }
.cs-hv-prop-ic {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--cs-red);
  background: rgba(236,28,36,0.12); border: 1px solid rgba(236,28,36,0.28);
}
.cs-hv-prop-ic svg { width: 22px; height: 22px; }
.cs-hv-prop-name { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.cs-hv-prop-sub { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.cs-hv-status {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #6FE0A6;
  background: rgba(45,158,117,0.14); border: 1px solid rgba(45,158,117,0.3);
  padding: 5px 10px; border-radius: 100px;
}
.cs-hv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.cs-hv-tile {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px; padding: 14px;
}
.cs-hv-tile-k { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.45); font-weight: 600; }
.cs-hv-tile-v { font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-top: 6px; line-height: 1; }
.cs-hv-tile-v.cs-down { color: #6FE0A6; }
.cs-hv-tile-v .cs-pct { font-size: 17px; }
.cs-hv-tile-note { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 5px; }
.cs-hv-spark { margin-top: 8px; height: 22px; color: var(--cs-red); }
.cs-hv-spark svg { width: 100%; height: 100%; }
.cs-hv-spark polyline { stroke-dasharray: 240; stroke-dashoffset: 240; animation: csDraw 2.4s ease forwards 0.4s; }
@keyframes csDraw { to { stroke-dashoffset: 0; } }

.cs-hv-cap { margin-top: 16px; }
.cs-hv-cap-top { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
.cs-hv-cap-val { color: #fff; font-weight: 600; }
.cs-hv-cap-bar { height: 8px; border-radius: 100px; background: rgba(255,255,255,0.08); overflow: hidden; }
.cs-hv-cap-fill {
  display: block; height: 100%; width: 72%; border-radius: 100px;
  background: linear-gradient(90deg, var(--cs-red), #ff5a60);
  transform-origin: left; animation: csCapFill 2.2s cubic-bezier(.2,.8,.2,1) forwards 0.5s; transform: scaleX(0);
}
@keyframes csCapFill { to { transform: scaleX(1); } }

.cs-hv-flow { margin-top: 20px; position: relative; }
.cs-hv-flow-rail { position: absolute; top: 5px; left: 6%; right: 6%; height: 2px; background: rgba(255,255,255,0.12); border-radius: 2px; overflow: hidden; }
.cs-hv-flow-pulse { position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--cs-red), transparent); animation: csFlowPulse 2.8s linear infinite; }
@keyframes csFlowPulse { 0% { left: -30%; } 100% { left: 100%; } }
.cs-hv-flow-nodes { display: flex; justify-content: space-between; }
.cs-hv-node { display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 11px; color: rgba(255,255,255,0.62); font-weight: 500; }
.cs-hv-node-dot { width: 12px; height: 12px; border-radius: 50%; background: #0b0f17; border: 2px solid rgba(255,255,255,0.25); }
.cs-hv-node:nth-child(1) .cs-hv-node-dot { border-color: var(--cs-red); background: var(--cs-red); box-shadow: 0 0 0 4px rgba(236,28,36,0.16); }

/* ---- Floating accent chips ---- */
.cs-hv-chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 9px;
  background: rgba(16,22,34,0.92); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 100px;
  padding: 9px 15px; font-size: 13px; font-weight: 500; color: #fff;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.8);
}
.cs-hv-chip-live { top: 4px; left: 0; animation: csFloat 7s ease-in-out infinite 0.4s; }
.cs-hv-livedot { width: 8px; height: 8px; border-radius: 50%; background: #6FE0A6; box-shadow: 0 0 0 0 rgba(111,224,166,0.6); animation: csLive 1.8s ease-out infinite; }
@keyframes csLive { 0% { box-shadow: 0 0 0 0 rgba(111,224,166,0.5); } 100% { box-shadow: 0 0 0 10px rgba(111,224,166,0); } }
.cs-hv-chip-team { bottom: 0; left: -8px; animation: csFloat 9s ease-in-out infinite 0.8s; }
.cs-hv-avatars { display: inline-flex; }
.cs-hv-av { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #101622; margin-left: -8px; }
.cs-hv-av:first-child { margin-left: 0; }
.cs-hv-av1 { background: linear-gradient(135deg,#EC1C24,#ff6a70); }
.cs-hv-av2 { background: linear-gradient(135deg,#1A4A8C,#3b82f6); }
.cs-hv-av3 { background: linear-gradient(135deg,#2D9E75,#6FE0A6); }
.cs-hv-team-label { font-size: 12.5px; color: rgba(255,255,255,0.8); }
.cs-hv-chip-eff { top: 26px; right: -4px; animation: csFloat 8s ease-in-out infinite 0.2s; }
.cs-hv-chip-eff strong { color: #fff; font-weight: 700; }
.cs-hv-eff-up { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #6FE0A6; background: rgba(45,158,117,0.16); }
.cs-hv-eff-up svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .cs-hv-console, .cs-hv-chip,
  .cs-hv-flow-pulse, .cs-hv-livedot,
  .cs-hv-cap-fill, .cs-hv-spark polyline { animation: none; }
  .cs-hv-cap-fill { transform: scaleX(1); }
  .cs-hv-spark polyline { stroke-dashoffset: 0; }
}
@media (max-width: 1000px) {
  .cs-hero-layout { grid-template-columns: 1fr; gap: 48px; }
  .cs-hero-phonewrap { order: -1; }
  .cs-hero-shot { min-height: 0; }
  .cs-hero-visual { min-height: 400px; margin-top: 10px; }
  .cs-hv-chip-eff { right: 6px; }
  .cs-hv-chip-live { left: 6px; }
  .cs-hv-chip-team { left: 4px; }
}
@media (max-width: 540px) {
  .cs-hero--rich { padding: 96px 0 72px; }
  .cs-hv-chip-eff { right: -2px; bottom: 80px; }
}

/* ---------- ABOUT (dark, product-visual reference) ---------- */
.cs-about-dark { background: #FFFFFF; color: var(--cs-ink); overflow: hidden; }
.cs-about-dark .cs-eyebrow { color: var(--cs-red); }
.cs-about-dark .cs-eyebrow::before { background: var(--cs-red); }
.cs-about-dark .cs-h2 { color: var(--cs-navy); max-width: 820px; margin-top: 4px; }
.cs-about-dark-top {
  display: block;
}
.cs-about-shot {
  position: relative; margin: 0; width: 100%; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.cs-about-tablet { display: block; width: 100%; max-width: 520px; }
.cs-about-devices { display: block; width: 100%; height: auto; }
.cs-about-tablet img { display: block; width: 100%; height: auto; }
.cs-about-phone { position: absolute; left: -14px; bottom: -28px; width: 180px; z-index: 2; }
.cs-about-phone img { display: block; width: 100%; height: auto; }
.cs-about-dark-copy { max-width: none; margin-top: 0; display: flex; flex-direction: column; gap: 18px; }
.cs-about-dark-copy .cs-eyebrow { margin-bottom: 0; }
.cs-about-dark-copy .cs-h2 { margin: 2px 0 10px; max-width: none; }
.cs-about-dark-copy p { font-size: 22px; line-height: 1.7; color: var(--cs-mute); margin: 0; max-width: none; }
.cs-about-dark .cs-ink-red { color: var(--cs-red); }
/* Screens marquee — continuous left-to-right scroll */
.cs-about-screens {
  margin-top: 60px;
  overflow: hidden;
  width: 100%;
}
.cs-about-screens-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  padding: 30px 0;
  animation: csScreensSlide var(--cs-reel-dur, 60s) linear infinite;
}
.cs-about-screens-track .cs-screen {
  display: block;
  height: 540px;
  width: auto;
  flex: 0 0 auto;
  border-radius: 24px;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9);
}
@keyframes csScreensSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes csScreenFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-22px); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-about-screens-track { animation: none; }
  .cs-about-screens-track .cs-screen { animation: none; }
}
@media (max-width: 760px) {
  .cs-about-screens { margin-top: 40px; }
  .cs-about-screens-track .cs-screen { height: 400px; }
}
.cs-about-dark-visual { position: relative; margin-top: 60px; display: flex; justify-content: center; }
.cs-about-mockup {
  display: block; width: 100%; max-width: 620px; height: auto;
}
.cs-about-glow {
  position: absolute; z-index: 0;
  width: 75%; height: 90%; top: 5%; left: 12%;
  background: radial-gradient(ellipse at center, rgba(236,28,36,0.16) 0%, transparent 65%);
  filter: blur(20px); pointer-events: none;
}
.cs-about-dark-visual img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* CSS laptop mockup (floating over dark) */
.cs-about-laptop { position: relative; z-index: 1; width: 100%; max-width: 860px; }
.cs-about-laptop-lid {
  background: linear-gradient(180deg, #1c1d21 0%, #131418 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 50px 100px -50px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
}
.cs-about-laptop-screen {
  border-radius: 7px; overflow: hidden; aspect-ratio: 16 / 10;
  background: #000;
}
.cs-about-laptop-base {
  position: relative;
  width: 114%; margin-left: -7%; height: 16px;
  background: linear-gradient(180deg, #c6cad1 0%, #9aa0a9 60%, #7c828c 100%);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 22px 30px -16px rgba(0,0,0,0.7);
}
.cs-about-laptop-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 92px; height: 7px;
  background: linear-gradient(180deg, #6f757e, #565b63);
  border-radius: 0 0 8px 8px;
}
@media (max-width: 760px) {
  .cs-about-dark-top { grid-template-columns: 1fr; gap: 24px; }
  .cs-about-dark-copy p { font-size: 16px; }
  .cs-about-dark-visual { margin-top: 40px; }
}

/* ---------- Section scaffolding ---------- */
.cs-section { padding: var(--cs-gap) 0; }
.cs-section.gray { background: var(--cs-gray); }
.cs-section-head { max-width: 860px; margin-bottom: 56px; }
.cs-section-head .cs-h2 + .cs-body { margin-top: 22px; }

/* ---------- SNAPSHOT ---------- */
.cs-snapshot-card {
  background: #fff; border: 1px solid var(--cs-line); border-radius: 24px;
  padding: 14px; box-shadow: 0 30px 70px -50px rgba(12,35,64,0.4);
}
.cs-snap-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--cs-line); border-radius: 16px; overflow: hidden;
}
.cs-snap-cell { background: #fff; padding: 26px 26px; }
.cs-snap-cell.wide { grid-column: span 3; }
.cs-snap-cell.half { grid-column: span 2; }
.cs-snap-k { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cs-mute2); font-weight: 600; display: flex; align-items: center; gap: 9px; }
.cs-snap-k .ic { color: var(--cs-red); display: inline-flex; }
.cs-snap-v { margin-top: 12px; font-size: 19px; font-weight: 600; color: var(--cs-navy); line-height: 1.4; }
.cs-snap-v.small { font-size: 16px; font-weight: 500; color: var(--cs-ink); line-height: 1.55; }

/* Pills */
.cs-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cs-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--cs-navy);
  background: var(--cs-gray); border: 1px solid var(--cs-line);
  padding: 8px 15px; border-radius: 100px; transition: all 0.2s ease;
}
.cs-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cs-red); }
.cs-pill:hover { border-color: rgba(236,28,36,0.4); transform: translateY(-1px); }

/* ---------- ABOUT (two-col editorial) ---------- */
.cs-about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.cs-about-grid .cs-body + .cs-body { margin-top: 22px; }
.cs-about-aside {
  border-left: 2px solid var(--cs-red); padding-left: 26px;
}
.cs-about-aside .big { font-size: clamp(40px, 4vw, 56px); font-weight: 700; color: var(--cs-navy); letter-spacing: -0.02em; line-height: 1; }
.cs-about-aside .cap { margin-top: 12px; font-size: 17px; color: var(--cs-mute); line-height: 1.5; }
.cs-about-aside + .cs-about-aside { margin-top: 38px; }

/* ---------- PLATFORM SCALE (Industries "Why Choose Us" clean style) ---------- */
.cs-scale-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Platform Scale marquee slider (right -> left) */
.cs-scale-marquee { margin-top: 52px; }
.cs-scale-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; width: auto; }
.cs-scale-track .cs-scale-card[aria-hidden="true"] { display: none; }
.cs-scale-marquee .cs-scale-card { margin: 0; }
@media (max-width: 900px) { .cs-scale-track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cs-scale-track { grid-template-columns: 1fr; } }
.cs-head-center { text-align: center; margin-left: auto; margin-right: auto; }
.cs-head-center .cs-eyebrow { justify-content: center; }
.cs-outcomes-head { margin-bottom: 36px; }
.cs-outcomes-head .cs-body { margin-top: 18px; max-width: 820px; }
.cs-scale-card {
  background: #fff; border: 1px solid var(--cs-line); border-radius: 18px;
  padding: 26px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cs-scale-card:hover { transform: translateY(-4px); border-color: rgba(236,28,36,0.4); box-shadow: 0 22px 48px -30px rgba(12,35,64,0.45); }
.cs-scale-ic {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; color: var(--cs-red);
  background: rgba(236,28,36,0.07); border: 1px solid rgba(236,28,36,0.16);
  margin-bottom: 16px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.cs-scale-card:hover .cs-scale-ic { border-color: rgba(236,28,36,0.4); background: rgba(236,28,36,0.1); }
.cs-scale-card p { font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--cs-ink); margin: 0; }

/* ---------- QUOTE / REVIEW (photo left, quote box right) ---------- */
.cs-review {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  align-items: center;
  gap: 48px;
  max-width: 1140px;
  margin: 0 auto;
}
.cs-review-photo { aspect-ratio: 1 / 1; border-radius: 50%; }
.cs-review-figure { margin: 0; }
.cs-review-photo {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #e9eaee;
}
.cs-review-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-review-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  text-align: left;
}
.cs-review-divider { height: 1px; background: var(--cs-line); margin: 28px 0 0; }
/* ---------- PROBLEM & SOLUTION (dark, arc flow) ---------- */
.cs-ps { background: #0A0A0B; color: #fff; padding: var(--cs-gap) 0; position: relative; overflow: hidden; }
.cs-ps-head { text-align: center; max-width: 880px; margin: 0 auto 56px; }
.cs-ps-head .cs-eyebrow { color: #EC1C24; justify-content: center; }
.cs-ps-head .cs-eyebrow::before { background: #EC1C24; }
.cs-ps-head .cs-h2 { color: #fff; }
.cs-ps-lead { margin-top: 18px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 680px; margin-left: auto; margin-right: auto; }
.cs-ps-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 52px; align-items: center; position: relative; }
.cs-ps-problems { background: #141418; border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 30px; }
.cs-ps-problems-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cs-ps-problems-head h3 { font-size: 26px; font-weight: 600; color: #fff; letter-spacing: -0.02em; }
.cs-ps-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.cs-ps-problems-sub { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.5); margin-bottom: 22px; }
.cs-ps-plist { display: flex; flex-direction: column; gap: 10px; }
.cs-ps-problem { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 16px 18px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.74); }
.cs-ps-solutions { position: relative; display: flex; flex-direction: column; gap: 24px; }
.cs-ps-arcs { position: absolute; top: -50px; bottom: -50px; left: -28%; width: 90%; height: calc(100% + 100px); pointer-events: none; z-index: 0; }
.cs-ps-sol { position: relative; z-index: 1; background: #121216; border: 1px solid rgba(255,255,255,0.09); border-radius: 20px; padding: 26px 28px; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease; }
.cs-ps-sol::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1.5px; background: linear-gradient(90deg, transparent, #EC1C24, transparent); }
.cs-ps-sol::after { content: ""; position: absolute; top: -70px; left: 50%; transform: translateX(-50%); width: 220px; height: 130px; background: radial-gradient(ellipse, rgba(236,28,36,0.16), transparent 70%); pointer-events: none; }
.cs-ps-sol:hover { transform: translateY(-3px); border-color: rgba(236,28,36,0.35); }
.cs-ps-sol:nth-of-type(2) { margin-left: 0; }
.cs-ps-sol:nth-of-type(3) { margin-left: 0; }
.cs-ps-sol:nth-of-type(4) { margin-left: 0; }
.cs-ps-sol:nth-of-type(5) { margin-left: 0; }
.cs-ps-sol-label { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #EC1C24; margin-bottom: 10px; }
.cs-ps-sol h3 { font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 8px; letter-spacing: -0.015em; }
.cs-ps-sol p {
  font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.6); margin: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transform: translateX(-14px);
  transition: max-height 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.35s ease, transform 0.45s cubic-bezier(.2,.8,.2,1), margin 0.45s ease;
}
.cs-ps-sol:hover p {
  max-height: 160px; opacity: 1; transform: translateX(0); margin-top: 8px;
}
.cs-ps-sol-result {
  margin-top: 0; padding-top: 0; border-top: 1px dashed rgba(255,255,255,0);
  display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: rgba(255,255,255,0.85);
  max-height: 0; opacity: 0; overflow: hidden;
  transform: translateX(-14px);
  transition: max-height 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.35s ease, transform 0.45s cubic-bezier(.2,.8,.2,1), margin 0.45s ease, padding 0.45s ease, border-color 0.45s ease;
}
.cs-ps-sol:hover .cs-ps-sol-result {
  max-height: 160px; opacity: 1; transform: translateX(0); margin-top: 16px; padding-top: 14px; border-top-color: rgba(255,255,255,0.14);
}
.cs-ps-sol-result .arr { color: #EC1C24; font-weight: 700; flex-shrink: 0; }
@media (max-width: 920px) {
  .cs-ps-grid { grid-template-columns: 1fr; gap: 32px; }
  .cs-ps-problems { position: static; }
  .cs-ps-arcs { display: none; }
  .cs-ps-sol:nth-of-type(n) { margin-left: 0; }
}
.cs-review-name { font-size: 19px; font-weight: 600; color: var(--cs-ink); }
.cs-review-role { font-size: 14px; font-weight: 500; color: var(--cs-mute); margin-top: 4px; }
.cs-review-grade { display: flex; align-items: baseline; gap: 10px; }
.cs-review-grade-k { font-size: 13px; font-weight: 500; color: var(--cs-mute); }
.cs-review-grade-v { font-size: 20px; font-weight: 600; color: var(--cs-ink); }
.cs-review-stars { font-size: 13px; letter-spacing: 1px; color: #F5A623; }
.cs-review-box {
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 24px;
  padding: 56px 56px 48px;
  box-shadow: 0 30px 70px -46px rgba(12,35,64,0.45);
  text-align: center;
}
.cs-review-mark {
  display: block;
  font-size: 80px;
  line-height: 0.6;
  color: var(--cs-red);
  font-weight: 700;
  margin-bottom: 18px;
}
.cs-review-quote {
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--cs-navy);
  margin: 0;
  text-wrap: pretty;
}
.cs-review-right { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 820px) {
  .cs-review { grid-template-columns: 1fr; gap: 32px; }
  .cs-review-box { padding: 32px 26px 28px; }
}

/* ============================================================
   NARRATIVE THREAD (shared base)
   ============================================================ */
.cs-narrative { position: relative; }
.cs-thread-svg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5; overflow: visible;
}
.cs-thread-svg path { fill: none; }
.cs-narrative > section, .cs-narrative > .cs-section { position: relative; z-index: 2; }

/* Milestone node markers */
.cs-node {
  position: absolute; top: var(--cs-node-top, 64px);
  width: 18px; height: 18px; z-index: 6;
  display: grid; place-items: center;
}
.cs-node::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--cs-line);
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.cs-node::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cs-line); transition: background 0.4s ease, transform 0.4s ease;
}
.cs-node.lit::before { border-color: var(--cs-red); box-shadow: 0 0 0 6px rgba(236,28,36,0.1); transform: scale(1.05); }
.cs-node.lit::after { background: var(--cs-red); transform: scale(1.25); }
.cs-node--left { left: 44px; }
.cs-node--right { right: 44px; }
.cs-node-label {
  position: absolute; top: -4px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cs-mute2); transition: color 0.4s ease;
}
.cs-node--left .cs-node-label { left: 30px; }
.cs-node--right .cs-node-label { right: 30px; text-align: right; }
.cs-node.lit .cs-node-label { color: var(--cs-red); }

/* give narrative sections gutter room so the thread + nodes sit outside content */
.cs-narrative .cs-wrap { padding-left: var(--cs-gutter); padding-right: var(--cs-gutter); position: relative; }

/* ---------- PROBLEM ---------- */
.cs-prob-intro { max-width: 920px; }
.cs-challenges { margin-top: 46px; display: grid; gap: 0; }
.cs-chal-label { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-navy); margin-bottom: 8px; }
.cs-chal-item {
  display: flex; gap: 20px; align-items: center;
  padding: 22px 4px; border-bottom: 1px solid var(--cs-line);
}
.cs-chal-item:first-of-type { border-top: 1px solid var(--cs-line); }
.cs-chal-num { font-size: 14px; font-weight: 700; color: var(--cs-red); width: 30px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cs-chal-text { font-size: 20px; font-weight: 500; color: var(--cs-ink); line-height: 1.4; }
.cs-prob-paras { margin-top: 50px; max-width: 920px; }
.cs-prob-paras .cs-body + .cs-body { margin-top: 22px; }

/* ---------- SOLUTION ---------- */
.cs-sol-cards { margin-top: 52px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cs-sol-card {
  background: #fff; border: 1px solid var(--cs-line); border-radius: 24px;
  padding: 38px; display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cs-sol-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cs-sol-card:hover { transform: translateY(-5px); border-color: rgba(236,28,36,0.35); box-shadow: 0 34px 70px -42px rgba(12,35,64,0.5); }
.cs-sol-top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.cs-sol-ic { flex-shrink: 0; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; color: var(--cs-red); background: rgba(236,28,36,0.08); border: 1px solid rgba(236,28,36,0.18); }
.cs-sol-card .cs-body { font-size: 18px; }
.cs-sol-result {
  margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--cs-line);
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 17px; font-weight: 600; color: var(--cs-navy); line-height: 1.4;
}
.cs-sol-result .arr { color: var(--cs-red); flex-shrink: 0; font-weight: 700; }
/* ---------- SOLUTION journey (alternating phone + text rows) ---------- */
.cs-soljourney { background: #fff; position: relative; }
.cs-solj-head { max-width: 1060px; margin: 0 auto 24px; text-align: left; }
.cs-solj-head .cs-eyebrow { justify-content: flex-start; }
.cs-solj-head .cs-h2 { margin: 14px 0 18px; max-width: 880px; text-wrap: balance; }
/* ---------- TECHNOLOGY connected ---------- */
.cs-about-scale { margin-top: 48px; }
.cs-about-scale-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FF6168; margin-bottom: 26px; }
.cs-about-scale-label::before { content: ""; width: 22px; height: 2px; background: #FF6168; }
.cs-about-scale-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cs-about-scale-item { padding: 28px 24px 30px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; display: flex; flex-direction: column; gap: 18px; transition: transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .32s ease, border-color .32s ease, background .32s ease; }
.cs-about-scale-item:hover { transform: translateY(-10px) scale(1.03); border-color: rgba(236,28,36,0.55); background: rgba(255,255,255,0.09); box-shadow: 0 22px 44px -18px rgba(236,28,36,0.5); }
.cs-about-scale-item:hover .cs-about-scale-ic { background: rgba(236,28,36,0.2); }
.cs-about-scale-ic { width: 48px; height: 48px; border-radius: 14px; background: rgba(236,28,36,0.12); color: #FF6168; display: inline-flex; align-items: center; justify-content: center; }
.cs-about-scale-ic svg { width: 24px; height: 24px; }
.cs-about-scale-item p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cs-ink); }
@media (max-width: 860px) { .cs-about-scale-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cs-about-scale-grid { grid-template-columns: 1fr; } }

/* ---------- TECHNOLOGY connected ---------- */
.cs-tech2-inner { display: block; max-width: none; }
.cs-tech2-copy .cs-h2 { margin: 0 0 20px; }
.cs-tech2-copy .cs-body + .cs-body { margin-top: 18px; }
.cs-tech2-stack { background: var(--cs-navy); color: #fff; border-radius: 22px; padding: 34px 32px; box-shadow: 0 44px 84px -54px rgba(12,35,64,0.6); }
.cs-tech2-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FF6168; margin-bottom: 20px; }
.cs-tech2-label::before { content: ""; width: 22px; height: 2px; background: #FF6168; }
.cs-tech2-tags { display: flex; flex-direction: column; gap: 12px; }
.cs-tech2-tags span { font-size: 16px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 14px 18px; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.cs-tech2-tags span:hover { background: rgba(236,28,36,0.2); border-color: rgba(236,28,36,0.5); transform: translateX(4px); }
@media (max-width: 860px) { .cs-tech2-inner { grid-template-columns: 1fr; gap: 32px; } .cs-tech2-tags { flex-direction: row; flex-wrap: wrap; } }

/* ---------- WHY PARTNERED: narrative + outcome cards ---------- */
.cs-why2 { margin-top: 8px; }
.cs-why2-narr { max-width: none; }
.cs-why2-narr .cs-h2 { margin: 0 0 20px; }
.cs-why2-narr .cs-body { margin: 0 0 18px; }
.cs-why2-narr .cs-body:last-child { margin-bottom: 0; }
.cs-why2-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-red); margin: 44px 0 20px; }
.cs-why2-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cs-why2-card { background: #fff; border: 1px solid var(--cs-line); border-radius: 20px; padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; min-height: 168px; box-shadow: 0 30px 60pxx -50px rgba(12,35,64,0.45); opacity: 0; transform: translateY(20px); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.cs-why2.in .cs-why2-card { animation: why2In .55s cubic-bezier(.22,1,.36,1) forwards; }
.cs-why2.in .cs-why2-card:nth-child(1) { animation-delay: .05s; }
.cs-why2.in .cs-why2-card:nth-child(2) { animation-delay: .13s; }
.cs-why2.in .cs-why2-card:nth-child(3) { animation-delay: .21s; }
.cs-why2.in .cs-why2-card:nth-child(4) { animation-delay: .29s; }
@keyframes why2In { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cs-why2-card { opacity: 1; transform: none; animation: none !important; } }
.cs-why2-card:hover { transform: translateY(-10px) scale(1.03); border-color: rgba(236,28,36,0.4); box-shadow: 0 44px 84px -44px rgba(236,28,36,0.45); }
.cs-why2-card { transition: transform .4s cubic-bezier(.34,1.56,.64,1), border-color .35s ease, box-shadow .35s ease; }
.cs-why2-card .cs-why2-v { transition: transform .4s cubic-bezier(.34,1.56,.64,1); transform-origin: left center; }
.cs-why2-card:hover .cs-why2-v { transform: scale(1.1); }
.cs-why2.in .cs-why2-card .cs-why2-v { animation: why2Pop .6s cubic-bezier(.34,1.56,.64,1) both; }
.cs-why2.in .cs-why2-card:nth-child(1) .cs-why2-v { animation-delay: .25s; }
.cs-why2.in .cs-why2-card:nth-child(2) .cs-why2-v { animation-delay: .33s; }
.cs-why2.in .cs-why2-card:nth-child(3) .cs-why2-v { animation-delay: .41s; }
.cs-why2.in .cs-why2-card:nth-child(4) .cs-why2-v { animation-delay: .49s; }
@keyframes why2Pop { 0% { opacity: 0; transform: scale(.55); } 60% { opacity: 1; transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cs-why2-card .cs-why2-v { animation: none !important; } }
.cs-why2-v { font-family: 'Outfit', system-ui, sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--cs-red); min-height: 44px; display: flex; align-items: center; }
.cs-why2-v--check { display: inline-flex; }
.cs-why2-v--check svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(236,28,36,0.1); color: var(--cs-red); }
.cs-why2-l { font-size: 15.5px; line-height: 1.5; color: var(--cs-mute); margin-top: 10px; }
.cs-why2-l::first-letter { text-transform: uppercase; }
@media (max-width: 900px) { .cs-why2-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cs-why2-cards { grid-template-columns: 1fr; } }

/* ---------- IMPACT before → after table ---------- */
.cs-ba { max-width: 900px; margin: 44px auto 0; }
.cs-ba-head { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; margin-bottom: 12px; }
.cs-ba-h { padding: 18px 30px; font-family: 'Outfit', system-ui, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 0.01em; color: #fff; text-align: center; border-radius: 14px; }
.cs-ba-h--before { background: var(--cs-navy); }
.cs-ba-h--after { background: var(--cs-red); text-align: center; }
.cs-ba-arrow { display: grid; place-items: center; justify-self: center; color: var(--cs-navy); width: 100%; }
.cs-ba-arrow svg { display: block; margin: 0 auto; }
.cs-ba-row { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: stretch; margin-bottom: 12px; }
.cs-ba-cell { padding: 20px 30px; font-size: 17px; line-height: 1.45; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--cs-line); border-radius: 14px; }
.cs-ba-cell--before { color: var(--cs-mute); background: #fff; }
.cs-ba-cell--after { color: var(--cs-ink); font-weight: 600; background: rgba(236,28,36,0.045); border-color: rgba(236,28,36,0.18); }
.cs-ba-sep { display: grid; place-items: center; justify-self: center; color: var(--cs-red); width: 100%; }
.cs-ba-sep svg { display: block; margin: 0 auto; }
.cs-ba-row:hover .cs-ba-cell--after { background: rgba(236,28,36,0.09); }
@media (max-width: 620px) {
  .cs-ba-head, .cs-ba-row { grid-template-columns: 1fr 40px 1fr; }
  .cs-ba-h, .cs-ba-cell { padding: 14px 12px; font-size: 14px; }
}

/* ---------- SOLUTION v2: interactive rail + stage ---------- */
.cs-solx2 { max-width: 1060px; margin: 44px auto 0; display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 26px; align-items: stretch; }
.cs-solx2-rail { display: flex; flex-direction: column; gap: 12px; }
.cs-solx2-tab { position: relative; display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; cursor: pointer; background: #fff; border: 1px solid var(--cs-line); border-radius: 16px; padding: 18px 20px 18px 22px; font-family: inherit; color: var(--cs-ink); overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.cs-solx2-tab::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--cs-red); transform: scaleY(0); transform-origin: center; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.cs-solx2-tab:hover { border-color: rgba(236,28,36,0.32); background: rgba(236,28,36,0.03); transform: translateX(3px); }
.cs-solx2-tab:hover::before { transform: scaleY(0.5); }
.cs-solx2-tab.is-active { background: #fff; border-color: rgba(236,28,36,0.35); box-shadow: 0 22px 46px -28px rgba(236,28,36,0.5); transform: translateX(6px); }
.cs-solx2-tab.is-active::before { transform: scaleY(1); }
.cs-solx2-tab-n { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; font-family: 'Outfit', system-ui, sans-serif; font-size: 14px; font-weight: 700; color: var(--cs-mute); background: rgba(12,35,64,0.05); transition: color .3s ease, background .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.cs-solx2-tab:hover .cs-solx2-tab-n { background: rgba(236,28,36,0.1); color: var(--cs-red); }
.cs-solx2-tab.is-active .cs-solx2-tab-n { color: #fff; background: var(--cs-red); box-shadow: 0 10px 20px -10px rgba(236,28,36,0.8); transform: scale(1.04); }
.cs-solx2-tab-t { flex: 1; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--cs-mute); transition: color .3s ease; }
.cs-solx2-tab:hover .cs-solx2-tab-t { color: var(--cs-ink); }
.cs-solx2-tab.is-active .cs-solx2-tab-t { color: var(--cs-navy); font-weight: 700; }
.cs-solx2-tab-ar { color: var(--cs-red); opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; display: inline-flex; }
.cs-solx2-tab.is-active .cs-solx2-tab-ar { opacity: 1; transform: none; color: var(--cs-red); }

.cs-solx2-stage { position: relative; background: #fff; border: 1px solid var(--cs-line); border-radius: 24px; overflow: hidden; min-height: 380px; box-shadow: 0 34px 70px -46px rgba(12,35,64,0.45); }
.cs-solx2-panel { position: absolute; inset: 0; padding: 46px 46px 42px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease, visibility .45s; }
.cs-solx2-panel.is-active { opacity: 1; visibility: visible; transform: none; position: relative; }
.cs-solx2-panel.is-active .cs-solx2-ic { animation: solx2In .5s cubic-bezier(.22,1,.36,1) both; }
.cs-solx2-panel.is-active h3 { animation: solx2In .5s cubic-bezier(.22,1,.36,1) .06s both; }
.cs-solx2-panel.is-active > p { animation: solx2In .5s cubic-bezier(.22,1,.36,1) .12s both; }
.cs-solx2-panel.is-active .cs-solx2-res { animation: solx2In .5s cubic-bezier(.22,1,.36,1) .18s both; }
.cs-solx2-panel.is-active .cs-solx2-res-ic { animation: solx2ArrowPop .6s cubic-bezier(.34,1.56,.64,1) .34s both; }
.cs-solx2-panel.is-active .cs-solx2-res::after { content: ""; position: absolute; top: 0; left: -65%; width: 48%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; animation: solx2Sweep 1.05s ease .52s 1; }
.cs-solx2-res:hover .cs-solx2-res-ic { transform: translateX(4px) scale(1.06); }
@keyframes solx2In { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes solx2ArrowPop { 0% { transform: scale(0) rotate(-40deg); } 60% { transform: scale(1.18) rotate(0); } 100% { transform: scale(1) rotate(0); } }
@keyframes solx2Sweep { 0% { left: -65%; opacity: 0; } 18% { opacity: 1; } 60% { opacity: 1; } 100% { left: 125%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cs-solx2-panel.is-active :is(.cs-solx2-ic,h3,p,.cs-solx2-res){ animation: none; } .cs-solx2-panel.is-active .cs-solx2-res-ic, .cs-solx2-panel.is-active .cs-solx2-res::after { animation: none; } }
.cs-solx2-tags { margin-top: auto; padding-top: 26px; border-top: 1px solid var(--cs-line); display: flex; flex-wrap: wrap; gap: 10px; }
.cs-solx2-tags span { font-size: 14px; font-weight: 500; color: var(--cs-ink); background: rgba(12,35,64,0.05); border: 1px solid var(--cs-line); border-radius: 100px; padding: 8px 16px; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.cs-solx2-tags span:hover { background: var(--cs-red); border-color: var(--cs-red); color: #fff; }
.cs-solx2-ic { width: 60px; height: 60px; border-radius: 18px; background: rgba(236,28,36,0.08); color: var(--cs-red); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 22px; transition: transform .3s ease; }
.cs-solx2-stage:hover .cs-solx2-panel.is-active .cs-solx2-ic { transform: translateY(-3px) rotate(-6deg); }
.cs-solx2-ic svg { width: 28px; height: 28px; }
.cs-solx2-ey { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-mute); margin-bottom: 10px; }
.cs-solx2-panel h3 { font-family: 'Outfit', system-ui, sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--cs-ink); margin: 0 0 12px; }
.cs-solx2-panel p { font-size: 18px; line-height: 1.6; color: var(--cs-mute); margin: 0 0 32px; max-width: 460px; }
.cs-solx2-res { position: relative; margin-top: auto; padding: 18px 22px; display: flex; align-items: center; gap: 15px; border: 1px solid rgba(236,28,36,0.22); background: linear-gradient(135deg, rgba(236,28,36,0.1), rgba(236,28,36,0.03)); border-radius: 16px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--cs-navy); overflow: hidden; }
.cs-solx2-res-ic { flex-shrink: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cs-red); color: #fff; box-shadow: 0 9px 18px -8px rgba(236,28,36,0.9); transition: transform .3s ease; }
.cs-solx2-res-ic svg { width: 18px; height: 18px; }
.cs-solx2-res-v { font-family: 'Outfit', system-ui, sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--cs-red); white-space: nowrap; }
.cs-solx2-res-l { font-size: 15px; line-height: 1.5; color: var(--cs-ink); font-weight: 500; }
@media (max-width: 860px) {
  .cs-solx2 { grid-template-columns: 1fr; }
  .cs-solx2-tab.is-active { transform: none; }
  .cs-solx2-panel { padding: 34px 28px 30px; }
}

/* ---------- SOLUTION screen-free capability cards ---------- */
.cs-solx-grid { max-width: 1040px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cs-solx-grid .cs-solx-card:nth-child(4) { grid-column: 1 / 2; }
.cs-solx-card { position: relative; background: #fff; border: 1px solid var(--cs-line); border-radius: 22px; padding: 30px 30px 28px; display: flex; flex-direction: column; box-shadow: 0 30px 60px -50px rgba(12,35,64,0.5); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.cs-solx-card:hover { transform: translateY(-6px); border-color: rgba(236,28,36,0.28); box-shadow: 0 34px 66px -40px rgba(12,35,64,0.5); }
.cs-solx-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cs-solx-n { font-family: 'Outfit', system-ui, sans-serif; font-size: 15px; font-weight: 700; color: var(--cs-red); }
.cs-solx-ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(236,28,36,0.08); color: var(--cs-red); display: inline-flex; align-items: center; justify-content: center; transition: background .3s ease, color .3s ease; }
.cs-solx-ic svg { width: 22px; height: 22px; }
.cs-solx-card:hover .cs-solx-ic { background: var(--cs-red); color: #fff; }
.cs-solx-name { font-family: 'Outfit', system-ui, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--cs-ink); margin-bottom: 10px; }
.cs-solx-card p { font-size: 16px; line-height: 1.6; color: var(--cs-mute); margin: 0 0 18px; }
.cs-solx-res { margin-top: auto; display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--cs-ink); padding-top: 16px; border-top: 1px solid var(--cs-line); }
.cs-solx-res::before { content: "→"; color: var(--cs-red); font-weight: 700; flex-shrink: 0; }
@media (max-width: 900px) { .cs-solx-grid { grid-template-columns: repeat(2, 1fr); } .cs-solx-grid .cs-solx-card:nth-child(4) { grid-column: auto; } }
@media (max-width: 560px) { .cs-solx-grid { grid-template-columns: 1fr; } }

.cs-solj-stage { display: flex; flex-direction: column; gap: 96px; max-width: 1000px; margin: 24px auto 0; }
.cs-solj-tech { max-width: 1000px; margin: 72px auto 0; padding: 40px 44px; background: var(--cs-navy); color: #fff; border-radius: 24px; box-shadow: 0 40px 80px -54px rgba(12,35,64,0.6); }
.cs-solj-tech-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FF6168; margin-bottom: 14px; }
.cs-solj-tech-label::before { content: ""; width: 22px; height: 2px; background: #FF6168; }
.cs-solj-tech-copy { font-size: 19px; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0 0 24px; max-width: 820px; }
.cs-solj-tech-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.cs-solj-tech-tags span { font-size: 15px; font-weight: 500; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: 100px; padding: 9px 20px; transition: background .25s ease, border-color .25s ease; }
.cs-solj-tech-tags span:hover { background: rgba(236,28,36,0.2); border-color: rgba(236,28,36,0.5); }
@media (max-width: 760px) { .cs-solj-tech { padding: 32px 26px; } .cs-solj-tech-copy { font-size: 17px; } }
.cs-solj-row { display: grid; grid-template-columns: 280px 1fr; gap: 72px; align-items: center; }
.cs-solj-row:nth-child(even) { grid-template-columns: 1fr 280px; }
.cs-solj-row:nth-child(even) .cs-solj-phone { order: 2; }
.cs-solj-row:nth-child(even) .cs-solj-text { order: 1; text-align: left; }
.cs-solj-row:nth-child(even) .cs-solj-res { flex-direction: row; }
.cs-solj-phone { width: 280px; margin: 0; transition: transform 0.4s ease; }
.cs-solj-phone:hover { transform: translateY(-6px); }
.cs-solj-device {
  border-radius: 30px; overflow: hidden; background: #0b0f17; border: 6px solid #0b0f17;
  box-shadow: 0 44px 84px -38px rgba(12,35,64,0.55), 0 0 0 1px rgba(12,35,64,0.06);
}
.cs-solj-device img { width: 100%; height: auto; display: block; border-radius: 24px; }
/* 2nd & 3rd solutions — wide landscape tablet mockup */
.cs-solj-stage .cs-solj-row.cs-solj-row--tablet:nth-child(even) { grid-template-columns: 1fr 540px; }
.cs-solj-stage .cs-solj-row.cs-solj-row--tablet:nth-child(odd) { grid-template-columns: 540px 1fr; }
.cs-solj-tablet { width: 540px; }
.cs-solj-stage .cs-solj-row.cs-solj-row--tablet:nth-child(even):has(.cs-solj-laptop) { grid-template-columns: 1fr 540px; }
.cs-solj-stage .cs-solj-row.cs-solj-row--tablet:nth-child(odd):has(.cs-solj-laptop) { grid-template-columns: 540px 1fr; }
.cs-solj-laptop { width: 540px; }
.cs-solj-device--tablet { border-radius: 18px; border-width: 8px; aspect-ratio: 1470 / 1038; background: #fff; }
.cs-solj-device--tablet img { border-radius: 10px; width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* Laptop variant — screen + base */
.cs-solj-laptop { display: flex; flex-direction: column; align-items: center; }
.cs-solj-device--laptop { border-radius: 14px 14px 0 0; border-width: 10px 10px 0; aspect-ratio: 1600 / 1000; background: #0b0f17; }
.cs-solj-device--laptop img { border-radius: 4px 4px 0 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cs-solj-laptop-base { display: block; width: 118%; height: 16px; border-radius: 0 0 12px 12px; background: linear-gradient(180deg,#d4d7dd,#a8adb8); position: relative; }
.cs-solj-laptop-base::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 7px; border-radius: 0 0 8px 8px; background: #8b909c; }
/* Monitor variant — screen + neck + base */
.cs-solj-monitor { display: flex; flex-direction: column; align-items: center; }
.cs-solj-device--monitor { border-radius: 14px; border: 12px solid #1a1d22; aspect-ratio: 16 / 10; background: #0b0f17; box-shadow: 0 24px 50px -28px rgba(12,35,64,0.5); }
.cs-solj-device--monitor img { border-radius: 3px; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cs-solj-monitor-neck { display: block; width: 70px; height: 34px; background: linear-gradient(180deg,#c4c8ce,#a0a5af); margin-top: -2px; }
.cs-solj-monitor-base { display: block; width: 190px; height: 14px; border-radius: 8px; background: linear-gradient(180deg,#d4d7dd,#9ca1ac); box-shadow: 0 14px 22px -12px rgba(12,35,64,0.5); }
@media (max-width: 900px) {
  .cs-solj-stage .cs-solj-row.cs-solj-row--tablet { grid-template-columns: 1fr; }
  .cs-solj-tablet { width: 100%; max-width: 540px; }
}
.cs-solj-text { display: flex; flex-direction: column; gap: 14px; max-width: 460px; text-align: left; }
.cs-solj-row:nth-child(even) .cs-solj-text { margin-left: 0; align-items: flex-start; }
.cs-solj-step { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--cs-red); }
.cs-solj-name { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--cs-ink); line-height: 1.2; }
.cs-solj-text p { font-size: 17px; line-height: 1.6; color: var(--cs-mute); margin: 0; }
.cs-solj-res { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--cs-navy); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cs-line); }
.cs-solj-ic-box {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(236,28,36,0.08); border: 1px solid rgba(236,28,36,0.2); color: var(--cs-red);
}
.cs-solj-ic-box svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .cs-solj-stage { gap: 64px; }
  .cs-solj-row, .cs-solj-row:nth-child(even) { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; }
  .cs-solj-row:nth-child(even) .cs-solj-phone { order: 0; }
  .cs-solj-row:nth-child(even) .cs-solj-text { order: 0; text-align: center; align-items: center; margin-left: 0; }
  .cs-solj-row:nth-child(even) .cs-solj-res { flex-direction: row; }
  .cs-solj-text { align-items: center; max-width: 420px; }
  .cs-solj-phone { width: 240px; }
}
/* ---------- SOLUTION carousel (reference style) ---------- */
.cs-sol2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none; }
.cs-sol2-head > div:first-child { max-width: 820px; }
.cs-sol2-nav { display: flex; gap: 12px; flex-shrink: 0; }
.cs-sol2-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--cs-line); background: #fff; color: var(--cs-ink); display: grid; place-items: center; cursor: pointer; transition: all 0.25s ease; }
.cs-sol2-arrow:hover { background: var(--cs-red); border-color: var(--cs-red); color: #fff; }
.cs-sol2-rail {
  margin-top: 48px; display: flex; gap: 22px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding: 6px 4px 16px; scrollbar-width: none;
}
.cs-sol2-rail::-webkit-scrollbar { display: none; }
.cs-sol2-card {
  scroll-snap-align: start; flex: 0 0 320px; position: relative;
  background: var(--sol-bg, #fff); border: 1px solid var(--cs-line); border-radius: 24px;
  padding: 30px; min-height: 300px; display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cs-sol2-card:hover { transform: translateY(-5px); box-shadow: 0 30px 64px -42px rgba(12,35,64,0.5); }
.cs-sol2-card.is-featured {
  flex: 0 0 520px; background: var(--cs-navy); color: #fff;
  border-color: var(--cs-navy); flex-direction: row; gap: 22px; align-items: flex-start;
}
.cs-sol2-ic { flex-shrink: 0; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; color: var(--cs-red); background: rgba(236,28,36,0.1); border: 1px solid rgba(236,28,36,0.22); margin-bottom: 18px; }
.is-featured .cs-sol2-ic { margin-bottom: 0; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.cs-sol2-body { display: flex; flex-direction: column; }
.cs-sol2-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--cs-ink); margin: 0 0 12px; line-height: 1.2; }
.is-featured h3 { color: #fff; font-size: 26px; }
.cs-sol2-card p { font-size: 15px; line-height: 1.6; color: var(--cs-mute); margin: 0; }
.is-featured p { color: rgba(255,255,255,0.72); font-size: 17px; }
.cs-sol2-result { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--cs-line); display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; color: var(--cs-navy); line-height: 1.45; }
.is-featured .cs-sol2-result { border-top-color: rgba(255,255,255,0.18); color: #fff; margin-top: auto; }
.cs-sol2-result .arr { color: var(--cs-red); font-weight: 700; flex-shrink: 0; }
.is-featured .cs-sol2-result .arr { color: #FF6168; }
.cs-sol2-go { margin-top: auto; align-self: flex-start; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid var(--cs-line); display: grid; place-items: center; color: var(--cs-ink); text-decoration: none; transition: all 0.25s ease; }
.cs-sol2-go:hover { background: var(--cs-red); border-color: var(--cs-red); color: #fff; transform: translateX(3px); }
@media (max-width: 760px) {
  .cs-sol2-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cs-sol2-card.is-featured { flex: 0 0 86%; flex-direction: column; }
  .cs-sol2-card { flex: 0 0 80%; }
}
.cs-sol-tech { margin-top: 52px; display: grid; gap: 22px; }
.cs-sol-tech-block .tk { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-navy); margin-bottom: 14px; }

/* ---------- IMPACT ---------- */
.cs-impact-intro { max-width: 920px; }
[data-screen-label="Impact"] .cs-section-head { max-width: 1200px; }
[data-screen-label="Impact"] .cs-section-head .cs-h2 { max-width: 1180px; }
.cs-ba-table {
  margin-top: 50px; width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid var(--cs-line); border-radius: 18px; overflow: hidden;
}
.cs-ba-table thead th {
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cs-navy); text-align: center; padding: 18px 28px; background: var(--cs-gray);
  border-bottom: 1px solid var(--cs-line);
}
.cs-ba-table thead th:last-child { color: var(--cs-red); }
.cs-ba-table tbody td { padding: 22px 28px; border-bottom: 1px solid var(--cs-line); vertical-align: middle; text-align: center; }
.cs-ba-table tbody tr:last-child td { border-bottom: none; }
.cs-ba-table tbody tr { transition: background 0.25s ease; }
.cs-ba-table tbody tr:hover { background: rgba(236,28,36,0.03); }
.cs-ba-before { font-size: 19px; font-weight: 500; color: var(--cs-mute); width: 42%; }
.cs-ba-after { font-size: 19px; font-weight: 600; color: var(--cs-navy); width: 42%; }
.cs-ba-arrow { color: var(--cs-red); width: 16%; text-align: center; }
.cs-ba-arrow svg { display: inline-block; vertical-align: middle; }
.cs-outcomes { margin-top: 120px; }
/* Before/After cards — twin phone mockups (reference layout) */
.cs-ba-cards { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cs-ba-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end;
  background: #fff; border: 1px solid var(--cs-line); border-radius: 22px; padding: 28px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cs-ba-card:hover { transform: translateY(-4px); border-color: rgba(236,28,36,0.28); box-shadow: 0 30px 60px -40px rgba(12,35,64,0.45); }
.cs-ba-col { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cs-ba-tag { font-size: 15px; font-weight: 600; color: var(--cs-ink); letter-spacing: -0.01em; }
.cs-ba-tag-after { color: var(--cs-red); }
.cs-ba-col p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--cs-mute); text-align: center; }
.cs-ba-phone { display: block; width: 190px; max-width: 100%; height: auto; }
.cs-ba-phone img { width: 100%; height: auto; display: block; }
/* smooth staggered entrance for the 5 cards */
.cs-ba-cards .cs-ba-card { opacity: 0; transform: translateY(26px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease; }
.cs-ba-cards.in .cs-ba-card { opacity: 1; transform: translateY(0); }
.cs-ba-cards.in .cs-ba-card:nth-child(1){transition-delay:.05s}
.cs-ba-cards.in .cs-ba-card:nth-child(2){transition-delay:.13s}
.cs-ba-cards.in .cs-ba-card:nth-child(3){transition-delay:.21s}
.cs-ba-cards.in .cs-ba-card:nth-child(4){transition-delay:.29s}
.cs-ba-cards.in .cs-ba-card:nth-child(5){transition-delay:.37s}
@media (prefers-reduced-motion: reduce){ .cs-ba-cards .cs-ba-card { opacity:1; transform:none; transition:none; } }
@media (max-width: 760px) {
  .cs-ba-cards { grid-template-columns: 1fr; }
}
/* ============================================================
   IMPACT — Transformation slider (one card at a time)
   ============================================================ */
.cs-tslider { margin-top: 52px; position: relative; }
.cs-tslider-viewport { overflow: hidden; border-radius: 24px; }
.cs-tslider-track { display: flex; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); will-change: transform; }
.cs-tslide {
  flex: 0 0 100%; min-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  padding: 12px 8px;
}
.cs-tslide-step { font-size: 17px; font-weight: 700; color: var(--cs-navy); letter-spacing: 0.04em; }
.cs-tslide-step i { color: #B9BEC7; font-style: normal; font-weight: 600; }
.cs-tcompare { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 36px; width: 100%; }
.cs-tcol { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.cs-tslide-device { position: relative; width: 100%; box-shadow: none; }
.cs-tslide-img { background: #fff; }
.cs-tcol-info { order: -1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cs-tcol-label { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.35; }
.cs-tcol-label--before { color: var(--cs-mute); }
.cs-tcol-label--after { color: var(--cs-navy); }
.cs-tcompare-arrow {
  display: none;
  align-self: center; color: var(--cs-red); place-items: center;
  width: 48px; height: 48px; border-radius: 50%; background: rgba(236,28,36,0.08); border: 1px solid rgba(236,28,36,0.2);
}
.cs-tslide-state {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 100px;
  background: rgba(85,85,85,0.1); color: var(--cs-mute);
}
.cs-tslide-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cs-tslide-state[data-state="after"] { background: rgba(236,28,36,0.1); color: var(--cs-red); }

.cs-tslider-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 34px; }
.cs-tslider-arrow {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  background: #fff; border: 1px solid var(--cs-line); color: var(--cs-navy);
  display: grid; place-items: center; cursor: pointer; transition: all 0.25s ease;
}
.cs-tslider-arrow:hover { border-color: var(--cs-red); color: var(--cs-red); transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(236,28,36,0.5); }
.cs-tslider-dots { display: flex; align-items: center; gap: 10px; }
.cs-tslider-dot { width: 9px; height: 9px; border-radius: 50%; background: #D5D8DE; border: 0; padding: 0; cursor: pointer; transition: all 0.3s ease; }
.cs-tslider-dot.is-active { width: 30px; border-radius: 6px; background: var(--cs-red); }
@media (max-width: 860px) {
  .cs-tcompare { grid-template-columns: 1fr; gap: 24px; }
  .cs-tcompare-arrow { margin-top: 0; transform: rotate(90deg); justify-self: center; }
}
/* 5th card — full width with a large landscape dashboard */
.cs-ba-card.cs-ba-wide { grid-column: 1 / -1; grid-template-columns: 180px 1fr; gap: 40px; align-items: end; }
.cs-ba-col-dash { align-items: stretch; }
.cs-ba-dash { display: block; width: 100%; max-width: 520px; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -42px rgba(12,35,64,0.5); }
.cs-ba-dash img { display: block; width: 100%; height: auto; }
.cs-ba-col-dash p { align-self: center; }
@media (max-width: 760px) {
  .cs-ba-card.cs-ba-wide { grid-template-columns: 1fr; gap: 24px; }
}
.cs-out-label { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-navy); margin-bottom: 18px; }
.cs-out-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: stretch; }
.cs-out-grid > .cs-out-card:nth-child(1) { grid-column: span 3; }
.cs-out-grid > .cs-out-card:nth-child(2) { grid-column: span 3; }
.cs-out-grid > .cs-out-card:nth-child(3) { grid-column: span 2; }
.cs-out-card {
  background: var(--cs-navy); color: #fff; border-radius: 22px; padding: 36px 32px;
  position: relative; overflow: hidden;
}
.cs-out-card .num { font-size: clamp(44px, 5vw, 62px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: #fff; }
.cs-out-card .num .pct { color: var(--cs-red); }
.cs-out-card .lab { margin-top: 16px; font-size: 17px; font-weight: 500; line-height: 1.45; color: rgba(255,255,255,0.78); }
.cs-out-card .spark { position: absolute; right: -10px; bottom: -10px; opacity: 0.16; color: var(--cs-red); }
.cs-out-wide {
  grid-column: span 4; margin-top: 0;
  background: var(--cs-gray); border: 1px solid var(--cs-line); border-radius: 18px;
  padding: 26px 32px; display: flex; align-items: center; gap: 16px;
  font-size: 20px; font-weight: 600; color: var(--cs-navy);
}
.cs-out-wide .ic { color: var(--cs-red); display: inline-flex; flex-shrink: 0; }

/* Business Outcomes — Section-2 style bento cards */
.cs-out2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.cs-out2-card {
  background: #fff; border: 1px solid var(--cs-line); border-radius: 20px;
  padding: 26px 22px; display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cs-out2-card:hover { transform: translateY(-4px); border-color: rgba(12,35,64,0.18); box-shadow: 0 22px 48px -34px rgba(12,35,64,0.4); }
.cs-out2-card:nth-child(1) { grid-column: auto; }
.cs-out2-card:nth-child(2) { grid-column: auto; }
.cs-out2-card:nth-child(3) { grid-column: auto; }
.cs-out2-card:nth-child(4) { grid-column: auto; }
.cs-out2-tile {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; color: #fff; margin-bottom: 18px;
}
.cs-out2-tile svg { width: 18px; height: 18px; }
.cs-out2-card:nth-child(1) .cs-out2-tile { background: linear-gradient(135deg, #FF5A60, #EC1C24); }
.cs-out2-card:nth-child(2) .cs-out2-tile { background: linear-gradient(135deg, #4A88C9, #185FA5); }
.cs-out2-card:nth-child(3) .cs-out2-tile { background: linear-gradient(135deg, #2A2A2E, #0A0A0B); }
.cs-out2-card:nth-child(4) .cs-out2-tile { background: linear-gradient(135deg, #5BC9A2, #1D9E75); }
.cs-out2-num { font-size: clamp(30px, 3vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--cs-navy); }
.cs-out2-num .pct { color: var(--cs-red); }
.cs-out2-lab { margin-top: 10px; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--cs-mute); }
.cs-out2-card.is-text { justify-content: flex-start; }
.cs-out2-card.is-text .cs-out2-lab { margin-top: 0; font-size: 17px; font-weight: 600; color: var(--cs-navy); }

/* ---------- EXPERT QUOTE ---------- */
.cs-expert { background: #FFFFFF; }
.cs-expert-card {
  display: grid; grid-template-columns: 340px 1fr; gap: 0; align-items: stretch;
  max-width: 1080px; margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid var(--cs-line);
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 90px -56px rgba(12,35,64,0.45);
}
.cs-expert-photo { position: relative; min-height: 380px; background: var(--cs-gray); }
.cs-expert-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cs-expert-body { padding: 52px 52px 48px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.cs-expert-body .cs-eyebrow { color: var(--cs-red); }
.cs-expert-body .cs-eyebrow::before { background: var(--cs-red); }
.cs-expert-mark { font-size: 72px; line-height: 0.4; color: var(--cs-red); font-weight: 700; height: 34px; display: block; }
.cs-expert-quote {
  font-size: clamp(19px, 2vw, 24px); font-weight: 500; line-height: 1.5; letter-spacing: -0.012em;
  color: var(--cs-navy); margin: 14px 0 0; text-wrap: pretty;
}
.cs-expert-cite { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--cs-line); display: flex; flex-direction: column; gap: 4px; }
.cs-expert-name { font-size: 20px; font-weight: 700; color: var(--cs-navy); letter-spacing: -0.01em; }
.cs-expert-role { font-size: 17px; font-weight: 600; color: var(--cs-ink); }
.cs-expert-org { font-size: 14px; font-weight: 500; color: var(--cs-red); letter-spacing: 0.02em; }
@media (max-width: 820px) {
  .cs-expert-card { grid-template-columns: 1fr; }
  .cs-expert-photo { min-height: 300px; }
  .cs-expert-body { padding: 38px 30px 34px; }
}

/* ---------- INSIDE THE BUILD (dark CTA) ----------
   Flat banner image, nothing layered over it: the artwork already carries its own darkening,
   so the glow and grid decorations the prototype used are gone. #0A0A0B stays as the colour
   under the image, so the white copy keeps its contrast while the image loads and on any part
   of the section the image does not cover. */
.cs-cta {
  background: #0A0A0B url("/wp-content/uploads/2026/07/cta-bnnaer.webp") no-repeat center / cover;
  color: #fff; position: relative; overflow: hidden;
  padding: 120px 0 130px;
}
/* ---------- NEXT/PREV + SIMILAR CHALLENGES CTA ---------- */
.cs-next { position: relative; }
.cs-logos { background: #fff; padding: 96px 0 88px; border-bottom: 1px solid var(--cs-line); }
.cs-logos-head { text-align: center; margin-bottom: 56px; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.cs-logos-head .cs-eyebrow { justify-content: center; }
.cs-logos-head .cs-h2 { font-size: clamp(26px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; text-align: center; margin-left: auto; margin-right: auto; }
.cs-logos-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cs-logos-track { display: flex; align-items: center; gap: 0; width: max-content; animation: csLogosSlide 60s linear infinite; }
.cs-logos-marquee:hover .cs-logos-track { animation-play-state: paused; }
/* Five logos across, whatever the viewport: the slot is a fifth of the screen and the padding
   inside it does the spacing, so the count does not drift with the window the way a fixed
   width plus a fixed gap does. The template repeats the set until one half of the track holds
   at least five, which is what keeps the -50% loop seamless at this size. */
.cs-logo { flex: 0 0 auto; width: 13vw; display: flex; align-items: center; justify-content: center; padding: 0 24px; box-sizing: border-box; }
.cs-logo > a { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }
.cs-logo > a:focus-visible { outline: 2px solid var(--cs-red); outline-offset: 6px; border-radius: 4px; }
/* Logo images carry the same muted-until-hover treatment the type version has, so the reel
   reads as one row of marks rather than a mix of brand colours competing with the page. */
.cs-logo img { display: block; width: auto; max-width: 100%; height: 52px; object-fit: contain; opacity: 0.62; transition: opacity 0.25s ease; }
.cs-logo:hover img { opacity: 1; }
@keyframes csLogosSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .cs-logos-track { animation: none; } }
.cs-next-bar {
  background: #1B2230; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 56px clamp(24px, 6vw, 96px);
}
.cs-next-link { display: flex; align-items: center; gap: 18px; text-decoration: none; flex: 1; min-width: 0; }
.cs-next-fwd { justify-content: flex-end; text-align: right; }
.cs-next-arrow {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.1); color: #fff;
  display: grid; place-items: center; transition: all 0.25s ease;
}
.cs-next-link:hover .cs-next-arrow { background: var(--cs-red); }
.cs-next-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-next-title { font-size: clamp(17px, 2vw, 22px); font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.cs-next-label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.5); }
.cs-similar { background: #05070B; position: relative; overflow: hidden; }
.cs-similar-inner { display: flex; align-items: center; min-height: 340px; padding-top: 56px; padding-bottom: 56px; }
.cs-similar-copy { position: relative; z-index: 2; max-width: 560px; }
.cs-similar-h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; color: #fff; margin: 0; }
.cs-similar-h2 .hl { color: var(--cs-red); }
.cs-similar-cta { margin-top: 30px; }
.cs-similar-art { position: absolute; top: 0; right: clamp(24px, 6vw, 96px); bottom: 0; width: 460px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; pointer-events: none; }
.cs-similar-shape { display: block; width: 210px; height: 300px; overflow: hidden; }
.cs-similar-shape img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15); }
.cs-similar-shape-a { clip-path: path("M105 0 C60 0 0 40 0 150 C0 260 60 300 105 300 C70 250 70 50 105 0 Z"); }
.cs-similar-shape-b { clip-path: path("M105 0 C60 0 0 40 0 150 C0 260 60 300 105 300 C70 250 70 50 105 0 Z"); margin-left: -70px; }
@media (max-width: 900px) {
  .cs-next-bar { flex-direction: column; align-items: stretch; gap: 16px; }
  .cs-next-fwd { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
  .cs-similar-art { display: none; }
  .cs-similar-inner { min-height: 0; }
}
.cs-cta-inner { position: relative; z-index: 2; max-width: 880px; text-align: center; margin: 0 auto; }
.cs-cta-inner .cs-eyebrow { justify-content: center; }
.cs-cta-inner .cs-cta-sub { margin-left: auto; margin-right: auto; }
.cs-cta-inner .cs-cta-form { justify-content: center; margin-left: auto; margin-right: auto; }
.cs-cta-inner .cs-cta-formlabel { text-align: center; }
.cs-cta-inner .cs-cta-alt { justify-content: center; }
.cs-cta .cs-eyebrow { color: #FF6168; }
.cs-cta .cs-eyebrow::before { background: var(--cs-red); }
.cs-cta h2 { color: #fff; }
.cs-cta-sub { margin-top: 24px; font-size: 20px; line-height: 1.6; color: rgba(255,255,255,0.7); max-width: 680px; }
.cs-cta-formlabel { margin-top: 44px; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.cs-cta-form { margin-top: 20px; display: flex; gap: 18px; flex-wrap: wrap; max-width: 640px; }
.cs-cta-input {
  flex: 1; min-width: 260px; height: 60px; padding: 0 22px; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.18);
  color: #fff; font-family: inherit; font-size: 17px; outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cs-cta-input::placeholder { color: rgba(255,255,255,0.4); }
.cs-cta-input:focus { border-color: var(--cs-red); box-shadow: 0 0 0 4px rgba(236,28,36,0.18); }
.cs-cta-form .cs-btn { height: 60px; }
.cs-cta-form .cs-btn-primary { background: var(--cs-red); color: #fff; border: 1.5px solid var(--cs-red); }
.cs-cta-form .cs-btn-primary:hover { background: var(--cs-red); border-color: var(--cs-red); box-shadow: 0 16px 34px -10px rgba(236,28,36,0.55); transform: translateY(-2px); }
.cs-cta-alt-btn { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.55); }
.cs-cta-alt-btn:hover { background: #fff; border-color: #fff; color: var(--cs-navy); box-shadow: 0 16px 34px -14px rgba(0,0,0,0.35); transform: translateY(-2px); }
.cs-cta-alt {
  margin: 44px auto 0; max-width: 480px; font-size: 16px; color: rgba(255,255,255,0.65);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.cs-cta-alt > span { position: relative; width: 100%; text-align: center; letter-spacing: 0.02em; }
.cs-cta-alt > span::before, .cs-cta-alt > span::after {
  content: ""; position: absolute; top: 50%; width: 32%; height: 1px; background: rgba(255,255,255,0.16);
}
.cs-cta-alt > span::before { left: 0; }
.cs-cta-alt > span::after { right: 0; }
.cs-cta-alt a {
  color: #fff; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border-radius: 100px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.cs-cta-alt a.cs-cta-alt-btn { background: transparent; border-radius: 8px; }
.cs-cta-alt a.cs-cta-alt-btn:hover { background: #fff; border-color: #fff; color: var(--cs-navy); box-shadow: 0 16px 34px -14px rgba(0,0,0,0.35); transform: translateY(-2px); }
/* terminal node where the thread lands in the input */
.cs-cta .cs-thread-terminal { position: absolute; z-index: 3; }

/* ---------- scroll reveal ---------- */
.cs-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.cs-reveal.in { opacity: 1; transform: none; }
.cs-reveal.d1 { transition-delay: 0.08s; }
.cs-reveal.d2 { transition-delay: 0.16s; }
.cs-reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .cs-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .cs-page { --cs-gutter: 35px; --cs-gap: 40px; }
  .cs-about-grid { grid-template-columns: 1fr; gap: 36px; }
  .cs-snap-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-scale-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-snap-cell.wide { grid-column: span 2; }
  .cs-snap-cell.half { grid-column: span 2; }
}
@media (max-width: 760px) {
  .cs-page .nav-links { display: none; }
  .cs-wrap { padding: 0 22px; }
  .cs-narrative .cs-wrap { padding-left: 44px; padding-right: 22px; }
  .cs-scale-grid, .cs-sol-cards { grid-template-columns: 1fr; }
  .cs-out-grid { grid-template-columns: 1fr; }
  .cs-out-grid > .cs-out-card:nth-child(1), .cs-out-grid > .cs-out-card:nth-child(2), .cs-out-grid > .cs-out-card:nth-child(3), .cs-out-wide { grid-column: auto; }
  .cs-out2-grid { grid-template-columns: 1fr 1fr; }
  .cs-out2-card:nth-child(1), .cs-out2-card:nth-child(2), .cs-out2-card:nth-child(3), .cs-out2-card:nth-child(4) { grid-column: auto; }
  .cs-snap-grid { grid-template-columns: 1fr; }
  .cs-snap-cell.wide, .cs-snap-cell.half { grid-column: span 1; }
  .cs-hero { padding: 64px 0 56px; }
  .cs-ba-table thead th, .cs-ba-table tbody td { padding: 14px 18px; }
  .cs-ba-before, .cs-ba-after { font-size: 16px; }
  /* mobile: thread collapses to a simple left-edge progress line */
  .cs-node--left, .cs-node--right { left: 6px; right: auto; }
  .cs-node--right .cs-node-label { left: 30px; right: auto; text-align: left; }
  .cs-sol-card:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------- SNAPSHOT spec sheet (dark blueprint panel) ---------- */
.cs-spec { background: #FFFFFF; }
.cs-spec-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #0C2340 0%, #0A1B33 55%, #07111F 100%);
  border-radius: 28px; padding: 56px 56px 50px; color: #fff;
  box-shadow: 0 50px 100px -50px rgba(12,35,64,0.7);
}
.cs-spec-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 70% at 85% 10%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 85% 10%, #000, transparent 75%);
}
.cs-spec-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.cs-spec-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #FF6168; margin-bottom: 16px; }
.cs-spec-eyebrow::before { content: ""; width: 26px; height: 2px; background: #FF6168; }
.cs-spec-title { font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; letter-spacing: -0.025em; color: #fff; margin: 0; line-height: 1.05; }
.cs-spec-ref { text-align: right; flex-shrink: 0; padding-top: 6px; }
.cs-spec-ref-k { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 5px; }
.cs-spec-ref-v { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); letter-spacing: 0.04em; }
.cs-spec-rows { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 22px; }
.cs-spec-row {
  display: grid; grid-template-columns: 168px 1fr; align-items: baseline; gap: 20px;
  padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.1);
}
.cs-spec-row--full { grid-column: 1 / -1; }
.cs-spec-k { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.cs-spec-v { font-size: 17px; font-weight: 500; color: #fff; line-height: 1.5; }
.cs-spec-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.cs-spec-chip {
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  padding: 7px 15px; border-radius: 100px; transition: border-color 0.25s ease, background 0.25s ease;
}
.cs-spec-chip:hover { border-color: rgba(236,28,36,0.5); background: rgba(236,28,36,0.12); }

/* Light variant — white panel, dark text, staggered scroll-in rows */
.cs-spec--light .cs-spec-panel {
  background: #FFFFFF;
  border: 1px solid var(--cs-line);
  box-shadow: 0 40px 90px -54px rgba(12,35,64,0.4);
  color: var(--cs-ink);
}
.cs-spec--light .cs-spec-grain {
  background-image: linear-gradient(rgba(12,35,64,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(12,35,64,0.05) 1px, transparent 1px);
}
.cs-spec--light .cs-spec-title { color: var(--cs-navy); }
.cs-spec--light .cs-spec-ref-k { color: var(--cs-mute2); }
.cs-spec--light .cs-spec-ref-v { color: var(--cs-navy); }
.cs-spec--light .cs-spec-row { border-top-color: var(--cs-line); }
.cs-spec--light .cs-spec-k { color: var(--cs-mute2); }
.cs-spec--light .cs-spec-v { color: var(--cs-ink); }
.cs-spec--light .cs-spec-chip {
  color: var(--cs-navy);
  background: var(--cs-gray);
  border: 1px solid var(--cs-line);
}
.cs-spec--light .cs-spec-chip:hover { border-color: rgba(236,28,36,0.45); background: rgba(236,28,36,0.06); }
/* staggered scroll reveal of rows once the panel scrolls in */
.cs-spec--light .cs-spec-row {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1);
}
.cs-spec--light .cs-spec-panel.in .cs-spec-row { opacity: 1; transform: none; }
.cs-spec--light .cs-spec-panel.in .cs-spec-row:nth-child(1) { transition-delay: 0.05s; }
.cs-spec--light .cs-spec-panel.in .cs-spec-row:nth-child(2) { transition-delay: 0.12s; }
.cs-spec--light .cs-spec-panel.in .cs-spec-row:nth-child(3) { transition-delay: 0.19s; }
.cs-spec--light .cs-spec-panel.in .cs-spec-row:nth-child(4) { transition-delay: 0.26s; }
.cs-spec--light .cs-spec-panel.in .cs-spec-row:nth-child(5) { transition-delay: 0.33s; }
.cs-spec--light .cs-spec-panel.in .cs-spec-row:nth-child(6) { transition-delay: 0.40s; }
.cs-spec--light .cs-spec-panel.in .cs-spec-row:nth-child(7) { transition-delay: 0.47s; }
.cs-spec--light .cs-spec-panel.in .cs-spec-row:nth-child(8) { transition-delay: 0.54s; }
@media (prefers-reduced-motion: reduce) {
  .cs-spec--light .cs-spec-row { opacity: 1; transform: none; transition: none; }
}

/* ---------- SNAPSHOT bento dashboard (creative variant) ---------- */
.cs-dash { background: #FFFFFF; }
.cs-dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cs-dash-tile {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--cs-line); border-radius: 18px;
  padding: 24px 24px; display: flex; flex-direction: column; gap: 8px; min-height: 132px;
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.cs-dash-grid.in .cs-dash-tile { opacity: 1; transform: none; }
.cs-dash-grid.in .cs-dash-tile:nth-child(1){transition-delay:.04s}
.cs-dash-grid.in .cs-dash-tile:nth-child(2){transition-delay:.10s}
.cs-dash-grid.in .cs-dash-tile:nth-child(3){transition-delay:.16s}
.cs-dash-grid.in .cs-dash-tile:nth-child(4){transition-delay:.22s}
.cs-dash-grid.in .cs-dash-tile:nth-child(5){transition-delay:.28s}
.cs-dash-grid.in .cs-dash-tile:nth-child(6){transition-delay:.34s}
.cs-dash-grid.in .cs-dash-tile:nth-child(7){transition-delay:.40s}
.cs-dash-grid.in .cs-dash-tile:nth-child(8){transition-delay:.46s}
.cs-dash-grid.in .cs-dash-tile:nth-child(9){transition-delay:.52s}
.cs-dash-tile:hover { border-color: rgba(236,28,36,0.28); box-shadow: 0 24px 50px -36px rgba(12,35,64,0.45); }
.cs-dash-k { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-mute2); }
.cs-dash-v { font-size: 19px; font-weight: 600; color: var(--cs-navy); line-height: 1.35; }
.cs-dash-big { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--cs-navy); line-height: 1.2; }
.cs-dash-wide { grid-column: span 2; }
.cs-dash-full { grid-column: 1 / -1; }
.cs-dash-comp { font-size: 17px; font-weight: 500; color: var(--cs-ink); line-height: 1.55; }
/* industry hero tile */
.cs-dash-industry { grid-column: span 2; background: linear-gradient(150deg,#0C2340,#07111F); border-color: transparent; justify-content: center; }
.cs-dash-industry .cs-dash-k { color: #FF6168; }
.cs-dash-industry .cs-dash-big { color: #fff; }
.cs-dash-pulse { position: absolute; top: 22px; right: 22px; width: 10px; height: 10px; border-radius: 50%; background: #6FE0A6; box-shadow: 0 0 0 0 rgba(111,224,166,.6); animation: csDashPulse 1.9s ease-out infinite; }
@keyframes csDashPulse { 0%{box-shadow:0 0 0 0 rgba(111,224,166,.5)} 100%{box-shadow:0 0 0 12px rgba(111,224,166,0)} }
/* timeline ring */
.cs-dash-ring { align-items: center; justify-content: center; text-align: center; }
.cs-dash-ring svg { position: absolute; top: 50%; left: 50%; width: 108px; height: 108px; transform: translate(-50%,-50%) rotate(-90deg); }
.cs-ring-bg { fill: none; stroke: var(--cs-line); stroke-width: 6; }
.cs-ring-fg { fill: none; stroke: var(--cs-red); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 251; transition: stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1) .3s; }
.cs-dash-grid.in .cs-dash-ring .cs-ring-fg { stroke-dashoffset: 50; }
.cs-dash-ring-c { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
/* team avatar dots */
.cs-dash-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cs-dash-dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(236,28,36,0.18); border: 1px solid rgba(236,28,36,0.4); }
.cs-dash-dots i:nth-child(-n+9) { background: var(--cs-red); border-color: var(--cs-red); }
@media (max-width: 860px) {
  .cs-dash-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-dash-industry, .cs-dash-wide { grid-column: span 2; }
}
@media (max-width: 520px) {
  .cs-dash-grid { grid-template-columns: 1fr; }
  .cs-dash-industry, .cs-dash-wide, .cs-dash-full { grid-column: auto; }
}
@media (max-width: 760px) {
  .cs-spec-panel { padding: 36px 26px 30px; border-radius: 22px; }
  .cs-spec-head { flex-direction: column; gap: 14px; }
  .cs-spec-ref { text-align: left; }
  .cs-spec-rows { grid-template-columns: 1fr; gap: 0; }
  .cs-spec-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
}

/* ---------- SNAPSHOT as homepage-services grid (legacy) ---------- */
.cs-snapshot-services { background: #FFFFFF; }
.cs-snapshot-services .section-head { justify-content: center; text-align: center; }
.cs-snapshot-services .section-intro { text-align: center; margin-left: auto; margin-right: auto; }
.cs-snapshot-services .section-intro .eyebrow { justify-content: center; }
/* bento: 12-col layout — row1: industry/platform/region/timeline; row2: engagement/team size; row3: team composition; row4: tech/integrations */
.cs-snapshot-services .services-grid { align-items: stretch; grid-template-columns: repeat(12, 1fr); grid-auto-rows: auto; }
.cs-snapshot-services .services-grid { align-items: stretch; grid-template-columns: repeat(12, 1fr); grid-auto-rows: auto; gap: 16px 32px; }
.cs-snapshot-services .service-card { padding: 16px 18px 14px; justify-content: flex-start; gap: 6px; border-radius: 16px; min-height: 0; align-self: start; position: relative; overflow: hidden; }
.cs-snapshot-services .service-card::after {
  content: ""; position: absolute; right: -40px; bottom: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(12,35,64,0.05), transparent 70%);
  pointer-events: none;
}
.cs-snapshot-services .service-icon-tile { margin-bottom: 4px; }
.cs-snapshot-services .service-card h3 { margin: 0; }
.cs-snapshot-services .service-desc { margin: 0; }
.cs-snapshot-services .service-icon-tile { width: 38px; height: 38px; border-radius: 10px; }
.cs-snapshot-services .service-icon { width: 19px; height: 19px; }
.cs-snapshot-services .service-card h3 { font-size: 15px; }
.cs-snapshot-services .service-desc { font-size: 15px; line-height: 1.45; }
.cs-snapshot-services .service-card:nth-child(1) { grid-column: span 4; }
.cs-snapshot-services .service-card:nth-child(2) { grid-column: span 4; }
.cs-snapshot-services .service-card:nth-child(3) { grid-column: span 4; }
.cs-snapshot-services .service-card:nth-child(4) { grid-column: span 4; }
.cs-snapshot-services .service-card:nth-child(5) { grid-column: span 4; }
.cs-snapshot-services .service-card:nth-child(6) { grid-column: span 4; }
.cs-snapshot-services .service-card:nth-child(7) { grid-column: span 12; }
.cs-snapshot-services .service-card:nth-child(7) .service-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--cs-navy);
  max-width: 760px;
}
.cs-snapshot-services .service-card:nth-child(8) { grid-column: span 6; }
.cs-snapshot-services .service-card:nth-child(9) { grid-column: span 6; }
.cs-snapshot-services .service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(12,35,64,0.18);
  box-shadow: 0 22px 48px -34px rgba(12,35,64,0.4);
}
.cs-snapshot-services .service-card:nth-child(7) .service-icon-tile { background: linear-gradient(135deg, #4A88C9 0%, #185FA5 100%); }
.cs-snapshot-services .service-card:nth-child(8) .service-icon-tile { background: linear-gradient(135deg, #2A2A2E 0%, #0A0A0B 100%); }
.cs-snapshot-services .service-card:nth-child(9) .service-icon-tile { background: linear-gradient(135deg, #5BC9A2 0%, #1D9E75 100%); }
.cs-snapshot-services .cs-snap-span2 { grid-column: span 2; }
/* Tech Stack / Integrations — logo tool tiles */
.cs-snap-tools { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 2px; }
.cs-snap-tool { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 72px; }
.cs-snap-tile {
  width: 50px; height: 50px; border-radius: 13px;
  display: grid; place-items: center;
}
.cs-snap-tile img { width: 100%; height: 100%; object-fit: contain; }
.cs-snap-toolname { font-size: 12.5px; font-weight: 500; color: var(--cs-navy); line-height: 1.3; text-align: center; }
/* Team Composition — grey rounded role pills */
.cs-snap-roles { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }
.cs-snap-role {
  font-size: 14px; font-weight: 500; color: #3F4654;
  background: var(--cs-gray); border: 1px solid var(--cs-line);
  padding: 8px 15px; border-radius: 100px; line-height: 1.2;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cs-snap-role:hover { border-color: rgba(236,28,36,0.35); background: #fff; }
/* Team Size — avatar dots under the text */
.cs-snap-teamdots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cs-snap-teamdots i { width: 16px; height: 16px; border-radius: 50%; background: var(--cs-red); border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(236,28,36,0.3); }

/* ---------- SNAPSHOT structured spec panel ---------- */
.cs-snap2 { background: #FFFFFF; }
.cs-snap2-panel {
  display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: stretch; gap: 22px;
}
.cs-snap2-facts {
  position: relative; padding: 6px 32px; overflow: hidden;
  background: #fff; border: 1px solid var(--cs-line); border-radius: 22px;
  box-shadow: 0 30px 70px -52px rgba(12,35,64,0.4);
  display: flex; flex-direction: column; justify-content: space-between;
}
.cs-snap2-fact {
  position: relative; z-index: 1; flex: 1;
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--cs-line);
  transition: padding-left 0.3s ease;
}
.cs-snap2-fact:last-child { border-bottom: none; }
.cs-snap2-fact:hover { padding-left: 8px; }
.cs-snap2-ic {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: #fff; box-shadow: 0 6px 14px -7px rgba(12,35,64,0.4);
}
.cs-snap2-fact:nth-child(1) .cs-snap2-ic { background: linear-gradient(135deg,#FF5A60,#EC1C24); }
.cs-snap2-fact:nth-child(2) .cs-snap2-ic { background: linear-gradient(135deg,#4A88C9,#185FA5); }
.cs-snap2-fact:nth-child(3) .cs-snap2-ic { background: linear-gradient(135deg,#2A2A2E,#0A0A0B); }
.cs-snap2-fact:nth-child(4) .cs-snap2-ic { background: linear-gradient(135deg,#5BC9A2,#1D9E75); }
.cs-snap2-fact:nth-child(5) .cs-snap2-ic { background: linear-gradient(135deg,#FF5A60,#EC1C24); }
.cs-snap2-fact:nth-child(6) .cs-snap2-ic { background: linear-gradient(135deg,#4A88C9,#185FA5); }
.cs-snap2-ic svg { width: 15px; height: 15px; }
.cs-snap2-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-mute2); }
.cs-snap2-v { font-size: 16px; font-weight: 600; color: var(--cs-navy); text-align: right; line-height: 1.35; }
.cs-snap2-detail { padding: 38px; display: flex; flex-direction: column; gap: 30px; justify-content: center; background: #fff; border: 1px solid var(--cs-line); border-radius: 22px; box-shadow: 0 30px 70px -52px rgba(12,35,64,0.4); }
.cs-snap2-block { display: flex; flex-direction: column; gap: 15px; }
.cs-snap2-block + .cs-snap2-block { padding-top: 30px; border-top: 1px solid var(--cs-line); }
.cs-snap2-blabel {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-navy);
}
.cs-snap2-bic {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px; color: #fff; box-shadow: 0 6px 14px -7px rgba(12,35,64,0.4);
  background: linear-gradient(135deg,#FF5A60,#EC1C24);
}
/* The first three positions keep the design's own gradients; the base red above only catches a
   fourth block, whose white built-in mark would otherwise sit on the white panel unseen. */
/* .cs-snap2-block:nth-child(1) .cs-snap2-bic { background: linear-gradient(135deg,#FF5A60,#EC1C24); }
.cs-snap2-block:nth-child(2) .cs-snap2-bic { background: linear-gradient(135deg,#4A88C9,#185FA5); }
.cs-snap2-block:nth-child(3) .cs-snap2-bic { background: linear-gradient(135deg,#5BC9A2,#1D9E75); } */
.cs-snap2-bic svg { width: 15px; height: 15px; }
/* An uploaded badge carries its own border and fill, so the theme draws nothing behind it. */
.cs-snap2-bic:has(img) { background: none; box-shadow: none; border-radius: 0; }
.cs-snap2-bic img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 860px) {
  .cs-snap2-panel { grid-template-columns: 1fr; }
  .cs-snap2-facts { padding: 16px 28px; }
  .cs-snap2-detail { padding: 32px 28px; }
}
@media (max-width: 480px) {
  .cs-snap2-fact { grid-template-columns: 40px 1fr; row-gap: 4px; }
  .cs-snap2-v { grid-column: 2; text-align: left; }
}
.cs-snapshot-services .service-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; list-style: none; padding: 0; }
.cs-snapshot-services .service-pill {
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--cs-navy);
  background: var(--cs-gray); border: 1px solid var(--cs-line);
  padding: 7px 14px; border-radius: 100px; text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cs-snapshot-services .service-pill:hover { border-color: rgba(236,28,36,0.4); transform: translateY(-1px); }
@media (max-width: 920px) {
  .cs-snapshot-services .services-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-snapshot-services .service-card:nth-child(n) { grid-column: span 1; }
  .cs-snapshot-services .service-card:nth-child(7) { grid-column: span 2; }
}
@media (max-width: 760px) {
  .cs-snapshot-services .services-grid { grid-template-columns: 1fr; }
  .cs-snapshot-services .service-card:nth-child(n) { grid-column: auto; }
  .cs-snapshot-services .cs-snap-span2 { grid-column: auto; }
}

/* Narrative thread line + milestone nodes removed per request */
.cs-thread-svg, .cs-node { display: none !important; }
.cs-narrative .cs-wrap { padding-left: 40px; padding-right: 40px; }
@media (max-width: 760px) {
  .cs-narrative .cs-wrap { padding-left: 22px; padding-right: 22px; }
}

/* ---------- PROBLEM as Process-style 2-col numbered steps ---------- */
.cs-prob3-head { max-width: 880px; margin: 0 auto 56px; text-align: center; }
.cs-prob3-head .cs-h2 { margin: 14px auto 20px; max-width: 980px; text-wrap: balance; }
.cs-prob3-intro { font-size: 17px; line-height: 1.7; color: var(--cs-mute); max-width: 720px; margin: 0 auto; }
.cs-prob3-scatter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 26px; align-items: start; }
.cs-prob3-item { display: flex; flex-direction: column; gap: 0; margin-top: var(--mt, 0px); }
.cs-prob3-pill {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--cs-navy); background: var(--cs-gray); border: 1px solid var(--cs-line);
  padding: 7px 15px; border-radius: 100px;
  margin-bottom: -14px; margin-left: 18px; position: relative; z-index: 2;
  box-shadow: 0 6px 16px -10px rgba(12,35,64,0.3);
}
.cs-prob3-card {
  position: relative; background: #fff; border: 1px solid var(--cs-line); border-radius: 18px;
  padding: 28px 24px 24px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--cs-ink);
  display: flex; gap: 12px; align-items: flex-start; min-height: 120px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cs-prob3-card:hover { transform: translateY(-4px); border-color: rgba(236,28,36,0.3); box-shadow: 0 24px 50px -34px rgba(12,35,64,0.45); }
.cs-prob3-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-red); margin-top: 8px; }
/* ---------- PROBLEM v4: editorial narrative + challenges panel ---------- */
.cs-prob4-head { max-width: 980px; margin: 0 auto 48px; text-align: center; }
.cs-prob4-head .cs-h2 { margin: 14px auto 0; text-wrap: balance; }
.cs-prob4-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.cs-prob4-narrative { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.cs-prob4-narrative p { font-size: 21px; line-height: 1.65; color: var(--cs-ink); margin: 0; }
.cs-prob4-narrative p:last-child { color: var(--cs-mute); font-size: 19px; }
.cs-prob4-panel { background: #fff; border: 1px solid var(--cs-line); border-radius: 24px; padding: 36px 38px 30px; box-shadow: 0 40px 80px -54px rgba(12,35,64,0.5); }
.cs-prob4-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-red); margin-bottom: 8px; }
.cs-prob4-label::before { content: ""; width: 22px; height: 2px; background: var(--cs-red); }
.cs-prob4-list { list-style: none; margin: 0; padding: 0; }
.cs-prob4-list li { display: flex; align-items: flex-start; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--cs-line); }
.cs-prob4-list li:last-child { border-bottom: 0; padding-bottom: 6px; }
.cs-prob4-n { flex-shrink: 0; font-family: 'Outfit', system-ui, sans-serif; font-size: 15px; font-weight: 700; color: var(--cs-red); width: 34px; height: 34px; border-radius: 10px; background: rgba(236,28,36,0.08); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; transition: background 0.3s ease, color 0.3s ease; }
.cs-prob4-list li:hover .cs-prob4-n { background: var(--cs-red); color: #fff; }
.cs-prob4-list p { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--cs-ink); }
.cs-prob4-close { max-width: 820px; margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--cs-line); text-align: left; font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--cs-ink); }
@media (max-width: 920px) {
  .cs-prob4-grid { grid-template-columns: 1fr; gap: 36px; }
  .cs-prob4-narrative p { font-size: 19px; }
}

/* ---------- PROBLEM boxed challenge grid ---------- */
.cs-prob-boxes-label { margin: 8px 0 24px; text-align: center; }
.cs-prob-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }
.cs-prob-box {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--cs-line); border-radius: 22px;
  padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 18px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
/* decorative dotted accent filling the right side */
.cs-prob-box::after {
  content: ""; position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
  width: 130px; height: 130px; border-radius: 50%;
  background-image: radial-gradient(rgba(12,35,64,0.14) 1.5px, transparent 1.6px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(circle at center, #000 38%, transparent 72%);
  mask-image: radial-gradient(circle at center, #000 38%, transparent 72%);
  opacity: 0.7; pointer-events: none;
  transition: background-image 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}
.cs-prob-box:hover::after {
  opacity: 1; transform: translateY(-50%) scale(1.06);
  background-image: radial-gradient(rgba(236,28,36,0.30) 1.5px, transparent 1.6px);
}
/* top accent bar that grows in on hover */
.cs-prob-box::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0;
  background: var(--cs-red); border-radius: 0 4px 4px 0; transition: width 0.4s ease;
}
.cs-prob-box:hover { transform: translateY(-6px); border-color: rgba(236,28,36,0.28); box-shadow: 0 30px 60px -38px rgba(12,35,64,0.5); }
.cs-prob-box:hover::before { width: 64px; }
.cs-prob-box:hover::after { opacity: 0.07; color: var(--cs-red); transform: translateY(-4px); }
.cs-prob-box-num {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0; position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--cs-red); background: rgba(236,28,36,0.07); border: 1px solid rgba(236,28,36,0.16);
  transition: all 0.35s ease;
}
.cs-prob-box:hover .cs-prob-box-num { background: var(--cs-red); border-color: var(--cs-red); color: #fff; transform: rotate(-6deg); }
.cs-prob-box p { position: relative; z-index: 1; font-size: 21px; font-weight: 500; line-height: 1.5; color: var(--cs-ink); margin: 0; }
@media (max-width: 860px) { .cs-prob-boxes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cs-prob-boxes { grid-template-columns: 1fr; } }
/* ---------- PROBLEM interactive stepper (How-it-works style) ---------- */
.cs-stepper {
  margin-top: 60px; display: grid; align-items: center;
  grid-template-columns: auto 96px 1fr; column-gap: 56px;
}
.cs-stepper-label { align-self: start; padding-top: 6px; }
.cs-stepper-nums { display: flex; flex-direction: column; gap: 26px; align-items: center; }
.cs-stepnum {
  width: 64px; height: 64px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--cs-line); background: #fff; color: var(--cs-navy);
  font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums;
  display: grid; place-items: center; transition: all 0.35s ease; position: relative;
}
.cs-stepnum:hover { border-color: rgba(236,28,36,0.4); }
.cs-stepnum.is-active {
  background: var(--cs-red); border-color: var(--cs-red); color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 0 7px rgba(236,28,36,0.12), 0 18px 36px -14px rgba(236,28,36,0.6);
}
.cs-stepper-stage { position: relative; min-height: 560px; }
.cs-stepper-panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  gap: 30px; opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none;
}
.cs-stepper-panel.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.cs-stepper-phone { width: 270px; }
.cs-stepper-device {
  border-radius: 30px; overflow: hidden; background: #0b0f17; border: 6px solid #0b0f17;
  box-shadow: 0 50px 90px -40px rgba(12,35,64,0.55), 0 0 0 1px rgba(12,35,64,0.05);
}
.cs-stepper-device img { width: 100%; height: auto; display: block; border-radius: 24px; }
.cs-stepper-copy { text-align: center; max-width: 560px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.cs-stepper-tag { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--cs-red); }
.cs-stepper-copy h3 { font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--cs-ink); margin: 0; text-wrap: balance; }
.cs-stepper-arrows { grid-column: 3; justify-self: center; display: flex; gap: 14px; margin-top: 8px; }
.cs-stepper-arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--cs-line); background: #fff;
  color: var(--cs-ink); display: grid; place-items: center; cursor: pointer; transition: all 0.25s ease;
}
.cs-stepper-arrow:hover { background: var(--cs-red); border-color: var(--cs-red); color: #fff; }
@media (max-width: 820px) {
  .cs-stepper { grid-template-columns: 1fr; row-gap: 28px; justify-items: center; }
  .cs-stepper-label { text-align: center; }
  .cs-stepper-nums { flex-direction: row; gap: 16px; }
  .cs-stepnum { width: 52px; height: 52px; font-size: 18px; }
  .cs-stepper-stage { min-height: 0; width: 100%; }
  .cs-stepper-panel { position: static; opacity: 0; }
  .cs-stepper-panel:not(.is-active) { display: none; }
  .cs-stepper-arrows { grid-column: auto; }
}
@media (max-width: 860px) {
  .cs-prob3-scatter { grid-template-columns: repeat(2, 1fr); }
  .cs-prob3-item { margin-top: 0; }
}
@media (max-width: 560px) {
  .cs-prob3-scatter { grid-template-columns: 1fr; }
}
/* ---------- PROBLEM (legacy 2-col, unused) ---------- */
.cs-prob2-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.cs-prob2-head { position: static; }
.cs-prob2-head .cs-h2 { margin: 14px 0 22px; font-size: 30px; font-weight: 500; }
.cs-prob2-intro { font-size: 17px; line-height: 1.65; color: var(--cs-mute); max-width: 440px; margin: 0 0 16px; }
.cs-prob2-intro:last-child { margin-bottom: 0; }
.cs-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.cs-steps::before {
  content: none;
}
.cs-step { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 0 0 18px; }
.cs-step:last-child { padding-bottom: 0; }
.cs-step-num {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 9px; height: 9px; border-radius: 50%; margin-top: 9px;
  background: var(--cs-red); color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; box-shadow: none; transition: transform 0.3s ease;
  overflow: hidden;
}
.cs-step:hover .cs-step-num {
  background: var(--cs-red); transform: scale(1.4);
  box-shadow: none;
}
.cs-step-body h3 { font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--cs-ink); margin: 0; letter-spacing: -0.01em; transition: color 0.3s ease; }
.cs-step:hover .cs-step-body h3 { color: var(--cs-red); }
@media (max-width: 920px) {
  .cs-prob2-layout { grid-template-columns: 1fr; gap: 40px; }
  .cs-prob2-head { position: static; }
}
@media (max-width: 520px) {
  .cs-step { gap: 18px; }
  .cs-step-num { width: 48px; height: 48px; font-size: 15px; }
  .cs-steps::before { left: 23px; }
}


/* === STD-TYPE-SCALE === */
/* Standardized typography scale (Outfit). H1 75/700, H2 60/600 title-case, H3 24-28/600. */
h1 { font-size: 75px !important; font-weight: 700 !important; }
h2 { font-size: 60px !important; font-weight: 600 !important; text-transform: capitalize !important; }
h3 { font-size: 26px !important; font-weight: 600 !important; }
@media (max-width: 1024px) {
  h1 { font-size: clamp(40px, 7.4vw, 75px) !important; }
  h2 { font-size: clamp(32px, 6vw, 60px) !important; }
  h3 { font-size: clamp(22px, 3.4vw, 26px) !important; }
}


/* === NO-BTN-ARROWS === */
/* Remove trailing arrow icons from primary/secondary/ghost buttons site-wide.
   Targets the LAST child only, so leading icons (calendar, check, etc.) stay. */
a[class*="btn"] > svg:last-child,
button[class*="btn"] > svg:last-child,
a[class*="btn"] > span:last-child > svg:only-child,
button[class*="btn"] > span:last-child > svg:only-child,
.tc-btn-arrow,
.dt-btn .arr { display: none !important; }

/* ---------- Theme conflict overrides ----------
   Nothing new is declared here. Each block repeats declarations that already exist above,
   at a specificity high enough to clear a theme rule the reference never had to contend
   with. Every value is copied from the rule it duplicates.

   style.css styles form fields by attribute — `input[type="text"], input[type="email"], …`
   at (0,1,1) — which outranks `.cs-cta-input` at (0,1,0) and reset the CTA field to the
   theme's grey 3px box. `:where()` keeps the page scope free, so `main input.cs-cta-input`
   lands at (0,1,2): above the theme's rule, and still below anything more specific in the
   design. */
:where(.cs-page) main input.cs-cta-input {
  padding: 0 22px; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.18);
  color: #fff; font-family: inherit; font-size: 17px; outline: none;
  /* the theme's body line-height reaches the field through its own input rule */
  line-height: normal;
}
:where(.cs-page) main input.cs-cta-input::placeholder { color: rgba(255,255,255,0.4); }
:where(.cs-page) main input.cs-cta-input:focus { border-color: var(--cs-red); box-shadow: 0 0 0 4px rgba(236,28,36,0.18); }

/* ---------- Optional hero background image ----------
   Off by default: with no image the hero stays the flat dark surface .cs-hero--rich paints.

   Nothing is layered over the image — no scrim, no opacity — because the images supplied for
   this hero already carry their own darkening, and a second layer would darken them twice. The
   text sits above it on .cs-hero-layout's z-index: 2. */
:where(.cs-page) main .cs-hero-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}

/* ---------- Optional client logo in place of the name ----------
   Only applies when .cs-h1-lead--logo is present, so the type version is untouched.

   Height is set in em, not px, so the logo tracks the H1's clamp() across breakpoints exactly
   as the text line it replaces would. --cs-lead-logo is the per-post scale from ACF, because
   logos differ in how much of their box is ink and a single fixed height suits none of them. */
:where(.cs-page) main .cs-h1-lead--logo {
  display: block;
  line-height: 1;
}
:where(.cs-page) main .cs-h1-logo {
  display: block;
  width: auto;
  height: calc(1em * var(--cs-lead-logo, 1));
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
:where(.cs-page) main .cs-hero-centered .cs-h1-lead--logo .cs-h1-logo {
  margin-left: auto;
  margin-right: auto;
  object-position: center;
}

/* ---------- Semantic markup neutralisers ----------
   The sections below were converted from generic <div>/<span> soup to the elements the content
   actually is — a <dl> for the fact rows, <ul>/<li> for the six list groups, a <table> for the
   before/after comparison, and the full ARIA tabs pattern. Layout must not move, so every
   default those elements bring is neutralised here. Nothing else changes: the design's own
   rules still key off the same classes.

   Kept separate from the compat layer above because these answer for the port's own markup,
   not for the reference's missing element rules. */

/* Lists: markers off, and no blockification of the item, since each list is a flex or grid
   container whose children the design styles directly. */
:where(.cs-page) main :is(.cs-snap2-facts, .cs-snap-roles, .cs-snap-tools,
                          .cs-about-scale-grid, .cs-why2-cards, .cs-logos-track) {
  list-style: none;
}
/* .cs-logo is deliberately absent: the reel item is a flex slot that centres its logo, and
   this rule outranks the component's own display. */
:where(.cs-page) main .cs-snap-role { display: block; }

/* <dt>/<dd> replaced two spans inside a grid row. As grid items their block display is moot,
   but dd carries a UA margin-inline-start of 40px that has to go. */
:where(.cs-page) main :is(.cs-snap2-k, .cs-snap2-v) { margin: 0; }

/* The before/after table keeps the design's grid rows, so the table display modes are switched
   off rather than fought. thead/tbody use display:contents so each <tr> is laid out as a direct
   child of .cs-ba, exactly where the original <div> rows sat — with display:block on the groups
   instead, the row margins resolved differently and the block came out 23px short at 768. */
:where(.cs-page) main table.cs-ba { display: block; border-collapse: collapse; border-spacing: 0; }
:where(.cs-page) main table.cs-ba :is(thead, tbody) { display: contents; }
/* Drops the UA's th/td defaults — centre alignment, bold, middle vertical-align — without
   outranking the design. Deliberately NOT scoped to table.cs-ba: adding the table and class
   would put this at (0,1,3), above `.cs-ba-cell--after { font-weight: 600 }` and
   `.cs-ba-cell { text-align: center }`, which changed the text's width and re-wrapped a row.
   At (0,0,2) it clears the UA and loses to every design rule, which is the whole intent. */
:where(.cs-page) main :is(th, td) {
  text-align: inherit; font-weight: inherit; vertical-align: inherit;
  /* responsive.css:911 has `table th { font-size: 15px; border: 1px solid; padding: 15px }`,
     which this markup inherited the moment it became a real table. The border added 1px top and
     bottom to the header cells — the last 2px between this section and the approved design. The
     padding is already covered by the blanket reset above. Same (0,0,2) weight as that rule and
     later in the cascade, so it wins, while `.cs-ba-cell`'s own 1px border still applies. */
  border: 0;
  font-size: inherit;
}

/* The tab panels became focusable so keyboard users can reach the panel they just opened.
   The design draws no focus ring on them; this keeps the browser's, visible only for keyboard
   focus, so nothing changes for pointer users. */
:where(.cs-page) main .cs-solx2-panel:focus { outline: none; }
:where(.cs-page) main .cs-solx2-panel:focus-visible { outline: 2px solid var(--cs-red); outline-offset: 4px; }


/* ============================================================ MOBILE-TYPE-SCALE
   The approved design is a big-type editorial layout: 80px quote marks, a 40px hero
   subhead, 32px and 25px body copy. Those sizes are the desktop design and stay exactly
   as approved at 1025px and up — this block adds the tablet and phone steps the reference
   never had, so the page reads at the same scale as the rest of the site on small screens.

   Site reference, measured (about-us-v2 and the home page at 390px):
     h1 40px · h2 32px · h3 22px · body copy 15-17px
   Headings already match — .cs-h1/.cs-h2/.cs-h3 are sized by the STD-TYPE-SCALE clamps
   above, which land on exactly those values. Only the non-heading roles below had no
   responsive step at all, i.e. the same px on a 390px phone as on a 1440px desktop.

   Breakpoints are 1024px and 767px, matching STD-TYPE-SCALE's own 1024px step and
   responsive.css's site-wide 767px phone step, so type changes on the same lines the rest
   of the site changes on.

   Every rule here is a bare class at (0,1,0), placed last in the file so it wins on source
   order over the base declaration it steps. No !important except the one noted case where
   the value being overridden is a content-authored inline style.

   Desktop values, lifted verbatim from the inline style attributes these classes replaced
   in Case-study-{hero,about,problem,impact,solution,tech}.php. Kept here rather than
   inline because an inline declaration cannot be overridden by a media query.

   Written as `.cs-page p.cs-lede-*` — (0,2,1) — not as a bare class. The inline styles these
   replace outranked everything, and removing them exposed three rules that had been dead:
     .cs-about-dark-copy p            22px  (0,2,0)   and 16px below 760px
     .cs-prob4-narrative p            21px  (0,2,0)   and 19px below 760px
     .cs-prob4-narrative p:last-child 19px  (0,2,1)
   A bare class at (0,1,0) loses to all three, which changed the desktop rendering. (0,2,1)
   plus last-in-file source order clears them exactly, and nothing selects these paragraphs
   more specifically. */
.cs-page p.cs-lede-xl { font-size: 32px; }
.cs-page p.cs-lede-lg { font-size: 25px; font-weight: 500; }
/* max-width, not a narrower width: 900px is the design's value and fits every viewport
   from 1024px up, but at 768px and below it pushed the H1 — and with it the document —
   193px past the viewport edge. Capping at 100% removes the overflow without touching any
   width where the declared 900px already fitted. */
.cs-h1-rest--long { font-size: 40px; width: 900px; max-width: 100%; }

@media (max-width: 1024px) {
  .cs-page p.cs-lede-xl { font-size: 24px; }
  .cs-page p.cs-lede-lg { font-size: 21px; }
  .cs-review-mark { font-size: 64px; }
  .cs-expert-mark { font-size: 56px; }
  .cs-why2-v { font-size: 36px; }
  /* Four across on a tablet, three on a phone: a fifth of a 390px screen is 78px, too small
     for a logo to read at all. */
  .cs-logo { width: 25vw; padding: 0 18px; }
  .cs-logo img { height: 46px; }
  .cs-body { font-size: 18px; }
  .cs-cta-sub { font-size: 18px; }
  .cs-expert-name { font-size: 18px; }

  /* Editors wrap a phrase in <span style="white-space:nowrap"> to stop a desktop heading
     breaking mid-phrase. Below 1025px those phrases are wider than the viewport, so the
     heading spilled past the edge and scrolled the whole document sideways — 1160px of
     content in a 1024px viewport on RoofHyve. Here the heading has to be allowed to wrap.
     An inline style can only be beaten with !important; this is that case. Also covers the
     one heading that carries nowrap from the template rather than from content. */
  :where(.cs-page) main .cs-h2,
  :where(.cs-page) main .cs-h2 span { white-space: normal !important; }
}

@media (max-width: 767px) {
  /* 17px is the site's phone body size (about-us-v2 measures 17px there). The design's own
     dead rules wanted 16px and 19px for these two paragraphs; one value for both is what
     "consistent" means here, and it sits between them. */
  .cs-page p.cs-lede-xl { font-size: 17px; }
  .cs-page p.cs-lede-lg { font-size: 17px; }
  .cs-review-mark { font-size: 44px; }
  .cs-expert-mark { font-size: 40px; }
  .cs-why2-v { font-size: 32px; }
  .cs-logo { width: 33.3333vw; padding: 0 14px; }
  .cs-logo img { height: 38px; }
  .cs-body { font-size: 16px; }
  .cs-cta-sub { font-size: 16px; }
  .cs-expert-name { font-size: 17px; }

  /* The long-headline treatment is a desktop refinement. On a phone it hands the subhead
     back to .cs-h1-rest's own 0.72em, which tracks the H1's clamp — so all three case
     studies show the same subhead size instead of two showing a fixed 40px. */
  .cs-h1-rest--long { font-size: 0.72em; width: auto; }
}