/* CollabMart polish layer (October 2026).
   Loaded last on parent pages. Refines the warm cohesion theme, replaces the
   native preference selects with segmented controls, gives the hero film an
   overlaid player, and defines a deliberate dark theme. Content, routes and
   product identities are unchanged. */

:root {
  --ink: #13293d;
  --ink-2: #1c3a52;
  --paper: #f6f4ef;
  --white: #fffdf9;
  --cm-surface: #fffdf9;
  --cm-raised: #ffffff;
  --cm-mist: #e6eef1;
  --cm-sage: #e8efe9;
  --cm-footer: #e3ebee;
  --muted: #4a5d68;
  --muted-dark: #4a5d68;
  --line: #d9e1e3;
  --line-dark: #d9e1e3;
  --blue: #136c9d;
  --blue-deep: #0c5178;
  --green-deep: #21663a;
  --cm-navy: #0b1a2b;
  --cm-navy-2: #10263c;
  --cm-on-navy: #e9f0f5;
  --cm-on-navy-muted: #a9bccb;
  --cm-ring: rgba(19, 41, 61, .08);
  --cm-shadow-sm: 0 1px 2px rgba(19, 41, 61, .05), 0 4px 14px rgba(19, 41, 61, .05);
  --cm-shadow-md: 0 2px 6px rgba(19, 41, 61, .06), 0 18px 40px rgba(19, 41, 61, .10);
  --cm-shadow-lg: 0 30px 70px rgba(11, 26, 43, .28);
  --cm-seg-bg: rgba(19, 41, 61, .06);
  --cm-seg-on: #ffffff;
  --cm-ease: cubic-bezier(.2, .7, .2, 1);
  --radius: 18px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8eef3;
  --ink-2: #1d3449;
  --paper: #0a1622;
  --white: #0f1f2f;
  --cm-surface: #0f1f2f;
  --cm-raised: #142739;
  --cm-mist: #0e2030;
  --cm-sage: #0d1f2a;
  --cm-footer: #08121c;
  --muted: #a4b5c2;
  --muted-dark: #a4b5c2;
  --line: #213648;
  --line-dark: #213648;
  --blue: #1a6f9f;
  --blue-deep: #7cc4ec;
  --green-deep: #7fd6a0;
  --cm-navy: #07111b;
  --cm-navy-2: #0c1b2a;
  --cm-ring: rgba(255, 255, 255, .06);
  --cm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --cm-shadow-md: 0 2px 6px rgba(0, 0, 0, .25), 0 18px 40px rgba(0, 0, 0, .35);
  --cm-shadow-lg: 0 30px 70px rgba(0, 0, 0, .55);
  --cm-seg-bg: rgba(255, 255, 255, .06);
  --cm-seg-on: #22394f;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(46, 158, 221, .28); }
.cm-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Preference bar ---------- */
.cm-preferences {
  position: relative; z-index: 51;
  padding: 0; border-bottom: 0;
  background: var(--paper);
}
html[data-theme="dark"] .cm-preferences { background: #07111b; }
.cm-preferences[hidden] { display: none; }
.cm-preferences .cm-pref-inner {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end;
  gap: 8px 20px; min-height: 44px;
}
.cm-pref-controls { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.cm-preferences .cm-pref-notice {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 0;
  color: var(--muted); font-size: 12.5px; line-height: 1.45;
}
/* The scope notice matters once Pidgin is chosen; English readers hear it as the group description. */
html:not([data-language="pcm"]) .cm-pref-notice {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.cm-seg {
  display: inline-flex; align-items: center; gap: 0;
  margin: 0; padding: 0; border: 0; min-width: 0;
}
.cm-seg legend {
  float: left; margin: 0 8px 0 0; padding: 0;
  color: var(--muted); font-size: 12px; font-weight: 550; letter-spacing: .01em;
}
.cm-seg label {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 44px; padding: 0 10px;
  color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1;
  cursor: pointer; user-select: none;
  transition: color 160ms var(--cm-ease);
}
/* One continuous track behind the options, one raised pill for the choice. */
.cm-seg label::before {
  content: ""; position: absolute; z-index: -2; inset: 8px 0;
  background: var(--cm-seg-bg);
}
.cm-seg legend + label::before { border-radius: 999px 0 0 999px; }
.cm-seg label:last-child::before { border-radius: 0 999px 999px 0; }
.cm-seg label::after {
  content: ""; position: absolute; z-index: -1; inset: 10px 2px;
  border-radius: 999px; background: transparent;
  transition: background 160ms var(--cm-ease), box-shadow 160ms var(--cm-ease);
}
.cm-seg label:hover { color: var(--ink); }
.cm-seg label:has(input:checked) { color: var(--ink); }
.cm-seg label:has(input:checked)::after {
  background: var(--cm-seg-on);
  box-shadow: 0 1px 2px rgba(19, 41, 61, .14), 0 0 0 1px var(--cm-ring);
}
.cm-seg input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.cm-seg label:has(input:focus-visible)::after {
  outline: 2px solid var(--blue-deep); outline-offset: 1px;
}
.cm-seg svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.cm-seg-text label { padding: 0 12px; }

/* ---------- Header ---------- */
.site-header {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
html[data-theme="dark"] .site-header { background: color-mix(in srgb, #0a1622 84%, transparent); }
.site-header::before { height: 2px; }
.header-inner { min-height: 68px; }
.brand-name { font-weight: 720; letter-spacing: -.02em; }
.site-header .brand, html[data-theme="dark"] .site-header .brand { color: var(--ink); }
.nav { gap: 2px; }
.nav a {
  position: relative; padding: 8px 14px; border-radius: 999px;
  color: var(--muted); font-size: 14.5px; font-weight: 560; letter-spacing: 0;
  transition: color 150ms var(--cm-ease), background 150ms var(--cm-ease);
}
.nav a:hover { color: var(--ink); background: var(--cm-seg-bg); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: none; border-radius: 999px; background: transparent; }
.nav a[aria-current="page"]:not(.nav-cta)::after {
  content: ""; position: absolute; left: 50%; bottom: 3px;
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--thread);
}
.nav a.nav-cta {
  margin-left: 10px; padding: 8px 18px; border-radius: 999px;
  background: var(--blue); color: #fff;
  box-shadow: 0 1px 2px rgba(12, 81, 120, .25), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.nav a.nav-cta:hover, .nav a.nav-cta:focus-visible { background: var(--blue-deep); color: #fff; }
html[data-theme="dark"] .nav a.nav-cta:is(:hover, :focus-visible) { background: #145a82; }
.nav a.nav-cta[aria-current="page"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--blue); }
.menu-button { border-radius: 12px; border-color: var(--line); }
.menu-button span { background: var(--ink); border-radius: 2px; }

/* ---------- Buttons & links ---------- */
.button {
  min-height: 50px; padding: 12px 24px; border-radius: 999px;
  font-weight: 650; letter-spacing: -.005em;
  background: var(--blue); color: #fff;
  box-shadow: 0 1px 2px rgba(12, 81, 120, .2), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.button:hover { background: var(--blue-deep); color: #fff; box-shadow: 0 10px 26px rgba(19, 108, 157, .26); }
html[data-theme="dark"] .button:is(:hover, :focus-visible) { background: #145a82; }
.button-secondary,
.hero .button-secondary, .page-hero .button-secondary, .profile-hero .button-secondary, .section-cta .button-secondary,
html[data-theme="dark"] .button-secondary {
  color: var(--ink); background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  box-shadow: none;
}
.button-secondary:hover,
.hero .button-secondary:hover, .page-hero .button-secondary:hover, .section-cta .button-secondary:hover,
html[data-theme="dark"] .button-secondary:hover {
  color: var(--ink); background: var(--cm-seg-bg); border-color: color-mix(in srgb, var(--ink) 40%, transparent);
  box-shadow: none;
}
.text-link { color: var(--blue-deep); font-weight: 650; text-underline-offset: 5px; }
.text-link::after { transition: transform 160ms var(--cm-ease); }

/* ---------- Eyebrows & headings ---------- */
.eyebrow { font-size: 12.5px; font-weight: 650; letter-spacing: .12em; color: var(--muted); }
.eyebrow::before { width: 22px; height: 2px; border-radius: 2px; }
.section h2, .content-grid h2 { font-weight: 720; letter-spacing: -.028em; text-wrap: balance; }
.section-intro { font-size: 18.5px; line-height: 1.6; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Hero ---------- */
.hero, .page-hero, .profile-hero,
html[data-theme="dark"] :is(.hero, .page-hero, .profile-hero) {
  position: relative; isolation: isolate; color: var(--ink);
  background:
    radial-gradient(42% 60% at 86% 30%, color-mix(in srgb, #2e9edd 16%, transparent), transparent 70%),
    radial-gradient(36% 50% at 6% 90%, color-mix(in srgb, #1ac45b 11%, transparent), transparent 70%),
    linear-gradient(180deg, var(--cm-mist) 0%, var(--paper) 100%);
}
.hero::before {
  opacity: 1;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 80% at 70% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 80% at 70% 40%, #000 0%, transparent 75%);
}
.hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 64px; }
.hero h1 { font-weight: 760; letter-spacing: -.038em; line-height: 1.02; }
.hero .t-demand, .hero .t-supply { -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .t-demand { background-image: linear-gradient(100deg, #1b8fd0 0%, #0c5178 85%); }
.hero .t-supply { background-image: linear-gradient(100deg, #24a65a 0%, #1b6b3a 85%); }
html[data-theme="dark"] .hero .t-demand { background-image: linear-gradient(100deg, #9ad6f7 0%, #3ea6e2 85%); }
html[data-theme="dark"] .hero .t-supply { background-image: linear-gradient(100deg, #9cefb9 0%, #2fbf68 85%); }
.hero-lead { max-width: 600px; font-size: 20px; line-height: 1.55; color: var(--muted); }
.hero .button-row { margin-top: 36px; }

/* ---------- Hero film ---------- */
.hero-visual { justify-content: flex-end; }
.cm-hero-film { position: relative; width: min(300px, 100%); }
.cm-hero-film::before {
  content: ""; position: absolute; z-index: -1; inset: 8% -18% -6%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(46, 158, 221, .22), transparent 70%);
  filter: blur(10px); pointer-events: none;
}
.cm-hero-film-frame {
  position: relative; border-radius: 24px; overflow: hidden;
  background: #0a1626;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, var(--cm-shadow-lg);
  outline: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); outline-offset: 6px;
}
.cm-hero-film-frame::after {
  content: ""; position: absolute; inset: auto 0 0; height: 38%;
  background: linear-gradient(180deg, transparent, rgba(5, 12, 20, .62));
  pointer-events: none; opacity: .9; transition: opacity 240ms var(--cm-ease);
}
.cm-hero-film-progress {
  position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 12px; height: 3px;
  border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden;
}
.cm-hero-film-progress span {
  display: block; height: 100%; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, #1ac45b, #2e9edd);
  transition: transform 260ms linear;
}
html .hero .cm-hero-film-controls {
  position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 22px;
  display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;
  gap: 8px; margin: 0;
}
html .hero .cm-hero-film-controls button,
html .hero .cm-hero-film-controls a,
html[data-theme="dark"] .cm-hero-film-controls button {
  position: relative; isolation: isolate; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 14px 0 12px;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px;
  background: rgba(10, 22, 38, .46); color: #fff;
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  font: 600 13px/1 var(--font-sans); letter-spacing: .01em; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  cursor: pointer; transition: background 160ms var(--cm-ease), transform 160ms var(--cm-ease), border-color 160ms var(--cm-ease);
}
html .hero .cm-hero-film-controls button::before,
html .hero .cm-hero-film-controls a::before { content: none; }
html .hero .cm-hero-film-controls button:hover,
html .hero .cm-hero-film-controls a:hover { background: rgba(10, 22, 38, .66); border-color: rgba(255, 255, 255, .42); }
html .hero .cm-hero-film-controls button:active { transform: scale(.96); }
html .hero .cm-hero-film-controls button:focus-visible,
html .hero .cm-hero-film-controls a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(46, 158, 221, .6); }
html .hero .cm-hero-film-controls button:disabled { opacity: .55; cursor: default; }
/* Icons come from data-icon; the text label stays in the DOM for tests and assistive tech. */
html .hero .cm-hero-film-controls button[data-icon]::before {
  content: ""; position: static; inset: auto; z-index: auto; flex: none;
  width: 16px; height: 16px; border: 0; border-radius: 0; background: currentColor;
  -webkit-mask: var(--cm-icon) center / contain no-repeat; mask: var(--cm-icon) center / contain no-repeat;
}
.cm-hero-film-controls [data-icon="play"] { --cm-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M8 5.5v13a1 1 0 0 0 1.5.86l10.6-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z%22/%3E%3C/svg%3E"); }
.cm-hero-film-controls [data-icon="pause"] { --cm-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%226%22 y=%225%22 width=%224%22 height=%2214%22 rx=%221%22/%3E%3Crect x=%2214%22 y=%225%22 width=%224%22 height=%2214%22 rx=%221%22/%3E%3C/svg%3E"); }
.cm-hero-film-controls [data-icon="replay"] { --cm-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 12a8 8 0 1 0 2.4-5.7%22/%3E%3Cpath d=%22M4 4v4.5h4.5%22/%3E%3C/g%3E%3C/svg%3E"); }
.cm-hero-film-controls [data-icon="muted"] { --cm-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 9.5h3.5L12 5.5v13l-4.5-4H4z%22/%3E%3Cpath fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22m16 9.5 5 5m0-5-5 5%22/%3E%3C/svg%3E"); }
.cm-hero-film-controls [data-icon="sound"] { --cm-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 9.5h3.5L12 5.5v13l-4.5-4H4z%22/%3E%3Cpath fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M16 9a4.5 4.5 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11%22/%3E%3C/svg%3E"); }
/* Sound is an icon-only toggle; its accessible name stays on aria-label. */
html .hero .cm-hero-film-controls [data-film-sound] { width: 44px; padding: 0; font-size: 0; gap: 0; }
/* While playing, controls recede until the visitor reaches for them. */
@media (hover: hover) {
  .cm-hero-film.is-playing .cm-hero-film-controls { opacity: .4; transition: opacity 240ms var(--cm-ease); }
  .cm-hero-film.is-playing .cm-hero-film-frame::after { opacity: 0; }
  .cm-hero-film.is-playing:hover .cm-hero-film-controls,
  .cm-hero-film.is-playing:focus-within .cm-hero-film-controls { opacity: 1; }
  .cm-hero-film.is-playing:hover .cm-hero-film-frame::after,
  .cm-hero-film.is-playing:focus-within .cm-hero-film-frame::after { opacity: .9; }
}

/* ---------- Route cards and general cards ---------- */
.sector-grid { gap: 20px; }
.sector-grid .sector,
.audience-routes .sector,
.contact-option, .track-card, .metric, .brief-review {
  position: relative;
  padding: 30px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cm-surface); box-shadow: var(--cm-shadow-sm);
  transition: transform 220ms var(--cm-ease), box-shadow 220ms var(--cm-ease), border-color 220ms var(--cm-ease);
}
.sector-grid .sector:hover, .contact-option:hover {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
  box-shadow: var(--cm-shadow-md);
}
.sector-index,
html[data-theme="dark"] .sector-index {
  margin-bottom: 18px; color: var(--blue-deep);
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .12em;
}
.sector h3 { font-size: 22px; font-weight: 700; letter-spacing: -.018em; }
.sector p { line-height: 1.6; }
/* A link with its status reads as one line: "Explore Cadence → [Early access]". */
.service-routes .sector, .audience-routes .sector {
  display: grid; grid-template-columns: max-content 1fr; align-content: start; column-gap: 12px;
}
.service-routes .sector > *, .audience-routes .sector > * { grid-column: 1 / -1; }
.audience-routes .sector > .text-link:has(+ .status) { grid-column: 1; }
.audience-routes .sector > .text-link + .status { grid-column: 2; justify-self: start; align-self: center; margin: 12px 0 0; }
.service-routes .text-link, .audience-routes .text-link { min-height: 44px; margin-top: 10px; padding: 0; }
.audience-routes .sector > .text-link:first-of-type { margin-top: 20px; }
.audience-routes .sector > .status:not(.text-link + .status) { margin: 16px 0 0; }
.service-routes .sector > .status, .audience-routes .sector > .status { justify-self: start; }
.audience-routes .cm-product-endorsement {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
}
.cm-product-endorsement a { color: var(--muted); font-size: 12.5px; text-decoration: none; }
.cm-product-endorsement a:hover { color: var(--ink); }
#find-your-route > .shell > .text-link { margin-top: 28px; }

/* ---------- Status badges & chips ---------- */
.status,
html[data-theme="dark"] .status {
  gap: 7px; padding: 4px 11px 4px 9px; border: 1px solid color-mix(in srgb, #21663a 22%, transparent);
  border-radius: 999px; background: color-mix(in srgb, #1ac45b 11%, var(--cm-surface));
  color: var(--green-deep); font-size: 12px; font-weight: 650; letter-spacing: .01em;
}
.status::before { width: 7px; height: 7px; box-shadow: 0 0 0 3px color-mix(in srgb, #1ac45b 22%, transparent); }
.chip,
html[data-theme="dark"] .chip {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--cm-surface); color: var(--ink);
  font-family: var(--font-sans); font-size: 13px; font-weight: 550; letter-spacing: 0; text-transform: none;
}
.service-jump-links .chip { border-radius: 14px; color: var(--blue-deep); font-weight: 650; }
.footer-status,
html[data-theme="dark"] .footer-status {
  border-radius: 999px; padding: 1px 8px; border-color: color-mix(in srgb, var(--blue) 26%, transparent);
  background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue-deep);
}

/* ---------- Flow band ---------- */
.flow-mark img { filter: drop-shadow(0 12px 28px rgba(19, 41, 61, .16)); }
.flow-mark::before, .flow-mark::after { width: 56px; border-top-width: 2px; border-top-style: solid; opacity: .7; }
.flow-mark::before { border-image: linear-gradient(90deg, transparent, var(--blue)) 1; }
.flow-mark::after { border-image: linear-gradient(90deg, var(--green), transparent) 1; }
.flow-side h3 { font-family: var(--font-sans); font-size: 13px; letter-spacing: .14em; }

/* ---------- Venture cards ---------- */
.venture-list { gap: 28px; }
.venture,
html[data-theme="dark"] .venture {
  border: 1px solid var(--line); border-radius: 24px; padding-top: 0;
  background: var(--cm-surface); box-shadow: var(--cm-shadow-sm);
}
.venture::before { display: none; }
.venture-media,
.venture:nth-child(odd) .venture-media, .venture:nth-child(even) .venture-media {
  display: flex; align-items: center; justify-content: center;
  padding: 28px; border: 0; min-height: 320px;
  background:
    radial-gradient(70% 70% at 30% 20%, color-mix(in srgb, #2e9edd 14%, transparent), transparent 70%),
    radial-gradient(60% 60% at 80% 90%, color-mix(in srgb, #1ac45b 12%, transparent), transparent 70%),
    var(--cm-mist);
}
.venture-media img,
.venture-media img[src="/assets/cadence-product.svg"],
.venture-media img[src="/assets/solar-live.png"] {
  width: 100%; height: auto; max-height: 320px; object-fit: contain; object-position: center;
  border-radius: 12px; box-shadow: var(--cm-shadow-md); background: #fff;
}
.venture-copy { padding: 44px; }
.venture h2, .venture h3 { font-size: 30px; font-weight: 720; letter-spacing: -.025em; }
.venture .cm-product-endorsement { margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .venture:hover { transform: translateY(-3px); box-shadow: var(--cm-shadow-md); }
  .venture-media img { transition: transform 400ms var(--cm-ease); }
  .venture:hover .venture-media img { transform: scale(1.015); }
}

/* ---------- Capability rows ---------- */
.service { border-color: var(--line); }
.service h2 { font-weight: 720; letter-spacing: -.022em; }
html[data-theme="dark"] .service { background: transparent; }

/* ---------- "How we operate": the one navy band ---------- */
.section-dark,
html[data-theme="dark"] .section-dark {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--cm-on-navy);
  background:
    radial-gradient(50% 70% at 100% 0%, rgba(46, 158, 221, .16), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(26, 196, 91, .10), transparent 70%),
    var(--cm-navy);
}
.section-dark .section-intro, .section-dark .eyebrow, .section-dark .principle p { color: var(--cm-on-navy-muted); }
.section-dark h2, .section-dark .principle strong { color: #fff; }
.section-dark .text-link { color: #8fd0f3; }
.principle-grid { counter-reset: principle; gap: 0 64px; }
.principle, html[data-theme="dark"] .principle {
  position: relative; padding: 28px 0 28px 52px; border-top: 1px solid rgba(169, 188, 203, .18);
}
.principle::before {
  counter-increment: principle; content: "0" counter(principle);
  position: absolute; left: 0; top: 31px;
  color: #6cc1ee; font: 700 12.5px/1 var(--font-mono); letter-spacing: .1em;
}
.principle strong { font-size: 20px; font-weight: 680; letter-spacing: -.015em; }

/* ---------- CTA band: a card, not a strip ---------- */
.section-cta,
html[data-theme="dark"] .section-cta { padding: 24px 0 88px; background: var(--paper); color: var(--ink); border: 0; }
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 56px; border-radius: 28px; color: #fff;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(46, 158, 221, .55), transparent 60%),
    radial-gradient(50% 100% at 0% 100%, rgba(26, 196, 91, .32), transparent 60%),
    linear-gradient(135deg, #0c2a44 0%, #0b1a2b 100%);
  box-shadow: var(--cm-shadow-lg);
}
.cta-band::after {
  content: ""; position: absolute; z-index: -1; right: -40px; bottom: -60px; width: 280px; height: 280px;
  background: url("/assets/cm-mark-512.png") center / contain no-repeat; opacity: .07; pointer-events: none;
}
.cta-band h2 { color: #fff; font-size: clamp(28px, 3.2vw, 38px); }
.section-cta .cta-band .eyebrow, .section-cta .cta-band .section-intro, .cta-band p { color: #c3d4e1; }
.cta-band .button, .cta-band .button-light,
html[data-theme="dark"] .cta-band .button-light {
  background: #fff; color: #0b1a2b; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.cta-band .button:hover, .cta-band .button-light:hover { background: #e9f3fa; color: #0b1a2b; }
.cta-band .button-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }

/* ---------- Sections ---------- */
.section-white,
html[data-theme="dark"] .section-white {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cm-surface) 14%, var(--cm-surface) 86%, var(--paper) 100%);
}
html[data-theme="dark"] .section-white { background: linear-gradient(180deg, var(--paper), #0c1a28 14%, #0c1a28 86%, var(--paper)); }

/* ---------- Footer ---------- */
.site-footer,
html[data-theme="dark"] .site-footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--cm-footer) 0%, color-mix(in srgb, var(--cm-footer) 80%, var(--paper)) 100%);
}
html[data-theme="dark"] .site-footer { background: #07111b; }
.footer-main .brand { color: var(--ink); }
.footer-tagline { font-family: var(--font-sans); font-weight: 650; letter-spacing: .1em; font-size: 12px; }
.footer-column a { color: var(--ink); transition: color 140ms var(--cm-ease); }
.footer-column a:hover { color: var(--blue-deep); text-decoration: none; }
.footer-bottom { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; border-color: var(--line); }
html[data-theme="dark"] .footer-bottom { border-color: var(--line); }

/* ---------- Forms (contact brief) in both themes ---------- */
:is(input, textarea, select):not([type="radio"]):not([type="checkbox"]) { border-radius: 12px; }
html[data-theme="dark"] :is(input, textarea, select):not([type="radio"]):not([type="checkbox"]) {
  background: var(--cm-raised); color: var(--ink); border-color: #2c455b;
}
html[data-theme="dark"] option { background: #142739; color: #e8eef3; }

/* ---------- Dark-theme repairs for older light-only components ---------- */
html[data-theme="dark"] :is(.track-note, .brief-form, .faq, .faq-item) { background: var(--cm-surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .venture-media img { background: #0f1f2f; }
html[data-theme="dark"] .flow-mark img { filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .5)); }
html[data-theme="dark"] .skip-link { color: #13293d; background: #fffdf9; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* The bar above the header moves it down; anchor the panel to the header, not the viewport. */
  .nav, html[data-theme="dark"] .nav {
    position: absolute; inset: 100% 0 auto; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px);
    gap: 2px; padding: 12px 16px 20px;
    background: var(--cm-surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px rgba(11, 26, 43, .18);
  }
  .nav a { border-radius: 12px; padding: 12px 14px; }
  .nav a[aria-current="page"]:not(.nav-cta) { background: var(--cm-seg-bg); box-shadow: none; padding-left: 14px; }
  .nav a[aria-current="page"]:not(.nav-cta)::after { left: auto; right: 16px; top: 50%; bottom: auto; margin: -2.5px 0 0; }
  .nav a.nav-cta { margin: 8px 0 0; justify-content: center; text-align: center; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { justify-content: center; }
  .cm-hero-film { width: min(560px, 100%); }
  .cm-hero-film-frame { border-radius: 20px; }
  .venture-media, .venture:nth-child(odd) .venture-media, .venture:nth-child(even) .venture-media { min-height: 0; padding: 22px; }
  .venture-copy { padding: 32px; }
  .cta-band { padding: 40px 32px; }
  .principle-grid { gap: 0; }
}
@media (max-width: 720px) {
  .cm-seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cm-preferences .cm-pref-inner { flex-wrap: wrap; justify-content: flex-end; gap: 0 12px; }
  .cm-pref-controls { gap: 10px; }
  html[data-language="pcm"] .cm-pref-notice { order: 2; flex-basis: 100%; padding: 0 0 10px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero h1 { letter-spacing: -.035em; }
  .hero-lead { font-size: 18px; }
  .sector-grid .sector, .audience-routes .sector, .contact-option { padding: 24px; }
  .venture { border-radius: 20px; }
  .venture-copy { padding: 26px 22px 28px; }
  .venture h2, .venture h3 { font-size: 26px; }
  .principle { padding-left: 44px; }
  .section-cta { padding: 8px 0 64px; }
  .cta-band { padding: 34px 24px; border-radius: 22px; }
  html .hero .cm-hero-film-controls { left: 10px; right: 10px; bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-seg label, .cm-seg label::after, .nav a, .venture, .venture-media img,
  .cm-hero-film-progress span, .cm-hero-film-controls, html .hero .cm-hero-film-controls button { transition: none; }
}
@media print {
  .cm-preferences, .cm-hero-film-controls, .cm-hero-film-progress { display: none !important; }
  .section-dark, .cta-band { color: #000; background: #fff; box-shadow: none; }
  .section-dark h2, .section-dark .principle strong, .cta-band h2 { color: #000; }
}

/* Subpage heroes: the eyebrow is a label, not an intro paragraph. */
.page-hero p.eyebrow, .profile-hero p.eyebrow { margin: 0 0 16px; font-size: 12.5px; line-height: 1.4; }
/* Contact cards: the brand thread sits inside the rounded corner. */
.contact-option { overflow: hidden; }
.contact-option::before { left: 0; right: 0; }

/* J39 responsive fix, 22 Oct 2026: on phones and small tablets the pinned header is 56 px (was 71 px) and solid
   (the 86% see-through paper let page text show through it). The open menu drawer is re-anchored to the new height. */
@media (max-width: 900px) {
  .site-header { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme="dark"] .site-header { background: #0a1622; }
  .header-inner { min-height: 53px; gap: 16px; }
  .site-header .brand { min-height: 44px; }
  .nav { inset: 56px 0 auto; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); }
}
/* end j39-responsive */