/*
 * Fabric navy preview — a colour layer over the existing site.
 * Keep the current typography, geometry, rails, noise, illustrations and motion.
 * Extra selector specificity is intentional: the homepage and several graphics
 * place their own style blocks later in the document.
 */

:root {
  --fabric-navy: #0d1b31;
  --fabric-navy-raised: #142741;
  --fabric-blue: #416fa4;
  --fabric-blue-deep: #214b7d;
  --fabric-blue-soft: #7d9fc4;
  --fabric-champagne: #c1a77c;
  --fabric-champagne-soft: #dfcba8;
  --fabric-champagne-ink: #80663f;
  --fabric-champagne-rgb: 193, 167, 124;
  --fabric-reading: #f0eeea;
  --fabric-ink: #17283e;
  --fabric-blue-rgb: 65, 111, 164;
  --primary: var(--fabric-blue);
  --primary-dark: var(--fabric-blue-deep);
  --accent: var(--fabric-champagne);
  --neutral-100: var(--fabric-reading);
  --neutral-900: var(--fabric-navy);
  --near-black: #101f36;
  --off-black: #142741;
  --title-color: var(--fabric-ink);
  --neutral-700: #535d69;
  --neutral-600: #5e6874;
  --black-stock-color: rgba(23, 40, 62, 0.12);
  --black-8-border: rgba(23, 40, 62, 0.08);
  --black-6-border: rgba(23, 40, 62, 0.06);
}

html,
html body.body {
  background-color: var(--fabric-navy);
}

html body.body .page-wrapper.page-wrapper--scaffold {
  --home-dark-bg: var(--fabric-navy);
  --home-rail-color: rgba(233, 239, 247, 0.16);
  --home-light-rail-color: rgba(23, 40, 62, 0.12);
  background-color: var(--fabric-navy);
}

/* The warm reading canvas remains separate from the dark outer frame. */
html body.body .page-wrapper:not(.page-wrapper--scaffold) {
  background-color: var(--fabric-reading);
}

html body.body .page-wrapper.page-wrapper--case-premier {
  background-color: var(--fabric-reading);
  background-image: url("/images/30noise.png");
  background-repeat: repeat;
  background-size: 96px 96px;
}

/* Existing hero composition, including both texture layers and all blob paths. */
html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__stage {
  background-color: #315b84;
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__image {
  filter: grayscale(1);
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__blob {
  color: #264b76;
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__blob--a1 {
  color: #173052;
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__blob--a2 {
  color: #416fa4;
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__blob--b1 {
  color: #305d91;
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__blob--b2 {
  color: #172e51;
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__blob--c1 {
  color: #416a94;
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__blob--c2 {
  color: #122846;
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__blob--d1 {
  color: #274c78;
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__blob--d2 {
  color: #152c4c;
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__blob--e1 {
  color: #3d6489;
}

/* A small, matte warm highlight; its existing animated opacity is untouched. */
html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__blob--e2 {
  color: rgba(193, 167, 124, 0.23);
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__cta-link {
  background-color: rgba(20, 49, 83, 0.72);
  border-color: rgba(226, 235, 247, 0.25);
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__cta-link--secondary {
  background-color: rgba(225, 234, 245, 0.09);
}

html body.body .page-wrapper.page-wrapper--scaffold .home-lucid-hero__cta-link:hover {
  background-color: rgba(65, 111, 164, 0.6);
  border-color: rgba(226, 235, 247, 0.42);
}

html body.body .page-wrapper.page-wrapper--scaffold .home-scaffold-capabilities {
  background-color: #102139;
}

html body.body .page-wrapper.page-wrapper--scaffold .home-scaffold-label,
html body.body .page-wrapper.page-wrapper--scaffold .home-scaffold-capability__number {
  color: var(--fabric-champagne);
}

/* Keep warmth in small accents; the new brand mark carries its own blue. */
html body.body .page-wrapper .subtile-icon {
  filter: none;
}

html body.body .page-wrapper .navbar-logo,
html body.body .page-wrapper .footer-logo-image,
html body.body .adoption-review-graphic__core-mark { filter: none; }

html body.body .page-wrapper.page-wrapper--scaffold.is-home-nav-top .nav-link:hover,
html body.body .page-wrapper.page-wrapper--scaffold.is-home-nav-top .dropdown-toggle:hover .dropdown-toggle-text-block,
html body.body .page-wrapper.page-wrapper--scaffold.is-home-nav-top .dropdown-toggle:hover .dropdown-toggle-arrow {
  color: var(--fabric-champagne);
}

html body.body .page-wrapper .navbar .nav-link.w--current {
  background-image: radial-gradient(circle, var(--fabric-champagne) 0 3.2px, transparent 3.5px);
  background-size: 7px 7px;
}

html body.body .page-wrapper .primary-button {
  background-color: var(--fabric-blue-deep);
  background-image: none;
  border-color: rgba(var(--fabric-blue-rgb), 0.18);
  color: #fff;
}

html body.body .page-wrapper .primary-button .button-arrow {
  filter: brightness(0) invert(1);
}

html body.body .page-wrapper .primary-button-shape-bg {
  background-image: linear-gradient(125deg, var(--fabric-champagne-soft), var(--fabric-champagne));
}

html body.body .page-wrapper.page-wrapper--scaffold.is-home-nav-top .navbar-button-wrapper .primary-button {
  background-color: transparent;
  border-color: transparent;
}

html body.body .navbar .nav-features-mega__card:hover {
  border-color: rgba(var(--fabric-blue-rgb), 0.5);
}

html body.body .navbar .nav-features-mega__card::before {
  background-color: rgba(var(--fabric-blue-rgb), 0.1);
}

html body.body .navbar .nav-features-mega__card:focus-visible,
html body.body .home-build-deploy-intro__tab:focus-visible {
  outline-color: var(--fabric-blue);
}

html body.body .page-wrapper .cta-footer,
html body.body .page-wrapper .cta-wrapper {
  background-color: var(--near-black);
}

/* A deeper closing canvas makes the lighter philosophy section stand apart. */
html body.body .page-wrapper.page-wrapper--scaffold .cta-footer,
html body.body .page-wrapper.page-wrapper--scaffold .cta-footer > .cta,
html body.body .page-wrapper.page-wrapper--scaffold .cta-footer .cta-wrapper,
html body.body .page-wrapper.page-wrapper--scaffold .cta-footer > .footer {
  background-color: #0b182c;
}

html body.body .page-wrapper.page-wrapper--scaffold .cta-footer .footer-menu-text-link.w--current,
html body.body .page-wrapper.page-wrapper--scaffold .cta-footer .footer-menu-text-link:hover,
html body.body .page-wrapper.page-wrapper--scaffold .cta-footer .footer-menu-text-link:focus-visible {
  color: #95bddc;
}

/* Blue active controls and brand ink, without recolouring review/warning states. */
html body.body .section.home-agent-stream .agent-stream__composer-send {
  background-color: var(--fabric-blue-deep);
  box-shadow: 0 2px 7px rgba(var(--fabric-blue-rgb), 0.2);
}

html body.body .section.home-agent-stream .agent-stream__avatar--agent,
html body.body .section.home-agent-stream .agent-stream__msg-tag {
  background-color: rgba(var(--fabric-blue-rgb), 0.11);
  border-color: rgba(var(--fabric-blue-rgb), 0.2);
  color: var(--fabric-blue-deep);
}

html body.body .section.home-agent-stream .agent-stream__msg-tag-mark,
html body.body .section.home-agent-stream .agent-stream__final-label,
html body.body .section.home-agent-stream .agent-stream__type-caret {
  color: var(--fabric-blue-deep);
}

html body.body .section.home-agent-stream .agent-stream__thinking-dots span {
  background-color: var(--fabric-blue);
}

html body.body .section.home-agent-stream .agent-stream__fabric-thread::before {
  background: linear-gradient(180deg, rgba(var(--fabric-blue-rgb), 0.42), rgba(var(--fabric-blue-rgb), 0.12) 55%, rgba(var(--fabric-blue-rgb), 0.04));
}

html body.body .section.home-agent-stream .agent-stream__bubble--work {
  border-left-color: rgba(var(--fabric-blue-rgb), 0.2);
}

html body.body .section.home-agent-stream .agent-stream__bubble--final {
  border-color: rgba(var(--fabric-blue-rgb), 0.22);
}

html body.body .section.home-agent-stream .agent-stream__final-answer__bar {
  background: linear-gradient(90deg, rgba(var(--fabric-blue-rgb), 0.55), rgba(var(--fabric-blue-rgb), 0.08));
}

html body.body .section.home-agent-stream .agent-stream__demo-restart-btn:hover {
  color: var(--fabric-blue-deep);
  border-color: rgba(var(--fabric-blue-rgb), 0.35);
  background-color: rgba(var(--fabric-blue-rgb), 0.06);
}

html body.body .section.home-agent-stream .agent-stream__plot-table-tr--demo-hover td {
  background-color: rgba(var(--fabric-blue-rgb), 0.1);
}

/* SVG category colours are presentation attributes, so CSS can override them.
 * Keep the existing green category; orange categories become blue/champagne. */
html body.body .agent-stream__plot-svg [fill="#e85d2c"] {
  fill: var(--fabric-blue-deep);
}

html body.body .agent-stream__plot-svg [stroke="#e85d2c"] {
  stroke: var(--fabric-blue-deep);
}

html body.body .agent-stream__plot-svg [fill="#f47540"] {
  fill: var(--fabric-champagne);
}

html body.body .agent-stream__plot-svg [stroke="#f47540"] {
  stroke: var(--fabric-champagne);
}

html body.body .agent-stream__plot-svg [fill="#3d6fa8"] {
  fill: var(--fabric-blue-soft);
}

html body.body .agent-stream__plot-svg [stroke="#3d6fa8"] {
  stroke: var(--fabric-blue-soft);
}

html body.body .section.home-agent-stream .estimating-workflow-chat__panel {
  background: radial-gradient(circle at 70% 7%, rgba(var(--fabric-blue-rgb), 0.065), transparent 30%), rgba(255, 255, 255, 0.52);
}

html body.body .section.home-agent-stream .estimating-workflow-chat__trigger-card {
  border-color: rgba(var(--fabric-blue-rgb), 0.16);
  background: linear-gradient(135deg, rgba(var(--fabric-blue-rgb), 0.08), rgba(255, 255, 255, 0.76) 58%);
}

html body.body .section.home-agent-stream .estimating-workflow-chat__tag,
html body.body .section.home-agent-stream .estimating-workflow-chat__project-card,
html body.body .section.home-agent-stream .estimating-workflow-chat__estimate-card {
  border-color: rgba(var(--fabric-blue-rgb), 0.18);
}

html body.body .section.home-agent-stream .estimating-workflow-chat__tag span {
  background-color: var(--fabric-blue);
}

html body.body .section.home-agent-stream .estimating-workflow-chat__file-icon {
  background: linear-gradient(180deg, #6189b5, var(--fabric-blue-deep));
  box-shadow: 0 0 0 2px rgba(var(--fabric-blue-rgb), 0.08);
}

html body.body .section.home-agent-stream .estimating-workflow-chat__estimate-table em {
  color: var(--fabric-blue-deep);
}

html body.body .section.home-agent-stream .estimating-workflow-chat__status:not(.estimating-workflow-chat__status--complete) {
  border-color: rgba(var(--fabric-champagne-rgb), 0.28);
  background-color: rgba(var(--fabric-champagne-rgb), 0.09);
  color: var(--fabric-champagne-ink);
}

html body.body .section.home-agent-stream .estimating-workflow-chat__status:not(.estimating-workflow-chat__status--complete)::after {
  color: color-mix(in srgb, var(--fabric-champagne-ink) 72%, #fff 28%);
}

/* Retain the component's green/captured and warm/problem status colours. */
html body.body .section.home-agent-stream .signal-audit-console {
  --signal-audit-orange: var(--fabric-blue);
  --signal-audit-gold: var(--fabric-champagne);
  --signal-audit-ink: var(--fabric-ink);
  --signal-audit-muted: rgba(23, 40, 62, 0.6);
  --signal-audit-line: rgba(23, 40, 62, 0.12);
}

html body.body .section.home-agent-stream .signal-audit-console__source--messy::after,
html body.body .section.home-agent-stream .signal-audit-console__source--partial::after {
  background-color: var(--fabric-champagne);
}

html body.body .section.home-agent-stream .signal-audit-console__panel {
  background: radial-gradient(circle at 18% 18%, rgba(var(--fabric-blue-rgb), 0.12), transparent 32%), radial-gradient(circle at 78% 18%, rgba(193, 167, 124, 0.08), transparent 28%), rgba(255, 255, 255, 0.55);
}

html body.body .section.home-agent-stream .signal-audit-console__scanner::before,
html body.body .section.home-agent-stream .signal-audit-console__scanner::after {
  border-color: rgba(var(--fabric-blue-rgb), 0.24);
}

html body.body .section.home-agent-stream .signal-audit-console__scanner-beam {
  background: linear-gradient(180deg, transparent, rgba(var(--fabric-blue-rgb), 0.62), transparent);
}

html body.body .section.home-agent-stream .signal-audit-console__score-gauge::after {
  background-color: var(--fabric-reading);
}

html body.body .section.home-agent-stream .signal-audit-console__roadmap b {
  background-color: rgba(var(--fabric-blue-rgb), 0.12);
}

html body.body .section.home-agent-stream .signal-audit-console__status i {
  animation-name: fabric-navy-audit-ping;
}

@keyframes fabric-navy-audit-ping {
  0%, 100% { box-shadow: 0 0 0 0 rgba(65, 111, 164, 0.32); }
  50% { box-shadow: 0 0 0 7px rgba(65, 111, 164, 0); }
}

html body.body .section.home-agent-stream .memory-context-graphic .memory-context-graphic__tab--active,
html body.body .section.home-agent-stream .signal-os-review-graphic .signal-os-review-graphic__tab--active {
  border-bottom-color: var(--fabric-blue);
}

html body.body .section.home-agent-stream .memory-context-graphic .memory-context-graphic__tab--demo-hover:not(.memory-context-graphic__tab--active) {
  background-color: rgba(var(--fabric-blue-rgb), 0.06);
}

html body.body .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-item--active {
  box-shadow: 0 0 8px rgba(var(--fabric-blue-rgb), 0.048), 0 0 17px rgba(var(--fabric-blue-rgb), 0.03);
}

html body.body .section.home-agent-stream .air-gapped-diagram stop[stop-color="#fed7c2"] {
  stop-color: #b6cade;
}

html body.body .section.home-agent-stream .air-gapped-diagram stop[stop-color="#f47540"] {
  stop-color: var(--fabric-blue);
}

html body.body .section.home-agent-stream .air-gapped-diagram stop[stop-color="#fb3808"] {
  stop-color: var(--fabric-blue-deep);
}

/* Keep the network, its geometry and traffic animation; shift brand accents. */
html body.body .section.home-agent-stream .adoption-review-graphic .agent-stream__panel--adoption-graphic {
  background: radial-gradient(circle at 16% 0%, rgba(var(--fabric-blue-rgb), 0.08), transparent 34%), radial-gradient(circle at 92% 88%, rgba(193, 167, 124, 0.07), transparent 32%), #f7f4f1;
}

html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__network {
  background: linear-gradient(90deg, rgba(22, 32, 50, 0.035) 1px, transparent 1px), linear-gradient(0deg, rgba(22, 32, 50, 0.035) 1px, transparent 1px), radial-gradient(circle at 50% 50%, rgba(var(--fabric-blue-rgb), 0.09), transparent 28%), radial-gradient(circle at 50% 50%, rgba(22, 32, 50, 0.07), transparent 58%), rgba(255, 255, 255, 0.2);
  background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%, 100% 100%;
}

html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__core {
  background-color: var(--fabric-navy-raised);
}

html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__core::before,
html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__core::after {
  border-color: rgba(var(--fabric-champagne-rgb), 0.24);
}

html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__core::before {
  animation-name: phase4-command-spin, fabric-gold-circle-pulse;
}

html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__agent {
  animation-name: fabric-gold-card-work;
}

html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__agent::before {
  background: linear-gradient(90deg, var(--fabric-champagne), rgba(27, 143, 104, 0.72));
}

html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__agent::after {
  background: linear-gradient(90deg, transparent, rgba(var(--fabric-blue-rgb), 0.13), transparent);
}

html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__agent--1 .adoption-review-graphic__agent-bar,
html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__agent--3 .adoption-review-graphic__agent-bar {
  background: linear-gradient(90deg, var(--fabric-champagne), var(--fabric-champagne-soft)) 0 0 / var(--fill, 72%) 100% no-repeat, rgba(22, 32, 50, 0.08);
}

html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__agent-status--risk,
html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__agent-status--open {
  background-color: rgba(var(--fabric-champagne-rgb), 0.12);
  color: var(--fabric-champagne-ink);
}

/* Keep the original motion while taking its warm highlights from the palette. */
@keyframes fabric-gold-circle-pulse {
  0%, 18%, 100% {
    border-color: rgba(var(--fabric-champagne-rgb), 0.18);
    box-shadow: 0 0 0 0 rgba(var(--fabric-champagne-rgb), 0);
    opacity: 0.72;
  }
  31%, 42% {
    border-color: rgba(var(--fabric-champagne-rgb), 0.42);
    box-shadow: 0 0 0 10px rgba(var(--fabric-champagne-rgb), 0.055);
    opacity: 1;
  }
}

@keyframes fabric-gold-card-work {
  0%, 13%, 100% {
    border-color: rgba(22, 32, 50, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 34px rgba(22, 32, 50, 0.09);
    transform: translate(var(--float-start-x, 0px), var(--float-start-y, 0px));
  }
  22%, 46% {
    border-color: rgba(var(--fabric-champagne-rgb), 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 16px 38px rgba(22, 32, 50, 0.12), 0 0 0 5px rgba(var(--fabric-champagne-rgb), 0.035);
    transform: translate(var(--float-active-x, 0px), var(--float-active-y, -2px));
  }
  68% {
    border-color: rgba(22, 32, 50, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 34px rgba(22, 32, 50, 0.09);
    transform: translate(var(--float-rest-x, 0px), var(--float-rest-y, 0px));
  }
}

/* Gold on the reading canvas uses a darker shade for small text. */
html body.body .page-wrapper .about-page__callout,
html body.body .page-wrapper .about-page__case--signal-os {
  background: linear-gradient(135deg, rgba(var(--fabric-champagne-rgb), 0.08), rgba(var(--fabric-champagne-rgb), 0.02));
}

html body.body .page-wrapper .about-page__case:hover {
  border-color: rgba(var(--fabric-champagne-rgb), 0.45);
}

html body.body .page-wrapper .about-page__case-kicker {
  color: var(--fabric-champagne-ink);
}

html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__agent-head {
  min-height: 23px;
}
html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__agent h3 {
  white-space: normal;
  min-width: 0;
  flex: 1;
}
html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__agent-status {
  flex-shrink: 0;
}

html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__flow::before {
  background: linear-gradient(90deg, rgba(22, 32, 50, 0.04), rgba(var(--fabric-blue-rgb), 0.58), rgba(22, 32, 50, 0.04));
}

html body.body .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__connector {
  background-color: rgba(var(--fabric-blue-rgb), 0.1);
  box-shadow: 0 0 0 6px rgba(var(--fabric-blue-rgb), 0.035);
}

/* Existing Premier article surfaces; the only large visual colour change is
 * its client/demo pane, from green into the same blue/navy hero family. */
html body.body .page-wrapper.page-wrapper--case-premier .cs-hero__visual-pane {
  background: linear-gradient(125deg, #13283f 0%, #21466c 38%, #315d8e 72%, #5c7fa2 100%);
}

html body.body .page-wrapper.page-wrapper--case-premier .cs-hero__endorsement-body {
  border-left-color: var(--fabric-champagne);
}

html body.body .page-wrapper.page-wrapper--case-premier .cs-ui-mock__chart {
  background-color: rgba(var(--fabric-blue-rgb), 0.045);
}

html body.body .page-wrapper.page-wrapper--case-premier .cs-hero__eyebrow-mark {
  background-color: var(--fabric-blue-deep);
}

html body.body .page-wrapper.page-wrapper--case-premier .cs-pill,
html body.body .page-wrapper.page-wrapper--case-premier .cs-roadmap li::before {
  background-color: rgba(var(--fabric-blue-rgb), 0.08);
  border-color: rgba(var(--fabric-blue-rgb), 0.28);
}

html body.body .page-wrapper.page-wrapper--case-premier .cs-takeaway {
  background-color: rgba(var(--fabric-blue-rgb), 0.07);
  border-left-color: var(--fabric-blue);
}

html body.body .page-wrapper.page-wrapper--case-premier .cs-quote-card,
html body.body .page-wrapper.page-wrapper--case-premier .cs-muted-quote,
html body.body .page-wrapper.page-wrapper--case-premier .cs-co-work-panel {
  border-left-color: var(--fabric-champagne);
}

/* The philosophy graphic carries the same rails, typography and quiet warmth
 * as the existing design. Its diagram stays vector at every screen size. */
html body.body .transformation-intersection {
  --philosophy-rail-offset: max(15px, calc((100vw - 1350px) / 2 + 15px));
  padding: 64px 0 48px;
  background-color: var(--fabric-navy-raised);
  color: var(--fabric-reading);
  position: relative;
  border-top: 1px solid rgba(215, 224, 235, 0.12);
  border-bottom: 1px solid rgba(215, 224, 235, 0.12);
  scroll-margin-top: 86px;
}

.transformation-intersection::before,
.transformation-intersection::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed rgba(215, 224, 235, 0.12);
  pointer-events: none;
}
.transformation-intersection::before { left: var(--home-wrapper-rail-offset, var(--philosophy-rail-offset)); }
.transformation-intersection::after { right: var(--home-wrapper-rail-offset, var(--philosophy-rail-offset)); }

.transformation-intersection__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding: 0 18px;
}

/* Use the shared case-study and CTA fade-and-rise motion on both pages. */
.transformation-intersection .cs-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.transformation-intersection .cs-reveal.cs-reveal--in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.transformation-intersection__eyebrow {
  font-family: "Chivo Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.transformation-intersection__eyebrow { color: var(--fabric-champagne); margin: 0 0 18px; }
html body.body .transformation-intersection h2 {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(36px, 3.5vw, 46px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.045em;
  margin: 0 0 18px;
  color: var(--fabric-reading);
}
.transformation-intersection h2 em { color: var(--fabric-champagne); font-style: normal; }
.transformation-intersection__lead { font-size: 17px; line-height: 1.5; color: #b9c5d6; max-width: 440px; margin: 0 0 22px; }
.transformation-intersection__choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.transformation-intersection__choices button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 10px 9px;
  background: rgba(215, 224, 235, 0.035);
  color: #dce4ed;
  border: 1px solid rgba(215, 224, 235, 0.16);
  border-radius: 4px;
  text-align: left;
  font: 400 14px/1.3 "Inter Tight", sans-serif;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}
.transformation-intersection__choices button:hover,
.transformation-intersection__choices button.is-selected { border-color: #95bddc; background: rgba(149, 189, 220, 0.13); }
.transformation-intersection__choices button:focus-visible { outline: 2px solid #dce4ed; outline-offset: 4px; }
.transformation-intersection__visual { min-width: 0; width: 100%; max-width: 560px; justify-self: center; }
.transformation-intersection__visual svg { display: block; width: 100%; overflow: visible; }
.transformation-intersection__circle { pointer-events: none; transition: fill-opacity 300ms ease, stroke 300ms ease, stroke-opacity 300ms ease; }
.transformation-intersection__circle-control { cursor: pointer; outline: none; }
.transformation-intersection__svg-label { pointer-events: none; fill: #b9c8da; font: 400 26px "Funnel Display", sans-serif; letter-spacing: -0.02em; }
.transformation-intersection__svg-label .is-selected { fill: #edf6fc; }
.transformation-intersection__svg-overlap { pointer-events: none; fill: #b2c1d3; font: 400 16px "Inter Tight", sans-serif; letter-spacing: -0.015em; }
.transformation-intersection__svg-center { fill: #dfcba8; font: 400 31px "Funnel Display", sans-serif; letter-spacing: -0.025em; }
.transformation-intersection__svg-center .transformation-intersection__core-overline { fill: #bda987; font: 400 10px "Chivo Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; }
.transformation-intersection__core-emblem { fill: #c1a77c; }
.transformation-intersection__practice { position: relative; min-height: 192px; margin-top: 18px; padding: 18px 0 0; }
.transformation-intersection__progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; background: rgba(149, 189, 220, 0.3); }
.transformation-intersection__progress span { display: block; width: 100%; height: 100%; background: #95bddc; transform-origin: left; }
.transformation-intersection__practice-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.transformation-intersection__practice-label { display: flex; gap: 8px; margin: 0; color: #95bddc; font: 400 10px/1.4 "Chivo Mono", monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.transformation-intersection__playback { display: flex; align-items: center; gap: 12px; color: #b9c5d6; font: 400 10px/1.4 "Chivo Mono", monospace; white-space: nowrap; }
.transformation-intersection__playback button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.transformation-intersection__playback svg { width: 10px; height: 10px; }
.transformation-intersection__announcement { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html body.body .transformation-intersection__practice h3 { color: #edf0f4; font: 400 23px/1.2 "Funnel Display", sans-serif; letter-spacing: -0.025em; margin: 0 0 13px; }
.transformation-intersection__practice ul { margin: 0; padding: 0; list-style: none; }
.transformation-intersection__practice li { color: #b9c5d6; font-size: 15px; line-height: 1.45; padding-left: 13px; position: relative; margin: 0 0 9px; }
.transformation-intersection__practice li:last-child { margin-bottom: 0; }
.transformation-intersection__practice li::before { content: ""; position: absolute; left: 0; top: 9px; width: 3px; height: 3px; background: var(--fabric-champagne); border-radius: 50%; }

@media (max-width: 991px) {
  .transformation-intersection__layout { gap: 28px; padding: 0 12px; }
  .transformation-intersection__choices { grid-template-columns: 1fr 1fr; }
  .transformation-intersection__choices button { min-height: 44px; }
}
@media (max-width: 760px) {
  html body.body .transformation-intersection { --philosophy-rail-offset: 10px; padding: 40px 0 36px; }
  .transformation-intersection__layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .transformation-intersection__copy { display: contents; }
  .transformation-intersection__choices { width: 100%; }
  .transformation-intersection__choices button { padding: 10px 12px; min-height: 44px; font-size: 15px; }
  .transformation-intersection__lead { font-size: 17px; margin-bottom: 20px; }
  /* Keep the controls, highlighted diagram and its one detail panel together. */
  .transformation-intersection__visual { order: 1; max-width: 540px; width: 100%; margin: 22px auto 0; }
  .transformation-intersection__svg-label { font-size: 32px; }
  .transformation-intersection__svg-center { font-size: 35px; }
  .transformation-intersection__svg-center .transformation-intersection__core-overline { font-size: 16px; }
  .transformation-intersection__svg-overlap { font-size: 19px; }
  .transformation-intersection__practice { order: 2; width: 100%; min-height: 220px; margin-top: 20px; padding: 18px 0 0; }
  html body.body .transformation-intersection__practice h3 { font-size: 23px; margin-bottom: 13px; }
  .transformation-intersection__practice li { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .transformation-intersection .cs-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .transformation-intersection__circle,
  .transformation-intersection__choices button { transition: none; }
}