/* ==========================================================================
   clinevo-brand.css — Clinevo's published design vocabulary
   --------------------------------------------------------------------------
   Pages use these classes and tokens instead of inventing their own type,
   spacing, colour, effects or motion. design.md §14 documents every public
   name. Anything not documented there is private and may change.
   Version: 1.8.0 (2026-10-26) — 1.8.0: the About page: the offices map (cv-reach, clinevo-reach.js), portraits,
   the CEO (cv-leader, cv-facts), the board (cv-board, cv-member), advisors (cv-advisors), chapters (cv-chapter,
   cv-statement), cv-principles and the curtain reveal on portraits (CORRECTIONS #57).
   1.7.0: silk ribbons drawn on one canvas (cv-silk) with no hard start; the contact
   section (cv-contact) around the site's HubSpot form (CORRECTIONS #53, #54). 1.6.0: the case journey (cv-journey, clinevo-journey.js) under the hero film replaces
   the silk waves on the homepage (CORRECTIONS #52). 1.5.0: header dropdowns (cv-nav__item, cv-nav__menu, the Products mega menu) and
   expandable groups in the phone menu, driven by clinevo-nav.js (CORRECTIONS #51). 1.4.0: phones and speed: fonts linked from the page with a metric-matched
   fallback, silk waves as GPU layers, pre-tinted logos, labelled film pill under the film on phones, compact
   certifications, steady module cards, composited iso faces and timeline light, 44 px targets (CORRECTIONS #49). 1.3.0: silk waves (cv-silk) replace the drifting hero ribbons (CORRECTIONS #48). 1.2.0: the light hero (cv-hero--light, --cv-field-light) with the slow hero
   ambient (cv-ambient, drifting ribbons); logos tinted ink by #cv-tint-ink; hero components default to light
   grounds (CORRECTIONS #47). 1.1.0: deeper hero field and film panel, two-row client marquee in
   opposite directions (CORRECTIONS #46). 1.0.0: cv-timeline (scroll-filled), cv-section--cinema with cv-film--blend
   (CORRECTIONS #44). 0.9.0: premium isometric materials (slab, pearl tiles, cast shadows,
   light spill), two voiced films (CORRECTIONS #41). 0.8.0: readability (larger type, darker ink), cv-trust, cv-section--feature,
   loop-mode film, calmer isometric motion (CORRECTIONS #40). 0.7.0: isometric module explorer (cv-iso, cv-iso-tab), CORRECTIONS #39.
   0.6.0: de-templated body (cv-modules, cv-logos--grid, plain
   cv-person, sans section headings, neutral shadows), CORRECTIONS #37. 0.4.0: the deep film hero (cv-hero--deep, cv-film with a silent
   preview loop and pause, cv-marquee with pause), CORRECTIONS #30–#32. 0.3.4: centred stage hero support (cv-kicker--center,
   cv-specs, cv-wash--grid). 0.3.2: Newsreader editorial serif for display, h1, h2,
   lockup and lead quote; italic accent phrase. 0.3.1: larger display, .cv-mark underline, stronger wash,
   gradient edge on the case flow, compact fact list. 0.3.0 brand-palette revision: the electric
   blue → violet → magenta and lavender wash from Clinevo's own OnePV
   boards, Plus Jakarta Sans, gradient line icons, and a small motion
   vocabulary (reveal, hover, the moving case flow) that always respects
   prefers-reduced-motion. Base styles use :where() so components win.
   ========================================================================== */

/* Fonts are linked from the page <head> with preconnect (design.md §4), not @import, so they load alongside
   this file instead of after it. Until Newsreader arrives, a size-matched local serif keeps the headline's
   line breaks, so the hero does not jump when the font swaps in (CORRECTIONS #49). */
@font-face { font-family: "Newsreader Fallback"; font-style: normal; src: local("Georgia"), local("Noto Serif"), local("NotoSerif-Regular"); size-adjust: 98%; }
@font-face { font-family: "Newsreader Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"), local("Noto Serif Italic"), local("NotoSerif-Italic"); size-adjust: 90%; }

/* --------------------------------------------------------------------------
   1. Tokens
   Taken from Clinevo's OnePV conference and workflow boards
   (skills/clinevo-brand-design/assets/examples). The gradient is the case
   journey: blue = intake, violet = processing in OnePV, magenta = submission.
   -------------------------------------------------------------------------- */
:root {
  --cv-ink: #0B0E5C;            /* deep electric navy, the boards' headline ink */
  --cv-ink-2: #2C305F;          /* body; 11.9:1 on white */
  --cv-ink-3: #4A4E7C;          /* meta; 8.0:1 on white */
  --cv-ink-hover: #1D2290;
  --cv-line: #E6E4F4;
  --cv-line-2: #D0CCEB;
  --cv-surface: #FFFFFF;
  --cv-surface-2: #F7F6FF;      /* lavender tint for alternate sections */
  --cv-surface-3: #EEEBFC;

  --cv-blue: #2952F2;           /* intake; 5.9:1 on white */
  --cv-violet: #8A2BE2;         /* processing; 6.0:1 on white */
  --cv-magenta: #D61C9C;        /* submission; lines, marks, fills */
  --cv-magenta-text: #B3127F;   /* magenta carrying small text */
  --cv-blue-soft: #EBF0FE;
  --cv-violet-soft: #F3EAFD;
  --cv-magenta-soft: #FCEAF6;
  --cv-signal: linear-gradient(90deg, #2952F2 0%, #8A2BE2 52%, #D61C9C 100%);
  --cv-signal-deep: linear-gradient(105deg, #4A3FDC 0%, #8A2BE2 50%, #BE22B6 100%); /* white text ≥ 5:1 across it */
  /* the boards' background: sky, lavender and blush, fading to white. Static. */
  --cv-wash:
    radial-gradient(65% 80% at 0% 0%, rgba(184, 204, 251, 1) 0%, rgba(184, 204, 251, 0) 70%),
    radial-gradient(60% 75% at 100% 4%, rgba(248, 192, 242, .95) 0%, rgba(248, 192, 242, 0) 70%),
    radial-gradient(70% 60% at 52% 36%, rgba(222, 208, 252, .9) 0%, rgba(222, 208, 252, 0) 75%),
    radial-gradient(60% 40% at 50% 82%, rgba(236, 210, 250, .8) 0%, rgba(236, 210, 250, 0) 72%),
    linear-gradient(180deg, #EEEAFE 0%, #F5F1FF 70%, #FFFFFF 100%);
  --cv-wash-soft:
    radial-gradient(60% 90% at 0% 100%, rgba(196, 213, 251, .7) 0%, rgba(196, 213, 251, 0) 70%),
    radial-gradient(55% 90% at 100% 0%, rgba(250, 206, 245, .7) 0%, rgba(250, 206, 245, 0) 70%),
    linear-gradient(180deg, #F6F4FF 0%, #F9F3FD 100%);

  /* the deep field: the film's navy (sampled #0B0E25) lit by the brand colours. Homepage hero only. */
  --cv-deep: #0B0E2A;
  --cv-field:
    radial-gradient(42% 60% at 0% 100%, rgba(41, 82, 242, .42) 0%, rgba(41, 82, 242, 0) 70%),
    radial-gradient(40% 55% at 100% 0%, rgba(214, 28, 156, .26) 0%, rgba(214, 28, 156, 0) 70%),
    linear-gradient(180deg, rgba(8, 10, 34, 0) 65%, rgba(8, 10, 34, .35) 100%),
    linear-gradient(118deg, #141B6A 0%, #211A79 34%, #3A1A84 64%, #561874 100%); /* deep indigo → violet → plum, a few shades below 0.8 (CORRECTIONS #46) */
  --cv-on-dark: #FFFFFF;
  --cv-on-dark-2: #E6E7FA;     /* 8.6:1 on the field behind the copy */
  --cv-on-dark-3: #B9BBE3;     /* 6.7:1 behind the copy; small text only on the left half */
  --cv-accent-on-dark: #D9B3FF;
  /* the light field: the boards' pale lavender ground under the hero ambient (CORRECTIONS #47). Homepage hero. */
  --cv-field-light: linear-gradient(180deg, #EEEBFF 0%, #F3F0FF 60%, #F8F6FF 100%);

  --cv-ok: #0B7A52;   --cv-ok-soft: #E3F5EC;
  --cv-warn: #8A5300; --cv-warn-soft: #FDF1DC;
  --cv-err: #B4183A;  --cv-err-soft: #FCE8EC;

  --cv-font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --cv-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  /* editorial serif for display headings: echoes the serif CLINEVO wordmark and the tote's "Enterprise Software" */
  --cv-font-display: "Newsreader", "Newsreader Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --cv-font-serif: var(--cv-font-display);
  --cv-text-xs: 0.9375rem;                             /* 15 minimum readable */
  --cv-text-s: 1.0625rem;                              /* 17 */
  --cv-text-m: 1.125rem;                               /* 18 body */
  --cv-text-l: clamp(1.1875rem, 1.6vw, 1.375rem);      /* 19–22 lede */
  --cv-text-h3: 1.375rem;                              /* 22 */
  --cv-text-h2: clamp(2.125rem, 3.4vw, 3rem);          /* 34–48, bold sans */
  --cv-text-h1: clamp(2.25rem, 4vw, 3.25rem);          /* 36–52, bold sans */
  --cv-text-display: clamp(2.5rem, 6.4vw, 5.75rem);    /* 40–92, serif, a centred hero line of ≤ 40 characters */
  --cv-text-hero: clamp(2.5rem, 4.1vw, 3.75rem);       /* 40–60, serif, display in a split hero column */
  --cv-weight-regular: 400;
  --cv-weight-medium: 500;
  --cv-weight-semibold: 600;
  --cv-weight-bold: 700;
  --cv-leading-tight: 1.08;
  --cv-leading-snug: 1.3;
  --cv-leading-body: 1.65;
  --cv-measure: 54ch;            /* ≈ 70 characters of Plus Jakarta Sans */

  --cv-space-1: 4px;  --cv-space-2: 8px;   --cv-space-3: 12px; --cv-space-4: 16px;
  --cv-space-5: 24px; --cv-space-6: 32px;  --cv-space-7: 48px; --cv-space-8: 64px;
  --cv-space-9: 96px; --cv-space-10: 128px;
  --cv-gutter: clamp(16px, 4vw, 40px);
  --cv-wrap: 1200px;
  --cv-section-pad: clamp(64px, 8vw, 112px);

  --cv-radius-s: 6px;
  --cv-radius-m: 10px;
  --cv-radius-l: 16px;
  --cv-radius-xl: 24px;
  --cv-shadow-screen: 0 1px 2px rgba(11, 14, 42, .05), 0 18px 40px -24px rgba(11, 14, 42, .22);
  --cv-shadow-stage: 0 1px 2px rgba(11, 14, 42, .04), 0 30px 60px -36px rgba(11, 14, 42, .22);
  --cv-shadow-lift: 0 2px 4px rgba(11, 14, 42, .04), 0 16px 32px -20px rgba(11, 14, 42, .22);
  --cv-shadow-overlay: 0 12px 32px -12px rgba(11, 14, 92, .3);

  /* motion: short, eased, one direction; see section 12 */
  --cv-ease: cubic-bezier(.16, 1, .3, 1);
  --cv-dur-fast: 180ms;
  --cv-dur: 320ms;
  --cv-dur-reveal: 760ms;
  --cv-stagger: 90ms;

  color-scheme: light;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* iOS keeps the type scale when the phone turns */
}

/* --------------------------------------------------------------------------
   2. Base — all inside :where() so components always win
   -------------------------------------------------------------------------- */
.cv-page { margin: 0; background: var(--cv-surface); color: var(--cv-ink); font-family: var(--cv-font-sans); font-size: var(--cv-text-m); line-height: var(--cv-leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
:where(.cv-page), :where(.cv-page) *, :where(.cv-page) *::before, :where(.cv-page) *::after { box-sizing: border-box; }
:where(.cv-page) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(.cv-page) :where(ul, ol) { padding: 0; list-style: none; }
:where(.cv-page) :where(img, svg) { max-width: 100%; }
:where(.cv-page) img { display: block; height: auto; }
:where(.cv-page) a { color: inherit; }
:where(.cv-page) button { font: inherit; color: inherit; }
:where(.cv-page) [hidden] { display: none !important; }
:where(.cv-page) :focus-visible { outline: 2px solid var(--cv-blue); outline-offset: 3px; border-radius: 4px; }
:where(.cv-page) :where(p, li, dd, blockquote) { text-wrap: pretty; }
:where(.cv-page) :where(h1, h2, h3, h4) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
:where(.cv-page) ::selection { background: var(--cv-violet-soft); color: var(--cv-ink); }
.cv-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cv-skip { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 14px; border-radius: var(--cv-radius-s); background: var(--cv-ink); color: #fff; text-decoration: none; }
.cv-skip:focus { top: 12px; }
/* the gradient for .cv-icon strokes; one <svg class="cv-defs"> per page (design.md §7) */
.cv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Shell
   -------------------------------------------------------------------------- */
.cv-wrap { max-width: var(--cv-wrap); margin-inline: auto; padding-inline: var(--cv-gutter); }
.cv-header { position: sticky; top: 0; z-index: 50; background: var(--cv-surface); border-bottom: 1px solid var(--cv-line); transition: box-shadow var(--cv-dur) var(--cv-ease), border-color var(--cv-dur) var(--cv-ease); }
.cv-header::before { content: ""; display: block; height: 3px; background: var(--cv-signal); } /* the brand colours, once, at the top of every page */
.cv-header.is-scrolled { border-bottom-color: transparent; box-shadow: 0 10px 30px -18px rgba(11, 14, 92, .35); }
.cv-header__bar { display: flex; align-items: center; gap: var(--cv-space-6); min-height: 72px; }
.cv-logo { display: inline-flex; align-items: center; flex: none; }
.cv-logo img { height: 38px; width: auto; }
.cv-nav { display: flex; align-items: center; gap: var(--cv-space-1); }
.cv-nav > a, .cv-nav__trigger { position: relative; padding: 8px 12px; text-decoration: none; font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-ink-2); transition: color var(--cv-dur-fast) var(--cv-ease); }
.cv-nav > a::after, .cv-nav__trigger::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--cv-signal); transform: scaleX(0); transform-origin: left; transition: transform var(--cv-dur) var(--cv-ease); }
.cv-nav > a:hover, .cv-nav__trigger:hover, .cv-nav__item.is-open > .cv-nav__trigger { color: var(--cv-ink); }
.cv-nav > a:hover::after, .cv-nav > a[aria-current="page"]::after, .cv-nav__trigger:hover::after, .cv-nav__item.is-open > .cv-nav__trigger::after { transform: scaleX(1); }
.cv-nav > a[aria-current="page"] { color: var(--cv-ink); }
/* Header dropdowns (CORRECTIONS #51): Products is a three-group menu (Safety, Quality, Clinical), Resources a short list.
   They open on hover with a mouse and on click, tap or Enter (clinevo-nav.js); without the script, on hover and focus. */
.cv-nav__item { position: relative; }
.cv-nav__trigger { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; font-family: inherit; cursor: pointer; }
.cv-nav__chevron { width: 12px; height: 12px; flex: none; transition: transform var(--cv-dur) var(--cv-ease); }
.cv-nav__item.is-open .cv-nav__chevron { transform: rotate(180deg); }
.cv-nav__menu { position: absolute; top: 100%; left: -12px; z-index: 60; width: 320px; margin-top: 22px; padding: 8px; border: 1px solid var(--cv-line); border-radius: var(--cv-radius-l); background: var(--cv-surface); box-shadow: var(--cv-shadow-overlay);
  visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity var(--cv-dur-fast) var(--cv-ease), transform var(--cv-dur) var(--cv-ease), visibility 0s linear var(--cv-dur); }
.cv-nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -23px; height: 23px; } /* a bridge, so the pointer can travel from the trigger to the panel */
.cv-nav__item.is-open > .cv-nav__menu, .cv-nav:not(.is-enhanced) .cv-nav__item:is(:hover, :focus-within) > .cv-nav__menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.cv-nav__menu a { display: grid; gap: 1px; padding: 9px 12px; border-radius: var(--cv-radius-m); text-decoration: none; color: var(--cv-ink); transition: background-color var(--cv-dur-fast) var(--cv-ease), color var(--cv-dur-fast) var(--cv-ease); }
.cv-nav__menu a strong { font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); line-height: 1.35; }
.cv-nav__menu a span { font-size: var(--cv-text-xs); line-height: 1.4; color: var(--cv-ink-3); }
/* Hover and keyboard focus on a menu item (CORRECTIONS #56): a soft lavender wash, a brand-gradient bar growing
   down the left edge, the name easing right into violet and, on items with a description, an arrow sliding in */
.cv-nav__menu li > a { position: relative; }
.cv-nav__menu li > a:has(strong) { padding-right: 30px; }
.cv-nav__menu li > a::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #2952F2 0%, #8A2BE2 52%, #D61C9C 100%); transform: scaleY(0); transition: transform var(--cv-dur) var(--cv-ease); }
.cv-nav__menu li > a:has(strong)::after { content: ""; position: absolute; right: 8px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; opacity: 0; transform: translateX(-6px); transition: opacity var(--cv-dur-fast) var(--cv-ease), transform var(--cv-dur) var(--cv-ease);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%238A2BE2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.cv-nav__menu li > a :is(strong, span) { transition: transform var(--cv-dur) var(--cv-ease), color var(--cv-dur-fast) var(--cv-ease); }
.cv-nav__menu li > a:is(:hover, :focus-visible) { background: linear-gradient(90deg, var(--cv-violet-soft) 0%, rgba(243, 234, 253, .35) 70%, rgba(243, 234, 253, 0) 100%); }
.cv-nav__menu li > a:is(:hover, :focus-visible)::before { transform: scaleY(1); }
.cv-nav__menu li > a:is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
.cv-nav__menu li > a:is(:hover, :focus-visible) strong { transform: translateX(4px); color: var(--cv-violet); }
.cv-nav__menu li > a:is(:hover, :focus-visible) span { transform: translateX(4px); color: var(--cv-ink-2); }
/* opening: the items rise in one after another (only on the way in; they leave with the panel) */
.cv-nav__menu li { opacity: 0; transform: translateY(5px); transition: opacity 220ms var(--cv-ease), transform 360ms var(--cv-ease); }
:is(.cv-nav__item.is-open, .cv-nav:not(.is-enhanced) .cv-nav__item:is(:hover, :focus-within)) .cv-nav__menu li { opacity: 1; transform: none; }
:is(.cv-nav__item.is-open) .cv-nav__menu ul > li:nth-child(2) { transition-delay: 30ms; }
:is(.cv-nav__item.is-open) .cv-nav__menu ul > li:nth-child(3) { transition-delay: 60ms; }
:is(.cv-nav__item.is-open) .cv-nav__menu ul > li:nth-child(4) { transition-delay: 90ms; }
:is(.cv-nav__item.is-open) .cv-nav__menu ul > li:nth-child(5) { transition-delay: 120ms; }
:is(.cv-nav__item.is-open) .cv-nav__menu ul > li:nth-child(n + 6) { transition-delay: 150ms; }
.cv-nav__menu--wide { width: min(820px, calc(100vw - 48px)); padding: 20px 20px 12px; }
.cv-nav__groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.cv-nav__stack { display: grid; align-content: start; gap: var(--cv-space-4); }
.cv-nav__group-title { display: flex; align-items: center; gap: 8px; padding: 0 12px 6px; font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-violet); }
.cv-nav__group-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cv-signal); }
.cv-nav__compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-nav__menu .cv-nav__compact a { padding: 6px 12px; font-size: var(--cv-text-xs); font-weight: var(--cv-weight-medium); color: var(--cv-ink-2); }
.cv-nav__menu .cv-nav__compact a { transition: background-color var(--cv-dur-fast) var(--cv-ease), color var(--cv-dur-fast) var(--cv-ease), padding-left var(--cv-dur) var(--cv-ease); }
.cv-nav__menu .cv-nav__compact a:is(:hover, :focus-visible) { color: var(--cv-violet); padding-left: 16px; }
.cv-nav__menu a.cv-nav__foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 14px 12px 8px; border-top: 1px solid var(--cv-line); border-radius: 0; font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-blue); }
.cv-nav__menu a.cv-nav__foot:hover { background: none; color: var(--cv-violet); }
.cv-nav__foot svg { width: 16px; height: 16px; transition: transform var(--cv-dur-fast) var(--cv-ease); }
.cv-nav__foot:hover svg { transform: translateX(2px); }
.cv-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--cv-space-4); }
.cv-header__contact { font-size: var(--cv-text-s); font-weight: var(--cv-weight-medium); color: var(--cv-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-header__menu { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--cv-line-2); border-radius: var(--cv-radius-s); background: var(--cv-surface); align-items: center; justify-content: center; cursor: pointer; }
.cv-header__menu svg { width: 22px; height: 22px; }

/* mobile navigation: a plain list under the header, toggled by .cv-header__menu (aria-expanded) */
.cv-mobile-nav { display: none; border-top: 1px solid var(--cv-line); background: var(--cv-surface); }
.cv-mobile-nav.is-open { display: block; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; } /* reachable in landscape */
.cv-mobile-nav ul { display: grid; padding-block: var(--cv-space-2) var(--cv-space-4); }
.cv-mobile-nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--cv-line); text-decoration: none; font-weight: var(--cv-weight-semibold); color: var(--cv-ink); }
.cv-mobile-nav__contact { display: flex; flex-wrap: wrap; gap: 0 var(--cv-space-5); padding-top: var(--cv-space-3); font-size: var(--cv-text-s); color: var(--cv-ink-2); }
/* Products and Resources expand in place on phones (clinevo-nav.js) */
.cv-mobile-nav__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--cv-line); background: none; font: inherit; font-weight: var(--cv-weight-semibold); color: var(--cv-ink); text-align: left; cursor: pointer; }
.cv-mobile-nav__toggle svg { width: 14px; height: 14px; transition: transform var(--cv-dur) var(--cv-ease); }
.cv-mobile-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.cv-mobile-nav__sub { padding: 0 0 var(--cv-space-3) var(--cv-space-4); border-bottom: 1px solid var(--cv-line); }
.cv-mobile-nav .cv-mobile-nav__sub ul { padding: 0; }
.cv-mobile-nav .cv-mobile-nav__sub a { padding: 10px 0; border-bottom: 0; font-weight: var(--cv-weight-medium); color: var(--cv-ink-2); }
.cv-mobile-nav__label { padding-top: var(--cv-space-3); font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-violet); }
.cv-mobile-nav a.cv-btn { display: flex; margin-top: var(--cv-space-4); padding: 11px 22px; border-bottom: 0; color: #FFFFFF; }
.cv-mobile-nav__contact a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border-bottom: 0; font-weight: var(--cv-weight-medium); color: var(--cv-ink-2); white-space: nowrap; }

.cv-section { padding-block: var(--cv-section-pad); }
.cv-section--tint { background: var(--cv-surface-2); }
.cv-section--tight { padding-block: var(--cv-space-8); }
.cv-section + .cv-section:not(.cv-section--tint) { border-top: 1px solid var(--cv-line); }
.cv-section--tint + .cv-section { border-top: 0; }
/* the boards' lavender wash: the homepage hero, once per page */
.cv-wash { background: var(--cv-wash); }
/* a faint drafting grid behind the hero stage, fading out from the centre. Static. */
.cv-wash--grid { position: relative; isolation: isolate; }
.cv-wash--grid::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, rgba(11, 14, 92, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(11, 14, 92, .05) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; -webkit-mask-image: radial-gradient(75% 65% at 50% 40%, #000 0%, transparent 78%); mask-image: radial-gradient(75% 65% at 50% 40%, #000 0%, transparent 78%); }

.cv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cv-space-6); row-gap: var(--cv-space-7); align-items: start; }
.cv-grid > * { min-width: 0; }
.cv-span-3 { grid-column: span 3; } .cv-span-4 { grid-column: span 4; } .cv-span-5 { grid-column: span 5; }
.cv-span-6 { grid-column: span 6; } .cv-span-7 { grid-column: span 7; } .cv-span-8 { grid-column: span 8; }
.cv-span-12 { grid-column: 1 / -1; }

.cv-stack-1 { display: grid; gap: var(--cv-space-2); } .cv-stack-2 { display: grid; gap: var(--cv-space-3); }
.cv-stack-3 { display: grid; gap: var(--cv-space-4); } .cv-stack-4 { display: grid; gap: var(--cv-space-5); }
.cv-stack-5 { display: grid; gap: var(--cv-space-6); } .cv-stack-6 { display: grid; gap: var(--cv-space-7); }
.cv-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cv-space-3); }

.cv-footer { border-top: 1px solid var(--cv-line); padding-block: var(--cv-space-8) var(--cv-space-6); color: var(--cv-ink-2); font-size: var(--cv-text-s); background: var(--cv-surface); }
.cv-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--cv-space-6); }
.cv-footer h2 { font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-ink); margin-bottom: var(--cv-space-3); }
.cv-footer ul { display: grid; gap: var(--cv-space-2); }
.cv-footer a { text-decoration: none; color: var(--cv-ink-2); transition: color var(--cv-dur-fast) var(--cv-ease); }
.cv-footer a:hover { color: var(--cv-violet); }
.cv-footer__offices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cv-space-5); margin-top: var(--cv-space-7); padding-top: var(--cv-space-5); border-top: 1px solid var(--cv-line); font-size: var(--cv-text-xs); color: var(--cv-ink-2); }
.cv-footer__offices strong { display: block; color: var(--cv-ink); font-weight: var(--cv-weight-semibold); }
.cv-footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--cv-space-4); margin-top: var(--cv-space-6); font-size: var(--cv-text-xs); color: var(--cv-ink-3); }

/* --------------------------------------------------------------------------
   4. Type — Newsreader (editorial serif) for display, h1, h2 and the lockup;
   Plus Jakarta Sans for everything else. Sentence case, no trailing full stop.
   -------------------------------------------------------------------------- */
.cv-display, .cv-h1, .cv-h2, .cv-h3 { color: var(--cv-ink); text-wrap: balance; }
.cv-display { font-family: var(--cv-font-display); font-optical-sizing: auto; font-weight: var(--cv-weight-medium); }
.cv-h1, .cv-h2 { font-family: var(--cv-font-sans); font-weight: var(--cv-weight-bold); }
.cv-display { font-size: var(--cv-text-display); line-height: 1; letter-spacing: -0.022em; }
.cv-h1 { font-size: var(--cv-text-h1); line-height: 1.06; letter-spacing: -0.03em; }
.cv-h2 { font-size: var(--cv-text-h2); line-height: 1.1; letter-spacing: -0.028em; }
.cv-h3 { font-family: var(--cv-font-sans); font-size: var(--cv-text-h3); font-weight: var(--cv-weight-semibold); line-height: var(--cv-leading-snug); letter-spacing: -0.008em; }
/* in a serif heading, the accent phrase is set in italic */
:is(.cv-display, .cv-h1, .cv-h2) .cv-accent { font-style: italic; }
.cv-lede { font-size: var(--cv-text-l); line-height: 1.6; color: var(--cv-ink-2); max-width: var(--cv-measure); }
.cv-body { font-size: var(--cv-text-m); color: var(--cv-ink-2); max-width: var(--cv-measure); }
.cv-small { font-size: var(--cv-text-s); color: var(--cv-ink-2); }
.cv-meta { font-family: var(--cv-font-mono); font-size: var(--cv-text-xs); color: var(--cv-ink-3); font-variant-numeric: tabular-nums; }
.cv-num { font-variant-numeric: tabular-nums; }
.cv-ink { color: var(--cv-ink); }
.cv-strong { font-weight: var(--cv-weight-semibold); color: var(--cv-ink); }
.cv-label { font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-ink); }
.cv-note { font-size: var(--cv-text-xs); color: var(--cv-ink-3); }
/* one coloured word in a heading: the stage colour, never a gradient fill */
.cv-accent { color: var(--cv-violet); }
/* the brand gradient as an underline beneath that phrase; draws in once with the heading's reveal */
.cv-mark { padding-bottom: .04em; background: var(--cv-signal) no-repeat 0 100% / 100% .085em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s var(--cv-ease) .55s; }
.cv-motion .cv-reveal:not(.is-in) .cv-mark { background-size: 0% .085em; }

/* The OnePV product wordmark, as on Clinevo's boards. Only the word "OnePV". */
.cv-wordmark { font-weight: var(--cv-weight-bold); letter-spacing: -0.02em; color: var(--cv-violet); background: linear-gradient(90deg, #2952F2 0%, #8A2BE2 60%, #B020D0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Brand lockup. Exact copy only: "Enterprise Software" / "without enterprise costs" */
.cv-lockup { display: grid; font-family: var(--cv-font-display); font-optical-sizing: auto; font-weight: var(--cv-weight-medium); line-height: 1.04; letter-spacing: -0.018em; font-size: var(--cv-text-h2); }
.cv-lockup span:first-child { color: var(--cv-violet); }
.cv-lockup span:last-child { color: var(--cv-ink); }

/* product name above a hero heading (once per page, only to name the product) */
.cv-kicker { display: inline-flex; align-items: center; gap: var(--cv-space-3); font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-ink-2); }
.cv-kicker::before { content: ""; width: 32px; height: 2px; border-radius: 2px; background: var(--cv-signal); }
.cv-kicker .cv-wordmark { font-size: var(--cv-text-l); }
/* centred hero: the rule on both sides */
.cv-kicker--center { justify-content: center; }
.cv-kicker--center::after { content: ""; width: 32px; height: 2px; border-radius: 2px; background: var(--cv-signal); transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   5. Actions
   -------------------------------------------------------------------------- */
.cv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cv-space-2); min-height: 48px; padding: 11px 22px; border-radius: var(--cv-radius-m); border: 1px solid transparent; font-family: var(--cv-font-sans); font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--cv-dur-fast) var(--cv-ease), box-shadow var(--cv-dur) var(--cv-ease), background-color var(--cv-dur-fast) var(--cv-ease), border-color var(--cv-dur-fast) var(--cv-ease), color var(--cv-dur-fast) var(--cv-ease); }
.cv-btn:hover { transform: translateY(-1px); }
.cv-btn:active { transform: translateY(0); }
.cv-btn--primary { background: var(--cv-ink); color: #FFFFFF; border-color: var(--cv-ink); }
.cv-btn--primary:hover { background: var(--cv-ink-hover); border-color: var(--cv-ink-hover); box-shadow: 0 12px 24px -12px rgba(41, 82, 242, .6); }
.cv-btn--secondary { background: var(--cv-surface); color: var(--cv-ink); border-color: var(--cv-line-2); }
.cv-btn--secondary:hover { border-color: var(--cv-violet); color: var(--cv-ink); box-shadow: 0 10px 22px -14px rgba(138, 43, 226, .45); }
.cv-btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--cv-dur) var(--cv-ease); }
.cv-btn:hover svg { transform: translateX(3px); }
.cv-link { display: inline-flex; align-items: center; gap: 6px; color: var(--cv-blue); font-weight: var(--cv-weight-semibold); text-decoration: underline; text-decoration-color: rgba(41, 82, 242, .3); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color var(--cv-dur) var(--cv-ease), color var(--cv-dur-fast) var(--cv-ease); }
.cv-link:hover { color: var(--cv-violet); text-decoration-color: currentColor; }
.cv-link svg { width: 15px; height: 15px; flex: none; transition: transform var(--cv-dur) var(--cv-ease); }
.cv-link:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Brand moments
   -------------------------------------------------------------------------- */
.cv-signal { display: block; height: 2px; border: 0; margin: 0; background: var(--cv-signal); }
.cv-signal--short { width: 56px; }
/* the one saturated panel per page: the boards' blue → violet → magenta band, white text */
.cv-panel--brand { position: relative; border-radius: var(--cv-radius-xl); padding: clamp(28px, 4.5vw, 52px); background: var(--cv-signal-deep); color: #FFFFFF; overflow: hidden; }
.cv-panel--brand .cv-lockup span { color: #FFFFFF; }
.cv-panel--brand :where(.cv-h1, .cv-h2, .cv-h3, .cv-strong, .cv-label) { color: #FFFFFF; }
.cv-panel--brand :where(.cv-lede, .cv-body, .cv-small, p) { color: #FFFFFF; }
.cv-panel--brand .cv-btn--primary { background: #FFFFFF; color: var(--cv-ink); border-color: #FFFFFF; }
.cv-panel--brand .cv-btn--secondary { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .6); }
.cv-panel--brand a:not(.cv-btn) { color: #FFFFFF; }
.cv-panel--quiet { border-radius: var(--cv-radius-l); padding: clamp(28px, 4vw, 44px); background: var(--cv-surface-2); }
/* closing panel on the softer wash */
.cv-panel--wash { border-radius: var(--cv-radius-xl); padding: clamp(32px, 5vw, 64px); background: var(--cv-wash-soft); border: 1px solid var(--cv-line); }

/* white client logos on the brand panel */
.cv-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cv-space-6) clamp(24px, 5vw, 64px); }
.cv-logos li { display: flex; align-items: center; }
.cv-logos img { height: 40px; width: auto; opacity: .95; transition: opacity var(--cv-dur) var(--cv-ease), transform var(--cv-dur) var(--cv-ease); }
.cv-logos li:hover img { opacity: 1; transform: translateY(-2px); }
.cv-logos--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; align-items: center; gap: var(--cv-space-7) var(--cv-space-5); }
.cv-logos--grid img { height: var(--h, 36px); }

.cv-stage--intake { --cv-stage: var(--cv-blue); --cv-stage-soft: var(--cv-blue-soft); }
.cv-stage--process { --cv-stage: var(--cv-violet); --cv-stage-soft: var(--cv-violet-soft); }
.cv-stage--submit { --cv-stage: var(--cv-magenta); --cv-stage-soft: var(--cv-magenta-soft); --cv-stage-text: var(--cv-magenta-text); }
.cv-stage-mark { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cv-stage, var(--cv-violet)); flex: none; }
.cv-stage-rule { border-top: 2px solid var(--cv-stage, var(--cv-violet)); padding-top: var(--cv-space-4); }

/* line icons: 24px, 1.6px stroke, the brand gradient (needs .cv-defs on the page), never in tiles */
.cv-icon { width: 28px; height: 28px; flex: none; fill: none; stroke: url(#cv-grad) var(--cv-stage, var(--cv-violet)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cv-icon--s { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   6a. The light hero and its ambient (homepage hero, CORRECTIONS #47)
   The boards' pale lavender ground; four soft fields of the brand colours drift through
   it on long, out-of-step cycles and silk waves flow across its lower half, so the ground
   is never quite the same and never draws the eye. Deep-navy type; the film is the one dark object.
   -------------------------------------------------------------------------- */
.cv-hero--light { position: relative; background: var(--cv-field-light); color: var(--cv-ink); }
.cv-hero--light::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2px; background: var(--cv-signal); }
.cv-hero--light .cv-display { font-size: var(--cv-text-hero); line-height: 1.04; }
/* The case journey (CORRECTIONS #52): a motion graphic under the hero film. One case travels an isometric path,
   received -> submitted, drawn on one canvas by clinevo-journey.js, which also sets the height it needs. */
.cv-journey { position: relative; height: 226px; margin-top: var(--cv-space-4); }
.cv-journey canvas { display: block; width: 100%; height: 100%; }
/* an invisible button over the graphic: a click, tap or Enter pauses and resumes it (WCAG 2.2.2) */
.cv-journey__toggle { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--cv-radius-m); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cv-journey__toggle:focus-visible { outline: 2px solid var(--cv-blue); outline-offset: 2px; }
@media (max-width: 680px) { .cv-journey { height: 132px; margin-top: var(--cv-space-3); } }
.cv-hero--light .cv-film { box-shadow: 0 0 0 1px rgba(11, 14, 92, .08), 0 44px 80px -40px rgba(30, 36, 120, .5); }

/* The ambient: transform only (no blur filters, no lines), one per page, started by clinevo-motion.js,
   paused off screen, still without JS and under reduced motion. Fields 26–38 s, waves 30–64 s a loop (section 12). */
.cv-ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cv-ambient__field { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(closest-side, var(--c) 0%, var(--c2) 42%, transparent 100%); }
[data-cv-ambient].is-live .cv-ambient__field { will-change: transform; }
.cv-ambient__field--sky { --c: rgba(104, 136, 255, .56); --c2: rgba(104, 136, 255, .308); --s: max(64vw, 560px); left: calc(var(--s) * -.3); top: calc(var(--s) * -.42); }
.cv-ambient__field--blush { --c: rgba(255, 128, 204, .42); --c2: rgba(255, 128, 204, .231); --s: max(56vw, 500px); right: calc(var(--s) * -.26); top: calc(var(--s) * -.46); }
.cv-ambient__field--violet { --c: rgba(156, 108, 255, .4); --c2: rgba(156, 108, 255, .22); --s: max(50vw, 460px); right: 4%; top: 24%; }
.cv-ambient__field--azure { --c: rgba(92, 164, 255, .36); --c2: rgba(92, 164, 255, .198); --s: max(60vw, 540px); left: 6%; bottom: calc(var(--s) * -.5); }
/* Silk ribbons (CORRECTIONS #48, #53): one canvas across the hero, drawn by clinevo-motion.js. The ribbons run from beyond
   the left edge to beyond the right, so none starts or stops on screen (the owner saw the old waves start abruptly). */
.cv-silk { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes cv-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(22%, 14%, 0) scale(1.16); } }
@keyframes cv-drift-b { from { transform: translate3d(0, 0, 0) scale(1.06); } to { transform: translate3d(-20%, 18%, 0) scale(.92); } }
@keyframes cv-drift-c { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-22%, -12%, 0) scale(1.14); } }
@keyframes cv-drift-d { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(24%, -16%, 0) scale(.94); } }

/* --------------------------------------------------------------------------
   6b. The deep hero (not on the homepage since CORRECTIONS #47), the film and the client marquee.
   Hero components default to light grounds; .cv-hero--deep turns them white.
   -------------------------------------------------------------------------- */
.cv-hero--deep { position: relative; background: var(--cv-deep); background: var(--cv-field); color: var(--cv-on-dark); }
/* the field closes on the case-journey line, echoing the 3 px strip on the header */
.cv-hero--deep::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cv-signal); }
.cv-hero--deep :where(.cv-display, .cv-h1, .cv-h2, .cv-h3, .cv-strong, .cv-label) { color: var(--cv-on-dark); }
.cv-hero--deep .cv-display { font-size: var(--cv-text-hero); line-height: 1.04; }
.cv-hero--deep :where(.cv-lede, .cv-body, .cv-small, p) { color: var(--cv-on-dark-2); }
.cv-hero--deep .cv-accent { color: var(--cv-accent-on-dark); }
.cv-hero--deep .cv-mark { background-image: linear-gradient(90deg, #5B7CFF 0%, #B26BFF 52%, #FF5CC8 100%); }
.cv-hero--deep .cv-kicker { color: var(--cv-on-dark-2); }
.cv-hero--deep .cv-kicker::before { background: var(--cv-accent-on-dark); }
.cv-hero--deep .cv-wordmark { background: linear-gradient(90deg, #8FA8FF 0%, #C79CFF 60%, #F59AE0 100%); -webkit-background-clip: text; background-clip: text; }
.cv-hero--deep .cv-btn--primary { background: #FFFFFF; color: var(--cv-ink); border-color: #FFFFFF; }
.cv-hero--deep .cv-btn--primary:hover { background: #EEF0FF; border-color: #EEF0FF; box-shadow: 0 14px 30px -12px rgba(178, 107, 255, .75); }
.cv-hero--deep .cv-btn--secondary { background: transparent; color: var(--cv-on-dark); border-color: rgba(255, 255, 255, .45); }
.cv-hero--deep .cv-btn--secondary:hover { color: var(--cv-on-dark); border-color: #FFFFFF; box-shadow: none; }
.cv-hero--deep :focus-visible { outline-color: #FFFFFF; }
.cv-hero--deep.cv-wash--grid::before { background-image: linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px); -webkit-mask-image: radial-gradient(80% 70% at 60% 40%, #000 0%, transparent 80%); mask-image: radial-gradient(80% 70% at 60% 40%, #000 0%, transparent 80%); }

/* Layers on the deep field (CORRECTIONS #33): static brand ribbons and one halo behind the visual
   (an inline <svg class="cv-layers">), never lines or patterns, never behind running text */
:is(.cv-hero--light, .cv-hero--deep) > .cv-wrap { position: relative; z-index: 1; }
.cv-layers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* A layered product stack: the brand gradient panel offset behind a visual. Nothing ever sits on top of
   the visual itself except its own controls (CORRECTIONS #36). */
.cv-stack { position: relative; }
.cv-stack::before { content: ""; position: absolute; inset: 40px -28px -40px 40px; border-radius: var(--cv-radius-xl); background: linear-gradient(120deg, #7F98FF 0%, #B08CFF 50%, #F08DD3 100%); box-shadow: 0 40px 80px -36px rgba(60, 48, 160, .35); z-index: 0; }
.cv-hero--deep .cv-stack::before { background: linear-gradient(120deg, #3D55C9 0%, #7A45C4 50%, #B4408F 100%); box-shadow: 0 40px 80px -36px rgba(11, 14, 42, .6); }
.cv-stack > .cv-film { position: relative; z-index: 1; }

/* The track record as one statement of trust under the hero actions (CORRECTIONS #42, #43):
   a serif line, then at most three owner-confirmed figures from the claims register */
.cv-established { display: grid; gap: var(--cv-space-4); margin-top: var(--cv-space-4); padding-top: var(--cv-space-5); border-top: 1px solid var(--cv-line-2); }
.cv-established__lead { font-family: var(--cv-font-display); font-optical-sizing: auto; font-size: clamp(1.375rem, 1.9vw, 1.625rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--cv-ink); }
.cv-hero--deep .cv-established__lead { color: var(--cv-on-dark); }
.cv-proofpoints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cv-proofpoints li { display: grid; align-content: start; gap: 4px; padding-right: var(--cv-space-4); }
.cv-proofpoints li + li { padding-left: var(--cv-space-5); border-left: 1px solid var(--cv-line-2); }
.cv-proofpoints strong { font-family: var(--cv-font-display); font-optical-sizing: auto; font-size: var(--cv-text-h2); font-weight: var(--cv-weight-medium); line-height: 1; letter-spacing: -0.02em; color: var(--cv-ink); }
.cv-proofpoints span { font-size: var(--cv-text-s); font-weight: var(--cv-weight-medium); line-height: 1.35; color: var(--cv-ink-2); }
.cv-hero--deep .cv-established { border-top-color: rgba(255, 255, 255, .16); }
.cv-hero--deep .cv-proofpoints li + li { border-left-color: rgba(255, 255, 255, .16); }
.cv-hero--deep .cv-proofpoints strong { color: var(--cv-on-dark); }
.cv-hero--deep .cv-proofpoints span { color: var(--cv-on-dark-2); }
@media (max-width: 680px) { .cv-proofpoints { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr); } .cv-proofpoints li { padding-right: var(--cv-space-2); } .cv-proofpoints li + li { padding-left: var(--cv-space-3); } .cv-proofpoints strong { font-size: 2rem; }
  .cv-established__lead, .cv-film__caption { text-wrap: balance; } }

/* A product film: a silent preview loop while on screen, a clear button for sound (clinevo-film.js) */
.cv-film { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--cv-radius-l); overflow: hidden; background: var(--cv-deep); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px -40px rgba(11, 14, 42, .6); }
.cv-film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a soft scrim under the controls so they never sit on busy footage */
.cv-film::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, rgba(11, 14, 42, 0) 0%, rgba(11, 14, 42, .82) 100%); pointer-events: none; transition: opacity var(--cv-dur) var(--cv-ease); }
.cv-film.is-sound::after { opacity: 0; }
.cv-film__play, .cv-film__pause { z-index: 1; }
.cv-film:not(:has(.cv-film__play))::after { display: none; } /* no controls, no scrim */
.cv-film__toggle { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.cv-film.is-sound .cv-film__toggle { display: none; }
.cv-film__toggle:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -6px; }
.cv-film__toggle, .cv-iso__tile, .cv-marquee { -webkit-tap-highlight-color: transparent; } /* no grey flash over the film or tiles on a tap */
.cv-film__play { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 18px 7px 7px; border: 0; border-radius: 999px; background: #FFFFFF; color: var(--cv-ink); font-family: var(--cv-font-sans); font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); cursor: pointer; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55); transition: transform var(--cv-dur-fast) var(--cv-ease), opacity var(--cv-dur) var(--cv-ease), box-shadow var(--cv-dur) var(--cv-ease), background-color var(--cv-dur-fast) var(--cv-ease), visibility 0s; }
.cv-film__play:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(138, 43, 226, .7); }
.cv-film__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; flex: none; }
.cv-film__icon svg { width: 14px; height: 14px; fill: var(--cv-ink); margin-left: 2px; }
.cv-film__time { font-family: var(--cv-font-mono); font-size: var(--cv-text-xs); font-weight: var(--cv-weight-regular); color: var(--cv-ink-3); }
/* pause for the silent preview (WCAG 2.2.2); shown by the script only when the preview can run */
.cv-film__pause { position: absolute; right: 14px; bottom: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: rgba(11, 14, 42, .6); color: #FFFFFF; cursor: pointer; transition: border-color var(--cv-dur-fast) var(--cv-ease), background-color var(--cv-dur-fast) var(--cv-ease); }
.cv-film__pause:hover { border-color: #FFFFFF; background: rgba(11, 14, 42, .85); }
.cv-film__pause svg { width: 14px; height: 14px; fill: currentColor; }
/* while the film plays with sound, the overlay buttons leave the tab order and the accessibility tree */
.cv-film.is-sound .cv-film__play, .cv-film.is-sound .cv-film__pause { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: transform var(--cv-dur-fast) var(--cv-ease), opacity var(--cv-dur) var(--cv-ease), visibility 0s linear var(--cv-dur); }
.cv-film__caption { margin-top: var(--cv-space-3); font-size: var(--cv-text-s); color: var(--cv-ink-3); }
/* on the deep field: a dark play control so the white primary button stays the only light object */
.cv-hero--deep .cv-film__play { background: rgba(11, 14, 42, .8); color: var(--cv-on-dark); box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 12px 30px -12px rgba(0, 0, 0, .6); }
.cv-hero--deep .cv-film__play:hover { background: rgba(11, 14, 42, .92); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 16px 34px -12px rgba(138, 43, 226, .7); }
.cv-hero--deep .cv-film__time { color: var(--cv-on-dark-3); }
.cv-hero--deep .cv-film__caption { font-size: var(--cv-text-s); color: var(--cv-on-dark-2); }

/* Client logos moving slowly in one line. Pauses on hover, with its own pause button (WCAG 2.2.2) and off screen; still under reduced motion */
.cv-marquee { display: flex; align-items: center; gap: var(--cv-space-6); padding-block: var(--cv-space-6); border-top: 1px solid rgba(11, 14, 92, .1); }
.cv-marquee__label { flex: none; font-size: var(--cv-text-xs); font-weight: var(--cv-weight-medium); line-height: 1.35; white-space: nowrap; color: var(--cv-ink-3); }
.cv-marquee__rows { flex: 1; min-width: 0; display: grid; gap: var(--cv-space-5); }
.cv-marquee__viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.cv-marquee__track { display: flex; align-items: center; width: max-content; }
.cv-marquee__track li { display: flex; align-items: center; flex: none; padding-right: clamp(56px, 8.5vw, 128px); }
/* the logo files in brand/assets/clients/ink are pre-tinted deep navy (no runtime filter); the deep hero uses the white files */
.cv-marquee__track img { width: auto; opacity: .66; transition: opacity var(--cv-dur) var(--cv-ease); }
@media (hover: hover) and (pointer: fine) { .cv-marquee__track li:hover img { opacity: 1; } }
.cv-marquee__toggle { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cv-line-2); background: transparent; color: var(--cv-ink); cursor: pointer; transition: border-color var(--cv-dur-fast) var(--cv-ease); }
.cv-marquee__toggle:hover { border-color: var(--cv-ink); }
.cv-hero--deep .cv-marquee { border-top-color: rgba(255, 255, 255, .12); }
.cv-hero--deep .cv-marquee__label { color: var(--cv-on-dark-3); }
.cv-hero--deep .cv-marquee__track img { opacity: .85; }
.cv-hero--deep .cv-marquee__toggle { border-color: rgba(255, 255, 255, .35); color: var(--cv-on-dark); }
.cv-hero--deep .cv-marquee__toggle:hover { border-color: #FFFFFF; }
.cv-marquee__toggle svg { width: 14px; height: 14px; fill: currentColor; }
@keyframes cv-marquee { from { transform: translateX(0); } to { transform: translateX(var(--cv-marquee-shift, -50%)); } }

/* Certifications and validation at a glance: one band directly under the hero (CORRECTIONS #40).
   ISO is "Certified"; regulations are "Built for" (claims register); validation is "included". */
.cv-trust { padding-block: clamp(36px, 4.5vw, 56px); background: var(--cv-surface); border-bottom: 1px solid var(--cv-line); }
.cv-trust__title { margin-bottom: var(--cv-space-5); font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-ink-2); }
.cv-trust__list { display: flex; justify-content: space-between; gap: 0; }
.cv-trust__list > .cv-trust__item { flex: 0 1 auto; max-width: 12.5rem; }
.cv-trust__item { display: grid; align-content: start; gap: 4px; padding: 4px var(--cv-space-4) 4px; border-left: 1px solid var(--cv-line); }
.cv-trust__item:first-child { border-left: 0; padding-left: 0; }
.cv-trust__item .cv-icon { width: 30px; height: 30px; margin-bottom: var(--cv-space-2); }
.cv-trust__name { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); font-weight: var(--cv-weight-bold); line-height: 1.2; letter-spacing: -0.015em; color: var(--cv-ink); white-space: nowrap; }
.cv-trust__kind { font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-violet); }
.cv-trust__note { font-size: var(--cv-text-xs); line-height: 1.4; color: var(--cv-ink-3); }

/* one gently highlighted section per page: the soft wash, framed by the brand line top and bottom */
.cv-section--feature { position: relative; background: var(--cv-wash-soft); }
.cv-section--feature::before, .cv-section--feature::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--cv-signal); opacity: .55; }
.cv-section--feature::before { top: 0; } .cv-section--feature::after { bottom: 0; }
.cv-feature-label { display: inline-flex; align-items: center; gap: var(--cv-space-2); font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-violet); }
.cv-feature-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cv-signal); }

/* --------------------------------------------------------------------------
   6c. Isometric module explorer (CORRECTIONS #39, #41)
   OnePV drawn as one platform with each module a tile built into it. Tabs
   (role="tablist") drive it; tiles are decorative mirrors (aria-hidden).
   Materials: a deep-navy slab with a brand rim light, pearl tiles lit from
   the top left, each casting a soft shadow on the slab; the selected tile
   rises in its stage colour and spills coloured light beneath it. Tiles rise
   up through the slab once when revealed. Nothing loops or advances itself.
   Pure CSS 3D: rotateX(58deg) rotateZ(45deg), faces from pseudo-elements.
   -------------------------------------------------------------------------- */
.cv-iso-tabs { display: grid; border-top: 1px solid var(--cv-line-2); }
.cv-iso-tab { position: relative; display: grid; gap: 2px; width: 100%; padding: 13px 16px 13px 20px; border: 0; border-bottom: 1px solid var(--cv-line); background: transparent; text-align: left; cursor: pointer; transition: background-color var(--cv-dur) var(--cv-ease); }
.cv-iso-tab::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--cv-stage, var(--cv-violet)); transform: scaleY(0); transition: transform 500ms cubic-bezier(.22, 1, .36, 1); }
.cv-iso-tab__index { font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-stage-text, var(--cv-stage, var(--cv-violet))); }
.cv-iso-tab__name { font-size: var(--cv-text-m); font-weight: var(--cv-weight-semibold); color: var(--cv-ink-2); transition: color var(--cv-dur-fast) var(--cv-ease); }
.cv-iso-tab:hover { background: var(--cv-surface-2); }
.cv-iso-tab:hover .cv-iso-tab__name { color: var(--cv-ink); }
.cv-iso-tab[aria-selected="true"] { background: var(--cv-stage-soft, var(--cv-violet-soft)); }
.cv-iso-tab[aria-selected="true"]::before { transform: scaleY(1); }
.cv-iso-tab[aria-selected="true"] .cv-iso-tab__name { color: var(--cv-ink); }

.cv-iso { position: relative; --iso-ease: cubic-bezier(.22, 1, .36, 1); }
.cv-iso__stage { position: relative; display: grid; place-items: center; height: 520px; }
/* the slab's contact shadow on the page */
.cv-iso__stage::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 38%; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 14, 42, .3), rgba(11, 14, 42, 0)); }
.cv-iso__plane { position: relative; width: 380px; height: 260px; margin-top: 24px; transform: rotateX(58deg) rotateZ(45deg); transform-style: preserve-3d; }

/* the slab: deep navy, lit from the top left, with a brand rim on its two visible edges */
.cv-iso__base { position: absolute; inset: -28px; border-radius: 16px; transform-style: preserve-3d;
  background: radial-gradient(120% 95% at 18% 12%, #2E338F 0%, #181C62 42%, #0D1042 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 1px 1px 0 rgba(255, 255, 255, .18); }
.cv-iso__base::before, .cv-iso__base::after, .cv-iso__tile::before, .cv-iso__tile::after { content: ""; position: absolute; }
.cv-iso__base::before { left: 10px; right: 0; top: 100%; height: 30px; transform-origin: top; transform: rotateX(-90deg); border-top: 2px solid rgba(178, 107, 255, .8); background: linear-gradient(180deg, #1B1F68 0%, #0A0C2C 100%); }
.cv-iso__base::after { top: 10px; bottom: 0; left: 100%; width: 30px; transform-origin: left; transform: rotateY(90deg); border-left: 2px solid rgba(255, 92, 200, .7); background: linear-gradient(90deg, #12155A 0%, #06081E 100%); }
.cv-iso__brand { position: absolute; left: 32px; bottom: 7px; font-size: var(--cv-text-xs); font-weight: var(--cv-weight-bold); letter-spacing: .05em; color: #CDB8FF; }
.cv-iso__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 24px; transform-style: preserve-3d; }
.cv-iso__cell { position: relative; transform-style: preserve-3d; }

/* each tile's soft cast shadow on the slab; the raised tile spills its stage colour instead */
.cv-iso__shadow { position: absolute; inset: 4px; border-radius: 12px; background: rgba(2, 3, 18, .62); filter: blur(5px); transform: translate(9px, 9px); transition: transform 900ms var(--iso-ease) calc(200ms + var(--i, 0) * 90ms), background 600ms var(--cv-ease), filter 600ms var(--cv-ease), opacity 700ms var(--cv-ease) calc(200ms + var(--i, 0) * 90ms); }
.cv-iso__cell:has(.is-active) .cv-iso__shadow { background: color-mix(in srgb, var(--cv-stage) 75%, transparent); filter: blur(10px); transform: translate(20px, 20px) scale(1.08); }

/* pearl tiles, lit from the top left */
.cv-iso__tile { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; transform: translateZ(18px); transform-style: preserve-3d; cursor: pointer;
  background: linear-gradient(145deg, #FFFFFF 0%, #F4F2FF 55%, #E4DFFA 100%);
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 rgba(80, 60, 170, .16);
  transition: transform 900ms var(--iso-ease) calc(200ms + var(--i, 0) * 90ms), background 500ms var(--cv-ease), box-shadow 500ms var(--cv-ease); }
.cv-iso__tile::before { left: 0; right: 0; top: 100%; height: 54px; transform-origin: top; transform: rotateX(-90deg) scaleY(.3333); border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cv-stage) 22%, #E2DCFA) 0%, color-mix(in srgb, var(--cv-stage) 38%, #8E82CF) 100%);
  transition: transform 900ms var(--iso-ease) calc(200ms + var(--i, 0) * 90ms), background 500ms var(--cv-ease); } /* faces scale, never resize: no layout per frame */
.cv-iso__tile::after { top: 0; bottom: 0; left: 100%; width: 54px; transform-origin: left; transform: rotateY(90deg) scaleX(.3333); border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cv-stage) 30%, #BDB2EC) 0%, color-mix(in srgb, var(--cv-stage) 48%, #6F62B8) 100%);
  transition: transform 900ms var(--iso-ease) calc(200ms + var(--i, 0) * 90ms), background 500ms var(--cv-ease); }
.cv-iso__icon { width: 46px; height: 46px; fill: none; stroke: url(#cv-grad) var(--cv-stage); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 400ms var(--cv-ease); }
.cv-iso__tile:not(.is-active):hover { transform: translateZ(26px); }
.cv-iso__tile:not(.is-active):hover::before { transform: rotateX(-90deg) scaleY(.4815); }
.cv-iso__tile:not(.is-active):hover::after { transform: rotateY(90deg) scaleX(.4815); }

/* the selected module rises out of the slab in its stage colour */
.cv-iso__tile.is-active { transform: translateZ(54px);
  background: linear-gradient(145deg, color-mix(in srgb, var(--cv-stage) 52%, #FFFFFF) 0%, var(--cv-stage) 62%, color-mix(in srgb, var(--cv-stage) 78%, #0B0E2A) 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(0, 0, 0, .18); }
.cv-iso__tile.is-active::before { transform: rotateX(-90deg) scaleY(1); background: linear-gradient(180deg, color-mix(in srgb, var(--cv-stage) 80%, #0B0E2A) 0%, color-mix(in srgb, var(--cv-stage) 50%, #0B0E2A) 100%); }
.cv-iso__tile.is-active::after { transform: rotateY(90deg) scaleX(1); background: linear-gradient(90deg, color-mix(in srgb, var(--cv-stage) 66%, #0B0E2A) 0%, color-mix(in srgb, var(--cv-stage) 40%, #0B0E2A) 100%); }
.cv-iso__tile.is-active .cv-iso__icon { stroke: #FFFFFF; }

/* after the build-in, everything responds at once */
.cv-iso.is-done :is(.cv-iso__tile, .cv-iso__tile::before, .cv-iso__tile::after, .cv-iso__shadow) { transition-delay: 0s; }
.cv-iso.is-done .cv-iso__tile::before, .cv-iso.is-done .cv-iso__tile::after { transition-delay: 0s; }
/* build-in: tiles start inside the slab and rise up through its surface */
.cv-motion .cv-iso.cv-reveal:not(.is-in) .cv-iso__tile { transform: translateZ(-40px); }
.cv-motion .cv-iso.cv-reveal:not(.is-in) .cv-iso__tile::before { transform: rotateX(-90deg) scaleY(.001); }
.cv-motion .cv-iso.cv-reveal:not(.is-in) .cv-iso__tile::after { transform: rotateY(90deg) scaleX(.001); }
.cv-motion .cv-iso.cv-reveal:not(.is-in) .cv-iso__shadow { opacity: 0; }

/* the detail card: static under the platform by default; floats beside it on wide screens */
.cv-iso__card { position: relative; display: grid; gap: var(--cv-space-2); align-content: start; padding: 22px 22px 22px; border-radius: 16px; border: 1px solid var(--cv-line); background: var(--cv-surface); box-shadow: 0 1px 2px rgba(11, 14, 42, .05), 0 24px 48px -28px rgba(11, 14, 42, .35); }
.cv-iso__card::before { content: ""; position: absolute; left: 22px; top: -1px; width: 48px; height: 3px; border-radius: 0 0 3px 3px; background: var(--cv-stage, var(--cv-violet)); }
.cv-iso__card-index { font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-stage-text, var(--cv-stage, var(--cv-violet))); }
.cv-iso__card-text { font-size: var(--cv-text-s); color: var(--cv-ink-2); }
.cv-iso__points { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--cv-text-xs); font-weight: var(--cv-weight-medium); color: var(--cv-ink); }
.cv-iso__points li { display: inline-flex; align-items: center; gap: 7px; }
.cv-iso__points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cv-stage, var(--cv-violet)); }
.cv-iso__card .cv-link { font-size: var(--cv-text-s); padding-block: 8px; margin-block: -4px -8px; } /* a 44 px target, same place */
/* wide screens: the platform takes the left part, the card stands beside it at the raised tile's height */
.cv-iso.is-floating .cv-iso__stage { margin-right: 300px; padding-left: 0; }
.cv-iso.is-floating .cv-iso__plane { width: 272px; height: 188px; }
.cv-iso.is-floating .cv-iso__card { position: absolute; z-index: 3; width: 288px; opacity: 0; transform: translateX(-8px); transform-origin: left center; transition: opacity 500ms var(--cv-ease), transform 700ms var(--iso-ease), top 600ms var(--iso-ease); }
.cv-iso.is-floating .cv-iso__card.is-shown { opacity: 1; transform: none; }
.cv-motion .cv-iso.cv-reveal:not(.is-done) .cv-iso__card { transition-delay: 1s; }
/* a fine line from the raised tile to its card */
.cv-iso__wire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; transition: opacity 500ms var(--cv-ease); }
.cv-iso__wire path { fill: none; stroke-width: 1.5; stroke-opacity: .7; }
.cv-motion .cv-iso.cv-reveal:not(.is-done) .cv-iso__wire { opacity: 0; }

@media (max-width: 1080px) {
  .cv-iso__stage { height: 460px; }
  .cv-iso__card { margin-top: var(--cv-space-2); }
  /* all six cards share one grid cell, so the tabs below never move when the module changes (CORRECTIONS #49) */
  .cv-iso { display: grid; }
  .cv-iso__stage { grid-area: 1 / 1; }
  .cv-iso__card { grid-area: 2 / 1; grid-template-rows: auto auto auto auto 1fr; scroll-margin-top: 92px; }
  .cv-iso__card[hidden] { display: grid !important; visibility: hidden; }
  .cv-iso__card .cv-link { align-self: end; }
}
@media (min-width: 681px) and (max-width: 1080px) {
  .cv-iso__stage { height: 400px; }
  .cv-iso-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cv-space-5); }
  .cv-iso__card-text { max-width: var(--cv-measure); }
}
@media (max-width: 680px) {
  .cv-iso__stage { height: 280px; }
  .cv-iso__plane { width: min(250px, 61vw); height: min(172px, 42vw); margin-top: 8px; }
  .cv-iso__brand { left: 26px; bottom: 3px; line-height: 1; }
  .cv-iso__grid { gap: 16px; }
  .cv-iso__base { inset: -20px; }
  .cv-iso__icon { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-motion .cv-iso.cv-reveal:not(.is-in) .cv-iso__tile { transform: translateZ(18px); }
  .cv-motion .cv-iso.cv-reveal:not(.is-in) .cv-iso__tile::before { transform: rotateX(-90deg) scaleY(.3333); }
  .cv-motion .cv-iso.cv-reveal:not(.is-in) .cv-iso__tile::after { transform: rotateY(90deg) scaleX(.3333); }
  .cv-motion .cv-iso.cv-reveal:not(.is-in) .cv-iso__shadow { opacity: 1; }
}
@media print {
  .cv-iso__stage, .cv-iso__wire { display: none; }
  .cv-iso__card[hidden] { display: grid !important; }
}

/* --------------------------------------------------------------------------
   6d. Implementation timeline (CORRECTIONS #44)
   A gradient line fills from the first step to the last as the reader scrolls
   the timeline through the screen (clinevo-timeline.js); a soft light rides its
   leading edge; each step lights up as the line reaches it. Without JS, or under
   reduced motion, it shows complete. Horizontal on wide screens, vertical below 820 px.
   -------------------------------------------------------------------------- */
.cv-timeline { position: relative; --p: 1; }
.cv-timeline__track { position: absolute; top: 21px; left: 22px; right: 22px; height: 2px; border-radius: 2px; background: var(--cv-line-2); }
.cv-timeline__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--cv-signal); transform-origin: left center; transform: scaleX(var(--p)); will-change: transform; }
.cv-timeline__head { position: absolute; top: 50%; left: 0; transform: translateX(calc(var(--p) * var(--tl-len, 0px))); will-change: transform; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(138, 43, 226, .2), 0 0 22px 6px rgba(214, 28, 156, .3); opacity: 0; transition: opacity 400ms var(--cv-ease); }
.cv-timeline.is-live .cv-timeline__head { opacity: 1; }
.cv-timeline.is-vertical .cv-timeline__fill { transform-origin: center top; transform: scaleY(var(--p)); background: linear-gradient(180deg, #2952F2 0%, #8A2BE2 52%, #D61C9C 100%); }
.cv-timeline.is-vertical .cv-timeline__head { top: 0; left: 50%; transform: translateY(calc(var(--p) * var(--tl-len, 0px))); }
.cv-timeline__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cv-space-6); }
.cv-timeline__step { display: grid; align-content: start; gap: var(--cv-space-2); }
.cv-timeline__node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--cv-space-3); border-radius: 50%; border: 2px solid var(--cv-line-2); background: var(--cv-surface); font-family: var(--cv-font-mono); font-size: var(--cv-text-xs); font-weight: var(--cv-weight-regular); color: var(--cv-ink-3);
  transition: background-color 600ms var(--cv-ease), border-color 600ms var(--cv-ease), color 600ms var(--cv-ease), box-shadow 700ms var(--cv-ease), transform 700ms cubic-bezier(.22, 1, .36, 1); }
:is(.cv-timeline:not(.is-live) .cv-timeline__step, .cv-timeline__step.is-active) .cv-timeline__node { border-color: var(--cv-stage); background: var(--cv-stage); color: #FFFFFF; box-shadow: 0 0 0 7px color-mix(in srgb, var(--cv-stage) 14%, transparent), 0 12px 26px -12px var(--cv-stage); transform: scale(1.06); }
.cv-timeline__phase { font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-stage-text, var(--cv-stage, var(--cv-violet))); }
.cv-timeline__title { font-size: var(--cv-text-h3); font-weight: var(--cv-weight-semibold); line-height: 1.25; letter-spacing: -0.01em; color: var(--cv-ink); }
.cv-timeline__text { font-size: var(--cv-text-s); color: var(--cv-ink-2); max-width: 22rem; }
.cv-timeline.is-live .cv-timeline__step > :not(.cv-timeline__node) { opacity: .38; transform: translateY(10px); transition: opacity 700ms var(--cv-ease), transform 900ms cubic-bezier(.22, 1, .36, 1); }
.cv-timeline.is-live .cv-timeline__step.is-active > :not(.cv-timeline__node) { opacity: 1; transform: none; }
.cv-timeline.is-live .cv-timeline__step.is-active > .cv-timeline__title { transition-delay: 60ms; }
.cv-timeline.is-live .cv-timeline__step.is-active > .cv-timeline__text { transition-delay: 120ms; }
@media (max-width: 820px) {
  .cv-timeline__track { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
  .cv-timeline__steps { grid-template-columns: minmax(0, 1fr); gap: var(--cv-space-6); }
  .cv-timeline__step { position: relative; padding-left: 68px; min-height: 44px; }
  .cv-timeline__node { position: absolute; left: 0; top: -4px; margin: 0; }
}

/* where color-mix() is missing (Safari before 16.2): fixed colours for the iso faces and the timeline halo */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .cv-iso__tile::before { background: linear-gradient(180deg, #D3CCF3, #9A8FD6); }
  .cv-iso__tile::after { background: linear-gradient(90deg, #B5ABE8, #7568BE); }
  .cv-iso__tile.is-active { background: var(--cv-stage); }
  .cv-iso__tile.is-active::before, .cv-iso__tile.is-active::after { background: var(--cv-ink); }
  .cv-iso__cell:has(.is-active) .cv-iso__shadow { background: rgba(138, 43, 226, .55); }
  :is(.cv-timeline:not(.is-live) .cv-timeline__step, .cv-timeline__step.is-active) .cv-timeline__node { box-shadow: 0 0 0 7px var(--cv-stage-soft); }
}

/* --------------------------------------------------------------------------
   6e. Cinema band: a dark section in a film's own colours; the video melts into it (CORRECTIONS #44)
   -------------------------------------------------------------------------- */
.cv-section--cinema { position: relative; color: var(--cv-on-dark);
  background: radial-gradient(55% 65% at 18% 30%, rgba(41, 82, 242, .2) 0%, rgba(41, 82, 242, 0) 70%),
              radial-gradient(55% 60% at 86% 62%, rgba(138, 43, 226, .26) 0%, rgba(138, 43, 226, 0) 70%),
              linear-gradient(180deg, #0A0B26 0%, #0C0A2C 100%); }
.cv-section + .cv-section--cinema, .cv-section--cinema + .cv-section { border-top: 0; }
.cv-section--cinema :where(.cv-h2, .cv-h3, .cv-strong) { color: var(--cv-on-dark); }
.cv-section--cinema :where(.cv-body, .cv-small, p) { color: var(--cv-on-dark-2); }
.cv-section--cinema .cv-feature-label { color: var(--cv-accent-on-dark); }
.cv-film--blend { background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.cv-film--blend::after { display: none; }
.cv-film--blend .cv-film__video { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%); mask-composite: intersect; }
.cv-film--blend .cv-film__play { left: 7%; bottom: 11%; }
.cv-section--cinema .cv-film__play { background: rgba(11, 14, 42, .8); color: var(--cv-on-dark); box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 12px 30px -12px rgba(0, 0, 0, .6); }
.cv-section--cinema .cv-film__play:hover { background: rgba(11, 14, 42, .92); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 16px 34px -12px rgba(138, 43, 226, .7); }
.cv-section--cinema .cv-film__time { color: var(--cv-on-dark-3); }
.cv-section--cinema .cv-film__caption { text-align: center; color: var(--cv-on-dark-3); }
.cv-section--cinema :focus-visible { outline-color: #FFFFFF; }

/* --------------------------------------------------------------------------
   6f. Contact (CORRECTIONS #54): the site's HubSpot form in a card (clinevo-contact.js loads and dresses it),
   beside a short note, three steps and the direct lines. Ends the homepage.
   -------------------------------------------------------------------------- */
.cv-contact { background: var(--cv-wash-soft); scroll-margin-top: 32px; } /* a jump to #contact clears the sticky header */
.cv-section + .cv-section.cv-contact { border-top: 0; }
.cv-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro card" "more card"; column-gap: var(--cv-space-8); row-gap: var(--cv-space-5); align-items: start; }
.cv-contact__intro { grid-area: intro; } .cv-contact__card { grid-area: card; } .cv-contact__more { grid-area: more; }
.cv-contact__steps { display: grid; gap: var(--cv-space-4); margin-top: var(--cv-space-2); counter-reset: cv-contact; }
.cv-contact__steps li { position: relative; display: grid; gap: 2px; min-height: 36px; padding-left: 52px; counter-increment: cv-contact; }
.cv-contact__steps li::before { content: counter(cv-contact, decimal-leading-zero); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--cv-line-2); border-radius: 50%; background: var(--cv-surface); font-family: var(--cv-font-mono); font-size: var(--cv-text-xs); color: var(--cv-violet); }
.cv-contact__steps strong { font-size: var(--cv-text-m); font-weight: var(--cv-weight-semibold); color: var(--cv-ink); }
.cv-contact__steps span { font-size: var(--cv-text-s); color: var(--cv-ink-2); }
.cv-contact__direct { display: grid; gap: var(--cv-space-2); margin-top: var(--cv-space-3); padding-top: var(--cv-space-5); border-top: 1px solid var(--cv-line-2); font-size: var(--cv-text-s); color: var(--cv-ink-2); }
.cv-contact__direct li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--cv-space-3); align-items: baseline; }
.cv-contact__direct li > span:first-child { font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-ink-3); }
.cv-contact__direct a, .cv-contact__fallback a { color: var(--cv-ink); font-weight: var(--cv-weight-semibold); text-decoration: underline; text-decoration-color: var(--cv-line-2); text-underline-offset: 4px; }
.cv-contact__direct a:hover, .cv-contact__fallback a:hover { color: var(--cv-violet); }
.cv-contact__card { padding: clamp(20px, 3.4vw, 40px); border: 1px solid var(--cv-line); border-radius: var(--cv-radius-xl); background: var(--cv-surface); box-shadow: var(--cv-shadow-stage); }
.cv-contact__form { min-height: 560px; }
.cv-contact__form:is(.is-ready, .is-failed) { min-height: 0; }
.cv-contact__form:is(.is-ready, .is-failed) .cv-contact__loading { display: none; }
.cv-contact__form iframe { display: block; width: calc(100% + 12px) !important; margin: -6px -6px -10px; border: 0; } /* matches the room the form keeps for focus rings */
.cv-contact__loading { font-size: var(--cv-text-s); color: var(--cv-ink-3); }
.cv-contact__fallback { font-size: var(--cv-text-m); line-height: 1.6; color: var(--cv-ink-2); }
/* phones and tablets: heading and note, then the form, then the steps and direct lines, in reading and tab order */
@media (max-width: 1080px) { .cv-contact__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "card" "more"; row-gap: var(--cv-space-6); } }
@media (max-width: 680px) { .cv-contact__direct a { display: inline-flex; align-items: center; min-height: 44px; } .cv-contact__direct li { align-items: center; } .cv-contact__form { min-height: 780px; } }

/* --------------------------------------------------------------------------
   6g. About page (CORRECTIONS #57): the offices map, portraits, the CEO, the board and the advisors.
   Portraits come from the live About page in one black-and-white treatment (work/about_photos.py), set on
   the same gradient panel as the hero film so people and product read as one system.
   -------------------------------------------------------------------------- */
/* The offices map: Clinevo's four offices on a dot map of the world, the dots lit by where the sun is now,
   light passing between the offices; drawn on one canvas by clinevo-reach.js. Live local times below it. */
.cv-reach { position: relative; display: grid; gap: var(--cv-space-5); }
.cv-reach__panel { position: relative; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--cv-line); border-radius: var(--cv-radius-xl); background: var(--cv-surface); box-shadow: 0 0 0 1px rgba(11, 14, 92, .03), 0 44px 80px -44px rgba(30, 36, 120, .42); }
.cv-reach__map { position: relative; aspect-ratio: 285 / 132; }
.cv-reach__map canvas { display: block; width: 100%; height: 100%; }
.cv-reach__toggle { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--cv-radius-m); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cv-reach__toggle:focus-visible { outline: 2px solid var(--cv-blue); outline-offset: 4px; }
.cv-reach__offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cv-space-4) 0; margin-top: var(--cv-space-4); padding-top: var(--cv-space-4); border-top: 1px solid var(--cv-line); }
.cv-reach__offices li { display: grid; align-content: start; gap: 2px; padding-inline: var(--cv-space-5); border-left: 1px solid var(--cv-line); }
.cv-reach__offices li:nth-child(odd) { padding-left: 0; border-left: 0; }
.cv-reach__offices strong { display: flex; align-items: center; gap: 7px; font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); line-height: 1.3; color: var(--cv-ink); }
.cv-reach__offices strong::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--cv-stage, var(--cv-violet)); }
.cv-reach__offices span { font-size: var(--cv-text-xs); line-height: 1.35; color: var(--cv-ink-3); }
.cv-reach__time { font-family: var(--cv-font-mono); font-size: var(--cv-text-xs); color: var(--cv-ink-2); font-variant-numeric: tabular-nums; }
.cv-reach__caption { font-family: var(--cv-font-display); font-style: italic; font-size: var(--cv-text-m); color: var(--cv-ink-2); }
.cv-reach .cv-stack::before { inset: 36px -24px -36px 36px; }
.cv-reach .cv-stack > .cv-reach__panel { position: relative; z-index: 1; }

/* Portraits: one shape per tier, on the brand gradient panel; a soft lift on hover */
.cv-portrait { position: relative; margin: 0; }
.cv-portrait::before { content: ""; position: absolute; inset: 28px -20px -28px 28px; border-radius: var(--cv-radius-xl); background: linear-gradient(120deg, #7F98FF 0%, #B08CFF 50%, #F08DD3 100%); opacity: .9; }
.cv-portrait img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--cv-radius-l); background: var(--cv-surface-3); box-shadow: 0 0 0 1px rgba(11, 14, 92, .06), 0 30px 60px -34px rgba(30, 36, 120, .45); transition: transform var(--cv-dur) var(--cv-ease), box-shadow var(--cv-dur) var(--cv-ease); }
.cv-portrait:hover img { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(11, 14, 92, .06), 0 36px 64px -32px rgba(30, 36, 120, .5); }
.cv-portrait--s::before { inset: 16px -12px -16px 16px; border-radius: var(--cv-radius-l); }
.cv-portrait--round { width: 104px; flex: none; }
.cv-portrait--round::before { inset: 0; border-radius: 50%; transform: translate(8px, 8px); }
.cv-portrait--round img { aspect-ratio: 1; border-radius: 50%; }

/* The CEO: a large portrait beside the role, the name in the serif, the bio and a few facts */
.cv-leader { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 96px); align-items: center; }
.cv-leader .cv-portrait { max-width: 440px; }
.cv-leader__role { font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-violet); }
.cv-leader__name { font-family: var(--cv-font-display); font-optical-sizing: auto; font-size: var(--cv-text-h1); font-weight: var(--cv-weight-medium); line-height: 1.05; letter-spacing: -0.02em; color: var(--cv-ink); }
.cv-leader__bio { display: grid; gap: var(--cv-space-4); max-width: 40rem; }
.cv-leader__bio p { font-size: var(--cv-text-m); color: var(--cv-ink-2); }
/* a few facts about a person: label and value on hairlines */
.cv-facts { display: grid; border-top: 1px solid var(--cv-line-2); max-width: 40rem; }
.cv-facts > div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--cv-space-4); padding-block: 12px; border-bottom: 1px solid var(--cv-line); }
.cv-facts dt { font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-ink-3); padding-top: 2px; }
.cv-facts dd { font-size: var(--cv-text-s); color: var(--cv-ink); }

/* The board: two members side by side, each a portrait over the name, role and bio */
.cv-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); }
.cv-member { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.cv-member__name { font-family: var(--cv-font-display); font-optical-sizing: auto; font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: var(--cv-weight-medium); line-height: 1.1; letter-spacing: -0.015em; color: var(--cv-ink); }
.cv-member__role { font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-violet); }
.cv-member__bio { font-size: var(--cv-text-s); color: var(--cv-ink-2); }

/* Co-founders and advisors: a round portrait beside the name, role and bio */
.cv-advisors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cv-space-7) clamp(32px, 5vw, 72px); }
.cv-advisor { display: flex; gap: var(--cv-space-6); align-items: start; padding-top: var(--cv-space-5); border-top: 1px solid var(--cv-line-2); }
.cv-advisor__text { display: grid; gap: var(--cv-space-2); }
.cv-advisor .cv-person__name { font-family: var(--cv-font-display); font-optical-sizing: auto; font-size: clamp(1.375rem, 1.9vw, 1.625rem); font-weight: var(--cv-weight-medium); letter-spacing: -0.012em; }
.cv-advisor__where { font-size: var(--cv-text-xs); color: var(--cv-ink-3); }
.cv-advisor__where strong { color: var(--cv-ink-2); font-weight: var(--cv-weight-semibold); }

/* Chapters (the About page reads like an annual report): each section's h2 is a row with a serif italic
   number, the chapter name and a hairline that draws across once as it arrives */
.cv-chapter { display: flex; align-items: baseline; gap: var(--cv-space-4); margin-bottom: clamp(24px, 3.5vw, 40px); font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); line-height: 1.3; color: var(--cv-ink); }
.cv-chapter__no { font-family: var(--cv-font-display); font-optical-sizing: auto; font-style: italic; font-weight: var(--cv-weight-regular); font-size: var(--cv-text-h3); color: var(--cv-violet); font-variant-numeric: tabular-nums; }
.cv-chapter::after { content: ""; flex: 1; min-width: 32px; height: 1px; align-self: center; background: linear-gradient(90deg, var(--cv-line-2), var(--cv-line) 70%, transparent); transform-origin: left; transition: transform 1.1s var(--cv-ease) .25s; }
/* the statement that opens a chapter: one or two sentences in the serif, set like a magazine standfirst */
.cv-statement { max-width: 24em; font-family: var(--cv-font-display); font-optical-sizing: auto; font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: var(--cv-weight-regular); line-height: 1.24; letter-spacing: -0.012em; color: var(--cv-ink); }
.cv-statement em { font-style: italic; color: var(--cv-violet); }

/* The investor backing in the About hero as an editorial ledger (CORRECTIONS #60, the owner's pick of three):
   one sentence set between two fine brand-gradient hairlines directly under the title, the figure as a pull
   figure in the serif, the words around it in a calm sans. No panel. The hairlines draw across once as it
   arrives, like the chapter rules. */
.cv-ledger { position: relative; justify-self: stretch; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cv-space-1) var(--cv-space-3); max-width: 40rem; padding-block: var(--cv-space-5) var(--cv-space-4); }
.cv-ledger::before, .cv-ledger::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--cv-signal); transform-origin: left; transition: transform .9s var(--cv-ease) .15s; }
.cv-ledger::before { top: 0; }
.cv-ledger::after { bottom: 0; transition-delay: .3s; }
.cv-ledger__lead { flex-basis: 100%; margin-bottom: var(--cv-space-2); }
.cv-ledger__lead, .cv-ledger__tail { font-size: var(--cv-text-m); font-weight: var(--cv-weight-medium); line-height: 1.5; color: var(--cv-ink-2); }
.cv-ledger__figure { font-family: var(--cv-font-display); font-optical-sizing: auto; font-size: clamp(2.125rem, 3.4vw, 3rem); font-weight: var(--cv-weight-medium); font-variant-numeric: lining-nums; line-height: 1.1; letter-spacing: -0.02em; color: var(--cv-ink); white-space: nowrap; }
/* on a phone the tail drops under the figure, so the space under it matches the space above */
@media (max-width: 460px) { .cv-ledger { padding-bottom: var(--cv-space-5); } .cv-ledger__lead { margin-bottom: var(--cv-space-1); } }
.cv-motion .cv-ledger.cv-reveal:not(.is-in)::before, .cv-motion .cv-ledger.cv-reveal:not(.is-in)::after { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .cv-motion .cv-ledger.cv-reveal:not(.is-in)::before, .cv-motion .cv-ledger.cv-reveal:not(.is-in)::after { transform: none; } }
@media print { .cv-ledger { border-block: 1px solid var(--cv-line-2); } .cv-ledger::before, .cv-ledger::after { display: none; } }

/* Principles as a contents list: number, name, explanation on one hairline row */
.cv-principles { display: grid; border-bottom: 1px solid var(--cv-line-2); }
.cv-principles > li { display: grid; grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 7fr); gap: var(--cv-space-5); align-items: baseline; padding-block: var(--cv-space-6); border-top: 1px solid var(--cv-line-2); }
.cv-principles__no { font-family: var(--cv-font-display); font-style: italic; font-size: var(--cv-text-h3); color: var(--cv-stage-text, var(--cv-stage, var(--cv-violet))); font-variant-numeric: tabular-nums; }
.cv-principles h3 { font-family: var(--cv-font-display); font-optical-sizing: auto; font-size: clamp(1.375rem, 1.9vw, 1.625rem); font-weight: var(--cv-weight-medium); line-height: 1.2; letter-spacing: -0.01em; color: var(--cv-ink); }
.cv-principles p { font-size: var(--cv-text-m); color: var(--cv-ink-2); max-width: 36rem; }

/* The offices map beside the four addresses */
.cv-reach--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cv-reach--wide .cv-reach__offices { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border-top: 0; }
.cv-reach--wide .cv-reach__offices li, .cv-reach--wide .cv-reach__offices li:nth-child(odd) { gap: 4px; padding: var(--cv-space-4) 0; border-left: 0; border-top: 1px solid var(--cv-line-2); }
.cv-reach--wide .cv-reach__offices li:last-child { border-bottom: 1px solid var(--cv-line-2); }
.cv-reach--wide .cv-reach__offices strong { font-size: var(--cv-text-s); }
.cv-reach--wide .cv-reach__offices span { font-size: var(--cv-text-xs); color: var(--cv-ink-2); }
.cv-reach__entity { font-weight: var(--cv-weight-semibold); }
.cv-reach__offices a { color: var(--cv-ink); font-weight: var(--cv-weight-semibold); text-decoration: underline; text-decoration-color: var(--cv-line-2); text-underline-offset: 4px; }
.cv-reach__offices a:hover { color: var(--cv-violet); }

/* Portraits arrive like a curtain lifting: the photograph uncovers from the bottom once, as it scrolls in */
.cv-motion .cv-portrait.cv-reveal img, .cv-motion .cv-reveal .cv-portrait img { transition: clip-path 1.1s var(--cv-ease) .1s, transform var(--cv-dur) var(--cv-ease), box-shadow var(--cv-dur) var(--cv-ease); }
.cv-motion .cv-portrait.cv-reveal:not(.is-in) img, .cv-motion .cv-reveal:not(.is-in) .cv-portrait img { clip-path: inset(100% 0 0 0 round var(--cv-radius-l)); }
.cv-motion .cv-chapter.cv-reveal:not(.is-in)::after { transform: scaleX(0); }

@media (max-width: 1080px) {
  .cv-leader { grid-template-columns: minmax(0, 1fr); }
  .cv-leader .cv-portrait { max-width: 360px; }
  .cv-board { grid-template-columns: minmax(0, 1fr); }
  .cv-reach--wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .cv-advisors { grid-template-columns: minmax(0, 1fr); }
  .cv-principles > li { grid-template-columns: 3rem minmax(0, 1fr); row-gap: var(--cv-space-2); }
  .cv-principles p { grid-column: 2; }
}
@media (max-width: 680px) {
  .cv-member { grid-template-columns: minmax(0, 1fr); }
  .cv-member .cv-portrait { max-width: 260px; }
  .cv-leader .cv-portrait { max-width: 300px; }
  .cv-portrait::before { inset: 18px -12px -18px 18px; }
  .cv-reach .cv-stack::before { inset: 20px -10px -20px 20px; }
  .cv-reach__panel { padding: 14px; }
  .cv-advisor { flex-direction: column; gap: var(--cv-space-4); }
  .cv-portrait--round { width: 80px; }
  .cv-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .cv-portrait:hover img { transform: none; } }

/* --------------------------------------------------------------------------
   7. Trust and evidence
   -------------------------------------------------------------------------- */
.cv-glance { display: grid; border: 1px solid var(--cv-line); border-top: 3px solid var(--cv-ink); border-radius: var(--cv-radius-s); background: var(--cv-surface); }
.cv-glance > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--cv-space-4); padding: 14px var(--cv-space-5); border-bottom: 1px solid var(--cv-line); }
.cv-glance > div:last-child { border-bottom: 0; }
.cv-glance dt { font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-ink-3); padding-top: 2px; }
.cv-glance dd { font-size: var(--cv-text-s); color: var(--cv-ink); }
.cv-glance--row { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 0; border-top: 1px solid var(--cv-line-2); border-radius: 0; background: transparent; }
.cv-glance--row > div { grid-template-columns: 1fr; align-content: start; gap: 4px; padding: var(--cv-space-5) var(--cv-space-5) var(--cv-space-5) 0; border-bottom: 1px solid var(--cv-line); }
.cv-glance--row > div:nth-last-child(-n+3) { border-bottom: 0; }
.cv-glance--row dt { padding-top: 0; }

/* leadership and team */
.cv-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--cv-space-5); }
.cv-person { display: grid; row-gap: 2px; align-content: start; padding-top: var(--cv-space-4); border-top: 2px solid var(--cv-ink); }
.cv-person__name { font-size: var(--cv-text-h3); font-weight: var(--cv-weight-semibold); color: var(--cv-ink); line-height: 1.25; letter-spacing: -0.008em; }
.cv-person__role { font-size: var(--cv-text-s); font-weight: var(--cv-weight-medium); color: var(--cv-violet); }
.cv-person__bio { font-size: var(--cv-text-s); color: var(--cv-ink-2); margin-top: var(--cv-space-2); }
/* initials until real photographs are supplied */
.cv-avatar { grid-row: 1 / span 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(var(--cv-violet-soft), var(--cv-violet-soft)) padding-box, var(--cv-signal) border-box; font-size: var(--cv-text-s); font-weight: var(--cv-weight-bold); color: var(--cv-ink); letter-spacing: .02em; }

/* numbered steps where order is real */
.cv-steps { display: grid; gap: 0; counter-reset: cv-step; }
.cv-steps > li { position: relative; display: grid; align-content: start; gap: var(--cv-space-1); padding: var(--cv-space-5) 0 var(--cv-space-5) 64px; border-top: 1px solid var(--cv-line); counter-increment: cv-step; }
.cv-steps > li:last-child { border-bottom: 1px solid var(--cv-line); }
.cv-steps > li::before { content: counter(cv-step, decimal-leading-zero); position: absolute; left: 0; top: calc(var(--cv-space-5) + 2px); font-family: var(--cv-font-mono); font-size: var(--cv-text-s); color: var(--cv-stage-text, var(--cv-stage, var(--cv-violet))); }
.cv-steps strong { font-size: var(--cv-text-m); font-weight: var(--cv-weight-semibold); color: var(--cv-ink); }
.cv-steps p { font-size: var(--cv-text-s); color: var(--cv-ink-2); max-width: var(--cv-measure); }
/* the same steps as a horizontal timeline; the line draws in once when revealed */
.cv-steps--row { position: relative; grid-template-columns: repeat(var(--cv-cols, 4), minmax(0, 1fr)); gap: var(--cv-space-6); }
.cv-steps--row::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 2px; border-radius: 2px; background: var(--cv-signal); transform-origin: left; transition: transform 1.2s var(--cv-ease) .15s; }
.cv-steps--row > li, .cv-steps--row > li:last-child { padding: 56px 0 0; border: 0; gap: var(--cv-space-2); }
.cv-steps--row > li::before { top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cv-surface); border: 2px solid var(--cv-stage, var(--cv-violet)); font-size: var(--cv-text-xs); font-weight: var(--cv-weight-medium); }

.cv-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--cv-space-5); border-top: 1px solid var(--cv-line); padding-top: var(--cv-space-5); }
.cv-stat { display: grid; gap: 2px; }
.cv-stat__value { font-size: var(--cv-text-h3); font-weight: var(--cv-weight-semibold); font-variant-numeric: tabular-nums; color: var(--cv-ink); }
.cv-stat__label { font-size: var(--cv-text-s); color: var(--cv-ink-2); }
.cv-stat__source { font-size: var(--cv-text-xs); color: var(--cv-ink-3); }

.cv-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--cv-line); border-radius: var(--cv-radius-m); background: var(--cv-surface); }
.cv-table { width: 100%; border-collapse: collapse; font-size: var(--cv-text-s); }
.cv-table caption { text-align: left; padding: var(--cv-space-3) var(--cv-space-4); font-weight: var(--cv-weight-semibold); }
.cv-table th { text-align: left; font-weight: var(--cv-weight-semibold); color: var(--cv-ink); font-size: var(--cv-text-xs); background: var(--cv-surface-2); }
.cv-table th, .cv-table td { padding: 14px var(--cv-space-5); border-bottom: 1px solid var(--cv-line); vertical-align: top; }
.cv-table td { color: var(--cv-ink-2); }
.cv-table tbody tr { transition: background-color var(--cv-dur-fast) var(--cv-ease); }
.cv-table tbody tr:hover { background: #FBFAFF; }
.cv-table tr:last-child td { border-bottom: 0; }
.cv-table td.cv-num, .cv-table th.cv-num { text-align: right; }
.cv-table--compare td:first-child, .cv-table td.cv-strong { font-weight: var(--cv-weight-semibold); color: var(--cv-ink); }

.cv-quote { display: grid; gap: var(--cv-space-4); align-content: start; }
/* quotes keep their own quotation marks; no decorative glyph */
.cv-quote blockquote { font-size: var(--cv-text-l); line-height: 1.55; color: var(--cv-ink); }
.cv-quote figcaption { font-size: var(--cv-text-s); color: var(--cv-ink-2); padding-top: var(--cv-space-3); border-top: 1px solid var(--cv-line); }
.cv-quote figcaption strong { color: var(--cv-ink); font-weight: var(--cv-weight-semibold); }
.cv-quote--lead { padding-left: var(--cv-space-6); border-left: 3px solid transparent; border-image: linear-gradient(180deg, #2952F2, #8A2BE2 50%, #D61C9C) 1; }
.cv-quote--lead blockquote { font-family: var(--cv-font-display); font-optical-sizing: auto; font-size: clamp(1.375rem, 2.3vw, 1.875rem); line-height: 1.32; font-weight: var(--cv-weight-regular); letter-spacing: -0.01em; }

.cv-logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); border-top: 1px solid var(--cv-line); border-left: 1px solid var(--cv-line); }
.cv-logo-grid li { display: flex; align-items: center; justify-content: center; min-height: 80px; padding: var(--cv-space-4); border-right: 1px solid var(--cv-line); border-bottom: 1px solid var(--cv-line); text-align: center; font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-ink-2); }
.cv-logo-grid img { max-height: 32px; width: auto; filter: grayscale(1); opacity: .85; }

.cv-list-check { display: grid; gap: var(--cv-space-3); }
.cv-list-check li { position: relative; padding-left: 34px; color: var(--cv-ink-2); }
.cv-list-check li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--cv-stage-soft, var(--cv-violet-soft)); }
.cv-list-check li::after { content: ""; position: absolute; left: 7px; top: calc(.2em + 6px); width: 9px; height: 5px; border-left: 2px solid var(--cv-stage, var(--cv-violet)); border-bottom: 2px solid var(--cv-stage, var(--cv-violet)); transform: rotate(-45deg); }
.cv-list-check strong { color: var(--cv-ink); font-weight: var(--cv-weight-semibold); }
/* a centred spec strip under a hero visual: up to four label/value pairs, divided by hairlines */
.cv-specs { display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--cv-space-4); }
.cv-specs > div { display: grid; gap: 3px; padding-inline: clamp(16px, 2.4vw, 36px); text-align: center; border-left: 1px solid var(--cv-line-2); }
.cv-specs > div:first-child { border-left: 0; }
.cv-specs dt { font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-violet); }
.cv-specs dd { font-size: var(--cv-text-s); font-weight: var(--cv-weight-medium); color: var(--cv-ink); white-space: nowrap; }
/* one-line facts beside a hero */
.cv-list-check--compact { gap: 14px; }
.cv-list-check--compact li { font-size: var(--cv-text-s); line-height: 1.45; padding-top: 1px; }
.cv-list-check--compact li::before { top: 0; }
.cv-list-check--compact li::after { top: 6px; }

.cv-def { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border-top: 1px solid var(--cv-line); }
.cv-def dt, .cv-def dd { padding: 12px 0; border-bottom: 1px solid var(--cv-line); }
.cv-def dt { color: var(--cv-ink-3); font-size: var(--cv-text-s); font-weight: var(--cv-weight-medium); padding-right: var(--cv-space-4); }
.cv-def dd { color: var(--cv-ink); font-size: var(--cv-text-s); }

.cv-callout { border-left: 3px solid var(--cv-stage, var(--cv-blue)); background: var(--cv-surface-2); padding: var(--cv-space-4) var(--cv-space-5); color: var(--cv-ink-2); font-size: var(--cv-text-s); border-radius: 0 var(--cv-radius-s) var(--cv-radius-s) 0; }
.cv-callout strong { color: var(--cv-ink); }

/* capabilities as the A3 print sets them: hairline rows, a small stage-coloured index, the module name as the link */
.cv-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cv-space-7); }
.cv-module { display: grid; gap: var(--cv-space-2); align-content: start; padding-block: var(--cv-space-5); border-top: 1px solid var(--cv-line-2); }
.cv-module__index { font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-stage-text, var(--cv-stage, var(--cv-violet))); font-variant-numeric: tabular-nums; }
.cv-module__link { color: var(--cv-ink); text-decoration: none; }
.cv-module__link svg { display: inline-block; width: 16px; height: 16px; margin-left: 6px; vertical-align: -2px; color: var(--cv-stage, var(--cv-violet)); transition: transform var(--cv-dur) var(--cv-ease); }
.cv-module__link:hover { color: var(--cv-violet); }
.cv-module__link:hover svg { transform: translateX(3px); }
.cv-module__text { font-size: var(--cv-text-s); color: var(--cv-ink-2); max-width: 34rem; }
/* capabilities: a white panel per module, stage rule on top, lifts on hover */
.cv-features { display: grid; grid-template-columns: repeat(var(--cv-cols, 3), minmax(0, 1fr)); gap: var(--cv-space-5); }
.cv-feature { position: relative; display: grid; align-content: start; gap: var(--cv-space-3); padding: var(--cv-space-6) var(--cv-space-6) var(--cv-space-5); border: 1px solid var(--cv-line); border-radius: var(--cv-radius-l); background: var(--cv-surface); transition: transform var(--cv-dur) var(--cv-ease), box-shadow var(--cv-dur) var(--cv-ease), border-color var(--cv-dur) var(--cv-ease); }
.cv-feature::before { content: ""; position: absolute; left: var(--cv-space-6); top: -1px; width: 40px; height: 3px; border-radius: 0 0 3px 3px; background: var(--cv-stage, var(--cv-violet)); transition: width var(--cv-dur) var(--cv-ease); }
.cv-feature:hover { transform: translateY(-3px); border-color: var(--cv-line-2); box-shadow: var(--cv-shadow-lift); }
.cv-feature:hover::before { width: 72px; }
.cv-feature p { font-size: var(--cv-text-s); color: var(--cv-ink-2); }
.cv-feature .cv-link { margin-top: auto; padding-top: var(--cv-space-2); font-size: var(--cv-text-s); }

/* --------------------------------------------------------------------------
   8. Product: screens, statuses, the case flow
   -------------------------------------------------------------------------- */
.cv-screen { border: 1px solid var(--cv-line-2); border-radius: var(--cv-radius-l); background: var(--cv-surface); box-shadow: var(--cv-shadow-screen); overflow: hidden; font-size: var(--cv-text-s); }
.cv-screen__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--cv-space-3); padding: 12px var(--cv-space-5); border-bottom: 1px solid var(--cv-line); background: var(--cv-surface-2); font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-ink-2); }
.cv-screen__body { padding: var(--cv-space-5); }
.cv-screen__caption { margin-top: var(--cv-space-3); font-size: var(--cv-text-xs); color: var(--cv-ink-3); }

.cv-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); white-space: nowrap; color: var(--cv-ink-2); transition: color var(--cv-dur) var(--cv-ease); }
.cv-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cv-status--ok { color: var(--cv-ok); } .cv-status--warn { color: var(--cv-warn); }
.cv-status--err { color: var(--cv-err); } .cv-status--info { color: var(--cv-blue); }
.cv-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 4px; background: var(--cv-surface-3); color: var(--cv-ink-2); font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); white-space: nowrap; }

/* The case flow: sources → OnePV → regulators. An elevated white panel; clinevo-flow.js draws
   the connectors and moves sample cases through it. */
.cv-flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(48px, 7vw, 104px); row-gap: var(--cv-space-5); align-items: center; padding: clamp(20px, 3vw, 36px); border-radius: var(--cv-radius-xl); border: 1.5px solid transparent; background: linear-gradient(var(--cv-surface), var(--cv-surface)) padding-box, linear-gradient(120deg, rgba(41, 82, 242, .45), rgba(138, 43, 226, .2) 45%, rgba(214, 28, 156, .45)) border-box; box-shadow: var(--cv-shadow-stage); }
.cv-flow__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.cv-flow__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--cv-space-2) var(--cv-space-5); padding-bottom: var(--cv-space-4); border-bottom: 1px solid var(--cv-line); }
.cv-flow__title { font-size: var(--cv-text-h3); font-weight: var(--cv-weight-bold); color: var(--cv-ink); letter-spacing: -0.012em; }
.cv-flow__col { position: relative; z-index: 1; display: grid; gap: var(--cv-space-3); }
.cv-flow__heading { font-size: var(--cv-text-xs); font-weight: var(--cv-weight-semibold); color: var(--cv-ink-3); margin-bottom: var(--cv-space-1); }
.cv-flow__node { display: grid; gap: 2px; padding: 11px 14px; border: 1px solid var(--cv-line); border-radius: var(--cv-radius-m); background: var(--cv-surface); transition: border-color var(--cv-dur) var(--cv-ease), background-color var(--cv-dur) var(--cv-ease), box-shadow var(--cv-dur) var(--cv-ease); }
.cv-flow__node:has(> .cv-icon) { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--cv-space-3); align-items: center; }
.cv-flow__node:has(> .cv-flow__ack) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--cv-space-3); align-items: center; }
.cv-flow__text { display: grid; gap: 1px; min-width: 0; }
.cv-flow__node strong { font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-ink); line-height: 1.3; }
.cv-flow__node > span:not(.cv-flow__text):not(.cv-flow__ack), .cv-flow__text > span { font-size: var(--cv-text-xs); color: var(--cv-ink-3); line-height: 1.4; }
.cv-flow__node.is-active { border-color: var(--cv-stage, var(--cv-blue)); background: var(--cv-stage-soft, var(--cv-blue-soft)); box-shadow: 0 8px 20px -14px rgba(52, 40, 170, .45); }
.cv-flow__ack { font-family: var(--cv-font-mono); font-size: var(--cv-text-xs); font-weight: var(--cv-weight-medium); line-height: 1; padding: 5px 7px; border-radius: 4px; color: var(--cv-ok); background: var(--cv-ok-soft); opacity: 0; transform: translateX(-4px); transition: opacity var(--cv-dur) var(--cv-ease), transform var(--cv-dur) var(--cv-ease); }
.cv-flow__node.is-acked .cv-flow__ack { opacity: 1; transform: none; }
.cv-flow__core { position: relative; z-index: 1; display: grid; gap: var(--cv-space-4); padding: var(--cv-space-5); border-radius: var(--cv-radius-l); border: 1px solid var(--cv-line-2); background: var(--cv-surface); box-shadow: var(--cv-shadow-screen); }
.cv-flow__core { transition: border-color var(--cv-dur) var(--cv-ease), box-shadow var(--cv-dur) var(--cv-ease); }
.cv-flow__core.is-active { border-color: var(--cv-violet); box-shadow: 0 1px 2px rgba(11, 14, 92, .05), 0 24px 48px -22px rgba(138, 43, 226, .45); }
.cv-flow__core::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--cv-radius-l) var(--cv-radius-l) 0 0; background: var(--cv-signal); }
.cv-flow__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--cv-space-3); }
.cv-flow__brand .cv-wordmark { font-size: 1.625rem; line-height: 1; }
.cv-flow__product { display: flex; align-items: center; gap: var(--cv-space-3); }
.cv-flow__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cv-flow__steps li { position: relative; display: grid; gap: 7px; font-size: var(--cv-text-xs); color: var(--cv-ink-3); text-align: center; line-height: 1.3; transition: color var(--cv-dur) var(--cv-ease); }
.cv-flow__steps li::before { content: ""; height: 4px; border-radius: 4px; background: var(--cv-surface-3); }
.cv-flow__steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px; background: var(--cv-violet); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--cv-ease); }
.cv-flow__steps li.is-done { color: var(--cv-ink); }
.cv-flow__steps li.is-done::after { transform: scaleX(1); }
.cv-flow__ticker { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cv-space-2); padding: 10px 12px; border-radius: var(--cv-radius-m); background: var(--cv-surface-2); }
.cv-flow__modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--cv-space-3); border-top: 1px solid var(--cv-line); font-size: var(--cv-text-xs); font-weight: var(--cv-weight-medium); color: var(--cv-ink-2); }
.cv-flow__modules span { display: flex; align-items: center; gap: 8px; }
.cv-flow__modules span + span { padding-left: var(--cv-space-3); border-left: 1px solid var(--cv-line); }
.cv-flow__modules span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--cv-blue); }
.cv-flow__modules span + span::before { background: var(--cv-magenta); }
.cv-flow__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cv-space-3) var(--cv-space-6); padding-top: var(--cv-space-4); border-top: 1px solid var(--cv-line); font-size: var(--cv-text-s); color: var(--cv-ink-2); }
.cv-flow__foot strong { color: var(--cv-ink); }
.cv-flow__domain { display: inline-flex; align-items: center; gap: var(--cv-space-2); font-weight: var(--cv-weight-medium); color: var(--cv-ink); }
/* stacked flow for a narrow column: sources, OnePV, regulators, top to bottom */
.cv-flow--stack { grid-template-columns: minmax(0, 1fr); row-gap: 44px; padding: var(--cv-space-5); }
.cv-flow--stack .cv-flow__col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cv-space-2); }
.cv-flow--stack .cv-flow__heading { grid-column: 1 / -1; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. Interaction
   -------------------------------------------------------------------------- */
.cv-tabs { display: flex; flex-wrap: wrap; gap: var(--cv-space-1); border-bottom: 1px solid var(--cv-line); }
.cv-tab { appearance: none; border: 0; background: none; padding: 12px 2px; margin-right: var(--cv-space-6); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-ink-3); transition: color var(--cv-dur-fast) var(--cv-ease), border-color var(--cv-dur) var(--cv-ease); }
.cv-tab:hover { color: var(--cv-ink); }
.cv-tab[aria-selected="true"] { color: var(--cv-ink); border-bottom-color: var(--cv-stage, var(--cv-violet)); }
.cv-tabpanel { padding-top: var(--cv-space-6); }

.cv-field { display: grid; gap: var(--cv-space-2); }
.cv-field label, .cv-field legend { font-size: var(--cv-text-s); font-weight: var(--cv-weight-semibold); color: var(--cv-ink); }
.cv-hint { font-size: var(--cv-text-xs); color: var(--cv-ink-3); }
.cv-input, .cv-select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--cv-line-2); border-radius: var(--cv-radius-m); background: var(--cv-surface); font: inherit; font-size: var(--cv-text-m); color: var(--cv-ink); transition: border-color var(--cv-dur-fast) var(--cv-ease), box-shadow var(--cv-dur-fast) var(--cv-ease); }
.cv-input:focus, .cv-select:focus { outline: none; border-color: var(--cv-blue); box-shadow: 0 0 0 3px var(--cv-blue-soft); }
.cv-range { width: 100%; accent-color: var(--cv-violet); }
.cv-choice { display: flex; gap: var(--cv-space-2); align-items: flex-start; font-size: var(--cv-text-s); color: var(--cv-ink-2); }
.cv-choice input { margin-top: 4px; accent-color: var(--cv-violet); }
.cv-output { display: grid; gap: var(--cv-space-1); padding: var(--cv-space-5); border: 1px solid var(--cv-line); border-radius: var(--cv-radius-l); background: var(--cv-surface-2); }
.cv-output__value { font-size: var(--cv-text-h2); font-weight: var(--cv-weight-semibold); font-variant-numeric: tabular-nums; line-height: 1.1; }

/* --------------------------------------------------------------------------
   10. Visualisation
   -------------------------------------------------------------------------- */
.cv-bars { display: grid; gap: var(--cv-space-3); }
.cv-bar { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: var(--cv-space-3); align-items: center; font-size: var(--cv-text-s); }
.cv-bar__track { height: 10px; border-radius: 5px; background: var(--cv-surface-3); overflow: hidden; }
.cv-bar__fill { display: block; height: 100%; width: var(--cv-value, 0%); border-radius: 5px; background: var(--cv-stage, var(--cv-violet)); }
.cv-bar__value { font-variant-numeric: tabular-nums; font-weight: var(--cv-weight-semibold); }
.cv-chart { width: 100%; height: auto; display: block; overflow: visible; }
.cv-chart text { font-family: var(--cv-font-mono); font-size: 12px; fill: var(--cv-ink-3); }
.cv-chart .cv-chart__grid { stroke: var(--cv-line); stroke-width: 1; }
.cv-chart .cv-chart__threshold { stroke: var(--cv-magenta); stroke-width: 1.25; stroke-dasharray: 4 4; }
.cv-chart .cv-series-1 { stroke: var(--cv-blue); fill: none; stroke-width: 2; }
.cv-chart .cv-series-2 { stroke: var(--cv-violet); fill: none; stroke-width: 2; }
.cv-chart .cv-series-3 { stroke: var(--cv-magenta); fill: none; stroke-width: 2; }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) { .cv-mobile-nav.is-open { display: none; } }
@media (max-width: 1080px) {
  .cv-nav, .cv-header__contact, .cv-header__actions .cv-btn--secondary { display: none; }
  .cv-header__menu { display: inline-flex; margin-left: var(--cv-space-3); }
  .cv-header__actions { margin-left: auto; }
  .cv-span-3, .cv-span-4 { grid-column: span 6; }
  .cv-span-5, .cv-span-6, .cv-span-7, .cv-span-8 { grid-column: 1 / -1; }
  .cv-flow { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .cv-flow .cv-flow__col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cv-space-2); }
  .cv-flow .cv-flow__heading { grid-column: 1 / -1; margin-bottom: 0; }
  .cv-flow__head, .cv-flow__foot { row-gap: var(--cv-space-3); }
  .cv-features { --cv-cols: 2; }
  .cv-trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--cv-space-6); }
  .cv-trust__list > .cv-trust__item { max-width: none; }
  .cv-trust__item:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
  .cv-modules { column-gap: var(--cv-space-6); }
  .cv-stack::before { inset: 28px -12px -28px 28px; }
  .cv-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cv-space-5) 0; }
  .cv-specs > div { border-left: 0; padding-inline: var(--cv-space-2); }
  .cv-specs dd { white-space: normal; }
  .cv-steps--row { --cv-cols: 2; row-gap: var(--cv-space-7); }
  .cv-steps--row::before { display: none; }
  .cv-footer__grid, .cv-footer__offices { grid-template-columns: 1fr 1fr; }
  .cv-glance--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-glance--row > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--cv-line); }
  .cv-glance--row > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 680px) {
  .cv-glance--row { grid-template-columns: 1fr; }
  .cv-glance--row > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--cv-line); }
  .cv-glance--row > div:last-child { border-bottom: 0; }
  .cv-flow .cv-flow__col, .cv-flow--stack .cv-flow__col { grid-template-columns: 1fr; }
  .cv-flow__modules { grid-template-columns: 1fr; gap: var(--cv-space-2); }
  .cv-flow__modules span + span { padding-left: 0; border-left: 0; }
  .cv-span-3, .cv-span-4 { grid-column: 1 / -1; }
  .cv-header__actions .cv-btn--primary { display: none; }
  .cv-features { --cv-cols: 1; }
  .cv-steps--row { --cv-cols: 1; }
  .cv-glance > div { grid-template-columns: 1fr; gap: 2px; }
  .cv-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .cv-bar__track { grid-column: 1 / -1; grid-row: 2; }
  .cv-def { grid-template-columns: 1fr; }
  .cv-def dt { padding-bottom: 0; border-bottom: 0; }
  .cv-steps:not(.cv-steps--row) > li { padding-left: 48px; }
  :root { --cv-section-pad: 48px; }
  .cv-header__bar { min-height: 60px; }
  .cv-logo { min-height: 44px; }
  .cv-footer__offices { grid-template-columns: 1fr; }
  .cv-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cv-space-4); }
  .cv-footer__grid > :nth-child(-n + 2) { grid-column: 1 / -1; }
  .cv-footer ul { gap: 0; }
  .cv-footer ul a, .cv-footer__legal a, .cv-footer__offices a, .cv-footer p a { display: inline-flex; align-items: center; min-height: 44px; }
  .cv-flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--cv-space-3); }
  .cv-logos { justify-content: flex-start; }
  .cv-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-trust__item, .cv-trust__item:nth-child(4n + 1) { border-left: 1px solid var(--cv-line); padding-left: var(--cv-space-4); }
  .cv-trust__item:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  /* certifications on phones: the icon beside the name, so the band reads in half the height (CORRECTIONS #49) */
  .cv-trust { padding-block: 28px; }
  .cv-trust__title { margin-bottom: var(--cv-space-4); }
  .cv-trust__list { row-gap: var(--cv-space-5); }
  .cv-trust__item { grid-template-columns: 22px minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 2px; padding-block: 0; }
  .cv-trust__item .cv-icon { width: 22px; height: 22px; margin: 0; }
  .cv-trust__kind, .cv-trust__note { grid-column: 1 / -1; }
  .cv-logos--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cv-space-6) var(--cv-space-4); }
  .cv-logos--grid img { height: calc(var(--h, 36px) * .8); }
  .cv-modules { grid-template-columns: minmax(0, 1fr); }
  .cv-table .cv-status { white-space: normal; }
  .cv-screen__bar { flex-wrap: wrap; }
  .cv-quote--lead { padding-left: var(--cv-space-4); }
  .cv-marquee { flex-wrap: wrap; gap: var(--cv-space-4); }
  .cv-marquee__label { flex: 1; }
  .cv-marquee__rows { order: 3; flex-basis: 100%; }
  /* on phones "Watch with sound" moves under the film, never over it, and keeps its label (CORRECTIONS #49);
     the film's corners are clipped on the video itself so the pill can sit outside the box */
  .cv-film { overflow: visible; }
  .cv-film__video { border-radius: inherit; }
  .cv-film::after { display: none; }
  .cv-film .cv-film__play { top: calc(100% + 8px); bottom: auto; left: 0; min-height: 44px; padding: 5px 18px 5px 5px; gap: 10px; }
  .cv-film__play .cv-film__time { display: none; }
  .cv-film__pause { right: 10px; bottom: 10px; }
  .cv-stack::before { inset: 20px -10px -20px 20px; }
  .cv-logos img { height: 32px; }
}

/* --------------------------------------------------------------------------
   12. Motion
   Allowed: one-shot reveals as content enters the viewport, hover and focus
   feedback, the moving case flow (clinevo-flow.js), the steps line drawing in.
   Every transition here is ≤ 800 ms, eased, and moves at most 16 px.
   No CSS keyframe animation except the two owner-approved loops below (the client marquee and the
   hero ambient), each switched on by clinevo-motion.js, so nothing can loop by accident.
   .cv-motion is added to <html> by the head snippet in design.md §4 and
   removed again if clinevo-motion.js fails to load, so content never stays hidden.
   -------------------------------------------------------------------------- */
.cv-page *, .cv-page *::before, .cv-page *::after { animation: none !important; }
/* the single exception: the client marquee (owner request, CORRECTIONS #31), only once clinevo-motion.js has measured it */
.cv-page .cv-marquee.is-ready .cv-marquee__track { animation: cv-marquee var(--cv-marquee-dur, 40s) linear infinite !important; }
.cv-page .cv-marquee.is-ready .cv-marquee__track.cv-marquee__track--reverse { animation-direction: reverse !important; }
.cv-page .cv-marquee.is-ready:focus-within .cv-marquee__track, .cv-page .cv-marquee.is-ready.is-paused .cv-marquee__track, .cv-page .cv-marquee.is-ready.is-offscreen .cv-marquee__track { animation-play-state: paused !important; }
/* hover pauses the logos only where there is a mouse; on touch a tap pauses and resumes them (clinevo-motion.js) */
@media (hover: hover) and (pointer: fine) { .cv-page .cv-marquee.is-ready:hover .cv-marquee__track { animation-play-state: paused !important; } }
/* the second exception: the hero ambient (owner request, CORRECTIONS #47); negative delays start it mid-drift */
.cv-page [data-cv-ambient].is-live .cv-ambient__field--sky { animation: cv-drift-a 26s ease-in-out -7s infinite alternate !important; }
.cv-page [data-cv-ambient].is-live .cv-ambient__field--blush { animation: cv-drift-b 31s ease-in-out -16s infinite alternate !important; }
.cv-page [data-cv-ambient].is-live .cv-ambient__field--violet { animation: cv-drift-c 34s ease-in-out -21s infinite alternate !important; }
.cv-page [data-cv-ambient].is-live .cv-ambient__field--azure { animation: cv-drift-d 38s ease-in-out -9s infinite alternate !important; }
.cv-page [data-cv-ambient].is-live.is-offscreen *, .cv-page [data-cv-ambient].is-live.is-still * { animation-play-state: paused !important; } /* is-still: the device could not keep it smooth */
/* while a film in the hero plays with sound, the ground holds still */
.cv-page :has(.cv-film.is-sound) > [data-cv-ambient].is-live * { animation-play-state: paused !important; }
.cv-motion .cv-reveal:not(.is-done), .cv-motion [data-cv-stagger] > :not(.is-done) { opacity: 0; transform: translateY(16px); transition: opacity var(--cv-dur-reveal) var(--cv-ease), transform var(--cv-dur-reveal) var(--cv-ease); transition-delay: calc(var(--cv-i, 0) * var(--cv-stagger)); }
.cv-motion .cv-reveal.is-in:not(.is-done), .cv-motion [data-cv-stagger] > .is-in:not(.is-done) { opacity: 1; transform: none; }
.cv-motion [data-cv-stagger="fast"] > :not(.is-done) { transition-delay: calc(var(--cv-i, 0) * 45ms); }
.cv-motion .cv-steps--row:not(.is-in)::before { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .cv-page *, .cv-page *::before, .cv-page *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .cv-motion .cv-reveal:not(.is-done), .cv-motion [data-cv-stagger] > :not(.is-done) { opacity: 1; transform: none; }
  .cv-motion .cv-steps--row:not(.is-in)::before { transform: none; }
  .cv-btn:hover, .cv-feature:hover, .cv-logos li:hover img { transform: none; }
  .cv-page .cv-marquee.is-ready .cv-marquee__track { animation: none !important; }
  .cv-page [data-cv-ambient] * { animation: none !important; }
  .cv-marquee__track { flex-wrap: wrap; width: auto; row-gap: var(--cv-space-4); }
  .cv-marquee__track [aria-hidden="true"] { display: none; }
  .cv-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
  .cv-marquee__toggle { display: none; }
}

/* --------------------------------------------------------------------------
   13. Print
   -------------------------------------------------------------------------- */
@media print {
  .cv-header, .cv-header__menu, .cv-skip { display: none !important; }
  .cv-page { font-size: 11pt; }
  .cv-section { padding-block: 18pt; }
  .cv-reveal, [data-cv-stagger] > * { opacity: 1 !important; transform: none !important; }
  .cv-table-wrap, .cv-screen, .cv-flow, .cv-quote, .cv-glance, .cv-steps > li, .cv-feature { break-inside: avoid; }
  .cv-screen, .cv-flow, .cv-flow__core, .cv-feature { box-shadow: none; }
  .cv-wash, .cv-panel--wash { background: #fff; }
  .cv-panel--brand { background: #fff; color: var(--cv-ink); border: 1px solid var(--cv-line-2); }
  .cv-panel--brand :where(.cv-h1, .cv-h2, .cv-h3, p) { color: var(--cv-ink); }
  .cv-logos img { filter: invert(1); }
}