/* ==========================================================================
   VALERE HEALTH — Case study page stylesheet (template; first use: Strive)
   Loads AFTER css/valere.css and reuses its tokens, type scale, buttons,
   .card / .cards, .eyebrow, and .card__rule--flow. Nothing in valere.css
   is overridden globally — every rule here is scoped to case-study classes.

   Module prefixes (each block is a self-contained, CMS-liftable embed):
     .cs-     general case-study page pieces (chrome, hero, tabs, flows)
     .spine-  the backbone-spine endpoint visual (Section 3; reusable)
     .fut-    the future-state window (Section 6)

   Brand systems applied (see Valere_Brand_Color_System / _Typography_System):
     Navy #003262 = Core Foundation / structure (hero band, headlines)
     Light Blue #51B7E7 = Ecosystem & Orchestration / connectivity (Section 3)
     Orange #F88024 = Execution Layer / automation (Section 4)
     Seafoam #00C29B = growth / "Enable More" outcomes (Section 6)
     Yellow #F5DE00 = graphic accent only (flowing rules, spine dots)
     Body Gray #4D4D4D = body copy + footer band
   ========================================================================== */

/* --------------------------------------------------------------------------
   S1 — HERO. Navy #003262 band (an explicit case-study-template exception to
   the home page's "navy = nav only" rule, per Caleb's spec). White headline
   (the template exception to navy headlines: navy canvas -> white type).
   Hero/H1 weight stays Regular: big and calm, never bold.
   -------------------------------------------------------------------------- */
.cs-hero {
  background: var(--navy); color: #fff; text-align: center;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 84px);
}
.cs-hero .hero-title { color: #fff; }
/* Hero lede = P1 tier (16px, sits under the H1) per the 2026-07-07 baseline
   rule in valere.css. SHARED: restyles the Strive proposal, VGM, intake, and
   the public case-study heroes together. */
.cs-hero .cs-hero-lede {
  font-size: var(--fs-p1); line-height: 1.6;
  color: rgba(255,255,255,.85);
  max-width: var(--p1-max); margin: 0 auto;
}

/* Valere + Strive co-brand lockup. White wordmarks read on the navy band. */
.cs-hero-logo {
  width: auto; height: auto;
  max-width: clamp(300px, 50vw, 460px);
  margin: 0 auto clamp(24px, 4vw, 36px);
}

/* --------------------------------------------------------------------------
   SHARED CASE-STUDY PIECES
   -------------------------------------------------------------------------- */

/* Pull-quote. Quote text navy Regular (calm, like H1); attribution = caption
   italic (italic's one job: the descriptive line). Orange opening mark =
   Execution accent. */
.cs-quote { max-width: 720px; margin: clamp(32px, 5vw, 48px) auto 0; text-align: center; }
.cs-quote p {
  font-size: var(--fs-h3); font-weight: var(--w-regular); color: var(--navy);
  line-height: 1.45; margin: 0 auto .8em;
}
.cs-quote p::before { content: "\201C"; color: var(--orange); font-weight: var(--w-bold); margin-right: 2px; }
.cs-quote p::after  { content: "\201D"; color: var(--orange); font-weight: var(--w-bold); margin-left: 2px; }
.cs-quote figcaption { font-size: var(--fs-caption); font-style: italic; color: var(--body-gray); }

/* Stylized pull quote — headshot (round) + large navy quote + orange accent bar.
   Avatar is optional (omit the <img> for a text-only stylized quote). */
.cs-pullquote {
  --q-accent: var(--orange);                 /* matches the accent bar; drives the hover pulse */
  max-width: 860px; margin: clamp(28px, 5vw, 48px) auto 0;
  display: flex; align-items: center; gap: clamp(20px, 3vw, 34px);
  background: #fff; border: 1px solid var(--hairline); border-left: 4px solid var(--q-accent);
  border-radius: 14px; padding: clamp(24px, 3.5vw, 38px);
  box-shadow: var(--shadow-window);
}
/* on hover, pulse a glow in the card's accent color (over the window shadow) */
@media (prefers-reduced-motion: no-preference) {
  .cs-pullquote:hover { animation: cs-quote-pulse 1.8s ease-in-out infinite; }
}
@keyframes cs-quote-pulse {
  0%, 100% { box-shadow: var(--shadow-window), 0 0 0 0 transparent; }
  50%      { box-shadow: var(--shadow-window), 0 0 26px 2px color-mix(in srgb, var(--q-accent) 45%, transparent); }
}
.cs-pullquote__avatar {
  flex: 0 0 auto; width: clamp(76px, 9vw, 108px); height: clamp(76px, 9vw, 108px);
  border-radius: 50%; object-fit: cover; box-shadow: 0 6px 18px rgba(0,50,98,.16);
}
.cs-pullquote__body { flex: 1; }
.cs-pullquote__q {
  font-size: clamp(19px, 2.4vw, 25px); font-weight: var(--w-regular); color: var(--navy);
  line-height: 1.4; margin: 0 0 .7em; max-width: none;
}
.cs-pullquote__q::before { content: "\201C"; color: var(--orange); font-weight: var(--w-bold); margin-right: 1px; }
.cs-pullquote__q::after  { content: "\201D"; color: var(--orange); font-weight: var(--w-bold); margin-left: 1px; }
.cs-pullquote__cite { font-size: var(--fs-caption); font-style: italic; color: var(--body-gray); line-height: 1.5; }
.cs-pullquote__cite strong { display: block; font-style: normal; font-weight: var(--w-bold); color: var(--navy); font-size: var(--fs-body); }
@media (max-width: 620px) { .cs-pullquote { flex-direction: column; text-align: center; } }
/* light-blue variant (accent bar + quote marks) */
.cs-pullquote--blue { --q-accent: var(--light-blue); }
.cs-pullquote--blue .cs-pullquote__q::before,
.cs-pullquote--blue .cs-pullquote__q::after { color: var(--light-blue); }
/* tinted variant: off-white card (for quotes sitting on a white section) */
.cs-pullquote--tint { background: var(--off-white); }

/* (S2 backbone window shadow + #C2C9D0 frame/tab borders were promoted to
   valere.css on 2026-06-15 — now global, no page-level override needed.) */

/* [PLACEHOLDER] token — deliberately loud so unfinished numbers can never be
   mistaken for real ones (no-fabrication rule). Swap the chip's text for the
   real figure and remove the class when the number is sourced. */
.cs-ph {
  display: inline-block;
  border: 1.5px dashed var(--orange); border-radius: 6px;
  color: var(--orange); font-weight: var(--w-bold);
  font-size: 12px; line-height: 1; padding: 4px 8px;
  white-space: nowrap;
}

/* "Draft" flag for workflow content Strive still needs to verify. */
.cs-draft {
  display: inline-block;
  font-size: 11px; font-weight: var(--w-bold); line-height: 1;
  color: var(--orange); border: 1px solid var(--orange); border-radius: 999px;
  padding: 4px 10px; vertical-align: middle;
}

/* ==========================================================================
   S3 — BACKBONE SPINE  (.spine-*)  — REUSABLE MODULE
   The endpoint-enablement visual: a vertical three-line backbone (one curved
   line per layer color), the condensed platform graphic at its center, and
   an append-only queue of endpoint cards either side. Data dots travel the
   lane between each card and the spine (one at a time per lane — speed reads
   from motion, not from crowding). Diamond-tipped "taps" branch off the full
   length of the spine and drift gently so the backbone reads as alive.

   TO ADD AN ENDPOINT: append one <li class="spine-card"> to either queue.
   Lanes, dots, and spacing regenerate automatically (JS measures the DOM).
   This is the whole reason this layout replaced the circular concept.

   Layering (z-index): spine SVG (0) -> dots (1) -> platform (2) -> cards (3).
   Dots slide UNDER the platform graphic at the center, so they read as
   entering and leaving the backbone.

   Colors: spine lines = light blue #51B7E7 / navy #003262 / orange #F88024
   (the three layers). Dots cycle all five brand colors (yellow allowed:
   graphic accent). Taps = navy at low opacity.
   ========================================================================== */
/* S3 intro paragraph: centered under the eyebrow + H2 — both the text and the
   block are centered (auto margins) so it doesn't hug the left of the head. */
.cs-head-p { text-align: center; max-width: var(--p1-max); margin-left: auto; margin-right: auto; }

/* (The darker off-white was promoted to the global --off-white token in
   valere.css on 2026-06-15; the S3 scoped test override is no longer needed.) */

.spine-viz { position: relative; }

/* Data-flow particles. Each travels an "invisible track" between one endpoint
   and the center of the platform — out (logo -> backbone) and back
   (backbone -> logo) — in random Valere colors, calm and ordered (no chaotic
   cross traffic). Sits BEHIND the logos and the platform graphic (z-index 1;
   content is z-index 2), so a particle slides under the platform as it reaches
   the backbone. Tracks + motion are computed by the spine IIFE. */
.spine-dots { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.spine-dot {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px 1px currentColor;
  /* positioned via transform (compositor-only) so iOS Safari doesn't repaint the
     blurred glow every frame. JS sets translate(x,y) translate(-50%,-50%). */
  will-change: transform, opacity;
}

.spine-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(240px, 27vw, 360px) 1fr;
  gap: clamp(18px, 3.5vw, 56px);
  align-items: center;
}

/* center column: the condensed three-layer platform graphic
   (platform-condensed-02.svg — no backbone lines, just the stack). */
.spine-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.spine-platform {
  width: 100%; max-width: 238px; height: auto; display: block; /* ~30% smaller */
}

/* live data-event counter, centered directly above the platform. Illustrative
   capacity, not a real metric. Min-width reserves room for 9 figures so the
   number never reflows/clips as it climbs. */
.spine-counter { text-align: center; margin-bottom: clamp(10px, 1.5vw, 16px); }
.spine-counter__num {
  display: block; font-weight: var(--w-bold); color: var(--navy);
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05;
  font-variant-numeric: tabular-nums; min-width: 11ch;
}
.spine-counter__cap {
  display: block; margin-top: 4px;
  font-size: 12px; font-style: italic; color: var(--body-gray);
}

/* endpoint queues: vertical stacks that spread along the platform height */
.spine-queue {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: space-around;
  gap: clamp(20px, 4vw, 44px); z-index: 2; position: relative;
}

/* endpoint: a logo (no box), OR a text label in a navy pill (white text,
   rounded, no shadow) for endpoints without a logo file. */
.spine-endpoint {
  display: flex; align-items: center; gap: 8px;
}
.spine-queue--left  .spine-endpoint { justify-content: flex-end;   text-align: right; }
.spine-queue--right .spine-endpoint { justify-content: flex-start; text-align: left; }
.spine-endpoint img { max-height: 40px; width: auto; max-width: 210px; object-fit: contain; }
/* a couple of logos read small at the base size — scale them up 50% */
.spine-endpoint--lg img { max-height: 60px; max-width: 300px; }
/* text endpoint: a white card (matches the infographic card style) so it
   contrasts the off-white section; navy H3-size text at medium weight. */
.spine-endpoint__name {
  display: inline-block; text-align: center;
  background: #fff; color: var(--navy);
  border: 1px solid var(--hairline); border-radius: 12px;
  font-size: var(--fs-h3); font-weight: var(--w-medium); line-height: 1.25;
  padding: 14px 20px;
  box-shadow: 0 6px 18px rgba(0,50,98,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.spine-endpoint:hover .spine-endpoint__name { transform: translateY(-3px); box-shadow: var(--shadow-window); border-color: #d4dde6; }
@media (prefers-reduced-motion: reduce) { .spine-endpoint:hover .spine-endpoint__name { transform: none; } }

/* Boxed card — still used by Section 5 "in queue" (dashed). Kept separate from
   the boxless S3 endpoints above. */
.spine-card {
  background: #fff; border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,50,98,.07);
  min-height: 64px; width: 100%; max-width: 300px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 2px; padding: 12px 18px; text-align: center;
}
.spine-card__name { font-size: 16px; font-weight: var(--w-bold); color: var(--navy); line-height: 1.2; }
.spine-card__role { font-size: 11px; color: var(--body-gray); line-height: 1.3; }
.spine-card img { max-height: 40px; width: auto; max-width: 190px; object-fit: contain; }
.spine-card--queued {
  border: none; background: transparent; box-shadow: none;
}
.spine-card--queued .spine-card__name { color: var(--body-gray); }

/* Mobile is deferred (same stance as the home page): below ~860px the
   3-column layout folds to a single column; the platform leads, endpoints
   list beneath it, particle field hidden. */
/* S3 mobile: platform centered, the 4 left endpoints arched across the TOP and the
   4 right endpoints arched across the BOTTOM. Everything shrunk to fit a phone. The
   JS dot-flow self-disables when .spine-dots is hidden. */
@media (max-width: 860px) {
  .spine-grid { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 3vw, 22px); }
  .spine-queue--left  { order: 1; align-items: flex-end; }   /* top arc */
  .spine-stage        { order: 2; }
  .spine-queue--right { order: 3; align-items: flex-start; } /* bottom arc */
  .spine-queue {
    flex-direction: row; flex-wrap: nowrap; justify-content: center;
    gap: clamp(6px, 2vw, 14px); width: 100%;
  }
  .spine-queue .spine-endpoint {
    flex: 1 1 0; min-width: 0; flex-direction: column;
    justify-content: flex-start; text-align: center;
  }
  .spine-platform { max-width: clamp(116px, 32vw, 156px); margin: 0 auto; } /* shared mobile platform size */
  .spine-endpoint img, .spine-endpoint--lg img { max-height: 28px; max-width: 100%; }
  .spine-endpoint__name { font-size: 11px; font-weight: var(--w-medium); padding: 7px 6px; border-radius: 8px; line-height: 1.2; }
  .spine-counter__num { font-size: clamp(19px, 5.5vw, 24px); }
  .spine-counter__cap { font-size: 10px; }
  /* dots stay ON for mobile — the JS draws data flowing from each endpoint to the
     platform center (works with the arched layout via getBoundingClientRect). */
  /* gentle arch: inner cards (2,3) pulled away from the platform, outer cards (1,4)
     sit closer — a shallow dome above and bowl below. */
  .spine-queue--left  .spine-endpoint:nth-child(2),
  .spine-queue--left  .spine-endpoint:nth-child(3) { transform: translateY(-16px); }
  .spine-queue--right .spine-endpoint:nth-child(2),
  .spine-queue--right .spine-endpoint:nth-child(3) { transform: translateY(16px); }
}

@media (prefers-reduced-motion: reduce) {
  /* JS renders a few static scattered dots instead of animating the field */
  .spine-dot { box-shadow: 0 0 6px 1px currentColor; }
}

/* ==========================================================================
   S4 — WORKFLOW AUTOMATION TABS  (.cs-tabs / .cs-flow)
   Orange #F88024 section (Execution Layer = automation). Pill tab strip
   (wraps to two rows), one panel per automation. Tab/panel wiring follows
   the home page architecture-module pattern (data-target + aria-selected).
   ========================================================================== */
/* ---- Benefit band: the gains shared across every automation, 4 across (two
   rows of 4). Mini-cards = orange Tabler icon, navy background, white text. ---- */
.cs-statband {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin: clamp(28px, 4vw, 48px) auto clamp(36px, 5vw, 56px); max-width: 940px;
}
/* Stat-band carousel chrome. Desktop keeps the 4x2 grid below; on mobile the
   statCarousel IIFE turns the band into a 2-up rotating carousel. */
.cs-statwrap { display: flex; align-items: center; gap: clamp(6px, 1.4vw, 14px); max-width: 940px; margin: clamp(28px, 4vw, 48px) auto clamp(36px, 5vw, 56px); }
.cs-statvp { flex: 1 1 auto; min-width: 0; overflow: visible; }
#statCarousel .cs-statband { margin: 0; max-width: none; width: 100%; }   /* wrapper owns spacing now */
.cs-statarrow {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hairline); background: #fff; color: var(--navy);
  font-size: 24px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 50, 98, .08); transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cs-statarrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.cs-statarrow:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }
@media (max-width: 720px) {
  /* grid -> 2-up flex carousel track (the IIFE shows arrows + auto-rotates here) */
  #statCarousel .cs-statband { display: flex; flex-wrap: nowrap; gap: 14px; }
  #statCarousel .cs-statband > .cs-benefit { flex: 0 0 calc((100% - 14px) / 2); }
  .cs-statvp { overflow-x: clip; overflow-y: visible; }
}
.no-js .cs-statvp { overflow: visible; }
.no-js #statCarousel .cs-statband { flex-wrap: wrap; transform: none !important; }
/* Stacked layout: stat on top, label below, centered. Number kept at the
   smaller size (clamp 18-22px). */
.cs-benefit {
  background: var(--navy); border-radius: 12px;
  padding: 22px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cs-benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-window); }
@media (prefers-reduced-motion: reduce) { .cs-benefit:hover { transform: none; } }
.cs-benefit .ti { font-size: 30px; color: var(--orange); line-height: 1; } /* orange = Execution accent */
/* Stat number = seafoam (outcome / growth), bold. Stays on one line so the
   "X% -> Y%" pairs don't break. */
.cs-benefit__num {
  white-space: nowrap;
  font-size: clamp(18px, 2.2vw, 22px); font-weight: var(--w-bold);
  color: var(--seafoam); line-height: 1.05;
}
.cs-benefit__label { font-size: 14px; font-weight: var(--w-bold); color: #fff; line-height: 1.3; }
/* Single asterisk note under the stat band — caption style, body gray. */
.cs-statnote {
  max-width: 940px; margin: -28px auto clamp(36px, 5vw, 56px);
  font-size: 13px; font-style: italic; color: var(--body); text-align: center;
}

/* ---- In-panel notes: "What's next" / "Measured result" / "In practice".
   Left-bordered callout below a panel's flow steps. Orange = Execution by
   default; --result modifier switches the eyebrow to seafoam (outcome). ---- */
.cs-next {
  margin-top: clamp(20px, 3vw, 28px); padding: 16px 18px;
  background: #F4F7FA; border-radius: 10px;
}
.cs-next__eyebrow {
  display: block; font-size: 13px; font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: .06em; color: var(--orange);
  margin-bottom: 6px;
}
.cs-next--result .cs-next__eyebrow { color: var(--seafoam); }
/* max-width:none overrides the global `p { max-width:70ch }` so the copy fills
   the full card width (left-aligned), reducing the card height. */
.cs-next p { margin: 0; max-width: none; font-size: 14px; color: var(--body); line-height: 1.55; }

/* ---- S5 enhancement cards: two opportunities Strive raised in review.
   Two across on desktop, stacked on mobile. Left-aligned text. ---- */
.cs-enh {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  max-width: 940px; margin: clamp(28px, 4vw, 44px) auto 0; text-align: left;
}
@media (max-width: 720px) { .cs-enh { grid-template-columns: 1fr; } }
.cs-enh__card { background: #F4F7FA; border-radius: 12px; padding: 22px 22px 20px; }
.cs-enh__eyebrow {
  display: block; font-size: 13px; font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: .06em; color: var(--seafoam);
  margin-bottom: 8px;
}
.cs-enh__title { font-size: 20px; font-weight: var(--w-bold); color: var(--navy); margin: 0 0 8px; }
.cs-enh__card p { margin: 0; font-size: 14px; color: var(--body); line-height: 1.55; }

/* ---- The automation "window": a tab strip (matching the Future State tabs)
   over a navy body. Clicking a tab shows that automation's panel. Active tab is
   orange (Execution Layer). ---- */
.cs-window {
  max-width: 980px; margin: 0 auto; text-align: left;
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px; /* quiet hairline frame, matches the other windows/cards */
  box-shadow: var(--shadow-window); overflow: hidden;
}
.cs-tabstrip {
  display: flex; flex-wrap: wrap;
  background: var(--off-white); border-bottom: 1px solid var(--hairline);
}
.cs-tab {
  flex: 1 1 25%; min-width: 140px;
  font-family: var(--font); font-size: 13px; font-weight: var(--w-medium);
  color: var(--navy); background: transparent; cursor: pointer;
  border: 0; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 12px 8px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-tab:hover:not([aria-selected="true"]) { background: #fff; }
.cs-tab[aria-selected="true"] { background: var(--orange); color: #fff; font-weight: var(--w-bold); } /* orange = Execution */
.cs-tab:focus-visible { outline: 3px solid var(--light-blue); outline-offset: -3px; }
/* The whole window body under the off-white bar is navy. */
.cs-window__body { padding: clamp(22px, 3.5vw, 40px); background: var(--navy); border-radius: 0 0 14px 14px; }

.cs-panel-item { display: none; text-align: left; }
.cs-panel-item.is-active { display: block; animation: cs-fade .3s ease; }
@keyframes cs-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cs-panel-item.is-active { animation: none; } }

/* The automation title is redundant with the dropdown bar — hidden (kept in
   the DOM as the panel's label). */
.cs-panel-head { display: none; }

/* ---- Per-automation flow: inputs -> Valere -> outputs, on the navy body.
   Labels: light blue (in), orange (Execution = Valere), seafoam (out). ---- */
.cs-flow {
  display: grid;
  grid-template-columns: 1fr 22px 1.15fr 22px 1fr;
  gap: 12px; align-items: stretch; margin: 0;
}
@media (max-width: 860px) {
  .cs-flow { grid-template-columns: 1fr; }
  .cs-flow__sep { transform: rotate(90deg); justify-self: center; }
}
.cs-flow__col { display: flex; flex-direction: column; gap: 10px; }
.cs-flow__label { font-size: 12px; font-weight: var(--w-bold); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .08em; text-align: center; }
.cs-flow__label--in   { color: var(--light-blue); }
.cs-flow__label--exec { color: var(--orange); }   /* orange = Execution Layer */
.cs-flow__label--out  { color: var(--seafoam); }
.cs-flow__sep { display: grid; place-items: center; color: rgba(255,255,255,.35); font-weight: var(--w-bold); }

/* cards sit on the navy field: faint fill, off-white border, white text */
.cs-minicard {
  position: relative;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(244,247,250,.22);
  border-radius: 10px; padding: 12px 14px; flex: 1;
}
.cs-minicard__name { display: block; font-weight: var(--w-bold); color: #fff; font-size: var(--fs-body); }
.cs-minicard__sub  { display: block; font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }

/* center: the Valere core — stacked logo + orchestration action chips */
.cs-valerebox {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(244,247,250,.22);
  border-radius: 12px; padding: 18px; text-align: center;
}
.cs-valerebox img { height: 48px; width: auto; margin: 0 auto 12px; display: block; } /* stacked Valere logo */
.cs-valerebox ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cs-valerebox li {
  position: relative; margin: 0; padding: 8px 12px 8px 28px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(244,247,250,.16); border-radius: 8px;
  font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.3;
}
.cs-valerebox li::before {
  content: ""; position: absolute; left: 11px; top: 12px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--orange); transform: rotate(45deg);
}

/* ---- 3 connected step cards + an orange progress bar that sweeps across.
   The csWindow IIFE drives the sweep and lights each step in turn. ---- */
.cs-flow-steps { margin-top: clamp(16px, 2.5vw, 24px); }
.cs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.cs-step {
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(244,247,250,.22); border-left-width: 0;
  padding: 16px 16px 18px; min-height: 78px;
}
.cs-step:first-child { border-left-width: 1px; border-radius: 10px 0 0 0; }
.cs-step:last-child  { border-radius: 0 10px 0 0; }
.cs-step__n { display: block; font-size: 12px; font-weight: var(--w-bold); color: rgba(255,255,255,.4); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.cs-step__t { display: block; color: #fff; font-weight: var(--w-medium); line-height: 1.3; }

.cs-progress { position: relative; height: 4px; background: rgba(255,255,255,.12); border-radius: 0 0 10px 10px; overflow: hidden; }
.cs-progress__bar { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--yellow); } /* steps section = yellow */

/* ---- section identity colors. Default card borders match the sub-heads:
   inputs = light blue, outputs = seafoam. Each section's highlight pulse uses
   its own --lit color: inputs light blue, Valere orange, outputs seafoam,
   steps yellow — so every section reads as its own color. ---- */
.cs-flow__col:first-child .cs-minicard { border-color: rgba(81,183,231,.6); --lit: var(--light-blue); }
.cs-flow__col:last-child  .cs-minicard { border-color: rgba(0,194,155,.6);  --lit: var(--seafoam); }
.cs-valerebox { --lit: var(--orange); }
.cs-step      { --lit: var(--yellow); }

/* ---- highlight: the card's --lit color as a glow + a pulse that traces around
   the perimeter. The overlay is always present but FADES in/out with .is-lit
   (no snap); the border + glow transition too, so the stage changes are smooth. ---- */
@property --cs-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cs-minicard, .cs-valerebox, .cs-step { transition: border-color .5s ease, box-shadow .5s ease; }
.cs-minicard::after, .cs-valerebox::after, .cs-step::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
  background: conic-gradient(from var(--cs-ang), transparent 0deg 250deg, var(--lit) 305deg, #ffffff 348deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: cs-trace 2.4s linear infinite; animation-play-state: paused;
}
.cs-flow__col .cs-minicard.is-lit, .cs-valerebox.is-lit, .cs-step.is-lit {
  border-color: var(--lit);
  box-shadow: 0 0 0 1px var(--lit), 0 0 22px color-mix(in srgb, var(--lit) 40%, transparent);
}
.cs-flow__col .cs-minicard.is-lit::after, .cs-valerebox.is-lit::after, .cs-step.is-lit::after {
  opacity: 1; animation-play-state: running;
}
@keyframes cs-trace { to { --cs-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .cs-minicard::after, .cs-valerebox::after, .cs-step::after { animation: none; }
  .cs-minicard, .cs-valerebox, .cs-step { transition: none; }
}

/* ==========================================================================
   S6 — FUTURE STATE WINDOW  (.fut-*)
   Seafoam #00C29B section (growth / what connection makes possible next).
   A window with a partner tab strip across the top; each panel = explanation
   (left) + linear flow visual (right): Strive on the backbone -> partner ->
   outcome.
   ========================================================================== */
/* MASTER-DETAIL: a vertical category RAIL (left) drives the framed WINDOW
   (right). The rail is a stack of icon+label cards; the active one is seafoam.
   Collapses to a single column (rail above window) on narrow viewports. */
.fut-layout {
  display: grid; grid-template-columns: minmax(240px, 300px) 1fr;
  gap: clamp(16px, 2.5vw, 28px); align-items: start; text-align: left;
}
@media (max-width: 860px) { .fut-layout { grid-template-columns: 1fr; } }

.fut-rail { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 860px) {
  .fut-rail { flex-direction: row; flex-wrap: wrap; }
  .fut-rail .fut-tab { flex: 1 1 auto; }
}
/* Rail card: icon (orange = execution accent) + label, white card; active = seafoam. */
.fut-tab {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font-family: var(--font); font-size: 14px; font-weight: var(--w-medium);
  color: var(--navy); background: #fff; cursor: pointer; text-align: left;
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 12px 14px; line-height: 1.25;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fut-tab .ti { font-size: 20px; flex: 0 0 auto; color: var(--orange); }
.fut-tab:hover:not([aria-selected="true"]) { border-color: var(--seafoam); }
.fut-tab[aria-selected="true"] { background: var(--seafoam); border-color: var(--seafoam); color: #fff; font-weight: var(--w-bold); }
.fut-tab[aria-selected="true"] .ti { color: #fff; }
.fut-tab:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }

/* Window: keeps the shared --shadow-window. Only the active panel shows; each
   panel splits into a top card strip and a bottom detail block. */
.fut-window {
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: var(--shadow-window); overflow: hidden; text-align: left;
}
.fut-panel { display: none; }
.fut-panel.is-active { display: block; animation: cs-fade .3s ease; }
@media (prefers-reduced-motion: reduce) { .fut-panel.is-active { animation: none; } }

/* TOP zone — the typed mini-cards on white, hairline divider beneath. */
.fut-cards {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px;
  padding: clamp(22px, 3vw, 34px); min-height: 132px;
  border-bottom: 1px solid var(--hairline);
}
/* BOTTOM zone — description + bullets on the off-white tint. */
.fut-detail { background: var(--off-white); padding: clamp(22px, 3vw, 34px); }
.fut-detail h3 { margin-bottom: .4em; }
.fut-detail ul { margin: 12px 0 0; padding-left: 0; list-style: none; }
.fut-detail li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.fut-detail li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--seafoam); transform: rotate(45deg); /* seafoam = growth */
}

/* TYPED MINI-CARDS. --logo = white card holding a partner logo; --industry =
   navy (a vertical/market); --action = orange (a capability, Execution layer);
   --ph = a logo card awaiting a real logo file (navy bold name, no icon). */
.fut-card {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 8px; padding: 10px 16px; min-height: 52px;
  font-size: 14px; font-weight: var(--w-bold); line-height: 1.2;
}
.fut-card .ti { font-size: 20px; flex: 0 0 auto; }
/* logo cards float with no card chrome — just the mark on the panel */
.fut-card--logo { background: transparent; border: 0; padding: 8px 12px; }
/* per-logo bump: scales the mark within its fixed box (transform doesn't affect
   layout, so neighbor spacing is unchanged). For logos that read small, e.g. VGM. */
.fut-card--lg .fut-logo { transform: scale(1.4); }
.fut-card--logo .fut-logo { height: 40px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.fut-card--ph { color: var(--navy); }

/* ==========================================================================
   ECOSYSTEM WEB — floating, mouse-reactive logo network (S6, above the picker).
   No window/card: it sits on the page background. The .ecoweb IIFE positions
   the nodes, draws the connecting lines, and animates both on mouse-move.
   ========================================================================== */
.ecoweb {
  position: relative;
  /* FIXED 5-row slot mesh (rows of 5/4/4/4/5 around the hub). The slots flip
     through the logo pool, so this height is CONSTANT no matter how big the
     network grows — it does not need bumping when js/network-logos.js grows. */
  height: clamp(430px, 46vw, 600px);
  /* pull up toward the P1 (negative top), tight gap below (to the picker); bleed
     a little past the text column on both sides, adaptively, inside the viewport. */
  margin: clamp(-48px, -3.5vw, -16px) clamp(-90px, -5vw, -16px) clamp(8px, 1.5vw, 18px);
  overflow: hidden;
}
/* ghosted connector web — light blue (connectivity), low opacity. Anchored to
   logo centers by the IIFE; stretches with the box via viewBox in px. */
.ecoweb__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ecoweb__links line { stroke: var(--light-blue); stroke-width: 1.25; opacity: .5; }
.ecoweb__nodes { position: absolute; inset: 0; }
/* Balance visual weight: each logo lives in the SAME fixed box and is fit inside
   it (object-fit: contain), so wide wordmarks shrink to roughly the weight of a
   medium logo like RingCentral / Net Health / Strive instead of dominating by
   sheer width. The definite box size also fixes viewBox-only SVGs (no 0-collapse). */
.ecoweb__node {
  position: absolute; top: 0; left: 0;            /* JS sets left/top in px */
  width: clamp(86px, 9vw, 112px); height: clamp(40px, 4.6vw, 54px);
  transform: translate(-50%, -50%); will-change: left, top;
  display: flex; align-items: center; justify-content: center;
}
.ecoweb__node img {
  width: 100%; height: 100%; object-fit: contain;
  display: block; pointer-events: none; user-select: none;
}
/* per-logo visual-weight nudges (object-fit means a scale just resizes the mark
   within its box; overflow is fine). Tweak the factor per logo as needed. */
.ecoweb__node--up img   { transform: scale(1.16); }
.ecoweb__node--up2 img  { transform: scale(1.34); }
.ecoweb__node--down img { transform: scale(0.84); }
/* center hub = the Valere platform (condensed, no Strive mark). Larger, sits
   above the connector lines as the focal point of the mesh — not boxed. */
.ecoweb__node--hub { z-index: 2; width: auto; height: auto; }
.ecoweb__node--hub img { width: auto; height: clamp(60px, 8vw, 105px); object-fit: contain; }
/* Flip card inside each fixed desktop slot (network rewrite 2026-06-25). Each
   slot flips through the shared logo pool; the flip is a rotateY swap (same
   motion as the mobile .ecoflip card). Per-logo scale is set inline on the img. */
.ecoweb__card {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease; transform-style: preserve-3d; will-change: transform;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ecoweb__card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* No-JS / reduced-motion fallback: a plain static wrap of logos, web hidden. */
.no-js .ecoweb, .ecoweb.is-static {
  height: auto; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 22px 34px;
  padding: 10px 0;
}
.no-js .ecoweb__links, .ecoweb.is-static .ecoweb__links { display: none; }
.no-js .ecoweb__nodes, .ecoweb.is-static .ecoweb__nodes {
  position: static; display: contents;
}
.no-js .ecoweb__node, .ecoweb.is-static .ecoweb__node {
  position: static; transform: none;
}
.fut-card--industry { background: var(--navy); color: #fff; }
.fut-card--action { background: var(--orange); color: #fff; }
/* tinted card treatments: 30% color tint fill, full-strength border + icon,
   navy text. --tint-blue (Payer Solutions, Beyond HME), --tint-orange (Sales). */
.fut-card--tint-blue {
  background: color-mix(in srgb, var(--light-blue) 30%, #fff);
  border: 1px solid var(--light-blue); color: var(--navy);
}
.fut-card--tint-blue .ti { color: var(--light-blue); }
.fut-card--tint-orange {
  background: color-mix(in srgb, var(--orange) 30%, #fff);
  border: 1px solid var(--orange); color: var(--navy);
}
.fut-card--tint-orange .ti { color: var(--orange); }
@media (max-width: 560px) { .fut-card { flex: 1 1 auto; justify-content: center; } }

/* ==========================================================================
   FOOTER — slim presentation version. Body-gray #4D4D4D band, the orange
   Valere symbol centered, one quiet line. (The full site footer returns when
   this template moves onto the public site.)
   ========================================================================== */
.cs-footer {
  background: var(--body-gray); color: rgba(255,255,255,.6);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: clamp(36px, 5vw, 56px) var(--gutter);
  font-size: 12px; text-align: center;
}
.cs-footer img { height: 40px; width: auto; }

/* --------------------------------------------------------------------------
   NO-JS fallbacks: all tab panels show stacked; spine renders without the
   drawn lines (cards + platform still tell the story).
   -------------------------------------------------------------------------- */
.no-js .cs-tabstrip, .no-js .fut-rail { display: none; }
.no-js .cs-panel-item { display: block !important; border-top: 1px solid var(--hairline); padding-top: 24px; margin-top: 24px; }
.no-js .fut-panel { display: block !important; border-top: 1px solid var(--hairline); }

/* ==========================================================================
   MOBILE (≤860px) — phones + iPad portrait. Desktop layout is untouched above
   this breakpoint. Mobile-only constructs live here.
   ========================================================================== */

/* The .m-select module MOVED to valere.css on 2026-09-11. Home uses it too and
   home loads only valere.css, so keeping it here left the home instance
   completely unstyled. Every page that loads THIS file also loads valere.css,
   and valere.css loads first, so nothing here changed behaviour. */


@media (max-width: 860px) {
  /* swap tab groups for the dropdown (arch needs the compound selector to beat
     `.arch-window .arch-tabs` from valere.css) */
  .cs-tabstrip, .fut-rail { display: none; }   /* .arch-tabs + .m-select now swap in valere.css */
  /* the picker collapses to one column; the dropdown sits above the window */
  .fut-layout { grid-template-columns: 1fr; }
  /* S6: desktop mesh out (mobile card-flip shown via its own block below) */
  .ecoweb { display: none; }
}

/* --- S6 mobile card-flip (.ecoflip) -------------------------------------------
   4 arched slots above + 4 below the center platform; each slot's card flips
   (rotateY) on a staggered timer to cycle the logo set. Hidden on desktop/no-JS. */
.ecoflip { display: none; }
.no-js .ecoflip { display: none; }
@media (max-width: 860px) {
  .ecoflip {
    position: relative;
    display: flex; flex-direction: column; align-items: center; perspective: 800px;
    gap: clamp(16px, 5vw, 30px);
    margin: clamp(4px, 2vw, 14px) 0 clamp(20px, 5vw, 30px);
  }
  .no-js .ecoflip { display: none; }   /* keep the static ecoweb on no-JS mobile */
}
.ecoflip__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ecoflip__links line { stroke: var(--light-blue); stroke-width: 1.25; opacity: .5; }
.ecoflip__row { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: clamp(8px, 3vw, 18px); width: 100%; }
.ecoflip__platform { position: relative; z-index: 1; width: clamp(116px, 32vw, 156px); height: auto; display: block; } /* shared mobile platform size (matches S3) */
/* slot carries the static arch offset; the inner card does the flip (kept on
   separate elements so the two transforms don't collide). */
.ecoflip__slot { flex: 1 1 0; max-width: 86px; height: 48px; display: flex; align-items: center; justify-content: center; }
.ecoflip__card {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease; transform-style: preserve-3d;
  /* promote to a GPU layer + prefixes so the rotateY flip is smooth on iOS Safari */
  will-change: transform;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ecoflip__card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.ecoflip__row--top .ecoflip__slot:nth-child(2),
.ecoflip__row--top .ecoflip__slot:nth-child(3) { transform: translateY(-15px); }
.ecoflip__row--bottom .ecoflip__slot:nth-child(2),
.ecoflip__row--bottom .ecoflip__slot:nth-child(3) { transform: translateY(15px); }
@media (prefers-reduced-motion: reduce) { .ecoflip__card { transition: none; } }

/* =====================================================================
   CONNECTED-INTAKE PAGE — page-specific additions (connected-intake.html)
   Three small, reusable blocks: a paragraph helper, the Notable intake
   callout, and the discovery accordion. Brand: navy #003262 heads, light
   blue #51B7E7 connectivity accent, orange #F88024 Execution accent.
   ===================================================================== */

/* Activation paragraph that sits BELOW the order-to-cash window. */
.section-head--after { margin-top: clamp(22px, 4vw, 34px); }

/* INTAKE CALLOUT — names the connected AI/LLM intake engine (e.g. Notable).
   Light tint card with a light-blue connectivity edge. */
.intake-note {
  display: flex; gap: clamp(14px, 3vw, 22px); align-items: flex-start;
  max-width: 880px; margin: clamp(22px, 4vw, 34px) auto 0; text-align: left;
  background: var(--off-white); border: 1px solid var(--hairline);
  border-left: 4px solid var(--light-blue); border-radius: 12px;
  padding: clamp(18px, 3vw, 26px);
}
.intake-note__icon { color: var(--light-blue); font-size: 30px; line-height: 1; flex: 0 0 auto; }
.intake-note__title { margin: 0 0 6px; color: var(--navy); }
.intake-note__body p { margin: 0; }
@media (max-width: 560px) { .intake-note { flex-direction: column; gap: 10px; } }

/* DISCOVERY ACCORDION (.acc) — reusable Q&A list. Each head is a <button>
   toggling aria-expanded + the panel's [hidden]. The +/- icon is pure CSS:
   the vertical bar collapses when the item is open. */
.acc { max-width: 880px; margin: clamp(20px, 4vw, 32px) auto 0; text-align: left; border-top: 1px solid var(--hairline); }
.acc__item { border-bottom: 1px solid var(--hairline); }
.acc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font);
  padding: clamp(16px, 2.5vw, 22px) 4px;
  font-size: var(--fs-h3); font-weight: var(--w-bold); color: var(--navy); line-height: 1.3;
}
.acc__head:hover { color: var(--orange); }
.acc__head:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }
.acc__icon { position: relative; flex: 0 0 auto; width: 22px; height: 22px; }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; background: var(--orange); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.acc__icon::before { left: 0; top: 10px; width: 22px; height: 2px; }   /* horizontal bar */
.acc__icon::after  { left: 10px; top: 0; width: 2px; height: 22px; }   /* vertical bar (the +) */
.acc__head[aria-expanded="true"] .acc__icon::after { transform: scaleY(0); opacity: 0; } /* becomes a minus */
.acc__panel { padding: 0 4px clamp(16px, 2.5vw, 22px); }
.acc__panel ul { margin: 0; padding-left: 20px; }
.acc__panel li { color: var(--body-gray); font-size: var(--fs-body); line-height: 1.55; margin: 0 0 8px; }
.acc__panel li:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .acc__icon::before, .acc__icon::after { transition: none; } }

/* =====================================================================
   CONNECTED-INTAKE PAGE — page edits (scoped under .page-intake)
   ===================================================================== */

/* Header: centered logo, no nav. */
.page-intake .nav--center { justify-content: center; }

/* Space between the three method cards and the intake flow window below them. */
.page-intake .cards + .cs-window { margin-top: clamp(32px, 5vw, 52px); }

/* Center every section-head P1. Global `p { max-width:70ch }` has no auto
   margin, so it sits left; a tighter measure + auto margins center it clearly. */
.page-intake .section-head p { max-width: var(--p1-max); margin-left: auto; margin-right: auto; } /* one prose width site-wide (Caleb 2026-07-07) */

/* Eyebrow color variants (bold weight keeps light blue / seafoam legible on white). */
.page-intake .eyebrow--blue  { color: var(--light-blue); }
.page-intake .eyebrow--green { color: var(--seafoam); }

/* Notable logo in the first "Valere executes" bullet. The repo SVG is the dark
   wordmark, so an invert filter renders it white on the navy box. (If a true
   white SVG is dropped in, remove the filter.) */
.page-intake .cs-valerebox li.intake-exec-notable { display: flex; align-items: center; gap: 10px; padding-top: 7px; padding-bottom: 7px; }
/* specificity must beat `.cs-valerebox img` (which sets height:48px + auto margins) */
.page-intake .cs-valerebox img.intake-exec-notable__logo { height: 18px; width: auto; margin: 0; flex: 0 0 auto; filter: brightness(0) invert(1); }

/* Small company logo to the LEFT of a pull-quote name/title (Todd → Strive; the
   intake quote card). Inline-block sizing avoids the flex-basis blow-up that made
   the SVG render full-width. */
.cs-pullquote__cite--logo .cs-cite-logo {
  display: inline-block; height: 26px; width: auto; max-width: 120px;
  vertical-align: middle; margin-right: 12px;
}
.cs-pullquote__cite--logo .cs-cite-text { display: inline-block; vertical-align: middle; }

/* OUTCOME BAND (S7) — now uses the shared stat-card design (stat stacked above
   the label, centered), matching the Strive case-study benefit band. No
   page-specific layout override; the base .cs-benefit styles apply. */
@media (prefers-reduced-motion: reduce) {
  .page-intake .cs-benefit:hover { animation: none; background-image: none; background: var(--navy); }
}

/* =====================================================================
   STRIVE 2026 REBUILD — Enable Better / Enable More story (2026-06-30)
   Scoped to the Strive case study. Bands, the split hero, the Upcoming
   Projects cards, and the Data Activation module. Brand: navy #003262
   structure, light blue #51B7E7 connectivity/data-in, orange #F88024
   Execution, seafoam #00C29B growth/activation.
   ===================================================================== */

/* ---- ENABLE BETTER / ENABLE MORE BANDS (.band / .band-bar) -----------
   Each band wraps a group of sections; its bar pins (position:sticky) while
   that group scrolls, then un-pins when the band ends and the next band's
   bar takes over. Navy text/icon for contrast on the colored bars. */
.band { position: relative; }
.band-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px var(--gutter);
  color: #fff; font-weight: var(--w-bold);   /* white icon + label on the colored bar */
  font-size: 16px; letter-spacing: .03em;
  box-shadow: 0 2px 10px rgba(0, 50, 98, .10);
}
.band-bar .ti { font-size: 20px; line-height: 1; }
.band-bar--better { background: var(--enable-better); } /* Enable Better = light blue #51B7E7 */
.band-bar--more   { background: var(--enable-more); }   /* Enable More = seafoam #00C29B */
/* Section eyebrows inside an Enable Better band group carry the strategy color
   (light blue); Enable More sections use eyebrow--seafoam explicitly. */
.band--better .eyebrow { color: var(--enable-better); }

/* ---- S1 HERO — two-column split -------------------------------------- */
.cs-hero--split { text-align: left; }
.cs-hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.cs-hero--split .cs-hero-logo { margin: 0 0 clamp(18px, 3vw, 28px); max-width: clamp(240px, 30vw, 380px); }
.cs-hero--split .hero-title { color: #fff; }
.cs-hero--split .cs-hero-lede { margin: clamp(14px, 2vw, 20px) 0 0; max-width: var(--p1-max); } /* one prose width site-wide; the hero column constrains it */
.cs-hero-cards { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); }
.cs-hero-card {
  position: relative; overflow: hidden; text-align: left;
  background: #fff; border-radius: 14px;
  padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--shadow-window);
}
.cs-hero-card__h { margin: 8px 0 6px; color: var(--navy); font-size: var(--fs-h3); font-weight: var(--w-bold); }
.cs-hero-card p { margin: 0; color: var(--body-gray); font-size: var(--fs-body); line-height: 1.5; max-width: none; }
.cs-hero-card__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-hero-card__list li {
  position: relative; padding-left: 26px;
  color: var(--body-gray); font-size: var(--fs-body); line-height: 1.4;
}
.cs-hero-card__list li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: var(--w-bold); color: var(--enable-better); }   /* Better card check = Enable Better (light blue) */
/* Enable Better hero-card accent bar: navy -> light blue (was the default orange->yellow) */
.cs-hero-card--better .card__rule--flow { --flow-1: var(--navy); --flow-2: var(--enable-better); }
@media (max-width: 860px) {
  .cs-hero__grid { grid-template-columns: 1fr; }
  .cs-hero--split { text-align: center; }
  .cs-hero--split .cs-hero-logo { margin-left: auto; margin-right: auto; }
  .cs-hero--split .cs-hero-lede { margin-left: auto; margin-right: auto; }
  .cs-hero-card, .cs-hero-card p, .cs-hero-card__h { text-align: left; }
}

/* ---- S5 UPCOMING PROJECTS (.proj-*) ---------------------------------- */
.proj-subhead {
  text-align: left; max-width: 940px; margin: clamp(26px, 4vw, 40px) auto 14px;
  color: var(--navy); font-size: var(--fs-h3); font-weight: var(--w-bold);
}
.proj-grid {
  list-style: none; padding: 0; margin: 0 auto; max-width: 940px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left;
}
@media (max-width: 720px) { .proj-grid { grid-template-columns: 1fr; } }
.proj-card {
  background: #fff; border: 1px solid var(--hairline); border-radius: 12px;
  padding: 20px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 6px 18px rgba(0, 50, 98, .06);
}
.proj-card--logo { align-items: center; justify-content: center; text-align: center; gap: 12px; min-height: 132px; }
.proj-card__logo { max-height: 40px; max-width: 180px; width: auto; object-fit: contain; }
.proj-card__note { margin: 0; font-size: 12px; color: var(--body-gray); }
.proj-card__eyebrow { font-size: 13px; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--orange); }
.proj-card__title { margin: 0; color: var(--navy); font-size: 18px; font-weight: var(--w-bold); }
.proj-card p { margin: 0; font-size: 14px; color: var(--body-gray); line-height: 1.55; max-width: none; }
/* status tags: navy text on a light brand tint (active/on deck); exploratory
   uses the loud dashed-orange treatment (same as the [PLACEHOLDER] chip). */
.proj-tag { display: inline-block; font-size: 11px; font-weight: var(--w-bold); line-height: 1; padding: 5px 10px; border-radius: 999px; letter-spacing: .03em; }
.proj-tag--active { background: color-mix(in srgb, var(--seafoam) 20%, #fff); color: var(--navy); }
.proj-tag--ondeck { background: color-mix(in srgb, var(--light-blue) 22%, #fff); color: var(--navy); }
.proj-tag--exploratory { background: #fff; color: var(--orange); border: 1.5px dashed var(--orange); }
/* brand-standard card hover (matches .card:hover in valere.css): lift + window shadow */
.proj-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.proj-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-window); border-color: #d4dde6; }
@media (prefers-reduced-motion: reduce) { .proj-card:hover { transform: none; } }

/* ---- Roadmap carousel: 3-wide track, arrows both sides, auto-rotate (JS) ---- */
.proj-carousel { display: flex; align-items: center; gap: clamp(6px, 1.4vw, 14px); max-width: 980px; margin: 0 auto; }
/* clip horizontally (the carousel window) but keep vertical visible so the
   card hover lift + shadow are not clipped by the viewport */
.proj-carousel__viewport { flex: 1 1 auto; min-width: 0; overflow-x: clip; overflow-y: visible; }
.proj-carousel__track { display: flex; gap: 16px; list-style: none; margin: 0; padding: 8px 0; transition: transform .45s ease; }
.proj-carousel__track > .proj-card { flex: 0 0 calc((100% - 32px) / 3); }   /* 3 visible, two 16px gaps */
.proj-carousel__arrow {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hairline); background: #fff; color: var(--navy);
  font-size: 24px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 50, 98, .08); transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.proj-carousel__arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.proj-carousel__arrow:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }
@media (max-width: 820px) { .proj-carousel__track > .proj-card { flex-basis: calc((100% - 16px) / 2); } }   /* 2 up */
@media (max-width: 560px) {
  .proj-carousel__track > .proj-card { flex-basis: 100%; }                                                  /* 1 up */
  .proj-carousel { gap: 4px; }
  .proj-carousel__arrow { width: 38px; height: 38px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .proj-carousel__track { transition: none; } }
/* no-JS: drop the clip + transform and wrap all cards so none are hidden */
.no-js .proj-carousel__viewport { overflow: visible; }
.no-js .proj-carousel__track { flex-wrap: wrap; transform: none !important; }
.no-js .proj-carousel__arrow { display: none; }

/* ---- S6 DATA ACTIVATION module (.dataact-*) -------------------------- */
.dataact { position: relative; margin-top: clamp(24px, 4vw, 44px); }
.dataact__dots { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.dataact__grid {
  position: relative;
  display: grid; grid-template-columns: 1fr clamp(200px, 24vw, 300px) 1.05fr;
  gap: clamp(16px, 3vw, 48px); align-items: center;
}
/* LEFT cluster: chips clumped, wrapping; repel offsets set inline by JS */
.dataact__cluster { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-content: center; }
.dataact-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 999px;
  padding: 9px 14px; font-size: 13px; font-weight: var(--w-medium); color: var(--navy);
  box-shadow: 0 4px 12px rgba(0, 50, 98, .07); white-space: nowrap; will-change: transform;
}
.dataact-chip .ti { color: var(--light-blue); font-size: 16px; line-height: 1; }   /* light blue = data in */
/* CENTER stage: the platform + a single navy "cycle" card that FLIPS through
   Reading -> Structuring -> Retaining -> Activation. On Activation a ripple
   pulses out (rock-in-water) and the card lights with the flowing light-blue ->
   seafoam glow (same flowing-gradient technique as the Book Your Discovery
   button), then lingers before flipping back to Reading. */
.dataact__stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; perspective: 800px; }
.dataact__platform { width: 100%; max-width: 210px; height: auto; display: block; }
.dataact__cycle { position: relative; margin-bottom: clamp(14px, 2vw, 20px); display: flex; justify-content: center; }
.dataact__cycle-card {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 172px; padding: 12px 18px;
  background: var(--navy); color: #fff; border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0, 50, 98, .18);
  transition: transform .3s ease; transform-style: preserve-3d;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform;
}
.dataact__cycle-card .ti { font-size: 22px; line-height: 1; color: var(--light-blue); }
.dataact__cycle-label { font-weight: var(--w-bold); font-size: 15px; letter-spacing: .03em; }
/* flowing light-blue -> seafoam glow halo behind the card; off until Activation */
.dataact__cycle-card::after {
  content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 16px;
  background: linear-gradient(90deg, var(--light-blue), var(--seafoam), var(--light-blue));
  background-size: 200% 100%; filter: blur(11px); opacity: 0; transition: opacity .4s ease;
}
.dataact__cycle.is-activated .dataact__cycle-card { box-shadow: 0 8px 26px rgba(0, 194, 155, .35); }
.dataact__cycle.is-activated .dataact__cycle-card::after { opacity: .9; animation: rule-flow 3s linear infinite; }
.dataact__cycle.is-activated .dataact__cycle-card .ti { color: var(--seafoam); }
/* ripple ring: expands and fades like a rock hitting water */
.dataact__pulse {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; border: 2px solid var(--seafoam); opacity: 0; pointer-events: none; z-index: 0;
}
.dataact__cycle.is-activated .dataact__pulse { animation: dataact-ripple 1.6s ease-out; }
@keyframes dataact-ripple {
  0%   { transform: scale(.5); opacity: .55; }
  100% { transform: scale(3.4); opacity: 0; }
}
/* RIGHT: 4 flip cards cycling the full activation use-case set (seafoam = growth) */
.dataact__cards { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; perspective: 900px; }
.dataact-card {
  background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--seafoam);
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 4px 12px rgba(0, 50, 98, .05);
  transition: transform .3s ease; transform-style: preserve-3d;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform;
}
.dataact-card__in { display: flex; align-items: flex-start; gap: 11px; }
.dataact-card .ti { color: var(--seafoam); font-size: 20px; line-height: 1; flex: 0 0 auto; margin-top: 1px; }
.dataact-card__txt { display: flex; flex-direction: column; gap: 2px; }
.dataact-card__name { font-weight: var(--w-bold); color: var(--navy); font-size: 14px; line-height: 1.2; }
.dataact-card__sub { font-size: 12px; color: var(--body-gray); line-height: 1.35; }
@media (max-width: 860px) {
  /* keep the data stream ON for mobile (flows vertically: cluster -> platform ->
     cards); add room between the three zones so the stream is clearly visible */
  .dataact__grid { grid-template-columns: 1fr; gap: clamp(30px, 9vw, 60px); }
  .dataact__platform { max-width: clamp(128px, 36vw, 172px); margin: 0 auto; }
  .dataact__cluster, .dataact__cards { max-width: 460px; margin: 0 auto; width: 100%; }
  /* shrink the flipping activation card so it is not so prominent on mobile */
  .dataact__cycle-card { min-width: 0; padding: 9px 14px; gap: 7px; }
  .dataact__cycle-card .ti { font-size: 18px; }
  .dataact__cycle-label { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .dataact-chip { will-change: auto; }
  .dataact__cycle-card, .dataact-card { transition: none; }
  .dataact__cycle.is-activated .dataact__cycle-card::after { animation: none; }
  .dataact__pulse { display: none; }
}