/* Final UI cohesion, accessibility and workspace-action layer — 2026-08-31 */

:root {
  --flow-ink: #eef2ed;
  --flow-copy: #b5c7c7;
  --flow-line: rgba(155, 210, 199, .15);
}

/* Keep anchor targets clear of the floating navigation and never clip headings. */
#services,
#source,
#how,
#why,
#reference,
#faq,
#rfq { scroll-margin-top: 116px; }

.source-section,
.source-section .container,
.source-section .section-head { overflow: visible; }

.source-section .section-head {
  position: relative;
  z-index: 7;
  padding-top: clamp(10px, 1.4vw, 22px);
}

#component-explorer-title {
  display: block;
  overflow: visible;
  padding: .08em .04em .1em;
  margin-inline: -.04em;
  line-height: 1.02 !important;
  text-wrap: balance;
}

/* One continuous visual field instead of separate presentation slides. */
main > :is(#services, #source, #how, #why, #reference, #faq, #rfq),
body > :is(#services, #source, #how, #why, #reference, #faq, #rfq) {
  position: relative;
  margin: 0;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow:
    inset 0 105px 110px -128px rgba(126, 191, 181, .28),
    inset 0 -105px 110px -128px rgba(107, 145, 188, .22);
}

main > section + section,
body > section + section { margin-top: -1px; }

html[data-theme="dark"] :is(#services, #source, #how, #why, #reference, #faq, #rfq) {
  background-color: #0d2931 !important;
  background-image:
    radial-gradient(ellipse at 8% 12%, rgba(79, 143, 136, .12), transparent 34%),
    radial-gradient(ellipse at 92% 78%, rgba(92, 117, 173, .085), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .014), transparent 18%, transparent 82%, rgba(7, 22, 29, .09)) !important;
}

/* RFQ Assistant access remains obvious inside every guided workspace. */
.workspace-rfq-action {
  --action-accent: var(--guide-stage, #8ecfc3);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 16px 8px 8px;
  color: #edf4ef;
  border: 1px solid color-mix(in srgb, var(--action-accent) 44%, transparent);
  border-radius: 999px;
  background: rgba(6, 25, 31, .76);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22), 0 0 24px color-mix(in srgb, var(--action-accent) 9%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: left;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.workspace-rfq-action:hover,
.workspace-rfq-action:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--action-accent) 78%, transparent);
  background: color-mix(in srgb, var(--action-accent) 10%, rgba(6, 25, 31, .9));
  box-shadow: 0 21px 46px rgba(0, 0, 0, .28), 0 0 32px color-mix(in srgb, var(--action-accent) 17%, transparent);
}

.workspace-rfq-action__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #082126;
  border-radius: 50%;
  background: var(--action-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--action-accent) 32%, transparent);
  font-size: 16px;
  transition: transform .35s ease;
}

.workspace-rfq-action:hover .workspace-rfq-action__icon { transform: rotate(12deg) scale(1.06); }
.workspace-rfq-action small,
.workspace-rfq-action strong { display: block; }
.workspace-rfq-action small { margin-bottom: 3px; color: #8fa7a9; font: 500 7px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.workspace-rfq-action strong { color: inherit; font: 650 11px/1.15 var(--font-body); }
.workspace-rfq-action--guide { margin-top: 21px; }
.workspace-rfq-action.is-disabled {
  cursor: default;
  opacity: .72;
  filter: saturate(.72);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}
.workspace-rfq-action.is-disabled:hover,
.workspace-rfq-action.is-disabled:focus-visible {
  transform: none;
  border-color: color-mix(in srgb, var(--action-accent) 32%, transparent);
  background: rgba(6, 25, 31, .76);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}
.workspace-rfq-action.is-disabled .workspace-rfq-action__icon {
  color: var(--action-accent);
  background: rgba(255, 255, 255, .04);
  border: 1px solid color-mix(in srgb, var(--action-accent) 36%, transparent);
  box-shadow: none;
}
.workspace-rfq-action.is-disabled:hover .workspace-rfq-action__icon { transform: none; }

/* Valve selection: one proportionate focus circle. */
.valve-stage { cursor: pointer; }
.valve-stage::after { content: "CLICK A VALVE TO FOCUS"; }

.valve-stage-scan {
  top: 5%;
  bottom: 16%;
  left: var(--valve-scan-left, 0%);
  width: 22.5%;
  aspect-ratio: auto;
  border-radius: 50%;
  transform: none;
}

/* Single selected-valve showroom. The sprite declarations can later be
   replaced with one transparent asset per family without changing layout. */
.valve-detail-view {
  position: absolute;
  z-index: 4;
  inset: 0 0 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--valve-accent) 16%, transparent), transparent 31%),
    linear-gradient(135deg, rgba(4, 17, 25, .97), rgba(7, 27, 35, .96));
  transition: opacity .5s ease, visibility .5s ease;
}
.valve-detail-view.is-visible { opacity: 1; visibility: visible; }
.valve-detail-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(46vw, 440px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--valve-accent) 48%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 80px color-mix(in srgb, var(--valve-accent) 13%, transparent), inset 0 0 65px color-mix(in srgb, var(--valve-accent) 7%, transparent);
}
.valve-detail-aura::before,
.valve-detail-aura::after,
.valve-detail-aura i {
  content: "";
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--valve-accent) 20%, transparent);
  border-radius: 50%;
}
.valve-detail-aura::before { inset: 8%; }
.valve-detail-aura::after { inset: 19%; }
.valve-detail-aura i:first-child { inset: -8%; border-style: dashed; animation: valve-aura-orbit 18s linear infinite; }
.valve-detail-aura i:nth-child(2) { inset: 29%; border-color: color-mix(in srgb, var(--valve-accent) 34%, transparent); }
.valve-detail-aura span {
  position: absolute;
  top: 50%;
  left: -5%;
  width: 110%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--valve-accent), transparent);
  opacity: .38;
  box-shadow: 0 0 16px var(--valve-accent);
  animation: valve-aura-scan 4.8s ease-in-out infinite;
}
.valve-detail-product {
  position: relative;
  z-index: 2;
  width: min(31vw, 250px);
  height: auto;
  aspect-ratio: 434 / 724;
  background-repeat: no-repeat;
  transform-style: preserve-3d;
  filter: saturate(.96) contrast(1.06) brightness(1.05) drop-shadow(0 25px 24px rgba(0, 0, 0, .34));
  animation: valve-showroom-turn 8s linear infinite;
  will-change: transform;
}
.valve-detail-view:hover .valve-detail-product { animation-duration: 13s; }
.valve-detail-meta {
  position: absolute;
  z-index: 4;
  bottom: 20px;
  left: 24px;
}
.valve-detail-meta span { display: block; color: var(--valve-accent); font-size: 8px; letter-spacing: .15em; }
.valve-detail-meta strong { display: block; margin-top: 7px; color: #edf2ed; font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.3rem); }
.valve-detail-back {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 20px;
  padding: 9px 12px;
  color: #b5c7c7;
  border: 1px solid rgba(181, 207, 202, .18);
  border-radius: 999px;
  background: rgba(5, 20, 27, .72);
  font: 600 9px/1 var(--font-mono);
  letter-spacing: .08em;
  cursor: pointer;
}
.valve-detail-back span { margin-left: 7px; color: var(--valve-accent); font-size: 14px; }
.valve-detail-back:hover { color: #fff; border-color: color-mix(in srgb, var(--valve-accent) 48%, transparent); }
@keyframes valve-showroom-turn {
  0% { transform: perspective(1000px) rotateY(0deg) translateY(0); }
  25% { transform: perspective(1000px) rotateY(90deg) translateY(-4px); }
  50% { transform: perspective(1000px) rotateY(180deg) translateY(0); }
  75% { transform: perspective(1000px) rotateY(270deg) translateY(4px); }
  100% { transform: perspective(1000px) rotateY(360deg) translateY(0); }
}
@keyframes valve-aura-orbit { to { transform: rotate(360deg); } }
@keyframes valve-aura-scan { 0%,100% { transform: translateY(-86px); opacity: .12; } 50% { transform: translateY(86px); opacity: .55; } }

.valve-stage-lineup {
  transform-origin: var(--valve-focus-x, 10%) 48%;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
}

.valve-stage.is-product-focus .valve-stage-lineup {
  transform: scale(1.09) translate3d(calc(var(--valve-drift-x, 0px) + var(--valve-focus-shift, 0px)), var(--valve-drift-y, 0px), 0);
  filter: saturate(.98) contrast(1.07) brightness(1.03);
}

.valve-stage.is-product-pulse .valve-stage-lineup { animation: valve-product-focus .48s cubic-bezier(.2, .75, .2, 1); }
@keyframes valve-product-focus {
  0% { filter: saturate(.76) brightness(.86); }
  55% { filter: saturate(1.08) brightness(1.1); }
  100% { filter: saturate(.98) contrast(1.07) brightness(1.03); }
}

/* Light mode: warmer engineering paper, stronger text, and dark precision stages. */
html[data-theme="light"] body {
  color: #173137;
  background: #e8ede8;
}

html[data-theme="light"] :is(#services, #source, #how, #why, #reference, #faq) {
  --flow-ink: #0b292f;
  --flow-copy: #3f5b60;
  color: var(--flow-ink);
  background-color: #e9eee9 !important;
  background-image:
    radial-gradient(ellipse at 7% 13%, rgba(52, 132, 123, .14), transparent 33%),
    radial-gradient(ellipse at 92% 77%, rgba(88, 112, 164, .105), transparent 34%),
    linear-gradient(180deg, #edf1ed, #e7ede8 52%, #eaf0eb) !important;
  box-shadow:
    inset 0 105px 110px -128px rgba(38, 96, 91, .26),
    inset 0 -105px 110px -128px rgba(62, 86, 132, .19);
}

html[data-theme="light"] :is(#services, #source, #how, #why, #reference, #faq) :is(.section-head h2, .toolkit-heading h2) {
  color: #09252c !important;
  text-shadow: none !important;
}

html[data-theme="light"] :is(#services, #source, #how, #why, #reference, #faq) :is(.section-head > p, .toolkit-heading > p, .workflow-intro) {
  color: #405c62 !important;
  opacity: 1 !important;
}

html[data-theme="light"] :is(#services, #source, #how, #why, #reference, #faq) .eyebrow {
  color: #316f68 !important;
}

html[data-theme="light"] .toolkit-heading h2 em,
html[data-theme="light"] .workflow-heading em {
  color: #226e67 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
html[data-theme="light"] .workflow-heading span {
  color: #09252c !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .service-guide {
  border-color: rgba(18, 61, 66, .2);
  box-shadow: 0 32px 78px rgba(23, 61, 65, .18), inset 0 1px 0 rgba(255, 255, 255, .07);
}

html[data-theme="light"] .service-guide-foot {
  border-color: rgba(22, 69, 72, .2);
  background: rgba(249, 251, 247, .72);
}
html[data-theme="light"] .service-guide-foot span { color: #276f68; }
html[data-theme="light"] .service-guide-foot p { color: #476167; }

html[data-theme="light"] .process-links-track { stroke: rgba(28, 70, 76, .38) !important; }
html[data-theme="light"] .process-node { opacity: 1; filter: none; }
html[data-theme="light"] .process-node-label {
  color: #294b51 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
}
html[data-theme="light"] .process-node-btn:hover .process-node-label,
html[data-theme="light"] .process-node-btn:focus-visible .process-node-label,
html[data-theme="light"] .process-node.is-active .process-node-label {
  color: color-mix(in srgb, var(--step) 72%, #0a3539) !important;
  text-shadow: none;
}
html[data-theme="light"] .process-node-dot {
  background: linear-gradient(145deg, rgba(22, 57, 64, .98), rgba(8, 31, 37, .98));
  border-color: color-mix(in srgb, var(--step) 60%, rgba(10, 43, 48, .55));
  box-shadow: 0 14px 30px rgba(18, 56, 61, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-theme="light"] .process-panel-desc { color: #d5e3e2; }
html[data-theme="light"] .process-list-item h3 { color: #113b42; }
html[data-theme="light"] .process-list-item p { color: #486269; }

html[data-theme="light"] .source-frequency,
html[data-theme="light"] .source-glow { opacity: .42; }
html[data-theme="light"] .showcase-name { color: #0b2b31; }
html[data-theme="light"] .showcase-label { color: #2c6e67; }
html[data-theme="light"] .showcase-standards { color: #4d666b; }

html[data-theme="light"] .valve-spec-panel {
  border-color: rgba(21, 69, 73, .2);
  background: rgba(249, 251, 247, .76);
}
html[data-theme="light"] .valve-spec-grid dt { color: #527075; }
html[data-theme="light"] .valve-spec-grid dd { color: #16363c; }
html[data-theme="light"] .valve-catalogue-button { color: #15373d; background: rgba(255, 255, 255, .48); }
html[data-theme="light"] .valve-catalogue-button small { color: #577176; }

html[data-theme="light"] .robot-bubble { color: #f1f3ef; }

/* Workflow titles stay directly below their own icons. Only the larger
   description cards float around the outside of the orbit. */
@media (min-width: 901px) {
  .process-node .process-node-label {
    position: static;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    transform: none;
  }

  /* Source and Verify: floating description opens above and to the right. */
  .process-node[data-step="1"] .process-panel,
  .process-node[data-step="2"] .process-panel {
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 18px) !important;
    left: auto !important;
    transform: translate(calc(var(--panel-shift-x) - 6px), 8px) !important;
  }
  .process-node[data-step="1"].is-active .process-panel,
  .process-node[data-step="2"].is-active .process-panel {
    transform: translate(var(--panel-shift-x), 0) !important;
  }

  /* Engineer and Deliver: floating description opens above and to the left. */
  .process-node[data-step="3"] .process-panel,
  .process-node[data-step="4"] .process-panel {
    top: auto !important;
    right: auto !important;
    bottom: calc(100% + 18px) !important;
    left: 0 !important;
    transform: translate(calc(var(--panel-shift-x) + 6px), 8px) !important;
  }
  .process-node[data-step="3"].is-active .process-panel,
  .process-node[data-step="4"].is-active .process-panel {
    transform: translate(var(--panel-shift-x), 0) !important;
  }
}

@media (max-width: 900px) {
  #services, #source, #how, #why, #reference, #faq, #rfq { scroll-margin-top: 88px; }
  .valve-stage::after { content: "TAP A VALVE TO FOCUS"; }
}

@media (max-width: 700px) {
  .workspace-rfq-action--guide { margin-top: 16px; }
  .valve-stage-scan { top: 7%; bottom: 22%; width: 24%; }
  .valve-detail-view { bottom: 66px; }
  .valve-detail-aura { width: min(82vw, 330px); }
  .valve-detail-product { width: min(58vw, 230px); height: auto; }
  .valve-detail-meta { right: 16px; bottom: 14px; left: 16px; }
  .valve-detail-meta strong { max-width: 70%; }
  .valve-detail-back { top: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .valve-stage.is-product-pulse .valve-stage-lineup { animation: none; }
  .workspace-rfq-action,
  .workspace-rfq-action__icon { transition: none; }
}