/* ==========================================================================
   VALERE HEALTH — Home page stylesheet (pattern-setter)
   Source of truth for tokens. A human will rebuild this in a CMS, so every
   color is called out by HEX + brand role, and every type token is labeled.

   Brand systems applied:
   - Color: Valere_Brand_Color_System  (color maps to architecture)
   - Type:  Valere_Typography_System    (Fira Sans, 3 weights, fixed scale)
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors — each tied to its architecture role */
  --navy:        #003262; /* Core Foundation / backbone. Headlines + structure. */
  --light-blue:  #51B7E7; /* Ecosystem & Orchestration / connectivity. Bold on white only. */
  --seafoam:     #00C29B; /* Enable More / "your business" + growth. Not a layer. */
  --orange:      #F88024; /* Execution Layer / automation. The signature accent. */
  --yellow:      #F5DE00; /* Graphic accent only. Never text, never background. */
  --body-gray:   #4D4D4D; /* Body copy on white. Also the footer background. */
  --white:       #FFFFFF; /* Primary canvas. */

  /* GTM STRATEGY ACCENTS (Caleb 2026-07-13). Each strategy is ONE pure brand
     color, indirected through a role token so the whole site re-themes from
     here. Orange is NOT a strategy color — it is the general/primary theme
     (logo navy.orange): default eyebrows, buttons, section accents.
       Enable More   = Seafoam    #00C29B  (revenue / growth)
       Enable Better = Light Blue #51B7E7  (connectivity / deeper workflow)
     Note: both are legible on white only at bold weight; pure values used
     per Caleb's "one color" call (no darkened text variant). */
  --enable-more:   var(--seafoam);     /* #00C29B */
  --enable-better: var(--light-blue);  /* #51B7E7 */

  /* Functional neutral — NOT a brand color. Used only for section rhythm
     (alternating white / off-white). Darkened 2026-06-15 from #F4F7FA so the
     white/off-white contrast is visible on non-OLED screens. */
  --off-white:   #E8EEF5;
  --hairline:    #C2C9D0; /* card + divider border on light backgrounds (darkened 2026-06-15 from #E6ECF2 for non-OLED contrast) */

  /* Type — Fira Sans, three weights only (400 / 500 sparingly / 700) */
  --font: "fira-sans", "Fira Sans", Arial, sans-serif;
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;

  /* Type scale (digital reference px, fluid via clamp). Hero/H1 = Regular. */
  --fs-hero:    clamp(34px, 5vw, 48px);
  --fs-h1:      clamp(28px, 4vw, 34px);
  --fs-h2:      clamp(22px, 3vw, 26px);
  --fs-h3:      20px;   /* sub-head / eyebrow */
  --fs-h4:      15px;   /* H4 Bold — compact headers (accordion-card titles, in-module statements). Caleb 2026-07-07 */
  --fs-p1:      16px;  /* P1 — the lede paragraph under an H1/H2 (Caleb, 2026-07-07) */
  --fs-body:    14px;  /* P2 — body copy in cards / under H3s */
  --fs-caption: 13px;  /* Caption / P3 — the italic descriptive line under a head (never emphasis) */

  /* Rhythm */
  --maxw: 1120px;
  --head-max: 720px;   /* centered head block: eyebrow + H1/H2 (+ P1). Baseline
                          proportion adopted 2026-07-07 (was 760). */
  --p1-max: 600px;     /* EVERY lede/centered-prose paragraph caps here. Fixed px
                          (not ch) so every tier renders the SAME width regardless
                          of font size — Caleb's consistency rule, 2026-07-07,
                          matching the reference site's 720/600 system. */
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(56px, 8vw, 104px);
  /* MOBILE RHYTHM (Caleb, 2026-09-12: "There is a little white gap in between
     the bottom of the modules and the top of Ecosystem section starts... So
     there isn't blank spots"). At 375px the clamp above sits on its 56px floor,
     so two stacked sections put 112px of white between a module and the next
     heading. The module itself no longer reserves dead space - the
     tallest-panel lock that used to do that is gone - so this is the remaining
     source. The floor drops on a phone only; desktop rhythm is untouched. */
  --radius: 12px;

  /* Window drop shadow — the single shadow used behind every framed module
     (backbone/architecture window, workflow window, Future Opportunities
     window). One token = one look across the site. Set on the S2 backbone
     window first; promoted here 2026-06-15 so all windows match it. */
  --shadow-window: 0 22px 50px rgba(0,50,98,.24), 0 6px 16px rgba(0,50,98,.12);

  /* Motion — ONE vocabulary for every animation on the site (full rationale in
     animation-guidelines.md). Durations scale with the size of the change;
     easings follow the Material standard/emphasized curves. Entrances
     decelerate (ease-out), exits accelerate (ease-in). Always pair with a
     prefers-reduced-motion opt-out. */
  --dur-micro:   160ms;   /* taps, tiny hovers, +/- glyph toggles */
  --dur-fast:    240ms;   /* small state changes: color, small opacity */
  --dur-base:    360ms;   /* the default — cards, hovers, most transitions */
  --dur-slow:    520ms;   /* larger moves — drawers, content fades, stack open */
  --dur-slower:  680ms;   /* hero moments — the audience picker collapse/expand */
  --ease-standard:   cubic-bezier(.4, 0, .2, 1);   /* general purpose */
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);    /* hero moments, decisive settle */
  --ease-out:        cubic-bezier(0, 0, .2, 1);    /* ENTRANCES — quick in, gentle rest */
  --ease-in:         cubic-bezier(.4, 0, 1, 1);    /* EXITS — ease away */
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--body-gray);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* --------------------------------------------------------------------------
   TYPOGRAPHY — headlines navy, body gray, eyebrows orange (or layer color)
   Hero + H1 are big and Regular (calm, not bold). H2 and below step to Bold.
   -------------------------------------------------------------------------- */
.hero-title,
h1, h2, h3 { color: var(--navy); margin: 0 0 .5em; }

.hero-title { font-size: var(--fs-hero); font-weight: var(--w-regular); line-height: 1.1; letter-spacing: -0.01em; }
h1          { font-size: var(--fs-h1);   font-weight: var(--w-regular); line-height: 1.15; }
h2          { font-size: var(--fs-h2);   font-weight: var(--w-bold);    line-height: 1.2; }
h3          { font-size: var(--fs-h3);   font-weight: var(--w-bold);    line-height: 1.3; }
h4          { font-size: var(--fs-h4);   font-weight: var(--w-bold);    line-height: 1.3; color: var(--navy); margin: 0 0 .5em; }

p { margin: 0 0 1em; max-width: 70ch; } /* keep measure ~60-80 chars */
p:last-child { margin-bottom: 0; }
strong { font-weight: var(--w-bold); }

/* Paragraph tiers (baseline rule, Caleb 2026-07-07 — proportions from the
   MedForward reference, translated to OUR type scale):
   P1 = the lede under an H1/H2: 16px, ~63ch measure, centers with its head.
   P2 = text inside cards / under H3s: the 14px body default (no class needed;
   .p2 exists for explicit markup). Eyebrows stay sentence case (no all-caps). */
.p1 { font-size: var(--fs-p1); line-height: 1.6; max-width: var(--p1-max); }
.p2 { font-size: var(--fs-body); }
/* P3 — the italic descriptive line under a head (a label/caption role; italic is
   NEVER emphasis here). Same size as Caption. */
.p3 { font-size: var(--fs-caption); font-style: italic; color: var(--body-gray); line-height: 1.5; }
.section--center .p1, .text-center .p1 { margin-left: auto; margin-right: auto; }

/* Eyebrow / kicker: sentence case, ancillary color (default orange) */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  color: var(--orange);
  margin: 0 0 .6em;
}
.eyebrow--blue    { color: var(--light-blue); }
.eyebrow--seafoam { color: var(--seafoam); }

/* Italic descriptive line under a head (italic's only job) */
.caption {
  font-size: var(--fs-caption);
  font-style: italic;
  color: var(--body-gray);
}

/* --------------------------------------------------------------------------
   LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Section rhythm: alternate white / off-white. No color bands (accents only). */
/* Hold a phrase on one line. Used where a break would strand a word or split
   a hyphenated term (home hero eyebrow, 2026-09-12). */
.nowrap { white-space: nowrap; }

.section { padding: var(--section-y) 0; }
@media (max-width: 640px) { :root { --section-y: 38px; } }
.section--tint { background: var(--off-white); }

/* Decorative "living network" pattern. Applied to SOLID-WHITE sections to
   break up the white. Two parts:
     1. BASE  — the network drawn in off-white (#F4F7FA), barely-there texture.
     2. ::after — a COLORED copy of the same network revealed only NEAR THE
        CURSOR, through a soft RADIAL circle. The colored layer is a 45-degree
        orange<->yellow gradient that slowly DRIFTS, and the whole reveal PULSES
        (opacity 100% <-> 25%). So as you move the mouse, a soft warm circle of
        the moving gradient shows through the network lines, gently pulsing.
        Shape (network) + reveal (radial) are both MASKS; color is CSS, so it
        can animate. One SVG drives both base and mask, so colored lines
        register exactly on the base lines.
   Brand roles: orange = Execution Layer (automation), yellow = graphic accent.
   Everything sits BEHIND the content (z-index), so it never competes with the
   navy headlines. Cards/modules sit above it. Cursor position comes from JS
   (--mx / --my); off-screen by default so nothing shows until the mouse moves. */
.bg-pattern {
  position: relative;
  background-image: url("../assets/backgrounds/background%20layer.svg");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  --mx: -1000px; --my: -1000px; /* cursor position, set by JS */
}
.bg-pattern > * { position: relative; z-index: 1; } /* content above the accent */
.bg-pattern::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;

  /* COLOR — 45deg orange -> yellow -> orange (warm brand colors at 75% tint),
     on an oversized canvas so it can DRIFT diagonally without showing a seam.
       #FAA05B = orange #F88024 @ 75%  (Execution Layer / automation)
       #F8E640 = yellow #F5DE00 @ 75%  (graphic accent) */
  background-image: linear-gradient(45deg, #FAA05B, #F8E640, #FAA05B);
  background-size: 200% 200%;

  /* SHAPE + RADIAL REVEAL — two masks intersected:
       layer 1 = the network SVG (cover/center -> aligned with the base).
       layer 2 = a soft circle at the cursor, alpha fading 100% -> 0% across
                 its radius (#000 opaque center -> transparent edge).
     intersect => color shows only where (a line exists) AND (inside the circle). */
  -webkit-mask-image:
    url("../assets/backgrounds/background%20layer.svg"),
    radial-gradient(circle 200px at var(--mx) var(--my), #000 0%, transparent 100%);
          mask-image:
    url("../assets/backgrounds/background%20layer.svg"),
    radial-gradient(circle 200px at var(--mx) var(--my), #000 0%, transparent 100%);
  -webkit-mask-size: cover, 100% 100%;
          mask-size: cover, 100% 100%;
  -webkit-mask-position: center, 0 0;
          mask-position: center, 0 0;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;   /* old WebKit/Safari spelling of "intersect" */
          mask-composite: intersect;    /* standard (Chrome, Firefox) */

  /* TWO motions at once: opacity pulse (100% <-> 25%) + diagonal gradient drift.
     1 (full) is the resting opacity used when motion is reduced. */
  opacity: 1;
  animation:
    bg-pulse 4s  ease-in-out infinite,
    bg-drift 12s ease-in-out infinite alternate;
}
/* (a) pulse: the revealed circle breathes between full and 25% strength. */
@keyframes bg-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
/* (b) drift: the 45deg gradient slides diagonally (alternate = no hard reset). */
@keyframes bg-drift {
  from { background-position:   0%   0%; }
  to   { background-position: 100% 100%; }
}
/* Safety net: if a browser can't intersect masks, the layers would UNION and
   flood the section with color (fights the headlines). In that case, drop the
   colored layer and keep the clean off-white texture only. */
@supports not ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .bg-pattern::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-pattern::after { animation: none; } /* holds steady at full opacity */
}

.section-head { max-width: var(--head-max); margin-bottom: clamp(32px, 5vw, 56px); }
.section--center .section-head { margin-left: auto; margin-right: auto; text-align: center; }
/* The paragraph directly inside a section head IS a P1 (larger lede tier). */
.section-head > p { font-size: var(--fs-p1); line-height: 1.6; max-width: var(--p1-max); }
.section--center .section-head > p { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   BUTTONS / CTA — orange is the signature accent
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: var(--w-medium); /* Medium used sparingly, here for UI labels */
  font-size: 16px; /* CTAs stay at the old body size so buttons read prominent */
  line-height: 1;
  padding: 14px 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }

/* Default = solid orange (the signature accent). On hover the SAME flowing
   orange -> yellow gradient as the accent bars sweeps across, so the button
   joins the page's shared left-to-right motion. Smooth 50/50 orange<->yellow
   blend (same as .card__rule--flow), no highlight band. */
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover {
  color: #fff;
  background-image: linear-gradient(90deg, var(--orange), var(--yellow), var(--orange));
  background-size: 200% 100%;
  animation: rule-flow 3s linear infinite; /* shared keyframe, same speed as bars */
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover { animation: none; background-image: none; background: #e26f12; }
}

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }

/* On a navy background, the ghost button flips to white outline */
.on-navy .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.on-navy .btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* --------------------------------------------------------------------------
   S0 — HEADER / NAV   (the ONLY navy background on the page)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  color: #fff;
  /* No shadow at rest; it fades in on the first scroll so the bar separates
     from whatever is passing under it (Caleb, 2026-09-12: "I do want a drop
     shadow, clean super smooth one, minimal, so there is some division once you
     start scrolling"). The shadow is painted by the HEADER itself, so it sits
     BEHIND the nav contents and behind the progress line, which are its own
     children - no z-index juggling needed. Two stacked shadows: a tight one for
     the edge and a wide soft one for the depth. */
  /* ALWAYS ON (Caleb, 2026-09-12: "make it exist always (not just on scroll)").
     It used to fade in past 4px; the division is wanted at rest too. The
     .is-scrolled class is still set by the scroll controller and still drives
     the progress line, it just no longer gates the shadow. */
  box-shadow: 0 1px 3px rgba(0, 25, 49, .18), 0 10px 30px rgba(0, 25, 49, .18);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
/* The shadow and the progress line sit on the LOWEST sticky bar: the sub-nav
   where a page has one (/solutions, /technology), the header everywhere else.
   The controller in partials/nav.html moves the line and adds .is-scrolled to
   whichever it is, so this only has to describe both. */
.subnav {

  box-shadow: 0 1px 3px rgba(0, 25, 49, .18), 0 10px 30px rgba(0, 25, 49, .18);   /* extended 2026-09-12: Caleb found the first pass a little too tight */
}
.subnav { position: sticky; }                 /* already sticky; restated so the
                                                 absolutely-placed progress line
                                                 has a positioned ancestor here
                                                 as well as in the header */
.subnav.is-scrolled { transition: box-shadow var(--dur-base) var(--ease-standard); }
@media (prefers-reduced-motion: reduce) { .subnav { transition: none; } }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 72px;
}

/* ── SCROLL PROGRESS LINE ────────────────────────────────────────────────────
   Sits on the sticky header's bottom edge. Nothing until the first scroll, then
   it fills left to right and completes when the footer is reached.
   The gradient and animation are the Flow Rule module's, unchanged, so this
   belongs to that family: orange -> yellow -> orange over 200% width, scrolled
   one full cycle by `rule-flow`. NO transition on width - the width IS the
   scroll position, and easing it would lag the finger. Only the fade in/out is
   eased. The header is position:sticky, which is a positioned ancestor, so the
   absolute placement needs nothing extra. */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none; z-index: 2; }
.scroll-progress__bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--orange), var(--yellow), var(--orange));
  background-size: 200% 100%;
  animation: rule-flow 3s linear infinite;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard);
}
.scroll-progress.is-on .scroll-progress__bar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .scroll-progress__bar { animation: none; background: var(--orange); }
}

.nav__logo { display: inline-flex; align-items: center; text-decoration: none; }
.nav__logo-img { height: 30px; width: auto; display: block; }

.nav__links { display: flex; align-items: center; gap: clamp(8px, 2.2vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }

/* Top-level dropdown trigger */
.nav__top {
  background: none; border: 0; color: #fff; font-family: var(--font);
  font-size: 16px; font-weight: var(--w-medium); cursor: pointer; /* top-level nav stays 16px */
  padding: 26px 2px; display: inline-flex; align-items: center; gap: 7px; opacity: .92;
}
.nav__top::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .85; transition: transform .15s ease, margin .15s ease;
}
/* Current page = orange (Caleb, 2026-09-12). Declared BEFORE the hover rule so
   hover still wins and stays light blue on the current item too. */
.nav__top.is-current { color: var(--orange); opacity: 1; }
.nav__top:hover, .nav__item:hover .nav__top, .nav__top[aria-expanded="true"] { opacity: 1; color: var(--light-blue); }
.nav__top.is-current:hover, .nav__item:hover .nav__top.is-current { color: var(--light-blue); }
.nav__top[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
/* Top-level items that are a DIRECT LINK (no dropdown) are <a class="nav__top">;
   dropdown triggers stay <button class="nav__top">. Links drop the chevron and
   the underline (Caleb 2026-07-09). */
a.nav__top { text-decoration: none; }
a.nav__top::after { content: none; }

/* Dropdown panel (light, like the rest of the site) */
.nav__dropdown {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  list-style: none; margin: 0; padding: 8px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0,50,98,.18);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease; z-index: 60;
}
.nav__item:hover .nav__dropdown,
.nav__top[aria-expanded="true"] + .nav__dropdown { opacity: 1; visibility: visible; transform: none; }
/* The last two dropdowns anchor to the RIGHT edge of their item so the hidden
   panel (which still occupies layout width) never extends past the viewport —
   with 6 nav groups the Contact dropdown was creating horizontal page overflow. */
.nav__item:nth-last-child(-n+2) .nav__dropdown { left: auto; right: 0; }
.nav__dropdown a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--navy); text-decoration: none; font-size: 14px; white-space: nowrap; }
.nav__dropdown a:hover { background: var(--off-white); }

/* ── Hamburger, morphing to an X ─────────────────────────────────────────────
   Three bars, not an SVG path, so the outer two can rotate into the X while the
   middle fades. Driven purely by aria-expanded, which the page's existing
   toggle script already sets, so no page JS changed. */
.nav__toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 8px; line-height: 0; }
.nav__burger { position: relative; display: block; width: 24px; height: 18px; }
.nav__burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-micro) var(--ease-standard); }
.nav__burger i:nth-child(1) { top: 0; }
.nav__burger i:nth-child(2) { top: 8px; }
.nav__burger i:nth-child(3) { top: 16px; }
.nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 920px) {
  .nav { height: 64px; }
  /* The panel STAYS in the layout and animates open, rather than flipping
     display none/flex, which snapped with no motion at all (Caleb, 2026-09-11:
     "I want a clean, smooth open animation for the hamburger menu"). It is
     clipped to max-height 0 and made visibility:hidden when closed, so it is
     also out of the tab order and out of the accessibility tree. */
  .nav__links {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy); padding: 0 var(--gutter);
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex; max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height var(--dur-slow) var(--ease-standard),
                padding var(--dur-slow) var(--ease-standard),
                visibility var(--dur-slow) var(--ease-standard);
  }
  .nav__links.is-open {
    max-height: calc(100vh - 64px); overflow-y: auto; visibility: visible;
    padding: 6px var(--gutter) 18px;
  }
  /* Each item rides in just behind the panel, staggered, so the menu resolves
     rather than appearing all at once. Entrances ease-out per animation-guidelines. */
  .nav__links > .nav__item { opacity: 0; transform: translateY(-6px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
  .nav__links.is-open > .nav__item { opacity: 1; transform: none; }
  .nav__links.is-open > .nav__item:nth-child(1) { transition-delay: .05s; }
  .nav__links.is-open > .nav__item:nth-child(2) { transition-delay: .10s; }
  .nav__links.is-open > .nav__item:nth-child(3) { transition-delay: .15s; }
  .nav__links.is-open > .nav__item:nth-child(4) { transition-delay: .20s; }

  .nav__top { width: 100%; justify-content: space-between; padding: 15px 0; }
  /* Dropdowns become inline accordions that GLIDE, matching the drawer feel of
     the Accordion Cards module rather than snapping. */
  .nav__dropdown {
    position: static; min-width: 0; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none;
    display: block; opacity: 0; max-height: 0; overflow: hidden; padding: 0 0 0 14px;
    transition: max-height var(--dur-base) var(--ease-standard),
                opacity var(--dur-fast) var(--ease-standard),
                padding var(--dur-base) var(--ease-standard);
  }
  .nav__top[aria-expanded="true"] + .nav__dropdown { opacity: 1; max-height: 320px; padding: 0 0 10px 14px; }
  .nav__dropdown a { color: rgba(255,255,255,.85); padding: 9px 0; }
  .nav__dropdown a:hover { background: transparent; color: #fff; }
  .nav__toggle { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__links, .nav__dropdown, .nav__links > .nav__item, .nav__burger i { transition: none !important; }
  .nav__links > .nav__item { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   S1 — HERO   (white, centered hero moment)
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; text-align: center; padding-top: clamp(56px, 9vw, 110px); padding-bottom: clamp(48px, 7vw, 90px); }
/* Background video — opacity lets the white background bleed through (~50%) */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .25; z-index: 0; pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero .hero-inner { max-width: var(--head-max); margin: 0 auto; }
/* Hero lede = P1 tier (16px, ~63ch), per the 2026-07-07 baseline rule. */
.hero p.lede { font-size: var(--fs-p1); line-height: 1.6; color: var(--body-gray); margin: 0 auto 1.8em; max-width: var(--p1-max); }
.hero .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Hero mini cards: navy background, white text, orange icon (per Caleb).
   A deliberate navy-accent exception inside the otherwise-light hero. */
.hero-cards {
  list-style: none; margin: clamp(20px, 3vw, 32px) auto clamp(28px, 4vw, 40px); padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.hero-card {
  flex: 0 0 auto;
  background: var(--navy); color: #fff; border-radius: 10px;
  padding: 11px 18px;
  display: flex; flex-direction: row; align-items: center; gap: 10px;
}
.hero-card__icon { width: 20px; height: 20px; color: var(--orange); flex: 0 0 auto; }
.hero-card span { font-weight: var(--w-medium); font-size: 14px; line-height: 1.2; white-space: nowrap; }

/* --------------------------------------------------------------------------
   S2 — TRUST STRIP   (off-white, slowly rotating customer logos)
   -------------------------------------------------------------------------- */
.trust { padding: clamp(36px, 5vw, 56px) 0; }
/* Trust-strip label — a caption, NOT a section heading (kept out of the H1->H2
   hierarchy for SEO). Mirrors the old .trust h3 look: 20px bold navy italic. */
/* max-width:none + auto side margins override the global p{max-width:70ch}, which
   otherwise caps this caption at ~806px and left-anchors it (text then reads left
   of center). Full-width box + text-align:center = truly viewport-centered. */
.trust__label { text-align: center; color: var(--navy); font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: 1.3; margin: 0 auto 28px; max-width: none; font-style: italic; }
/* ⚠ NO MASK HERE. A -webkit-mask-image gradient over a child that runs a
   transform animation renders BLANK on iOS Safari - the mask forces its own
   compositing layer and WebKit fails to paint the moving child into it. That is
   why the home logo reel was an empty band on an iPhone (Caleb, 2026-09-11,
   iPhone 16 Plus / Safari) while every desktop browser was fine. The edge fade
   is now two gradient overlays, which look the same and composite normally.
   The stops carry the band colour at alpha 0 rather than `transparent`, because
   `transparent` interpolates through black in older WebKit and greys the fade.
   Same fix applied to .sol-reel__viewport below - same bug, same shape. */
.trust__viewport { position: relative; overflow: hidden; }
.trust__viewport::before,
.trust__viewport::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(36px, 12%, 130px); z-index: 2; pointer-events: none; }
.trust__viewport::before { left: 0; background: linear-gradient(90deg, #E8EEF5 0%, rgba(232, 238, 245, 0) 100%); }
.trust__viewport::after { right: 0; background: linear-gradient(270deg, #E8EEF5 0%, rgba(232, 238, 245, 0) 100%); }
/* Content-width logos + a constant gap = even edge-to-edge spacing */
.trust__track { display: flex; gap: 44px; width: max-content; align-items: center; animation: trust-scroll 36s linear infinite; }
.trust__viewport:hover .trust__track { animation-play-state: paused; }
.trust__logo {
  /* Content-width: each logo is sized to itself, the track gap is constant,
     so every edge-to-edge gap is the same. */
  flex: 0 0 auto; height: 64px;
  display: flex; align-items: center; justify-content: center;
}
.trust__logo img { height: 40px; width: auto; max-width: 200px; object-fit: contain; display: block; }

/* (Per-logo nth-child size nudges removed 2026-06-15 — they were tuned to the
   old 14-logo order; the reel now carries all 24 named logos at uniform size.) */
/* -50% -> 0 scrolls the track rightward => logos travel left-to-right (matches
   the accent bars + ripple). Two identical sets make the loop seamless. */
@keyframes trust-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* --------------------------------------------------------------------------
   S3 — PROBLEM   (white, three pain cards)
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--off-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* hover lift — same interaction as the "Who we serve" / infographic cards */
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-window); border-color: #d4dde6; }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card h3 { margin-bottom: .5em; }
.card p { color: var(--body-gray); margin: 0; }
.card__rule { width: 40px; height: 3px; background: var(--orange); border-radius: 2px; margin-bottom: 18px; }
/* Animated accent bar: a two-color gradient flowing LEFT-TO-RIGHT (matches the
   carousel + ripple). Reusable opt-in modifier. Colors come from two custom
   props so the same animation drives every color pairing; default is the
   signature orange -> yellow. 200% width scrolled one full cycle = seamless
   loop. ~3s = minimal, calm movement. */
.card__rule--flow {
  --flow-1: var(--orange); /* full-strength brand colors (100%) */
  --flow-2: var(--yellow);
  background: linear-gradient(90deg, var(--flow-1), var(--flow-2), var(--flow-1));
  background-size: 200% 100%;
  animation: rule-flow 3s linear infinite;
}
/* Color pairings — must follow .card__rule--flow so their var overrides win. */
.card__rule--blue-seafoam { --flow-1: var(--light-blue); --flow-2: var(--seafoam); }
.card__rule--navy-blue    { --flow-1: var(--navy);       --flow-2: var(--light-blue); }
@keyframes rule-flow {
  /* 200% -> 0% shifts the gradient image rightward => color travels left-to-right */
  from { background-position: 200% 50%; }
  to   { background-position:   0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .card__rule--flow { animation: none; background: var(--flow-1); }
}
/* Hero flow-glow: the accent bar centered ABOVE a centered hero's eyebrow
   (Solutions + Technology S1, Caleb 2026-07-08). On Case Studies the accent
   sits UNDER the eyebrow — that page keeps its own placement. */
.hero-inner > .card__rule--flow { margin: 0 auto clamp(12px, 1.8vw, 16px); }

/* --------------------------------------------------------------------------
   INVERTED HERO (.hero--inverted) — the sub-page S1 treatment (Caleb
   2026-07-08): navy band, orange eyebrow (H3 tier), white H1 + lede, the
   flow-glow + the orange Book Your Discovery button read as accents on navy.
   (Home stays white-first; this is a deliberate navy band on sub-pages.)
   -------------------------------------------------------------------------- */
.hero--inverted { background: var(--navy); }
.hero--inverted .eyebrow { color: var(--orange); }
.hero--inverted .hero-title { color: #fff; }
.hero--inverted p.lede { color: rgba(255, 255, 255, .85); }

.section-actions { margin-top: clamp(28px, 4vw, 44px); }
.section--center .section-actions { text-align: center; }

/* --------------------------------------------------------------------------
   S5 — WHO WE SERVE   (white, three audience link-cards)
   -------------------------------------------------------------------------- */
.audience-card {
  display: flex; flex-direction: column;
  text-decoration: none;
  background: var(--off-white); /* #F4F7FA — match the problem cards */
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.audience-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-window); border-color: #d4dde6; }
.audience-card h3 { margin-bottom: .4em; }
.audience-card p { color: var(--body-gray); flex: 1; }
.audience-card .go {
  margin-top: 18px; font-weight: var(--w-bold); color: var(--orange);
  display: inline-flex; align-items: center; gap: 8px;
}
.audience-card:hover .go { gap: 12px; }

/* --------------------------------------------------------------------------
   CLOSING CTA — NAVY band, site-wide (Caleb 2026-07-08). A deliberate navy
   #003262 accent band closes every page: white headline + light body, the
   orange eyebrow and orange primary button reading as accents on navy. This
   is the one place navy is used as a full background (positioning: white-first
   everywhere else).
   -------------------------------------------------------------------------- */
.closing { text-align: center; background: var(--navy); }
.closing .closing-inner { max-width: 680px; margin: 0 auto; }
.closing .eyebrow { color: var(--orange); }               /* accent on navy */
.closing h2 { color: #fff; }                               /* inverted headline */
.closing p { margin-left: auto; margin-right: auto; color: rgba(255,255,255,.82); } /* inverted, centered */
.closing .closing-inner .btn { margin-top: 8px; }

/* ==========================================================================
   THE VALERE WAY — global bottom CTA (navy band, Caleb 2026-07-08). Replaces
   the old .closing on Home, Solutions, Technology, Case Studies hub + the
   Strive case study. Eyebrow -> H2 -> motto lede, then three step cards
   (Discovery / Implementation / Grow). Each step card leads with a 1-2-3 number
   badge + its motto mini-card (Think big / Start small / Scale fast), then H3 +
   P2 + a Book Your Discovery Arrow Link CTA. Navy is a deliberate accent band
   (white-first everywhere else).
   ========================================================================== */
.valere-way { background: var(--navy); text-align: center; }
/* step-card header row: the 1-2-3 number badge + the motto mini-card */
.vw-step__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vw-step__num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: var(--w-bold); font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* motto mini-card — NAVY pill, white text, phase-colored icon (Caleb
   2026-07-08): Think big = orange, Start small = light blue, Scale fast =
   seafoam. Sits inside each step card (on the white card, so navy pops). */
.vw-motto__card {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy); color: #fff; border-radius: 8px;
  padding: 7px 14px; font-weight: var(--w-bold); font-size: 13px;
}
.vw-motto__card .ti { color: var(--orange); font-size: 18px; line-height: 1; }
.vw-motto__card--blue .ti { color: var(--light-blue); }
.vw-motto__card--seafoam .ti { color: var(--seafoam); }
/* header block: eyebrow orange, H2 white, motto lede light */
.valere-way .eyebrow { color: var(--orange); }
.valere-way h2 { color: #fff; }
.vw-lede { color: rgba(255, 255, 255, .82); max-width: var(--p1-max); margin: 0 auto clamp(26px, 4vw, 40px); font-size: var(--fs-p1); line-height: 1.6; }
/* Motto emphasis. Was `em` (italic + a white lift off the 82% lede). The brand
   rule reserves italic for the descriptive line under a head and uses BOLD for
   emphasis, so this is now `strong` — keeping the white lift, which is what
   actually makes it read on the navy band (roadmap 2b). */
.vw-lede strong { font-weight: var(--w-bold); color: #fff; }
/* three step cards (white on navy), 3 columns, left-aligned text */
.vw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); text-align: left; }
.vw-step { --lit: var(--orange); position: relative; background: #fff; border-radius: 14px; padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--shadow-window); display: flex; flex-direction: column; transition: box-shadow .5s ease; }
/* Card on a NAVY background: no hover LIFT (it read badly on navy — Caleb
   2026-07-13). Instead, ON HOVER, an ORANGE border TRACES around the perimeter
   and pulses — the OTC module's lit-card treatment, reusing the global
   --cs-ang property + cs-trace keyframe. Reusable via .card-on-navy. */
.card-on-navy { --lit: var(--orange); position: relative; }
.vw-step::after, .card-on-navy::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;
}
.vw-step:hover, .card-on-navy:hover { box-shadow: var(--shadow-window), 0 0 0 1px var(--lit), 0 0 22px color-mix(in srgb, var(--lit) 40%, transparent); }
.vw-step:hover::after, .card-on-navy:hover::after { opacity: 1; animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .vw-step:hover::after, .card-on-navy:hover::after { animation: none; } }
.vw-step h3 { color: var(--navy); font-weight: var(--w-bold); margin: 0 0 8px; }
.vw-step p { color: var(--body-gray); font-size: var(--fs-body); line-height: 1.55; margin: 0 0 16px; }
.vw-step strong { font-weight: var(--w-bold); }   /* was `em`; emphasis is bold, not italic (roadmap 2b) */
.vw-step .sol-link { }   /* Arrow Link CTA sits right below the P2 (not pinned to the card foot) */
@media (max-width: 820px) { .vw-steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   FOOTER   (dark gray background — the brand body gray, used as a base here)
   -------------------------------------------------------------------------- */
.site-footer { background: var(--body-gray); color: #fff; padding: clamp(48px, 6vw, 72px) 0 32px; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: var(--light-blue); } /* matches header nav hover */
/* ONE link column since 2026-09-11 (Caleb: "Just have the Contact links...
   Rename it to Contact & Legal"). Earlier parks: Case Studies 09/09, Resources
   and Company 09/10, Technology 09/11. The mark sits left, the column right, so
   the row does not leave a wide empty gutter with only two children. */
.footer-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.footer-grid .footer-col { justify-self: end; text-align: right; }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-grid .footer-col { justify-self: start; text-align: left; } }
.footer-logo-icon { height: 44px; width: auto; }
.footer-col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.55); margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; font-size: 12px; } /* footer links */
.footer-bottom { margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: var(--fs-caption); color: rgba(255,255,255,.6); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ==========================================================================
   S4 — ARCHITECTURE MODULE  (the centerpiece)
   Framework-agnostic, self-contained component. All classes prefixed `arch-`
   so this block can be lifted out into a standalone CMS code module.
   Color = architecture: Execution orange, Eco & Orchestration light blue,
   Core Foundation navy, "your business" seafoam.
   ========================================================================== */
.arch { /* root */ }
.arch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .arch-grid { grid-template-columns: 1fr; } }

/* Tabs */
.arch-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.arch-tab {
  font-family: var(--font); font-size: 15px; font-weight: var(--w-medium);
  color: var(--navy); background: #fff;
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; transition: all .15s ease;
}
.arch-tab:hover { border-color: var(--navy); }
.arch-tab[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.arch-tab[data-layer="execution"][aria-selected="true"] { background: var(--orange); border-color: var(--orange); }
.arch-tab[data-layer="eco"][aria-selected="true"]       { background: var(--light-blue); border-color: var(--light-blue); }
.arch-tab[data-layer="core"][aria-selected="true"]      { background: var(--navy); border-color: var(--navy); }
.arch-tab:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }

/* Content panel */
.arch-panel { min-height: 220px; }
.arch-panel-item { display: none; }
.arch-panel-item.is-active { display: block; animation: arch-fade .3s ease; }
@keyframes arch-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.arch-panel-item .arch-layer-tag { font-size: 13px; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; display: block; }
.arch-panel-item[data-layer="execution"] .arch-layer-tag { color: var(--orange); }
.arch-panel-item[data-layer="eco"] .arch-layer-tag       { color: var(--light-blue); }
.arch-panel-item[data-layer="core"] .arch-layer-tag      { color: var(--navy); }
/* Layer name set inside an H3 sub-head. Kept navy (no color call-out). */
.arch-panel-item h3 .arch-h3-tag { color: var(--navy); }

.arch-panel ul { margin: 14px 0 0; padding-left: 0; list-style: none; }
.arch-panel li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--body-gray); }
.arch-panel li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border-radius: 3px; background: var(--navy); transform: rotate(45deg); }
.arch-panel-item[data-layer="execution"] li::before { background: var(--orange); }
.arch-panel-item[data-layer="eco"] li::before       { background: var(--light-blue); }
.arch-panel-item[data-layer="core"] li::before      { background: var(--navy); }

/* Per-layer detail is now presented as accordion cards (.acc-cards). Icon glyph
   follows the ARCHITECTURE color axis (core navy / eco light blue / execution
   orange) — deliberately NOT the Enable More/Better strategy tokens, so the two
   color axes stay separate (CLAUDE.md). Execution = the default orange glyph. */
.arch-panel-item .acc-cards { margin: 16px 0 0; }
.arch-panel-item[data-layer="eco"]  .acc-card__ic::before,
.arch-panel-item[data-layer="eco"]  .acc-card__ic::after  { background: var(--light-blue); }
.arch-panel-item[data-layer="core"] .acc-card__ic::before,
.arch-panel-item[data-layer="core"] .acc-card__ic::after  { background: var(--navy); }

/* Per-bullet coloring (used in the Overview list): marker + bold label match
   the layer. Light blue stays legible because the label is bold. */
.arch-panel li[data-layer="execution"]::before { background: var(--orange); }
.arch-panel li[data-layer="eco"]::before       { background: var(--light-blue); }
.arch-panel li[data-layer="core"]::before      { background: var(--navy); }
.arch-panel li[data-layer="execution"] strong { color: var(--orange); }
.arch-panel li[data-layer="eco"] strong       { color: var(--light-blue); }
.arch-panel li[data-layer="core"] strong      { color: var(--navy); }

/* Floating platform stage. All four layer SVGs share ONE artboard
   (viewBox 1284.4 x 1435), so they overlay at the same size and align
   pixel-perfectly. No manual offsets. */
.arch-visual { position: relative; }
.arch-stage { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1284.4 / 1435; }
.arch-stage .arch-layer {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 1;                                   /* visible immediately — no scroll-in */
  transition: opacity .55s ease, transform .55s ease; /* used by the tab-focus fade */
  cursor: pointer;
}
/* Stack order (overlap only — vertical position is baked into each SVG). "Your
   Business" (the green house + bar that sits ON the platform) paints in FRONT;
   the platform plates behind it read Core on top -> Ecosystem -> Execution. */
.arch-layer[data-layer="business"]  { z-index: 5; }
.arch-layer[data-layer="core"]      { z-index: 4; }
.arch-layer[data-layer="eco"]       { z-index: 3; }
.arch-layer[data-layer="execution"] { z-index: 2; }

/* (Build-in scroll reveal removed 2026-06-17 — the plates show immediately so the
   backbone is never a blank section above the fold. The .arch-layer transition
   above is retained for the tab-focus fade below.) */

/* Focus a plate: the other plates fade nearly out (5% opacity). "Your business"
   (green) stays lit. Natural stacking order is preserved (no z-index changes) —
   the selected plate is NOT raised. */
.arch[data-focus="execution"] .arch-layer:not([data-layer="execution"]):not([data-layer="business"]),
.arch[data-focus="eco"] .arch-layer:not([data-layer="eco"]):not([data-layer="business"]),
.arch[data-focus="core"] .arch-layer:not([data-layer="core"]):not([data-layer="business"]) { opacity: .05; }

/* Right side: the window module */
/* Shadow deepened 2026-06-15 for non-OLED contrast; border uses --hairline (now #C2C9D0). */
.arch-window { background: #fff; border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-window); overflow: hidden; }
.arch-window .arch-panel { padding: 26px 28px 30px; }

/* Per-layer "Learn more" link at the foot of each layer panel */
.arch-learnmore { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: var(--w-bold); text-decoration: none; transition: gap .15s ease; }
.arch-learnmore[data-layer="execution"] { color: var(--orange); }
.arch-learnmore[data-layer="eco"]       { color: var(--light-blue); }
.arch-learnmore[data-layer="core"]      { color: var(--navy); }
.arch-learnmore:hover { gap: 12px; }

/* Single-row tab strip across the top of the window (macOS Safari style):
   equal segments, divided, active segment filled with its layer color. */
.arch-window .arch-tabs {
  display: flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0;
  border-bottom: 1px solid var(--hairline); background: var(--off-white);
}
.arch-window .arch-tab {
  flex: 1 1 0; min-width: 0;
  border: 0; border-right: 1px solid var(--hairline); border-radius: 0;
  padding: 13px 8px; font-size: 14px; font-weight: var(--w-medium);
  background: transparent; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.arch-window .arch-tab:last-child { border-right: 0; }
.arch-window .arch-tab:hover:not([aria-selected="true"]) { background: #fff; }
.arch-window .arch-tab[aria-selected="true"] { background: var(--navy); color: #fff; }
.arch-window .arch-tab[data-layer="execution"][aria-selected="true"] { background: var(--orange); color: #fff; }
.arch-window .arch-tab[data-layer="eco"][aria-selected="true"]       { background: var(--light-blue); color: #fff; }
.arch-window .arch-tab[data-layer="core"][aria-selected="true"]      { background: var(--navy); color: #fff; }
.arch-window .arch-tab[data-layer="business"][aria-selected="true"]  { background: var(--seafoam); color: #fff; }

/* --------------------------------------------------------------------------
   ACCESSIBILITY / MOTION
   -------------------------------------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .trust__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 40px 56px; }
  .trust__track [aria-hidden="true"] { display: none; } /* drop the duplicate set when static */
  .arch-layer { transition: none !important; } /* keep focus-dim state, drop the motion */
  .arch-panel-item.is-active { animation: none; }
  .btn:hover, .audience-card:hover { transform: none; }
}

/* Static fallback when JS is unavailable: show every layer panel, no tabs. */
.no-js .arch-tabs { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE DROPDOWN (.m-select) — MOVED HERE from case-study.css, 2026-09-11.
   Why: the home page uses this module (the platform-layer picker on
   #architecture) and home loads ONLY valere.css, so while the rules lived in
   case-study.css the home instance rendered as an unstyled block - a bare
   button and an invisible menu - while /technology and /solutions looked right.
   Every page that loads case-study.css also loads valere.css, and valere.css
   loads first, so moving it changed nothing for them.
   The 860px swap (hide the tab row, show the picker) lives here too, for the
   same reason. .cs-tabstrip and .fut-rail stay in case-study.css: they are that
   file's own modules.
   ════════════════════════════════════════════════════════════════════════════ */
/* --- Reusable mobile dropdown (.m-select) ---------------------------------
   A custom branded picker that REPLACES a tab group on mobile. It reads the
   existing [role=tab] buttons from data-tabsource and, on choose, clicks the
   (hidden) tab — reusing each module's existing switch logic. Hidden on desktop. */
.m-select { display: none; position: relative; }
.m-select__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font); font-size: 15px; font-weight: var(--w-bold); color: var(--navy);
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  padding: 13px 16px; cursor: pointer; text-align: left; line-height: 1.25;
}
.m-select__btn:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }
/* chevron sits in a contrasting circle so it pops. Defaults (white tab): navy
   circle + white arrow. Variants below recolor per module. */
.m-select__chev {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy); display: inline-flex; align-items: center; justify-content: center;
}
.m-select__chev::after {
  content: ""; width: 8px; height: 8px; margin-top: -3px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg); transition: transform .2s ease;
}
.m-select.is-open .m-select__chev::after { transform: rotate(225deg); margin-top: 2px; }

/* COLOR VARIANTS — button bg = the desktop active-tab color; arrow matches that
   bg, circle is the contrast. Colored variants drop the hairline border. */
.m-select[data-layer] .m-select__btn,
.m-select--navy .m-select__btn { border-color: transparent; }

/* S2 backbone: follows the selected layer. Your Business = seafoam (per Caleb),
   Core = navy, Ecosystem = light-blue, Execution = orange. Arrow = bg, circle = contrast. */
.m-select[data-layer="business"] .m-select__btn { background: var(--seafoam); color: #fff; }
.m-select[data-layer="core"] .m-select__btn { background: var(--navy); color: #fff; }
.m-select[data-layer="eco"] .m-select__btn { background: var(--light-blue); color: #fff; }
.m-select[data-layer="execution"] .m-select__btn { background: var(--orange); color: #fff; }
.m-select[data-layer="business"] .m-select__chev { background: #fff; }
.m-select[data-layer="business"] .m-select__chev::after { border-color: var(--seafoam); }
.m-select[data-layer="core"] .m-select__chev { background: #fff; }
.m-select[data-layer="core"] .m-select__chev::after { border-color: var(--navy); }
.m-select[data-layer="eco"] .m-select__chev { background: var(--navy); }
.m-select[data-layer="eco"] .m-select__chev::after { border-color: var(--light-blue); }
.m-select[data-layer="execution"] .m-select__chev { background: var(--navy); }
.m-select[data-layer="execution"] .m-select__chev::after { border-color: var(--orange); }

/* S4 workflow: off-white bg, navy text, navy circle, off-white arrow */
.m-select--offwhite .m-select__btn { background: var(--off-white); color: var(--navy); border-color: var(--hairline); }
.m-select--offwhite .m-select__chev { background: var(--navy); }
.m-select--offwhite .m-select__chev::after { border-color: var(--off-white); }

/* Future Opportunities: navy bg, white text, white circle, navy arrow */
.m-select--navy .m-select__btn { background: var(--navy); color: #fff; }
.m-select--navy .m-select__chev { background: #fff; }
.m-select--navy .m-select__chev::after { border-color: var(--navy); }

/* attached (sits directly atop its window): square the bottom corners so it
   blends into the panel below. (Future Opportunities is exempt — it floats.) */
.m-select--attached .m-select__btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.m-select__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: var(--shadow-window); overflow-y: auto; max-height: 60vh; padding: 6px;
}
.m-select__menu[hidden] { display: none; }
.m-select__opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: var(--w-medium); color: var(--navy);
  background: transparent; border: 0; border-radius: 8px; padding: 12px 14px; line-height: 1.3;
}
.m-select__opt[aria-selected="true"] { background: var(--seafoam); color: #fff; font-weight: var(--w-bold); }
.m-select__opt:active { background: color-mix(in srgb, var(--light-blue) 22%, #fff); }

@media (max-width: 860px) {
  .arch-window .arch-tabs { display: none; }   /* compound selector beats .arch-window .arch-tabs above */
  .m-select { display: block; }
}

.no-js .arch-panel-item { display: block !important; border-top: 1px solid var(--hairline); padding-top: 18px; margin-top: 18px; }
.no-js .arch-layer { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   S4b — ECOSYSTEM & ORCHESTRATION LAYER deep-dive
   Brand role: LIGHT BLUE #51B7E7 (connectivity). White canvas.
   Three rows: (1) head, (2) capability cards, (3) living-network visual.
   ========================================================================== */

/* (Eyebrow color modifiers live with the typography tokens above.) */

/* ROW 2 — three capability cards, expand on click (native <details>). */
.eco-caps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  align-items: start; text-align: left;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.eco-cap {
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  padding: 22px 24px; box-shadow: 0 10px 30px rgba(0,50,98,.05);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.eco-cap[open] { border-color: rgba(81,183,231,.55); box-shadow: 0 16px 40px rgba(0,50,98,.09); }
.eco-cap summary {
  list-style: none; cursor: pointer; position: relative; padding-right: 34px;
}
.eco-cap summary::-webkit-details-marker { display: none; }
.eco-cap summary h3 { margin: 14px 0 8px; }
.eco-cap__lead { margin: 0; color: var(--navy); font-weight: var(--w-medium); font-size: var(--fs-body); line-height: 1.45; }
/* + / − toggle, in the Ecosystem light blue */
.eco-cap__toggle { position: absolute; top: 0; right: 0; width: 24px; height: 24px; }
.eco-cap__toggle::before {
  content: "+"; position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  font-size: 24px; line-height: 1; font-weight: var(--w-regular); color: var(--light-blue);
}
.eco-cap[open] .eco-cap__toggle::before { content: "\2212"; } /* minus */
.eco-cap ul { margin: 16px 0 0; padding-left: 1.1em; }
.eco-cap li { font-size: var(--fs-body); color: var(--body-gray); line-height: 1.6; margin-bottom: 10px; }
.eco-cap li:last-child { margin-bottom: 0; }
.eco-cap li::marker { color: var(--light-blue); }

/* ROW 3 — living network. --stage (set inline) drives ALL sizing so the
   two rings stay responsive. Logo nodes are positioned by --a (angle) and a
   per-ring radius; data dots + connector lines are drawn by JS on top. */
.eco-net { position: relative; width: var(--stage); height: var(--stage); margin: 0 auto; overflow: visible; }

/* faint connector lines (node -> core), drawn by JS */
.eco-net__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
/* moving data dots, created by JS */
.eco-net__dots  { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.eco-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; transform: translate(-50%, -50%);
  box-shadow: 0 0 11px 2px currentColor;
}

/* center: condensed platform graphic + illustrative counter */
.eco-net__core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 3; width: calc(var(--stage) * 0.34);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.eco-net__platform { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 32px rgba(0,50,98,.14)); }
/* "inverted" counter: navy chip on the white canvas */
.eco-counter {
  background: var(--navy); color: #fff; border-radius: 12px;
  padding: 9px 20px; text-align: center; display: flex; flex-direction: column; gap: 1px;
  box-shadow: 0 12px 28px rgba(0,50,98,.20);
}
.eco-counter__label { font-size: 12px; font-weight: var(--w-bold); color: var(--light-blue); }
.eco-counter__num { font-size: 26px; font-weight: var(--w-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.eco-counter__note { font-size: 11px; font-style: italic; color: rgba(255,255,255,.55); }

/* logo nodes — centered on the stage via negative margins, then pushed out
   along their angle (--a) by the ring radius (--r), kept upright by a
   counter-rotation. Full-color logos in uniform rounded "chips" (static for
   now; lily-pad hover interactivity comes later). */
.eco-node {
  position: absolute; left: 50%; top: 50%;
  --nw: clamp(68px, calc(var(--stage) * 0.18), 104px);
  --nh: clamp(44px, calc(var(--stage) * 0.11), 66px);
  width: var(--nw); height: var(--nh);
  margin-left: calc(var(--nw) / -2); margin-top: calc(var(--nh) / -2);
  transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
  display: grid; place-items: center; padding: 10px 12px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,50,98,.08); z-index: 2;
}
.eco-node--inner { --r: calc(var(--stage) * 0.345); }
.eco-node--outer { --r: calc(var(--stage) * 0.50); }
.eco-node img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* Tablet: shrink chips a touch (handled by clamp); stack capability cards. */
@media (max-width: 860px) {
  .eco-caps { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}
/* Phone: two rings of logos cannot fit. Hide the network (keep core + counter)
   and let the capability cards carry the section. */
@media (max-width: 560px) {
  .eco-node { display: none; }
  .eco-net__lines, .eco-net__dots { display: none; }
  .eco-net { width: min(88vw, 360px); height: auto; aspect-ratio: auto; }
  .eco-net__core { position: static; transform: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .eco-dot { display: none; } /* JS also skips the flow loop */
}

/* ==========================================================================
   S5 — SOLUTIONS   (.sol-*)   — the "Who we serve" rebuild
   ==========================================================================
   White canvas. One FULL-WIDTH framed window (models the backbone window
   .arch-window) with a top tab strip — Post-Acute Care Providers /
   Healthcare Service Providers / Healthcare Technology — where the ACTIVE
   tab is ORANGE (#F88024 = Execution / signature accent) for every tab
   (not the backbone's per-layer colors). The window body is white.

   PAC carries two modules switched by PILL sub-tabs floating above the H3:
     - Ecosystem Opportunities -> the ecosystem-web network module (.ecoweb)
     - Workflow Automation      -> the order-to-cash flow module (.o2c-*)
   HSP + HTS each carry the data-streaming SPINE module (.spine-*).

   The .ecoweb / .ecoflip / .spine-* / .cs-flow* / .cs-minicard /
   .cs-valerebox / .cs-step* / .cs-progress* / pulse rules and the .m-select
   mobile dropdown below are COPIED from case-study.css so the home page
   (which loads ONLY valere.css) is self-contained. The Strive page keeps its
   own copies in case-study.css — the two are intended to diverge per audience.
   Brand colors: navy #003262 headlines/Core, orange #F88024 Execution/active,
   light blue #51B7E7 inputs/connectivity, seafoam #00C29B outputs/growth,
   yellow #F5DE00 graphic accent (progress bar — accent only, never text).
   ========================================================================== */

/* ---- the window frame (mirrors .arch-window) ---- */
.sol-window {
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: var(--shadow-window); overflow: hidden; text-align: left;
}
/* ---- top audience tab strip (mirrors .arch-window .arch-tabs; orange active) ---- */
.sol-tabs {
  display: flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0;
  border-bottom: 1px solid var(--hairline); background: var(--off-white);
}
.sol-tab {
  flex: 1 1 0; min-width: 0; font-family: var(--font);
  border: 0; border-right: 1px solid var(--hairline); border-radius: 0;
  padding: 14px 10px; font-size: 14px; font-weight: var(--w-medium);
  background: transparent; color: var(--navy); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
  transition: background .15s ease, color .15s ease;
}
.sol-tab:last-child { border-right: 0; }
.sol-tab:hover:not([aria-selected="true"]) { background: #fff; }
.sol-tab[aria-selected="true"] { background: var(--orange); color: #fff; font-weight: var(--w-bold); } /* orange = Execution accent */
.sol-tab:focus-visible { outline: 3px solid var(--light-blue); outline-offset: -3px; }

.sol-body { padding: clamp(22px, 3vw, 32px); }
.sol-panel-item { display: none; }
.sol-panel-item.is-active { display: block; animation: arch-fade .3s ease; }
@media (prefers-reduced-motion: reduce) { .sol-panel-item.is-active { animation: none; } }

/* panel copy: navy H3, gray body (default site styles); just spacing */
/* Heads are CENTERED on every tab + sub-tab (matches the centered .section-head /
   .cs-head-p pattern used elsewhere): H3, P1, and the CTA link all center, P1
   constrained + auto-margined. The modules below keep their own alignment. */
.sol-panel-item > h3, .sol-sub > h3 { margin-bottom: .4em; text-align: center; }
.sol-panel-item > p,  .sol-sub > p  { color: var(--body-gray); max-width: var(--p1-max); margin: 0 auto clamp(12px, 1.8vw, 16px); text-align: center; }
/* ==========================================================================
   ARROW LINK CTA (.sol-link) — the site-standard inline text CTA (named +
   formalized with Caleb 2026-07-08). Bold, P2 (14px), with an arrow (a child
   <span>) that eases right on hover.
   COLOR: matches the section theme via --cta-color; defaults to orange. On a
   colored background it should be white — set --cta-color:#fff on the surface
   or add .sol-link--on-color.
   ========================================================================== */
.sol-cta { text-align: center; margin: 0 0 clamp(20px, 3vw, 30px); }
.sol-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: var(--w-bold); font-size: var(--fs-body);   /* P2 */
  color: var(--cta-color, var(--orange)); text-decoration: none;
  transition: gap .15s ease;
}
.sol-link:hover { gap: 12px; }
.sol-link:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 3px; }
.sol-link--on-color { --cta-color: #fff; }   /* on any colored background */
@media (prefers-reduced-motion: reduce) { .sol-link { transition: none; } }

/* Per-window credibility logo strip: a centered, static row of brand logos on
   WHITE, below the visual, with its own H3 heading. Sits at the bottom of each
   audience panel (for PAC, after both sub-modules). */
.sol-reel { margin-top: clamp(22px, 3.5vw, 36px); padding-top: clamp(20px, 3vw, 30px); border-top: 1px solid var(--hairline); }
.sol-reel__head { text-align: center; color: var(--navy); font-size: var(--fs-h3); font-weight: var(--w-bold); margin: 0 0 clamp(16px, 2.5vw, 26px); }
/* Auto-scrolling marquee: the viewport clips + fades the edges, the track scrolls.
   The solReel IIFE clones the set to fill the row + duplicates it for a seamless
   -50% loop, and sets the duration so speed is even across reels (more logos =
   longer track = longer duration). Same mechanism as the hero trust reel. */
/* Same iOS Safari mask bug as .trust__viewport above; same fix. These reels sit
   on white rather than the tinted band, so the fade carries #FFF at alpha 0. */
.sol-reel__viewport { position: relative; overflow: hidden; }
.sol-reel__viewport::before,
.sol-reel__viewport::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(28px, 8%, 90px); z-index: 2; pointer-events: none; }
.sol-reel__viewport::before { left: 0; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); }
.sol-reel__viewport::after { right: 0; background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); }
.sol-reel__track { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); width: max-content; }
.sol-reel__track.is-marquee { animation: sol-reel-scroll 36s linear infinite; }
.sol-reel__viewport:hover .sol-reel__track.is-marquee { animation-play-state: paused; }
.sol-reel__track img { flex: 0 0 auto; height: 36px; width: auto; max-width: 160px; object-fit: contain; display: block; }
/* -50% -> 0 scrolls the track rightward (logos travel left-to-right, matching the hero) */
@keyframes sol-reel-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* before the IIFE runs, no-JS, or reduced-motion: a static centered wrap (no scroll) */
.no-js .sol-reel__track, .sol-reel__track:not(.is-marquee) { flex-wrap: wrap; justify-content: center; width: auto; }
@media (prefers-reduced-motion: reduce) { .sol-reel__track { animation: none !important; flex-wrap: wrap; justify-content: center; width: auto; } }
@media (max-width: 560px) { .sol-reel__track img { height: 30px; } }
/* Workflow Automation sub-tab: drop the reel divider + equalize top/bottom spacing so
   the reel reads centered below the navy module (toggled by the pill controller). */
.sol-panel-item.is-flow-active .sol-reel { border-top: 0; padding-top: 0; margin-top: clamp(22px, 3vw, 32px); }

/* ---- PAC pill sub-tabs (float above the H3) ---- */
.sol-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; }
.sol-pill {
  font-family: var(--font); font-size: 14px; font-weight: var(--w-medium);
  color: var(--navy); background: #fff;
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; transition: all .15s ease;
}
.sol-pill:hover:not([aria-selected="true"]) { border-color: var(--navy); }
.sol-pill[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); } /* active pill inverts to navy (connects into the navy workflow panel) */
.sol-pill:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }

/* WORKFLOW AUTOMATION tab only: the pill row itself goes NAVY (bleeds to the
   window edges + top, rounding to meet the tab strip and flush into the navy
   panel below), and the pills invert to WHITE — so the whole sub-tab reads
   navy/white. Toggled by JS (`.sol-pills--on-navy`) only while pac-flow is active. */
.sol-pills--on-navy {
  background: var(--navy);
  margin: calc(-1 * clamp(22px, 3vw, 32px)) calc(-1 * clamp(22px, 3vw, 32px)) 0;
  padding: clamp(18px, 2.6vw, 26px) clamp(22px, 3vw, 32px) clamp(14px, 2vw, 18px);
  border-radius: 0; /* square — the window's overflow:hidden clips the real corners */
}
.sol-pills--on-navy .sol-pill { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.sol-pills--on-navy .sol-pill:hover:not([aria-selected="true"]) { border-color: #fff; }
.sol-pills--on-navy .sol-pill[aria-selected="true"] { background: #fff; color: var(--navy); border-color: #fff; }
.sol-sub { display: none; }
.sol-sub.is-active { display: block; animation: arch-fade .3s ease; }
@media (prefers-reduced-motion: reduce) { .sol-sub.is-active { animation: none; } }

/* Workflow Automation sub-panel inverts to NAVY (#003262) so it reads as a
   distinct surface from the white Ecosystem Opportunities sub-panel. It bleeds
   to the window's inner edges by cancelling the .sol-body padding; the H3/P1
   invert to white. The order-to-cash module's cards are already white-on-navy. */
.sol-sub--invert {
  background: var(--navy);
  /* bleed L/R to the window edges; flush under the navy pill row (top 0). Bottom
     is NOT bled now — the PAC logo reel sits below this navy block on white. */
  margin: 0 calc(-1 * clamp(22px, 3vw, 32px)) 0;
  padding: clamp(8px, 1.5vw, 14px) clamp(22px, 3vw, 32px) clamp(24px, 3.5vw, 34px);
  border-radius: 0; /* square — the window clip handles the real corners (no notch) */
}
.sol-sub--invert > h3 { color: #fff; }
.sol-sub--invert > p  { color: rgba(255, 255, 255, .82); }

/* keep the floating modules clear of the copy above them (override Strive bleed) */
.sol-sub .ecoweb { margin: clamp(8px, 1.5vw, 18px) 0 0; }
.sol-panel-item .spine-viz { margin-top: clamp(8px, 2vw, 20px); }

/* ==========================================================================
   ECOSYSTEM WEB (.ecoweb / .ecoflip) — copied from case-study.css
   Floating, mouse-reactive logo network: radial spokes from each logo to the
   center platform hub. Light blue #51B7E7 web, low opacity. Reduced-motion /
   no-JS: a static wrap, web hidden. Mobile (<=860): the .ecoflip card-flip.
   ========================================================================== */
.ecoweb {
  /* 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. */
  position: relative; height: clamp(430px, 46vw, 600px);
  margin: clamp(-48px, -3.5vw, -16px) clamp(-90px, -5vw, -16px) clamp(8px, 1.5vw, 18px);
  overflow: hidden;
}
.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; }
.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; }
.ecoweb__node--up img   { transform: scale(1.16); }
.ecoweb__node--up2 img  { transform: scale(1.34); }
.ecoweb__node--down img { transform: scale(0.84); }
/* Spacer node: reserves a grid slot to hold an intentional gap (e.g. where MODO
   was removed) without showing a logo or drawing a hub spoke. The JS skips it
   when building the web. */
.ecoweb__node--spacer { visibility: hidden; }
.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 .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; }

.ecoflip { display: none; }
.no-js .ecoflip { display: none; }
.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; }
.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; 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; } }

/* ==========================================================================
   DATA-STREAMING SPINE (.spine-*) — copied from case-study.css
   Centered platform graphic, endpoint logos flanking, a free particle field
   drifting between each endpoint and the backbone, a live illustrative-only
   data-event counter above. Mobile (<=860): endpoints arch top + bottom.
   ========================================================================== */
.spine-viz { position: relative; }
.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; 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;
}
.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; }
.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); }
.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;
}
.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; }
.spine-endpoint--lg img { max-height: 60px; max-width: 300px; }
.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; } }
@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; }
  .spine-stage        { order: 2; }
  .spine-queue--right { order: 3; align-items: flex-start; }
  .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; }
  .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; }
  .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) { .spine-dot { box-shadow: 0 0 6px 1px currentColor; } }

/* --- HSP "one-to-network reach" spine variant (#spineVizHsp) ---------------
   The HSP's service sits ON the platform (center = platform-condensed-03,
   business-on-platform); through one connection it reaches 8 post-acute
   operator verticals (4x4). The event stream is the SAME spine module +
   animation as the Strive S3 spine (one design). Each vertical is a navy
   #003262 mini-card with an ORANGE #F88024 Tabler icon + white bold label. */
/* operator-vertical mini-card: navy, orange icon left, white bold label */
#spineVizHsp .spine-endpoint__name {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  border-radius: 12px;
  font-size: 15px; font-weight: var(--w-bold); line-height: 1.2;
  padding: 12px 16px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 50, 98, .12);
}
#spineVizHsp .spine-endpoint__name .ti { color: var(--orange); font-size: 20px; line-height: 1; flex: 0 0 auto; }
#spineVizHsp .spine-endpoint:hover .spine-endpoint__name { border-color: var(--navy); }
/* mobile arched layout: stack icon over a small label, scoped to beat the id rule above */
@media (max-width: 860px) {
  #spineVizHsp .spine-endpoint__name {
    flex-direction: column; gap: 3px; font-size: 10px; font-weight: var(--w-bold);
    padding: 7px 6px; white-space: normal; text-align: center;
  }
  #spineVizHsp .spine-endpoint__name .ti { font-size: 15px; }
}

/* ==========================================================================
   HTS EVENT STREAM (.htsstream)  — Confluent-style decoupling
   Horizontal: Your Business -> One Connection -> Event Stream (platform + brand
   data dots flowing on light-blue #51B7E7 pipes) -> fan-out to 4 navy operator
   mini-cards that flip/cycle through all 8 verticals. Reuses .spine-dot for the
   flow dots ("our data node style"). Driven by the htsStream IIFE.
   ========================================================================== */
.htsstream {
  position: relative;
  /* content-sized zones, centered — keeps the module from stretching full width */
  display: grid; grid-template-columns: auto auto auto; justify-content: center;
  align-items: center; gap: clamp(18px, 2.6vw, 52px);
  padding: clamp(26px, 4vw, 44px) 0 clamp(10px, 2vw, 18px); min-height: 300px;
}
/* layers: pipes (0) behind the stream bg; dots (2) above the stream bg but under
   the platform (3); biz + cards (4) so dots emerge from / disappear into them. */
.htsstream__pipes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.htsstream__pipes line { stroke: var(--light-blue); stroke-width: 2; }
.htsstream__flow { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* LEFT: the technology company */
.htsstream__biz { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.htsstream__biz img { width: clamp(72px, 9vw, 112px); height: auto; display: block; }
.htsstream__label--biz { color: var(--seafoam); font-weight: var(--w-bold); font-size: 13px; white-space: nowrap; }

/* CENTER: the event stream */
.htsstream__stream {
  /* no box now — just the layout region the dots flow across, with the platform
     centered and the label beneath it. */
  position: relative; z-index: 1;
  width: clamp(330px, 36vw, 450px); min-height: clamp(210px, 22vw, 240px);
}
/* shrunk + seated just above the flow line (its bottom ~ the stream's vertical
   center) so the dots flowing through the middle stay clear of it. */
.htsstream__platform { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(124px, 15vw, 168px); height: auto; z-index: 3; } /* centered ON the dot line; nodes stream through behind it */
.htsstream__connect { position: absolute; z-index: 4; font-size: 12px; font-weight: var(--w-bold); color: var(--light-blue); text-align: center; line-height: 1.15; transform: translate(-50%, -100%); } /* stacked text; JS sets left/top above the entry pipe */
/* the plug icon sits ON the entry line in a white circle (JS centers it on the junction) */
.htsstream__connode { position: absolute; z-index: 5; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0, 50, 98, .2); display: inline-flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); }
.htsstream__connode .ti { color: var(--light-blue); font-size: 16px; line-height: 1; }
.htsstream__streamlabel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 84px); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--w-bold); color: var(--navy); z-index: 3; } /* clears the centered platform's bottom edge */
.htsstream__connect .ti { color: var(--light-blue); font-size: 16px; }
.htsstream__streamlabel .ti { color: var(--navy); font-size: 16px; }

/* RIGHT: operator-vertical cards (flip/cycle through all 8) */
.htsstream__targets { position: relative; z-index: 4; display: flex; flex-direction: column; gap: clamp(10px, 1.6vw, 18px); perspective: 900px; }
.htsstream__card {
  background: var(--navy); border-radius: 12px; padding: 12px 16px;
  width: clamp(180px, 18vw, 210px); /* fixed = uniform cards, even stubs, no resize on flip */
  box-shadow: 0 6px 18px rgba(0, 50, 98, .12);
  transition: transform .3s ease; transform-style: preserve-3d;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform;
}
.htsstream__card-in { display: inline-flex; align-items: center; gap: 10px; }
.htsstream__card .ti { color: var(--orange); font-size: 20px; line-height: 1; flex: 0 0 auto; }
.htsstream__card-t { color: #fff; font-weight: var(--w-bold); font-size: 14px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .htsstream__dot { animation: none; } .htsstream__card { transition: none; } }

/* Mobile: stack the three zones; hide the SVG pipes (geometry assumes the row). */
@media (max-width: 860px) {
  .htsstream { grid-template-columns: 1fr; justify-items: center; gap: clamp(16px, 4vw, 26px); }
  .htsstream__pipes { display: none; }
  .htsstream__stream { width: 100%; max-width: 360px; }
  .htsstream__targets { flex-flow: row wrap; justify-content: center; }
}

/* ══ THE TEAM (.cso-*) — ported from aco-med-supply.css, 2026-09-12 ═══════
   The block was lifted onto the home page (Caleb), and home loads only
   valere.css, so the styles come with it. Copied VERBATIM so the proposal
   and the home page keep rendering identically; if one is restyled later,
   restyle both or fork the class names deliberately.
   The home instance sits on a .section--tint band, which is the only
   difference and is set in the markup, not here. */
/* ---------- 11b. The team, at the foot of The difference ------------- */
/* Five circle headshots pulled from valere-health.com/about-us. The years
   badge is the only colour in the bio, so the eye lands on the experience. */
.cso-team { margin-top: clamp(34px, 4.4vw, 54px); }
.cso-team__h {
  max-width: var(--head-max); margin: 0 auto clamp(24px, 3vw, 32px);
  text-align: center;
}
.cso-team__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
}
.cso-person { text-align: center; }
.cso-person__img {
  display: block; width: 100%; max-width: 168px; height: auto;
  margin: 0 auto 14px; border-radius: 50%;
}
.cso-person__n {
  margin: 0 0 4px; font-size: 18px; font-weight: var(--w-bold);
  color: var(--navy); line-height: 1.25;
}
.cso-person__r {
  margin: 0 0 8px; max-width: none;
  font-size: 13px; font-style: italic; color: var(--body-gray); line-height: 1.35;
}
.cso-person__b {
  margin: 0; max-width: none;
  font-size: 13px; font-style: italic; color: var(--body-gray); line-height: 1.5;
}
.cso-person__yrs {
  font-style: normal; font-weight: var(--w-bold); color: var(--orange);
  background: rgba(248, 128, 36, .12); border-radius: 4px; padding: 1px 5px;
}
@media (max-width: 1000px) {
  .cso-team__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .cso-team__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .cso-person__img { max-width: 132px; }
}

/* ── ORDER-TO-CASH ON A PHONE — generic, 2026-09-12 ──────────────────────────
   Pairs with site/js/o2c-mobile.js. Keyed off .is-phone-o2c and data-phase,
   which that file sets, so it is inert unless the module is actually running:
   no-JS and reduced motion leave the desktop three-column flow alone.
   Generic on .o2c-stage rather than per page, because the module appears on
   eleven pages and several carry more than one instance. */
@media (max-width: 860px) {
  .o2c-stage.is-phone-o2c .cs-flow { display: grid; grid-template-columns: 1fr; perspective: 900px;
    transition: transform var(--dur-base) var(--ease-standard); transform-style: preserve-3d; }
  .o2c-stage.is-phone-o2c .cs-flow.is-flipping { transform: rotateX(-90deg); }
  .o2c-stage.is-phone-o2c .cs-flow__sep { display: none; }   /* arrows describe a row that is gone */
  .o2c-stage.is-phone-o2c .cs-flow__col {
    grid-area: 1 / 1; opacity: 0; visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base) var(--ease-standard);
  }
  /* the separators are still children, so the columns are the odd positions */
  .o2c-stage.is-phone-o2c[data-phase="0"] .cs-flow__col:nth-child(1),
  .o2c-stage.is-phone-o2c[data-phase="1"] .cs-flow__col:nth-child(3),
  .o2c-stage.is-phone-o2c[data-phase="2"] .cs-flow__col:nth-child(5) { opacity: 1; visibility: visible; }
  /* the picker replaces the step rail */
  .o2c-stage.is-phone-o2c .o2c-steps-wrap { display: none; }
  .o2c-stage.is-phone-o2c .o2c-select { margin-bottom: clamp(14px, 3vw, 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .o2c-stage.is-phone-o2c .cs-flow,
  .o2c-stage.is-phone-o2c .cs-flow__col { transition: none; }
}

/* ==========================================================================
   ORDER-TO-CASH FLOW (.o2c- + reused .cs-flow . .cs-minicard . .cs-valerebox .
   .cs-step . .cs-progress) — copied from case-study.css, adapted.
   The 6 O2C stages are the TIMELINE across the top; a yellow bar fills
   step-by-step. Below, the 3-column flow (Into the backbone -> Valere executes
   -> Delivered to customer) lights in->Valere->out as each step runs, and the
   cards FLIP (rotateY) to the next stage's content when the step advances. The
   NAVY surface + white H3/P1 are provided by .sol-sub--invert (the whole
   Workflow Automation sub-panel inverts to navy, delineating it from the white
   Ecosystem Opportunities sub-panel). Driven by the o2cFlow IIFE.
   (NOTE: do not write a slash-star sequence inside a CSS comment — it closes
   the comment early and drops the next rule.)
   ========================================================================== */
.o2c-stage { position: relative; } /* module wrapper; navy + padding come from .sol-sub--invert */
.o2c-steps-wrap { margin-bottom: clamp(18px, 3vw, 28px); }
/* 6 stages across the top (overrides the 3-col .cs-steps) */
/* Steps are uniform rounded CHIPS with a gap (not a connected segmented bar) —
   so every corner is clean at any column count (6 / 3 / 2 across) and the lit
   glow is never clipped. Each chip carries its own full border + radius,
   overriding the ported segmented .cs-step borders/radii. The pulsing border +
   the lit current chip are the progress indicator (the bar was removed). */
.o2c-steps { grid-template-columns: repeat(6, 1fr); gap: clamp(6px, 1vw, 10px); }
.o2c-steps .cs-step {
  border: 1px solid rgba(244, 247, 250, .22);
  border-radius: 10px;
  min-height: 58px; padding: 12px 12px 14px; cursor: pointer;
}
/* higher specificity so these beat the ported .cs-step:first/last-child radii
   (which appear later in this file with equal specificity) — keeps every chip
   uniformly rounded on all four corners. */
.o2c-steps .cs-step:first-child, .o2c-steps .cs-step:last-child { border-radius: 10px; }
.o2c-steps .cs-step__t { font-size: 13px; }
.o2c-steps .cs-step:focus-visible { outline: 3px solid var(--light-blue); outline-offset: -3px; }

/* The flip cards. The transform transition MUST out-specify the ported
   `.cs-minicard/.cs-valerebox { transition: border-color, box-shadow }` rule
   (which sits LATER in this file at equal specificity) — otherwise the browser
   drops `transform` from the transition and the cards snap to edge-on instead
   of flipping (Safari + Chrome). Hence the `.o2c-flow .o2c-flip` descendant
   selector. Perspective is applied per-card in the inline transform (the JS),
   so the 3D fold renders regardless of ancestor 3D context. */
.o2c-flow .o2c-flip {
  transition: transform .3s ease, border-color .5s ease, box-shadow .5s ease;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .o2c-flow .o2c-flip { transition: border-color .5s ease, box-shadow .5s ease; } }
/* fill the locked-height column (minicards already flex:1) so all three columns
   stay the same size across stages — no half-empty column on shorter stages. */
.o2c-flow .cs-valerebox { flex: 1 1 auto; }

/* ----- the reused flow internals (copied from case-study.css) ----- */
.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); }
.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); }
.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; }
.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; }
.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); }
.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 = yellow accent */
/* per-section --lit identity 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 pulse: glow + a tracing conic gradient that fades in/out with .is-lit */
@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; }
}
/* o2c steps wrap to 2 rows on mobile; flow stacks (cs-flow @860 above) */
@media (max-width: 860px) { .o2c-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .o2c-steps { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   MOBILE DROPDOWN (.m-select) — copied from case-study.css, + an --orange
   variant for the Solutions audience tabs. Replaces a tab group under 860px:
   reads [role=tab] from data-tabsource, clicks the hidden tab on choose.
   ========================================================================== */
.m-select { display: none; position: relative; }
.m-select__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font); font-size: 15px; font-weight: var(--w-bold); color: var(--navy);
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  padding: 13px 16px; cursor: pointer; text-align: left; line-height: 1.25;
}
.m-select__btn:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }
.m-select__chev { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
.m-select__chev::after { content: ""; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .2s ease; }
.m-select.is-open .m-select__chev::after { transform: rotate(225deg); margin-top: 2px; }
/* --orange variant: orange bg (active-tab color), white text, white circle, orange arrow */
.m-select--orange .m-select__btn { background: var(--orange); color: #fff; border-color: transparent; }
.m-select--orange .m-select__chev { background: #fff; }
.m-select--orange .m-select__chev::after { border-color: var(--orange); }
.m-select--attached .m-select__btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.m-select__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: var(--shadow-window); overflow-y: auto; max-height: 60vh; padding: 6px;
}
.m-select__menu[hidden] { display: none; }
.m-select__opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: var(--w-medium); color: var(--navy);
  background: transparent; border: 0; border-radius: 8px; padding: 12px 14px; line-height: 1.3;
}
.m-select__opt[aria-selected="true"] { background: var(--orange); color: #fff; font-weight: var(--w-bold); }
.m-select__opt:active { background: color-mix(in srgb, var(--orange) 22%, #fff); }

@media (max-width: 860px) {
  .sol-tabs { display: none; }              /* swap the audience tab strip for the dropdown */
  .m-select { display: block; }
  .ecoweb { display: none; }                /* desktop mesh out; ecoflip shows */
  .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; }
}

/* ==========================================================================
   S5 — SOLUTIONS · STRATEGY SUMMARY (.hsol)   Caleb 2026-07-13
   ==========================================================================
   The CURRENT home Solutions section. TOP: a single centered head block
   (eyebrow + H2 + P1). BOTTOM: two Content Cards side by side, both shown at
   once — Enable More (seafoam band) and Enable Better (orange band). Each card
   = a band label, the /solutions S4-overview headline (rotating word) + intro,
   three expandable accordions, and an Arrow Link. No pills. The .sol-* block
   ABOVE belongs to the previous audience-tab window, now tucked away
   (_stash/...); it is unused by the current page but kept for restore.

   The .content-card / .acc-card / .rotator rules below are PORTED from
   solutions.css so the home page (which loads ONLY valere.css) stays
   self-contained; the solutions page keeps its own copies (intended divergence).
   Brand: navy #003262 headlines, seafoam #00C29B = Enable More, orange
   #F88024 = Enable Better, light blue #51B7E7 focus/flow.
   ========================================================================== */

/* Two Content Cards side by side; each at its OWN height (stacks under 820px).
   Caleb, 2026-09-12: "I dont like that the card heights are linked. The section
   should expand as the cards do, but when I drop an accordian on More, only the
   more card (and whole section) should expand." `align-items: stretch` tied the
   two together - the grid row took the taller card, so opening an accordion in
   one grew BOTH and left dead space in the other. `start` lets each card size to
   its own content; the section still grows because the row does. */
.hsol__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); align-items: start; }

/* the Content Card (band + body); flex column so the CTA can sit at the foot */
.content-card { background: #fff; border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-window); overflow: hidden; }
.hsol-card { display: flex; flex-direction: column; }
.hsol-card .content-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.content-card__band { display: flex; align-items: center; gap: 16px; padding: 16px clamp(18px, 2.4vw, 24px); }
.content-card__band--seafoam { background: var(--enable-more); }   /* Enable More */
.content-card__band--blue    { background: var(--enable-better); } /* Enable Better */
.content-card__band--orange  { background: var(--orange); }        /* general (unused by strategy cards) */
.content-card__title { color: #fff; font-weight: var(--w-bold); font-size: 20px; line-height: 1.25; letter-spacing: .01em; }
.content-card__body { padding: clamp(22px, 2.8vw, 32px); }

/* body head — the /solutions S4 headline (rotating word) + intro paragraph */
.hsol-card__title { color: var(--navy); font-weight: var(--w-bold); font-size: 22px; line-height: 1.25; margin: 0 0 .45em; }
.hsol-card__p { color: var(--body-gray); font-size: var(--fs-p1); line-height: 1.6; margin: 0 0 clamp(18px, 2.5vw, 24px); max-width: none; }

/* ROTATING WORD (.rotator) — ported from solutions.css. Fade OUT then a keyframe
   fade IN; width-locked in JS. Colors are the strategy role tokens. */
.rotator { display: inline-block; vertical-align: baseline; font-weight: var(--w-bold); }
.rotator--more   { color: var(--enable-more); }
.rotator--better { color: var(--enable-better); }
.rotator.is-out { opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in); }
.rotator.is-in  { animation: sol-rot-in var(--dur-slow) var(--ease-out); }
@keyframes sol-rot-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rotator.is-out { transition: none; } .rotator.is-in { animation: none; } }

/* ACCORDION CARDS (.acc-card) — ported from solutions.css. Head toggles the body
   (max-height glide, measured in JS). +/- glyph is the strategy color. */
.acc-cards { display: flex; flex-direction: column; gap: 12px; }
.acc-card { position: relative; background: #fff; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.acc-card .card__rule { margin: 16px 0 0 16px; }
.acc-card__head {
  width: 100%; appearance: none; background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 16px 14px;
}
.acc-card__t { color: var(--navy); font-weight: var(--w-bold); font-size: var(--fs-h4); line-height: 1.3; }
.acc-card__head:focus-visible { outline: 3px solid var(--light-blue); outline-offset: -3px; border-radius: 8px; }
.acc-card__ic { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.acc-card__ic::before, .acc-card__ic::after { content: ""; position: absolute; background: var(--orange); transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard); }
.acc-card__ic::before { left: 0; top: 7px; width: 16px; height: 2px; }
.acc-card__ic::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.acc-card.is-open .acc-card__ic::after { transform: rotate(90deg); opacity: 0; }
.acc-cards--seafoam .acc-card__ic::before, .acc-cards--seafoam .acc-card__ic::after { background: var(--enable-more); }
.acc-cards--blue    .acc-card__ic::before, .acc-cards--blue    .acc-card__ic::after { background: var(--enable-better); }
.acc-card__body { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease-standard); }
.acc-card__body p { margin: 0; padding: 2px 16px 15px; color: var(--body-gray); font-size: var(--fs-body); line-height: 1.55; max-width: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.acc-card.is-open .acc-card__body p { opacity: 1; transition: opacity var(--dur-base) var(--ease-out) .14s; }
@media (prefers-reduced-motion: reduce) { .acc-card__body, .acc-card__body p { transition: none; } }

/* card foot CTA — reuses .sol-link; margin-top:auto pins it to the card foot so
   both cards' CTAs align when their heights differ. Seafoam variant = More. */
.hsol-card .acc-cards { margin-bottom: clamp(16px, 2.5vw, 22px); }
.hsol-card .sol-link { margin-top: auto; }
.sol-link--seafoam { --cta-color: var(--enable-more); }   /* Enable More CTA */
.sol-link--blue    { --cta-color: var(--enable-better); } /* Enable Better CTA */

/* responsive: stack the two cards under 820px */
@media (max-width: 820px) {
  .hsol__cards { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 26px); }
}