@import url("Assets/vendor/fonts.css");

:root {
  --primary: #CA4D00;
  --primary-hover: #e55c00;
  --bg-light: #ffffff;
  --bg-dark: #000000;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-muted: #fafafa;
  --surface-tag: #f3f4f6;
  --text: #121212;
  --text-muted: #6b7280;
  --text-on-dark: #f5f5f5;
  --text-muted-on-dark: rgba(245, 245, 245, 0.72);
  --border: #e5e7eb;
  --border-soft: rgba(18, 18, 18, 0.12);
  --shadow: 0 12px 40px rgba(18, 18, 18, 0.08);
  --shadow-hover: 0 16px 48px rgba(202, 77, 0, 0.18);
  --header-height: 88px;
  --max-width: 1180px;
  /* Two roles, two faces: Roboto sets titles, Inter sets everything read as
     running text. --fd/--fb below alias these. */
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Roboto", system-ui, -apple-system, sans-serif;
  /* Titles are set in Roboto Black. Roboto and Inter are close cousins, so the
     weight is doing the work the letterforms used to — keep it at 900. */
  --fd-weight: 900;
  --nav-glass: rgba(18, 18, 18, 0.88);
  --nav-glass-border: rgba(255, 255, 255, 0.1);
  --nav-glass-hover: rgba(18, 18, 18, 0.96);
  --nav-link-hover: rgba(255, 255, 255, 0.1);
  --nav-fg: #f5f5f5;
  --nav-fg-muted: rgba(245, 245, 245, 0.68);
  --subpage-head-pad-top: clamp(72px, 9vw, 75px);
  --subpage-head-pad-bottom: clamp(40px, 6vw, 50px);
  --subpage-section-pad-y: clamp(50px, 7vw, 75px);
  --subpage-cta-section-pad-y: clamp(36px, 5vw, 50px);
  color-scheme: light;
}

/* ============================================================
   CINEMATIC HOMEPAGE STORY
   Homepage-only presentation and controls. The shared site shell remains
   unchanged; all selectors are scoped to body.home-story.
   ============================================================ */
html.home-story-page {
  background: #000;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
}

body.home-story {
  --story-orange: #CA4D00;
  --story-orange-bright: #ff7a1a;
  --story-white: #f7f7f4;
  --story-muted: rgba(247, 247, 244, .58);
  --story-hairline: rgba(247, 247, 244, .13);
  --story-panel: rgba(12, 12, 12, .68);
  overflow-x: clip;
  background: #000;
  color: var(--story-white);
}

body.home-story #bg-canvas { display: none; }
body.home-story .header-shell { position: fixed; inset: 0 0 auto; }
body.home-story .site-header { width: min(92%, 1240px); }
body.home-story .site-footer { position: relative; z-index: 4; background: #050505; }

.story-main {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 16%, rgba(202, 77, 0, .06), transparent 28%),
    #000;
}

.story-main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .17;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.story-stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100dvh;
  margin-bottom: -100dvh;
  overflow: hidden;
  pointer-events: none;
}

#story-canvas { display: block; width: 100%; height: 100%; }

.story-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.26) 42%, transparent 67%),
    linear-gradient(180deg, rgba(0,0,0,.36), transparent 19%, transparent 78%, rgba(0,0,0,.56));
}

.story-chapter {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100dvh;
  padding: clamp(7.5rem, 13vh, 9.5rem) clamp(1.25rem, 5vw, 4.5rem) clamp(4rem, 8vh, 6.5rem);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story-chapter::after {
  content: "";
  position: absolute;
  left: clamp(1.25rem, 5vw, 4.5rem);
  right: clamp(1.25rem, 5vw, 4.5rem);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
}

.story-shell {
  align-self: center;
  width: min(100%, 1320px);
  margin-inline: auto;
}

.story-shell--split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 7rem);
}

.story-copy { position: relative; z-index: 3; max-width: 39rem; }
.story-copy--right { grid-column: 2; justify-self: end; }
.story-copy--wide { max-width: 62rem; }
.story-visual-space { min-height: min(66vh, 46rem); }

.story-copy h1,
.story-copy h2 {
  max-width: none;
  margin: 0;
  overflow-wrap: normal;
  color: var(--story-white);
  font-family: var(--fd);
  font-weight: 700;
  letter-spacing: -0.044em;
  text-wrap: balance;
}

.story-copy h1 {
  max-width: 12.9ch;
  font-size: clamp(3.6rem, 6.4vw, 7rem);
  line-height: .92;
}
.story-copy h1 span { color: var(--story-orange); }

.story-copy h2 {
  max-width: 18.6ch;
  font-size: clamp(3rem, 5.1vw, 5.65rem);
  line-height: .96;
}

.story-lede {
  max-width: 34rem;
  margin: clamp(1.5rem, 3vh, 2.25rem) 0 0;
  color: var(--story-muted);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.story-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 2.25rem; }

.story-button,
.story-link {
  appearance: none;
  border: 0;
  font: 700 .76rem/1 var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.story-button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: 0 1.5rem;
  border-radius: .3rem;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.story-button--primary { color: #fff; background: var(--story-orange); box-shadow: 0 .65rem 2rem rgba(202, 77, 0,.2); }
.story-button--primary:hover { transform: translateY(-2px); background: var(--story-orange-bright); box-shadow: 0 1rem 2.7rem rgba(202, 77, 0,.32); }
.story-button:active { transform: translateY(0) scale(.98); }
.story-button svg, .story-link svg, .capability-link svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; }
.story-button:hover svg, .capability-link:hover svg { transform: translateX(.2rem); }

.story-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.35rem;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: .3rem;
  transition: color .2s ease, border-color .2s ease;
}
.story-link:hover { color: #fff; border-color: var(--story-orange); }

.story-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: clamp(3rem, 6vh, 5rem);
  color: rgba(255,255,255,.43);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.story-proof i, .story-contact i { width: 3px; height: 3px; border-radius: 50%; background: var(--story-orange); box-shadow: 0 0 .6rem rgba(202, 77, 0,.8); }

.story-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  display: grid;
  justify-items: center;
  gap: .6rem;
  color: rgba(255,255,255,.33);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.story-scroll-cue i { width: 1px; height: 2rem; background: linear-gradient(var(--story-orange), transparent); animation: storyCue 1.8s ease-in-out infinite; }
@keyframes storyCue { 0%,100% { transform: scaleY(.5); transform-origin: top; opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

.story-progress {
  position: fixed;
  z-index: 20;
  top: 50%;
  right: clamp(1.1rem, 2.5vw, 2.5rem);
  display: grid;
  gap: .5rem;
  transform: translateY(-50%);
}
.story-progress a { display: grid; grid-template-columns: 1.4rem 1.8rem auto; align-items: center; gap: .65rem; min-height: 1.7rem; color: rgba(255,255,255,.28); }
.story-progress span { font: 600 .58rem/1 var(--font); letter-spacing: .08em; }
.story-progress i { display: block; width: .8rem; height: 1px; background: currentColor; transition: width .35s ease, color .35s ease; }
.story-progress b { opacity: 0; transform: translateX(.35rem); font: 600 .58rem/1 var(--font); letter-spacing: .09em; text-transform: uppercase; transition: opacity .25s ease, transform .25s ease; }
.story-progress a:hover, .story-progress a.is-active { color: var(--story-white); }
.story-progress a.is-active span { color: var(--story-orange); }
.story-progress a.is-active i { width: 1.8rem; background: var(--story-orange); box-shadow: 0 0 .75rem rgba(202, 77, 0,.65); }
.story-progress a:hover b { opacity: 1; transform: none; }

.story-options { margin-top: clamp(2rem, 4vh, 3.25rem); }
.story-options button {
  width: 100%;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem .1rem;
  border: 0;
  border-bottom: 1px solid var(--story-hairline);
  background: transparent;
  color: rgba(255,255,255,.48);
  text-align: left;
  cursor: pointer;
  transition: color .25s ease, padding .25s ease;
}
.story-options button::after { content: ""; width: .45rem; height: .45rem; border: 1px solid currentColor; border-radius: 50%; transition: background .25s ease, box-shadow .25s ease; }
.story-options button span { color: rgba(255,255,255,.25); font: 600 .62rem/1 var(--font); }
.story-options button b { font: 600 clamp(1rem, 1.4vw, 1.25rem)/1.2 var(--font); }
.story-options button:hover { color: #fff; padding-left: .45rem; }
.story-options button[aria-pressed="true"] { color: #fff; padding-left: .75rem; }
.story-options button[aria-pressed="true"] span { color: var(--story-orange); }
.story-options button[aria-pressed="true"]::after { border-color: var(--story-orange); background: var(--story-orange); box-shadow: 0 0 1rem rgba(202, 77, 0,.7); }

.story-shell--capabilities { position: relative; min-height: min(72vh, 46rem); }
.story-shell--capabilities .story-copy { position: absolute; top: 0; left: 0; }
.capability-system { position: absolute; inset: 0; }
.capability-node {
  position: absolute;
  width: 9.5rem;
  min-height: 5.25rem;
  padding: 1rem;
  border: 1px solid var(--story-hairline);
  background: rgba(5,5,5,.7);
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,.58);
  text-align: left;
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease;
}
.capability-node span { display: block; font: 650 .85rem/1.25 var(--font); }
.capability-node small { display: block; margin-top: .6rem; color: rgba(255,255,255,.3); font: 600 .58rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.capability-node:nth-child(1) { right: 35%; top: 4%; }
.capability-node:nth-child(2) { right: 5%; top: 24%; }
.capability-node:nth-child(3) { right: 11%; bottom: 12%; }
.capability-node:nth-child(4) { left: 34%; bottom: 0; }
.capability-node:nth-child(5) { left: 24%; top: 47%; }
.capability-node:hover { color: #fff; transform: translateY(-4px); border-color: rgba(202, 77, 0,.42); }
.capability-node.is-active { color: #fff; border-color: var(--story-orange); background: rgba(202, 77, 0,.1); box-shadow: 0 0 2.5rem rgba(202, 77, 0,.11), inset 0 0 1.5rem rgba(202, 77, 0,.04); }
.capability-node.is-active small { color: var(--story-orange); }
.capability-link { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: .7rem; color: #fff; font: 700 .72rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }

.story-shell--process { min-height: min(70vh, 43rem); display: flex; flex-direction: column; justify-content: space-between; }
.process-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: auto; padding-top: 4rem; }
.process-track::before { content: ""; position: absolute; top: 5.55rem; left: 3%; right: 3%; height: 1px; background: linear-gradient(90deg, rgba(202, 77, 0,.75), rgba(255,255,255,.12)); }
.process-track::after { content: ""; position: absolute; top: calc(5.55rem - 3px); left: 2%; width: 7px; height: 7px; border-radius: 50%; background: var(--story-orange); box-shadow: 0 0 1.1rem rgba(202, 77, 0,.9); animation: processSignal 5s linear infinite; }
@keyframes processSignal { to { left: 97%; } }
.process-track button { position: relative; z-index: 1; display: grid; justify-items: start; gap: .7rem; padding: 0 clamp(.5rem, 2vw, 1.5rem); border: 0; background: transparent; color: rgba(255,255,255,.36); text-align: left; cursor: pointer; }
.process-track button::before { content: ""; width: 1rem; height: 1rem; margin: .4rem 0 1.1rem; border: 1px solid currentColor; border-radius: 50%; background: #000; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.process-track span { order: -1; font: 600 .64rem/1 var(--font); letter-spacing: .1em; }
.process-track b { font: 650 clamp(1.15rem, 1.7vw, 1.45rem)/1.2 var(--font); }
.process-track small { font: 500 .78rem/1.4 var(--font); color: rgba(255,255,255,.3); }
.process-track button:hover, .process-track button.is-active { color: #fff; }
.process-track button.is-active span, .process-track button.is-active small { color: var(--story-orange); }
.process-track button.is-active::before { transform: scale(1.18); border-color: var(--story-orange); background: var(--story-orange); box-shadow: 0 0 1.2rem rgba(202, 77, 0,.8); }
.process-output { align-self: flex-end; display: flex; align-items: baseline; gap: 1rem; margin: 3rem 1.5rem 0 0; }
.process-output span { color: rgba(255,255,255,.3); font: 600 .6rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.process-output b { color: #fff; font: 600 1rem/1 var(--font); }

.story-shell--trust { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 7vw, 8rem); align-items: center; }
.story-shell--trust .story-copy { grid-column: 1 / -1; }
.trust-metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--story-hairline); }
.trust-metrics div { min-height: 8rem; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--story-hairline); }
.trust-metrics div:nth-child(odd) { border-right: 1px solid var(--story-hairline); }
.trust-metrics div:nth-child(even) { padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.trust-metrics strong { font: 700 clamp(2.2rem, 4vw, 4rem)/1 var(--fd); letter-spacing: -0.041em; color: #fff; font-variant-numeric: tabular-nums; }
.trust-metrics span { margin-top: .65rem; color: var(--story-orange); font: 600 .62rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.partner-constellation { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--story-hairline); border: 1px solid var(--story-hairline); }
.partner-constellation img { width: 100%; height: 5.7rem; padding: 1.55rem; object-fit: contain; background: rgba(6,6,6,.82); filter: grayscale(1) brightness(0) invert(1); opacity: .62; transition: opacity .25s ease, filter .25s ease, background .25s ease; }
.partner-constellation img:hover { opacity: 1; filter: grayscale(1) brightness(0) invert(1) drop-shadow(0 0 .65rem rgba(202, 77, 0,.35)); background: rgba(202, 77, 0,.05); }

.story-final { text-align: center; }
.story-shell--final { display: grid; place-items: center; min-height: 70vh; }
.story-copy--center { max-width: 70rem; display: grid; justify-items: center; }
.story-copy--center h2 { max-width: 18.6ch; font-size: clamp(3.6rem, 7.5vw, 8rem); }
.story-copy--center .story-lede { max-width: 42rem; }
.starting-paths { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin: 2.5rem 0 2rem; }
.starting-paths button { padding: .85rem 1.15rem; border: 1px solid var(--story-hairline); border-radius: 999px; background: rgba(6,6,6,.68); color: rgba(255,255,255,.48); font: 600 .72rem/1 var(--font); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.starting-paths button:hover { color: #fff; transform: translateY(-2px); }
.starting-paths button.is-active { color: #fff; border-color: var(--story-orange); background: rgba(202, 77, 0,.11); }
.story-button--large { min-height: 3.65rem; padding-inline: 1.85rem; }
.story-contact { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .65rem; margin: clamp(3rem, 7vh, 5.5rem) 0 0; color: rgba(255,255,255,.34); font: 500 .67rem/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.story-contact a:hover { color: #fff; }

.story-main button:focus-visible,
.story-main a:focus-visible { outline: 2px solid var(--story-orange); outline-offset: 4px; }

@media (max-width: 1050px) {
  html.home-story-page { scroll-snap-type: y proximity; }
  .story-progress { display: none; }
  .story-chapter { min-height: 100dvh; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
  .story-shell--split { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .story-copy h1 { font-size: clamp(3.4rem, 7.6vw, 5.5rem); }
  .story-copy h2 { font-size: clamp(2.8rem, 6.2vw, 4.5rem); }
  .capability-node:nth-child(5) { left: 12%; }
}

@media (max-width: 760px) {
  html.home-story-page { scroll-snap-type: none; }
  body.home-story .header-shell { position: fixed; }
  .story-stage { position: fixed; inset: 0; margin: 0; }
  .story-vignette { background: linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.72) 48%, #000 100%); }
  .story-chapter { min-height: 100svh; padding: 7.25rem 1.25rem 4rem; scroll-snap-align: none; }
  .story-chapter::after { left: 1.25rem; right: 1.25rem; }
  .story-shell--split { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh - 11.25rem); }
  .story-shell--reverse { flex-direction: column; }
  .story-visual-space { order: -1; min-height: 35vh; width: 100%; }
  .story-copy, .story-copy--right { grid-column: auto; justify-self: auto; max-width: 100%; }
  .story-copy h1 { max-width: 13.6ch; font-size: clamp(3.2rem, 14vw, 5rem); }
  .story-copy h2 { max-width: 16ch; font-size: clamp(2.65rem, 11vw, 4rem); }
  .story-lede { font-size: 1rem; }
  .story-actions { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .story-proof { margin-top: 2.25rem; line-height: 1.8; }
  .story-scroll-cue { display: none; }
  .story-shell--capabilities { min-height: calc(100svh - 11rem); display: flex; flex-direction: column; }
  .story-shell--capabilities .story-copy { position: relative; }
  .capability-system { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: auto; padding-top: 32vh; }
  .capability-node, .capability-node:nth-child(n) { position: relative; inset: auto; width: auto; min-height: 4.5rem; }
  .capability-node:last-child { grid-column: 1 / -1; }
  .capability-link { position: relative; margin-top: 1.5rem; }
  .story-shell--process { min-height: calc(100svh - 11rem); }
  .process-track { grid-template-columns: 1fr; gap: 0; padding-top: 2rem; }
  .process-track::before { top: 2rem; bottom: 1rem; left: .5rem; right: auto; width: 1px; height: auto; }
  .process-track::after { display: none; }
  .process-track button { grid-template-columns: 1.25rem 2rem 1fr; align-items: center; justify-items: start; padding: .6rem 0; }
  .process-track button::before { grid-column: 1; grid-row: 1; margin: 0; width: .75rem; height: .75rem; }
  .process-track span { grid-column: 2; grid-row: 1; }
  .process-track b { grid-column: 3; grid-row: 1; }
  .process-track small { display: none; }
  .process-output { align-self: start; margin: 1.5rem 0 0 3.25rem; }
  .story-shell--trust { grid-template-columns: 1fr; gap: 2rem; }
  .trust-metrics { grid-template-columns: 1fr 1fr; }
  .trust-metrics div { min-height: 6.3rem; }
  .partner-constellation { grid-template-columns: repeat(4, 1fr); }
  .partner-constellation img { height: 4rem; padding: 1rem .6rem; }
  .story-copy--center h2 { font-size: clamp(3.1rem, 14vw, 5rem); }
  .story-contact { margin-top: 2.5rem; }
}

@media (max-width: 430px) {
  .story-chapter { padding-top: 6.5rem; }
  .story-copy h1 { font-size: clamp(3rem, 13.5vw, 4rem); }
  .story-copy h2 { font-size: clamp(2.45rem, 10.5vw, 3.35rem); }
  .story-options button { padding-block: .8rem; }
  .capability-system { padding-top: 24vh; }
  .capability-node { min-height: 4rem; padding: .75rem; }
  .capability-node small { margin-top: .4rem; }
  .starting-paths { flex-direction: column; width: 100%; }
  .starting-paths button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html.home-story-page { scroll-snap-type: none; scroll-behavior: auto; }
  .story-scroll-cue i, .process-track::after { animation: none; }
  .story-main *, .story-main *::before, .story-main *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   XATERN SIGNAL EDITORIAL
   An authored homepage layer: irregular composition, transmission rails,
   expanding systems and tactile delivery cards replace generic UI cards.
   ============================================================ */
body.home-story {
  --story-display: var(--font-display);
  --story-body: var(--font);
  font-family: var(--story-body);
}

.story-main {
  background:
    radial-gradient(ellipse at 74% 11%, rgba(255, 82, 0, .085), transparent 31%),
    linear-gradient(112deg, #000 0 46%, #030201 70%, #000 100%);
}

.story-main::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 100% 11.111vh, 8.333vw 100%;
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 80%, transparent);
}

.story-copy h1,
.story-copy h2,
.trust-metrics strong {
  font-family: var(--story-display);
  letter-spacing: -0.052em;
}

.story-copy h1 {
  max-width: min(10.6ch, 100%);
  font-size: clamp(3.7rem, 6.05vw, 6.65rem);
  line-height: .88;
}

.story-copy h2 {
  max-width: 18ch;
  font-size: clamp(3rem, 4.75vw, 5.35rem);
  line-height: .91;
}

.story-copy--hero::before {
  content: ">";
  position: absolute;
  z-index: -1;
  top: -1.02em;
  left: -.28em;
  color: transparent;
  font: 800 clamp(13rem, 30vw, 34rem)/.8 var(--story-display);
  -webkit-text-stroke: 1px rgba(202, 77, 0,.12);
  transform: rotate(-5deg);
}

.story-lede {
  font-family: var(--story-body);
  font-weight: 500;
  letter-spacing: -.012em;
}

.story-lede .taste-word {
  opacity: .16;
  transition: opacity .18s linear;
}

.story-button,
.story-link,
.capability-link,
.story-options button,
.capability-node,
.process-track button,
.starting-paths button,
.story-progress span,
.story-contact {
  font-family: var(--story-body);
}

.story-button,
.story-link {
  position: relative;
  overflow: hidden;
  border-radius:var(--r-btn);
}

.story-button::before,
.story-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22), transparent 65%);
  transform: translateX(-130%);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

.story-button:hover::before,
.story-link:hover::before { transform: translateX(130%); }

.story-proof--rail {
  position: absolute;
  z-index: 3;
  left: clamp(1.25rem, 5vw, 4.5rem);
  bottom: 1.85rem;
  width: min(52rem, 72vw);
  margin: 0;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.13);
}

.story-scroll-cue { left: auto; right: clamp(1.25rem, 8vw, 8rem); transform: none; }

.story-progress { right: clamp(.8rem, 1.8vw, 1.8rem); }
.story-progress a { grid-template-columns: 1.35rem 1.85rem; }
.story-progress span { font-family: var(--story-body); }
.story-progress a::after {
  content: attr(aria-label);
  position: absolute;
  right: 3.8rem;
  padding: .45rem .6rem;
  color: rgba(255,255,255,.75);
  background: #080706;
  border: 1px solid rgba(255,255,255,.12);
  font: 600 .6rem/1 var(--story-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(.4rem);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.story-progress a:hover::after,
.story-progress a:focus-visible::after { opacity: 1; transform: none; }

/* Intent becomes a full-width expanding decision instrument. */
.story-shell--intent {
  min-height: min(72vh, 46rem);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(2.5rem, 6vh, 5rem);
}

.story-shell--intent .story-copy { max-width: 67rem; }
.story-shell--intent .story-copy h2 { max-width: 18.6ch; }
.story-shell--intent .story-lede { margin-top: 1.15rem; }
.intent-stage { align-self: end; }
.story-options--goals {
  display: flex;
  align-items: stretch;
  min-height: clamp(13rem, 28vh, 18rem);
  margin: 0;
  border-top: 1px solid var(--story-hairline);
  border-bottom: 1px solid var(--story-hairline);
}

.story-options--goals button {
  position: relative;
  flex: 1 1 0;
  width: auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  align-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 1.2rem 1.3rem;
  border: 0;
  border-right: 1px solid var(--story-hairline);
  overflow: hidden;
  transition: flex .65s cubic-bezier(.2,.75,.15,1), color .3s ease, background .3s ease, padding .3s ease;
}

.story-options--goals button:last-child { border-right: 0; }
.story-options--goals button::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--story-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.story-options--goals button::after {
  align-self: end;
  border-radius:var(--r-btn);
  transform: rotate(45deg);
}
.story-options--goals button span { font-family: var(--story-body); }
.story-options--goals button b {
  align-self: end;
  max-width: 12.3ch;
  font: 700 clamp(1.2rem, 2vw, 2rem)/1.02 var(--story-display);
  letter-spacing: -0.028em;
}
.story-options--goals button:hover,
.story-options--goals button[aria-pressed="true"] {
  flex: 2.15 1 0;
  padding: 1.15rem 1.55rem 1.3rem;
  color: #fff;
  background: linear-gradient(155deg, rgba(202, 77, 0,.14), rgba(202, 77, 0,.015));
}
.story-options--goals button[aria-pressed="true"]::before { transform: scaleX(1); }

/* Capabilities form one continuous instrument instead of floating cards. */
.type-window {
  display: inline-grid;
  width: 1.25em;
  height: .52em;
  margin: 0 .08em;
  vertical-align: .08em;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(202, 77, 0,.5);
  background: rgba(202, 77, 0,.08);
  border-radius: 999px;
}
.type-window img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.1); }
.story-shell--capabilities { min-height: min(74vh, 47rem); }
.story-shell--capabilities .story-copy { max-width: 72rem; }
.capability-system {
  top: auto;
  bottom: 3.7rem;
  height: clamp(15rem, 34vh, 21rem);
  display: flex;
  align-items: stretch;
  border-block: 1px solid var(--story-hairline);
  overflow: hidden;
}
.capability-node,
.capability-node:nth-child(n) {
  position: relative;
  inset: auto;
  flex: .72 1 0;
  width: auto;
  min-height: 0;
  padding: 1.35rem;
  border: 0;
  border-right: 1px solid var(--story-hairline);
  background: rgba(2,2,2,.48);
  overflow: hidden;
  transform: none;
  transition: flex .72s cubic-bezier(.18,.8,.16,1), background .35s ease, color .3s ease;
}
.capability-node:last-child { border-right: 0; }
.capability-node::before {
  content: ">";
  position: absolute;
  right: -.08em;
  bottom: -.3em;
  color: transparent;
  font: 800 clamp(7rem, 14vw, 13rem)/1 var(--story-display);
  -webkit-text-stroke: 1px rgba(255,255,255,.07);
}
.capability-node span {
  position: absolute;
  left: 1.25rem;
  bottom: 1.35rem;
  max-width: 9.9ch;
  font: 700 clamp(1rem, 1.55vw, 1.5rem)/1.02 var(--story-display);
  letter-spacing: -0.028em;
}
.capability-node small { margin: 0; font-family: var(--story-body); }
.capability-node:hover,
.capability-node.is-active {
  flex: 2.25 1 0;
  transform: none;
  background: linear-gradient(145deg, rgba(202, 77, 0,.17), rgba(202, 77, 0,.025));
  box-shadow: inset 0 -3px var(--story-orange);
}
.capability-node.is-active::before { -webkit-text-stroke-color: rgba(202, 77, 0,.26); }

/* The delivery system becomes a tactile card stack with visible edges. */
.story-shell--process {
  min-height: min(72vh, 46rem);
  display: grid;
  grid-template-columns: minmax(19rem, .82fr) minmax(31rem, 1.18fr);
  grid-template-rows: 1fr auto;
  gap: 2rem clamp(3rem, 8vw, 8rem);
  align-items: center;
}
.story-shell--process .story-copy { grid-column: 1; align-self: center; }
.process-track {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: grid;
  grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: .6rem;
  height: min(52vh, 27rem);
  margin: 0;
  padding: 0;
}
.process-track::before,
.process-track::after { display: none; }
.process-track button {
  grid-area: auto;
  align-self: stretch;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1.2rem 1.5rem;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(5,5,5,.94);
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.52);
  backdrop-filter: blur(18px);
  transform-origin: 50% 100%;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background .3s ease;
}
.process-track button:nth-child(1) { transform: rotate(-1.1deg) translate(.2rem, .25rem); }
.process-track button:nth-child(2) { transform: rotate(.8deg) translate(-.15rem, .5rem); }
.process-track button:nth-child(3) { transform: rotate(.65deg) translate(.4rem, -.2rem); }
.process-track button:nth-child(4) { transform: rotate(-.8deg) translate(-.3rem, -.1rem); }
.process-track button:hover { z-index: 8; transform: translateY(-.3rem) rotate(0deg); }
.process-track button.is-active {
  z-index: 10;
  transform: translateY(-.18rem) rotate(0deg);
  border-color: var(--story-orange);
  background: linear-gradient(145deg, rgba(38,14,2,.97), rgba(5,5,5,.98));
}
.process-track button::before {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  border-radius:var(--r-btn);
  transform: rotate(45deg);
}
.process-track span { grid-column: 1; grid-row: 1; font-family: var(--story-body); }
.process-track b {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  font: 700 clamp(2.1rem, 4vw, 4rem)/.95 var(--story-display);
  letter-spacing: -0.044em;
}
.process-track small { grid-column: 1 / -1; grid-row: 3; font-family: var(--story-body); }
.process-output { grid-column: 1; align-self: end; margin: 0; }

/* Reliability is a data ledger followed by a continuous partner signal. */
.story-shell--trust { grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 5vw, 6rem); }
.story-shell--trust .story-copy { grid-column: 1; }
.trust-metrics { grid-column: 2; grid-row: 1; }
.partner-constellation {
  grid-column: 1 / -1;
  display: flex;
  width: 100%;
  overflow: hidden;
  gap: 0;
  background: transparent;
  border-inline: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partner-run {
  flex: 0 0 auto;
  display: flex;
  min-width: max-content;
  animation: partnerSignal 28s linear infinite;
}
.partner-run img {
  flex: 0 0 clamp(9rem, 12vw, 12rem);
  width: clamp(9rem, 12vw, 12rem);
  height: 5.5rem;
  padding: 1.7rem 2rem;
  border-right: 1px solid var(--story-hairline);
  background: rgba(4,4,4,.78);
  filter: none;
  opacity: .48;
}
.partner-run img:hover { filter: none; opacity: .9; background: rgba(202, 77, 0,.045); }
@keyframes partnerSignal { to { transform: translateX(-100%); } }

/* The final choices behave like a decisive editorial index, not pills. */
.starting-paths {
  width: min(100%, 58rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 0;
  border-block: 1px solid var(--story-hairline);
}
.starting-paths button {
  min-height: 5.7rem;
  padding: 1rem 1.25rem;
  border: 0;
  border-right: 1px solid var(--story-hairline);
  border-radius:var(--r-btn);
  background: transparent;
  font: 700 clamp(.86rem, 1.2vw, 1.05rem)/1.15 var(--story-display);
  letter-spacing: -0.029em;
}
.starting-paths button:last-child { border-right: 0; }
.starting-paths button.is-active {
  background: linear-gradient(180deg, rgba(202, 77, 0,.17), rgba(202, 77, 0,.035));
  box-shadow: inset 0 -3px var(--story-orange);
}

@media (max-width: 1050px) {
  .story-shell--process { grid-template-columns: .8fr 1.2fr; gap: 2rem; }
  .capability-node span { font-size: 1rem; }
}

@media (max-width: 760px) {
  .story-main::after { background-size: 100% 12.5vh, 25vw 100%; opacity: .1; }
  .story-copy h1 { max-width: 13ch; font-size: clamp(3.05rem, 13vw, 4.25rem); }
  .story-copy h2 { max-width: 16ch; }
  .story-proof--rail { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 2.2rem; }
  .story-scroll-cue { display: none; }
  .story-shell--intent { min-height: calc(100svh - 11rem); gap: 2.5rem; }
  .story-options--goals { min-height: 23rem; }
  .story-options--goals button { padding-inline: .65rem; }
  .story-options--goals button:hover,
  .story-options--goals button[aria-pressed="true"] { flex: 2.7 1 0; padding-inline: 1rem; }
  .story-options--goals button b { font-size: clamp(.9rem, 4vw, 1.2rem); writing-mode: vertical-rl; transform: rotate(180deg); }
  .capability-system { padding-top: 0; height: 25rem; display: flex; gap: 0; }
  .capability-node,
  .capability-node:nth-child(n) { min-width: 0; padding: .8rem; }
  .capability-node span { left: .75rem; bottom: .9rem; font-size: .86rem; writing-mode: vertical-rl; transform: rotate(180deg); }
  .capability-node small { font-size: .5rem; writing-mode: vertical-rl; transform: rotate(180deg); }
  .capability-node:hover,
  .capability-node.is-active { flex: 2.8 1 0; }
  .capability-link { margin-top: 1rem; }
  .story-shell--process { min-height: calc(100svh - 11rem); display: flex; gap: 2.5rem; }
  .process-track { width: 100%; height: 22rem; }
  .process-track button { min-height: 9rem; padding: 1rem; }
  .process-track button:nth-child(1) { transform: rotate(-1deg); }
  .process-track button:nth-child(2) { transform: rotate(.7deg); }
  .process-track button:nth-child(3) { transform: rotate(.5deg); }
  .process-track button:nth-child(4) { transform: rotate(-.7deg); }
  .process-track button.is-active { transform: translateY(-.12rem) rotate(0); }
  .process-track b { font-size: clamp(1.45rem, 7vw, 2.15rem); }
  .process-output { margin: 0; }
  .story-shell--trust { display: grid; grid-template-columns: 1fr; }
  .story-shell--trust .story-copy,
  .trust-metrics,
  .partner-constellation { grid-column: 1; grid-row: auto; }
  .partner-run img { flex-basis: 8rem; width: 8rem; height: 4.4rem; padding: 1.3rem; }
  .starting-paths { grid-template-columns: 1fr; }
  .starting-paths button { min-height: 3.8rem; border-right: 0; border-bottom: 1px solid var(--story-hairline); }
  .starting-paths button:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .story-lede .taste-word { opacity: 1; }
  .partner-constellation { overflow-x: auto; mask-image: none; }
  .partner-run { animation: none; }
  .partner-run[aria-hidden="true"] { display: none; }
}

[data-theme="dark"] {
  --surface: #121212;
  --surface-elevated: #1c1c1c;
  --surface-muted: #181818;
  --surface-tag: #2a2a2a;
  --text: #f5f5f5;
  --text-muted: rgba(245, 245, 245, 0.62);
  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.08);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 16px 48px rgba(202, 77, 0, 0.22);
  --nav-glass: rgba(10, 10, 10, 0.9);
  --nav-glass-border: rgba(255, 255, 255, 0.1);
  --nav-glass-hover: rgba(10, 10, 10, 0.97);
  --nav-link-hover: rgba(255, 255, 255, 0.08);
  --nav-fg: #f5f5f5;
  --nav-fg-muted: rgba(245, 245, 245, 0.65);
  color-scheme: dark;
}

[data-theme="dark"] .brand-logo {
  opacity: 1;
}

[data-theme="dark"] .section-dark {
  background: #0a0a0a;
}

[data-theme="dark"] .pipeline-nodes {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(202, 77, 0, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(202, 77, 0, 0.15) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.skip-link,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot field on the enquiry forms. Positioned off-screen rather than
   display:none, because some bots skip fields they can tell are hidden and the
   point is that they fill this one in. Paired with aria-hidden and
   tabindex="-1" in the markup, so neither a screen reader nor the tab order
   ever reaches it. */
.qf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.skip-link:focus {
  left: 18px;
  top: 18px;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 14px;
  overflow: visible;
  clip: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

/* Header — floating glass pill */
.header-shell {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px clamp(16px, 4vw, 28px) 0;
  pointer-events: none;
}

.header-shell .site-header {
  pointer-events: auto;
}

.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: min(90%, var(--max-width));
  margin: 0 auto;
  padding: 9px 16px 9px 10px;
  border-radius: 9999px;
  background: var(--nav-glass);
  border: 1px solid var(--nav-glass-border);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.site-header.is-scrolled {
  background: var(--nav-glass-hover);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

/* The .theme-toggle button and its crossfading sun/moon icons were styled here.
   No page has ever contained the markup — layout.js builds the header and emits no
   such control — so this was 46 lines dressing a button nobody could press. */
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--nav-fg);
  padding-left: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.brand-logo {
  height: 38px;
  width: auto;
  max-width: 230px;
  object-fit: contain;
  display: block;
}

.site-header .brand-logo {
  height: 25px;
}

.brand-text {
  display: none;
  font-family: var(--logo-font);
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: none;
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
}

.brand-text-accent {
  color: var(--primary);
  text-shadow: 0 0 18px rgba(202, 77, 0, 0.24);
}

@media (min-width: 720px) {
  .brand-text {
    display: inline;
  }
}

.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 4px;
}

.main-nav a {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--nav-fg-muted);
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}

.main-nav a:hover {
  color: var(--nav-fg);
  background: var(--nav-link-hover);
}

.main-nav a.is-active {
  color: var(--primary);
  font-weight: 600;
  background: rgba(202, 77, 0, 0.1);
}

.nav-cta {
  /* It is a <button>: kill the UA default `2px outset` border and Arial
     font, which showed as a grey ring around the pill. */
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
  padding: 10px 19px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  line-height: 1;
  border-radius: 999px;
  /* restrained glow — was 0 4px 16px / .35, which read as a halo */
  box-shadow: 0 2px 8px rgba(202, 77, 0, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.nav-cta:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(202, 77, 0, 0.28);
}
.nav-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--nav-glass-border);
  border-radius: 50%;
  background: var(--nav-link-hover);
  color: var(--nav-fg);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.menu-toggle:hover {
  border-color: rgba(202, 77, 0, 0.4);
  background: rgba(202, 77, 0, 0.1);
}

.menu-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header.is-open .menu-bar:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .menu-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.is-open .menu-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Sections */
.section {
  padding: clamp(64px, 10vw, 112px) clamp(18px, 5vw, 32px);
}

.section-light {
  background: var(--surface);
  color: var(--text);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.section-dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.section-heading {
  max-width: 720px;
  margin-bottom: 48px;
}

.section-heading--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-heading p {
  color: var(--text-muted);
  line-height: 1.75;
}

/* Headings carry the display face. Most heading rules across the sheet only
   set size/weight/tracking and inherit the family from here, so this is the
   single hand-off point between Inter (text) and Roboto (titles). */
h1,
h2,
h3,
h4 {
  font-family: var(--fd);
}

h1,
h2,
h3 {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  max-width: 17.3ch;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.029em;
}

h2 {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.029em;
}

h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 16px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow--muted {
  color: var(--text-muted);
}

/* Hero */
.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
  width: 100%;
}

.hero-copy {
  margin: 20px 0 0;
  max-width: 540px;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-visual {
  position: relative;
  min-height: 320px;
}

.hero-pipeline {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
}

.pipeline-nodes {
  position: absolute;
  inset: -20px;
  background-image: radial-gradient(circle at 20% 30%, rgba(202, 77, 0, 0.15) 2px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(202, 77, 0, 0.12) 2px, transparent 2px),
    linear-gradient(rgba(18, 18, 18, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.06) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px;
  border-radius: 8px;
  z-index: 0;
}

.pipeline-browser {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-dark);
  box-shadow: var(--shadow), 0 24px 60px rgba(0, 0, 0, 0.2);
}

.browser-chrome {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.browser-chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.browser-chrome span:first-child {
  background: #ff5f57;
}

.browser-chrome span:nth-child(2) {
  background: #febc2e;
}

.browser-chrome span:nth-child(3) {
  background: #28c840;
}

.browser-body {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  min-height: 220px;
}

.code-stream {
  padding: 16px;
  font-family: ui-monospace, monospace;
  font-size: 0.65rem;
  line-height: 1.5;
  color: #7ee787;
  background: #000000;
  overflow: hidden;
}

.code-stream .line {
  opacity: 0;
  animation: codeFade 0.4s ease forwards;
}

@keyframes codeFade {
  to {
    opacity: 1;
  }
}

.dashboard-preview {
  padding: 16px;
  background: #0a0a0a;
}

.dash-bar {
  height: 8px;
  width: 60%;
  margin-bottom: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), rgba(202, 77, 0, 0.4));
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dash-grid span {
  height: 48px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dash-grid span:first-child {
  grid-column: 1 / -1;
  height: 56px;
  background: rgba(202, 77, 0, 0.12);
  border-color: rgba(202, 77, 0, 0.25);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  border: 1.5px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(202, 77, 0, 0.35);
}

.button.primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 8px 24px rgba(202, 77, 0, 0.4);
}

.button.outline {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}

.button.outline:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.section-dark .button.outline {
  color: var(--text-on-dark);
  border-color: rgba(245, 245, 245, 0.5);
}

.section-dark .button.outline:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.button-submit {
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.button-submit:active {
  transform: scale(0.98);
}

/* Services */
#solutions {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 40px;
}

.services-intro .section-heading {
  margin-bottom: 40px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.service-card {
  position: relative;
  padding: 28px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius:var(--r-card);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.service-grid--active .service-card:hover {
  border-color: rgba(202, 77, 0, 0.4);
  box-shadow: var(--shadow-hover);
}

.card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  color: var(--primary);
}

.card-icon svg {
  width: 32px;
  height: 32px;
}

.service-card p {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-tag);
  border-radius: 2px;
}

.pipeline-label {
  margin: 56px 0 20px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.service-grid--pipeline .service-card--soon {
  opacity: 0.68;
  pointer-events: none;
  user-select: none;
}

.soon-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px solid rgba(202, 77, 0, 0.4);
  border-radius: 999px;
}

/* Solutions */
#solutions {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 40px;
}

.solutions-layout {
  display: grid;
  grid-template-columns: minmax(200px, 0.35fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 64px);
  align-items: start;
}

.solutions-lead {
  color: var(--text-muted-on-dark);
  font-size: 0.95rem;
  line-height: 1.7;
}

.scale-tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.scale-tabs button {
  padding: 12px 16px;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted-on-dark);
  background: transparent;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.scale-tabs button:hover,
.scale-tabs button[aria-selected="true"] {
  color: var(--primary);
  border-left-color: var(--primary);
  background: rgba(202, 77, 0, 0.08);
}

.scale-panel h3 {
  color: var(--text-on-dark);
  font-size: 1.5rem;
}

.scale-panel p {
  color: var(--text-muted-on-dark);
  line-height: 1.8;
  max-width: 640px;
}

.scale-panel:not(.is-active) {
  display: none;
}

.verticals-block {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.verticals-overview {
  color: var(--text-muted-on-dark);
  line-height: 1.75;
  margin-bottom: 24px;
}

.verticals-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.verticals-list li {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted-on-dark);
  line-height: 1.7;
  font-size: 0.95rem;
}

.verticals-list li strong {
  color: var(--text-on-dark);
}

/* Portfolio */
.portfolio-section {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.portfolio-wireframe {
  padding: 32px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  text-align: left;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.portfolio-status {
  margin: 0 0 24px;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--primary);
}

.portfolio-frame {
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
}

.portfolio-diagram {
  margin-bottom: 24px;
  color: var(--text-muted);
}

.portfolio-diagram svg {
  width: 100%;
  max-height: 120px;
}

.portfolio-meta {
  display: grid;
  gap: 16px;
  margin: 0;
}

.portfolio-meta div {
  display: grid;
  gap: 4px;
}

.portfolio-meta dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.portfolio-meta dd {
  margin: 0;
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
}

.portfolio-notice {
  margin: 20px 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.portfolio-cta-text {
  max-width: 560px;
  margin: 40px auto 16px;
  color: var(--text-muted);
  line-height: 1.75;
}

.text-link {
  font-weight: 700;
  color: var(--primary);
  transition: color 0.18s ease;
}

.text-link:hover {
  color: var(--primary-hover);
}

/* Pricing */
.pricing-section {
  max-width: var(--max-width);
  margin: 0 auto;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.pricing-card--featured {
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-hover);
}

.pricing-sub {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pricing-price {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.5;
}

.pricing-price strong {
  font-size: 1.35rem;
  color: var(--primary);
}

.pricing-mechanics {
  margin: 0 0 20px;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.pricing-card ul {
  flex: 1;
  margin: 0 0 28px;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.pricing-card .button {
  margin-top: auto;
  width: 100%;
}

/* About */
.about-section {
  max-width: 820px;
  margin: 0 auto;
}

.about-section h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 32px;
}

.about-manifesto p {
  margin: 0 0 1.5em;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.85;
  color: var(--text-muted);
}

.about-manifesto p:last-child {
  margin-bottom: 0;
}

/* Contact */
.contact-section {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: start;
}

.contact-panel h2 {
  margin-bottom: 12px;
}

.contact-panel > p {
  color: var(--text-muted);
  line-height: 1.75;
}

.contact-details {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  font-weight: 600;
}

.contact-details a:hover {
  color: var(--primary);
}

.contact-form {
  display: grid;
  gap: 24px;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.contact-form fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

.contact-form legend {
  margin-bottom: 14px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

label {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-weight: 600;
}

.checkbox-label,
.radio-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  cursor: pointer;
}

.checkbox-label input,
.radio-label input {
  width: auto;
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.radio-hint {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-elevated);
  color: var(--text);
  outline: none;
  transition: border-color 0.18s ease, background-color 0.25s ease, color 0.25s ease;
}

input:focus,
textarea:focus {
  border-color: var(--primary);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.form-status {
  margin: 0;
  font-size: 0.9rem;
}

.form-status.is-success {
  color: #059669;
}

.form-status.is-error {
  color: #dc2626;
}

/* Footer */
.site-footer {
  background: #000;
  color: rgba(255, 255, 255, 0.55);
  padding: 48px clamp(18px, 5vw, 32px) 32px;
}

.footer-grid {
  /* A wrapping row, not a fixed track count. The columns come from the
     published footer payload, so there can be four of them or six; the old
     `repeat(4, 1fr) minmax(12rem, 1.15fr)` grid was five tracks whatever
     arrived, and a payload with fewer left the right-hand tracks standing
     empty — the footer sitting in the left half of the page. Flex items divide
     whatever row they are on, so the count no longer has to be known here.
     The brand still takes its own full-width row above them so the logo is not
     crowded against the first nav column. */
  display: flex;
  flex-wrap: wrap;
  gap: 30px clamp(20px,2.4vw,34px);
  max-width: var(--max-width);
  margin: 0 auto 40px;
}
/* 11rem is the width a link column wants before it starts hyphenating
   "Contracts"; past that they share the leftover space equally. */
.footer-col { flex: 1 1 11rem; min-width: 0; }
.footer-brand {
  flex: 1 1 100%;
  margin-bottom: 8px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

/* Column headings carry the accent; the links keep their existing tone. */
.footer-col h4 {
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

/* Solutions, Services and Industries head their own overview page, so the
   heading is the link — the type is deliberately unchanged from a plain
   heading's, because the column still has to read as a heading and not as a
   fourth kind of link. Only the underline on hover says it is clickable. */
.footer-col h4 .footer-col-head {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  text-underline-offset: .28em;
}
.footer-col h4 .footer-col-head:hover,
.footer-col h4 .footer-col-head:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.footer-col nav {
  display: grid;
  gap: 10px;
}

.footer-col a {
  font-size: 0.9rem;
  transition: color 0.18s ease;
}

.footer-col a:hover {
  color: var(--primary);
}

.site-footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.site-footer .brand-logo {
  height: 42px;
  filter: none;
  mix-blend-mode: normal;
}

.site-footer .brand-text {
  display: inline;
  font-size: 0.98rem;
}

.footer-tagline {
  margin: 14px 0 0;
  color: rgba(255,255,255,.38);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Contact rows: icon in a fixed gutter so the labels share a text edge. */
/* Wider than a link column: it carries an email address and two addresses. */
.footer-contact { flex: 1.15 1 13rem; display: grid; gap: 10px; align-content: start; }
.footer-contact-row {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
}
.footer-contact-row i { display: grid; place-items: center; color: var(--primary); }
.footer-contact-row i svg { width: 1.05rem; height: 1.05rem; }
.footer-contact-row span { min-width: 0; overflow-wrap: anywhere; }

.footer-offices { display: grid; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.footer-offices-title {
  margin: 0;
  color: var(--primary);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-office { display: grid; grid-template-columns: 1.15rem 1fr; align-items: start; gap: .6rem; }
.footer-office i { display: grid; place-items: center; height: 1.25rem; color: var(--primary); }
.footer-office i svg { width: 1.05rem; height: 1.05rem; }
.footer-office span { display: grid; gap: 1px; min-width: 0; }
.footer-office b { color: #fff; font-size: .86rem; font-weight: 700; }
.footer-office small { color: rgba(255,255,255,.45); font-size: .72rem; }

/* Cookie settings used to sit inside the contact column, reading like a way
   to contact us. It belongs with the legal links on the base row. */
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-copy { margin: 0; font-size: 0.85rem; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.footer-legal a, .footer-legal .footer-cookie-link { font-size: .82rem; }

/* Every width the footer answers to is set here, in one ladder. The link
   columns wrap on their own once they run out of room; these rules only say
   how wide a column asks to be first. `:not()` keeps the brand row and the
   contact block out of it — both set their own basis above, and a later
   single-class rule would otherwise outrank them. */
@media (max-width: 1150px) {
  /* The contact block takes its own row and lays out in three across. */
  .footer-contact { flex-basis: 100%; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px clamp(20px,2.4vw,36px); }
  .footer-contact h4 { grid-column: 1 / -1; }
  .footer-offices { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-offices-title { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .footer-col:not(.footer-brand):not(.footer-contact) { flex-basis: 40%; }
}

@media (max-width: 760px) {
  .footer-contact, .footer-offices { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; align-items: flex-start; }
  .footer-copy { order: 2; }
  /* Leave a real landing zone below the legal row. At the end of a long page
     both floating actions are visible, and without this clearance the upper
     WhatsApp button sits directly over Cookie Settings. */
  body:not(.market-home) .site-footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 600px) {
  .footer-col:not(.footer-brand):not(.footer-contact) { flex-basis: 100%; }
}

/* Shared inner pages */
.page-shell {
  min-height: 100svh;
  padding: 168px 24px 120px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.page-placeholder {
  width: min(720px, 100%);
  text-align: center;
  position: relative;
}

.page-placeholder::before,
.page-placeholder::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px solid var(--border);
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}

.page-placeholder::before {
  top: -120px;
  left: -160px;
}

.page-placeholder::after {
  right: -160px;
  bottom: -140px;
}

.page-kicker {
  margin: 0 0 18px;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(3.5rem, 11vw, 7rem);
  line-height: 0.9;
}

.page-title span {
  color: var(--primary);
}

.page-copy {
  max-width: 520px;
  margin: 28px auto 36px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

.page-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Floating actions */
.floating-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.float-button {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.float-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.float-button.whatsapp {
  background: #25d366;
  position: relative;
  overflow: visible;
}

.float-button.whatsapp::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0.4;
  animation: pulse-whatsapp 2s infinite;
}

@keyframes pulse-whatsapp {
  0% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

.float-button.to-top {
  background: var(--primary);
}

.float-button svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

/* Reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal-delay="1"] {
  transition-delay: 0.1s;
}

/* Responsive */
@media (max-width: 1200px) {
  .main-nav a {
    padding: 8px 10px;
    font-size: 0.75rem;
  }
}

@media (max-width: 1080px) {
  .header-shell {
    padding-top: 12px;
  }

  .site-header {
    grid-template-columns: 1fr auto auto;
    padding: 6px 8px 6px 12px;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .header-actions {
    display: flex;
    grid-column: 2;
    grid-row: 1;
  }

  .header-actions .nav-cta {
    display: none;
  }

  .menu-toggle {
    display: flex;
    grid-column: 3;
    grid-row: 1;
  }

  .main-nav {
    display: none;
  }

  .site-header.is-open {
    position: fixed;
    inset: 12px;
    z-index: 60;
    width: auto;
    max-width: none;
    height: auto;
    max-height: calc(100dvh - 24px);
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    padding: 20px 22px;
    align-content: start;
    overflow-y: auto;
    border-radius: 28px;
    background: var(--nav-glass-hover);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
  }

  .header-shell:has(.site-header.is-open) {
    z-index: 60;
  }

  .site-header.is-open .menu-toggle {
    grid-column: 2;
    grid-row: 1;
  }

  .site-header.is-open .main-nav,
  .site-header.is-open .header-actions {
    display: flex;
  }

  .site-header.is-open .header-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .site-header.is-open .header-actions .nav-cta {
    display: flex;
    justify-content: center;
    text-align: center;
  }

  .site-header.is-open .main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    margin-top: 24px;
    padding: 0;
    align-self: start;
  }

  .site-header.is-open .main-nav a {
    padding: 14px 16px;
    font-size: 1rem;
    border-radius: 16px;
  }

  .site-header.is-open .header-actions {
    margin-bottom: 24px;
    align-self: end;
  }

  .hero-layout,
  .solutions-layout,
  .contact-section,
  .service-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .hero-pipeline {
    margin: 0 auto;
  }
}

@media (max-width: 680px) {
  .service-grid--active,
  .service-grid--pipeline {
    grid-template-columns: 1fr;
  }

  .browser-body {
    grid-template-columns: 1fr;
  }

  .hero-actions .button {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* Imported landing sections */
:root {
  --o: var(--primary);
  --o-mid: rgba(202, 77, 0, 0.14);
  --o-soft: rgba(202, 77, 0, 0.07);
  --ink: #000000;
  --ink-2: #000000;
  --ink-3: rgba(255, 255, 255, 0.06);
  --mist: #f6f5f3;
  --rule: rgba(0, 0, 0, 0.08);
  --rule-inv: rgba(255, 255, 255, 0.07);
  --white: #ffffff;
  --dim: #777777;
  --dim-inv: rgba(255, 255, 255, 0.48);
  --nav-h: var(--header-height);
  --fd: var(--font-display);
  --fb: var(--font);
  --logo-font: var(--font-display);
  --r: 8px;

  /* ── Radius scale ──────────────────────────────────────────────────
     One place to tune how soft the site reads. Applied to cards, panels,
     buttons, inputs and rows; NOT to the instrument-panel pieces (the
     capability and sub-service rails, their corner brackets, and the tab
     segments with a clipped corner), which stay angular on purpose — that
     motif is what stops the pricing and catalogue selectors reading like
     every other SaaS page. Pills that are already fully round stay round. */
  --r-btn: 12px;      /* buttons, chips, small controls          */
  --r-card: 14px;     /* tier cards, panels, price rows, figures */
  --r-panel: 18px;    /* large surfaces: estimate band, modals   */
}

/* ─────────────────────────────────────────────
   UTILITY
───────────────────────────────────────────── */
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.eyebrow{
  font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:'';width:20px;height:1px;background:currentColor;flex-shrink:0}
.eyebrow.inv{color:var(--dim-inv)}
.eyebrow.orange{color:var(--o)}
.eyebrow.orange::before{background:var(--o)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */
#home{
  min-height:100svh;
  padding-top:var(--nav-h);
  display:grid;align-items:center;
  background:var(--ink);
  position:relative;overflow:hidden;
}
#hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:.5
}

.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(24px,3.5vw,48px);align-items:center;
  padding:80px 40px 80px;max-width:1240px;margin:0 auto;width:100%;
}
/* Kicker as a defined pill rather than a bare rule + text */
.hero-kicker{
  font-size:.66rem;font-weight:650;letter-spacing:.18em;text-transform:uppercase;
  color:var(--o);display:inline-flex;align-items:center;gap:9px;
  margin-bottom:26px;padding:7px 14px 7px 12px;
  border-radius:9999px;
  border:1px solid rgba(202, 77, 0,.28);
  background:rgba(202, 77, 0,.07);
}
.hero-kicker::before{
  content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--o);box-shadow:0 0 8px rgba(202, 77, 0,.9);
}
#home h1{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(2.7rem,4.9vw,4.5rem);
  line-height:1.02;letter-spacing:-0.036em;
  color:var(--white);margin-bottom:22px;
  text-wrap:balance;
  /* very slight vertical falloff keeps a 4-line display heading from
     looking like a flat block of white */
  background:linear-gradient(180deg,#fff 0%,#fff 58%,rgba(255,255,255,.82) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
#home h1 em{
  font-style:normal;
  -webkit-text-fill-color:var(--o);
  color:var(--o);
}
.hero-sub{
  font-size:1.02rem;font-weight:400;line-height:1.75;
  color:rgba(255,255,255,.62);max-width:46ch;margin-bottom:38px;
}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-fill{
  font-family:var(--fd);font-size:.76rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--white);background:var(--o);
  padding:13px 26px;border-radius:30px;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s,box-shadow .2s;
}
.btn-fill:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(202, 77, 0,.4)}
.btn-fill svg{transition:transform .2s}
.btn-fill:hover svg{transform:translateX(3px)}
.btn-ring{
  font-family:var(--fd);font-size:.76rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  padding:12px 26px;border-radius:30px;
  border:1px solid rgba(255,255,255,.18);cursor:pointer;background:none;
  transition:all .2s;
}
.btn-ring:hover{color:var(--white);border-color:rgba(255,255,255,.5)}

/* hero metrics — four discrete cards, not one divided strip.
   (Previously an outer bordered strip + border-right dividers, which then
   fought the per-card surface treatment and produced doubled borders.) */
.hero-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:50px;
  border:0;background:none;overflow:visible;
}
.hm{
  position:relative;
  padding:16px 16px 15px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--hairline);
  box-shadow:var(--lift-1);
  overflow:hidden;
  transition:border-color .22s ease,transform .22s ease,background .22s ease;
}
/* thin accent rule at the top of each card */
.hm::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--o),rgba(202, 77, 0,0));
  opacity:.75;
}
.hm:hover{
  transform:translateY(-2px);
  border-color:rgba(202, 77, 0,.32);
  background:linear-gradient(180deg,rgba(202, 77, 0,.08),rgba(255,255,255,.015));
}
.hm-val{
  font-family:var(--fd);font-weight:800;font-size:clamp(1.5rem,2.1vw,1.85rem);
  letter-spacing:-0.036em;color:var(--white);line-height:1;margin-bottom:7px;
  font-variant-numeric:tabular-nums;
}
.hm-val span{color:var(--o);font-size:.72em;letter-spacing:-.02em}
.hm-lbl{
  font-size:.64rem;font-weight:600;color:rgba(255,255,255,.5);
  letter-spacing:.13em;text-transform:uppercase;line-height:1.3;
}

/* hero right – terminal */
/* ── Hero globe (replaces the old terminal mock) ── */
.hero-globe{
  position:relative;
  display:grid;place-items:center;
  isolation:isolate;
  aspect-ratio:1/1;width:min(112%,660px);max-width:none;margin-inline:auto;
}
.hero-globe::before{
  content:'';position:absolute;inset:12%;z-index:-2;border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,166,102,.11),transparent 34%),
    radial-gradient(circle at 50% 58%,rgba(202, 77, 0,.13),rgba(202, 77, 0,.025) 57%,transparent 74%);
  filter:blur(22px);
}
.hero-globe::after{
  content:'';position:absolute;inset:15% 4%;z-index:-1;border-radius:50%;
  border:1px solid rgba(202, 77, 0,.13);
  box-shadow:0 0 36px rgba(202, 77, 0,.05);
  transform:rotate(-12deg) scaleY(.38);
}
#globe-canvas{
  display:block;width:100%;height:100%;z-index:1;
  filter:drop-shadow(0 34px 74px rgba(0,0,0,.58)) saturate(1.08) contrast(1.04);
}

.hero-terminal{
  background:#0a0a0a;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  box-shadow:0 60px 100px rgba(0,0,0,.5);
}
.term-bar{
  display:flex;align-items:center;gap:8px;
  padding:13px 18px;
  background:#000000;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.tdot{width:10px;height:10px;border-radius:50%}
.tdot.r{background:#ff5f57}.tdot.y{background:#febc2e}.tdot.g{background:#28c840}
.term-tab{
  font-size:.68rem;color:rgba(255,255,255,.25);
  margin-left:12px;letter-spacing:.04em;font-family:var(--fb);
}
.term-body{padding:22px 24px;font-family:'Courier New',monospace;font-size:.78rem;line-height:2}
.tc{color:rgba(255,255,255,.22)}.tk{color:#c792ea}.tf{color:#82aaff}
.ts{color:#c3e88d}.to{color:var(--o)}.tw{color:rgba(255,255,255,.75)}
.cursor{display:inline-block;width:7px;height:13px;background:var(--o);border-radius:1px;vertical-align:middle;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* mini dashboard */
.mini-dash{
  margin:4px 24px 22px;
  background:rgba(255,255,255,.04);
  border-radius:8px;
  padding:16px;
  border:1px solid rgba(255,255,255,.06);
}
.dash-row{display:flex;gap:10px;margin-bottom:14px}
.dkpi{
  flex:1;background:rgba(255,255,255,.04);border-radius:6px;
  padding:10px 12px;border:1px solid rgba(255,255,255,.05);
}
.dkpi-l{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.25);margin-bottom:4px;font-family:var(--fb)}
.dkpi-v{font-family:var(--fd);font-weight:800;font-size:1.1rem;color:var(--white)}
.dkpi-v.o{color:var(--o)}
.bar-row{margin-top:2px}
.bar-meta{display:flex;justify-content:space-between;font-size:.58rem;color:rgba(255,255,255,.2);margin-bottom:5px;font-family:var(--fb)}
.bar-track{height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.bar-fill{height:100%;background:var(--o);border-radius:2px;animation:grow 2s ease forwards}
@keyframes grow{from{width:0}}

/* ─────────────────────────────────────────────
   TICKER / MARQUEE
───────────────────────────────────────────── */
.ticker{
  background:var(--o);padding:12px 0;overflow:hidden;white-space:nowrap;
}
.ticker-inner{display:inline-flex;gap:0;animation:scroll 22s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.ticker-inner span{
  font-family:var(--fd);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--white);
  display:inline-flex;align-items:center;gap:48px;
}
.ticker-inner span::after{content:'·';opacity:.6}

/* ─────────────────────────────────────────────
   SERVICES
───────────────────────────────────────────── */
/* Legacy landing-page section. Scoped away from the homepage deck, which
   reuses the id: an ID selector outranks every .market-* class, so this was
   overriding the chapter's padding and background outright. */
body:not(.market-home) #services{padding:120px 0;background:var(--white)}
.services-head{
  display:grid;grid-template-columns:1fr 1fr;
  gap:40px;margin-bottom:72px;align-items:end;
}
.services-head h2{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(2rem,3.5vw,3rem);
  letter-spacing:-0.032em;line-height:1.1;color:var(--ink);
}
.services-head p{font-size:.95rem;font-weight:300;color:var(--dim);line-height:1.8;max-width:400px}

/* main cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-bottom:48px}
.svc-card{
  background:var(--white);padding:40px 36px;
  position:relative;overflow:hidden;
  transition:background .3s;cursor:default;
}
.svc-card:hover{background:var(--mist)}
.svc-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--o-soft) 0%,transparent 60%);
  opacity:0;transition:opacity .3s;
}
.svc-card:hover::after{opacity:1}
.svc-num{
  font-family:var(--fd);font-weight:800;font-size:3rem;
  color:rgba(0,0,0,.04);letter-spacing:-0.048em;
  position:absolute;top:20px;right:24px;line-height:1;
}
.svc-icon{
  width:44px;height:44px;color:var(--o);
  margin-bottom:24px;position:relative;z-index:1;
}
.svc-title{
  font-family:var(--fd);font-weight:700;font-size:1.05rem;
  letter-spacing:-0.029em;color:var(--ink);
  margin-bottom:12px;position:relative;z-index:1;
}
.svc-copy{font-size:.85rem;font-weight:300;color:var(--dim);line-height:1.75;margin-bottom:20px;position:relative;z-index:1}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.tag{
  font-size:.62rem;font-weight:500;letter-spacing:.04em;
  color:var(--o);background:var(--o-soft);
  padding:4px 10px;border-radius:30px;
}

/* pipeline */
.pipeline-head{
  display:flex;align-items:center;gap:16px;margin-bottom:28px;
}
.pipeline-head h3{font-family:var(--fd);font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.pipeline-head::after{content:'';flex:1;height:1px;background:var(--rule)}
.pipeline-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.p-card{
  border:1px solid var(--rule);padding:24px;border-radius:var(--r);
  opacity:.55;position:relative;
}
.p-pill{
  font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--o);border:1px solid rgba(202, 77, 0,.3);
  padding:3px 9px;border-radius:30px;display:inline-block;margin-bottom:12px;
}
.p-title{font-family:var(--fd);font-weight:700;font-size:.88rem;color:var(--ink);margin-bottom:8px}
.p-copy{font-size:.78rem;font-weight:300;color:var(--dim);line-height:1.65}

/* ─────────────────────────────────────────────
   SOLUTIONS
───────────────────────────────────────────── */
#solutions{
  background:var(--ink-2);
  padding:120px 0;
}
.sol-inner{
  display:grid;grid-template-columns:260px 1fr;gap:80px;align-items:start;
}
.sol-sticky{position:sticky;top:calc(var(--nav-h) + 32px)}
.sol-tabs{display:flex;flex-direction:column;gap:4px;margin-top:32px}
.sol-tab{
  font-family:var(--fd);font-weight:600;font-size:.85rem;
  color:var(--dim-inv);padding:12px 16px;border-radius:var(--r);
  cursor:pointer;transition:all .2s;border:none;background:none;text-align:left;
}
.sol-tab:hover{color:var(--white);background:rgba(255,255,255,.05)}
.sol-tab.on{color:var(--white);background:rgba(255,255,255,.08);border-left:2px solid var(--o);padding-left:14px}

.sol-panels{}
.sol-panel{display:none}
.sol-panel.on{display:block}
.sol-panel h3{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(1.8rem,3vw,2.6rem);
  letter-spacing:-0.032em;color:var(--white);
  margin:16px 0 16px;line-height:1.1;
}
.sol-panel p{font-size:.95rem;font-weight:300;color:var(--dim-inv);line-height:1.8;max-width:500px;margin-bottom:36px}
.sol-items{display:flex;flex-direction:column;gap:12px}
.sol-item{
  display:flex;gap:16px;align-items:flex-start;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r);padding:20px 22px;
  transition:border-color .2s;
}
.sol-item:hover{border-color:rgba(202, 77, 0,.25)}
.sol-ico{
  width:32px;height:32px;flex-shrink:0;
  background:var(--o-mid);border-radius:6px;
  display:flex;align-items:center;justify-content:center;color:var(--o);
}
.sol-item-title{font-family:var(--fd);font-weight:700;font-size:.88rem;color:var(--white);margin-bottom:4px}
.sol-item-copy{font-size:.8rem;font-weight:300;color:var(--dim-inv);line-height:1.65}

/* ─────────────────────────────────────────────
   PORTFOLIO
───────────────────────────────────────────── */
#portfolio{background:var(--mist);padding:120px 0}
.port-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:56px}
.port-head h2{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,3.5vw,3rem);letter-spacing:-0.032em;line-height:1.1;color:var(--ink)}
.port-head p{font-size:.88rem;font-weight:300;color:var(--dim);max-width:280px;line-height:1.7;text-align:right}

.port-frame{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:12px;overflow:hidden;
  box-shadow:0 4px 40px rgba(0,0,0,.06);
}
.port-bar{
  background:var(--ink);
  padding:14px 20px;
  display:flex;align-items:center;gap:10px;
}
.port-bar-txt{font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--o);font-family:var(--fb);margin-left:4px}

.port-body{display:grid;grid-template-columns:1fr 1fr}
.port-diagram{
  padding:48px;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--rule);
}
.port-info{padding:48px}
.port-info h3{font-family:var(--fd);font-weight:800;font-size:1.5rem;letter-spacing:-0.025em;margin-bottom:10px}
.port-info .desc{font-size:.85rem;font-weight:300;color:var(--dim);line-height:1.75;margin-bottom:28px}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}
.kpi-b{background:var(--mist);border-radius:var(--r);padding:16px}
.kpi-b .kl{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:6px;font-family:var(--fb)}
.kpi-b .kv{font-family:var(--fd);font-weight:800;font-size:1.4rem;letter-spacing:-0.025em;color:var(--ink)}
.kpi-b .kv.o{color:var(--o)}
.port-notice{font-size:.8rem;font-style:italic;color:var(--dim);line-height:1.7;background:var(--mist);border-radius:var(--r);padding:14px 16px;margin-bottom:20px}

/* ─────────────────────────────────────────────
   PRICING
───────────────────────────────────────────── */
#pricing{background:var(--white);padding:120px 0}
.price-head{text-align:center;margin-bottom:72px}
.price-head h2{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,3.5vw,3rem);letter-spacing:-0.032em;color:var(--ink);margin:12px 0 14px}
.price-head p{font-size:.95rem;font-weight:300;color:var(--dim);max-width:480px;margin:0 auto;line-height:1.8}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.p-tier{
  padding:44px 36px;border-right:1px solid var(--rule);
  position:relative;transition:background .25s;
}
.p-tier:last-child{border-right:none}
.p-tier:hover{background:var(--mist)}
.p-tier.feat{
  background:var(--ink);border-color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(202, 77, 0,.3);
}
.p-tier.feat:hover{background:#0a0a0a}
.feat-badge{
  position:absolute;top:0;right:24px;
  background:var(--o);color:var(--white);
  font-family:var(--fd);font-weight:700;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:0 0 6px 6px;
}
.p-tier-label{font-size:.65rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:16px;font-family:var(--fb)}
.p-tier.feat .p-tier-label{color:var(--dim-inv)}
.p-amount{font-family:var(--fd);font-weight:800;font-size:2.1rem;letter-spacing:-0.041em;color:var(--ink);margin-bottom:4px}
.p-tier.feat .p-amount{color:var(--white)}
.p-unit{font-size:.8rem;font-weight:400;color:var(--dim)}
.p-tier.feat .p-unit{color:var(--dim-inv)}
.p-desc{font-size:.82rem;font-weight:300;color:var(--dim);line-height:1.65;margin-bottom:28px;min-height:52px}
.p-tier.feat .p-desc{color:var(--dim-inv)}
.p-hr{height:1px;background:var(--rule);margin-bottom:24px}
.p-tier.feat .p-hr{background:rgba(255,255,255,.08)}
.p-feats{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:32px}
.p-feats li{font-size:.83rem;font-weight:300;color:var(--dim-2, #666);display:flex;gap:10px;align-items:flex-start;line-height:1.55}
.p-tier.feat .p-feats li{color:rgba(255,255,255,.55)}
.p-feats li::before{
  content:'';flex-shrink:0;width:16px;height:16px;margin-top:1px;border-radius:50%;
  background:var(--o-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2 2 4-4' stroke='%23CA4D00' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.p-btn-outline{
  width:100%;padding:13px;text-align:center;
  border:1px solid rgba(0,0,0,.15);border-radius:30px;
  font-family:var(--fd);font-weight:700;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);background:none;cursor:pointer;
  transition:all .2s;
}
.p-btn-outline:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.p-tier.feat .p-btn-outline{
  background:var(--o);color:var(--white);border-color:var(--o);
}
.p-tier.feat .p-btn-outline:hover{background:#e55800;box-shadow:0 8px 24px rgba(202, 77, 0,.35)}

/* ─────────────────────────────────────────────
   ABOUT
───────────────────────────────────────────── */
#about{background:var(--ink);padding:120px 0}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-l h2{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(2rem,4vw,3.2rem);
  letter-spacing:-0.032em;line-height:1.1;
  color:var(--white);margin:16px 0 36px;
}
.about-l h2 em{font-style:normal;color:var(--o)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.stat-b{
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r);padding:22px;
}
.stat-n{font-family:var(--fd);font-weight:800;font-size:2.2rem;letter-spacing:-0.041em;color:var(--o);line-height:1;margin-bottom:6px}
.stat-l{font-size:.72rem;font-weight:400;color:var(--dim-inv);text-transform:uppercase;letter-spacing:.06em}
.about-r p{font-size:.95rem;font-weight:300;color:var(--dim-inv);line-height:1.9;margin-bottom:20px}

/* ─────────────────────────────────────────────
   CONTACT
───────────────────────────────────────────── */
/* Legacy landing-page section — scoped away from the deck for the same
   reason as #services above. */
body:not(.market-home) #contact{background:var(--white);padding:120px 0}
.contact-inner{display:grid;grid-template-columns:2fr 3fr;gap:80px}
.contact-l h2{font-family:var(--fd);font-weight:800;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-0.032em;margin:12px 0 16px;line-height:1.1}
.contact-l>p{font-size:.88rem;font-weight:300;color:var(--dim);line-height:1.8;margin-bottom:40px}
#contact .contact-inner > .reveal h2{
  font-family:var(--fd);font-weight:800;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-0.032em;margin:12px 0 16px;line-height:1.1;color:var(--ink);
}
#contact .contact-inner > .reveal > p{font-size:.88rem;font-weight:300;color:var(--dim);line-height:1.8;margin-bottom:40px}
.c-detail{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start}
.c-ico{width:38px;height:38px;flex-shrink:0;background:var(--o-soft);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--o)}
.c-title{font-family:var(--fd);font-weight:700;font-size:.82rem;color:var(--ink);margin-bottom:3px}
.c-val{font-size:.8rem;font-weight:300;color:var(--dim)}

/* form */
.cform{background:var(--mist);border-radius:12px;padding:44px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.full{grid-column:1/-1}
.fg{display:flex;flex-direction:column;gap:6px}
.fg label{font-size:.65rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-family:var(--fb)}
/* `select` joined this list when the dial code moved into the phone field: it was
   the only control in a .fg that had never been styled, so it rendered as a
   native OS dropdown in the middle of a form of flat white boxes. */
.fg input,.fg textarea,.fg select{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
  padding:13px 15px;font-family:var(--fb);font-size:.85rem;color:var(--ink);
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--o);box-shadow:0 0 0 3px var(--o-soft)}
.fg textarea{resize:vertical;min-height:100px}
.fsec{font-family:var(--fd);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-top:6px;grid-column:1/-1}
.chk-row{display:flex;flex-direction:column;gap:9px}
.chk{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:.83rem;font-weight:300;color:var(--dim-2,#555);line-height:1.5}
.chk input[type="checkbox"]{display:none}
.chk-box{width:17px;height:17px;flex-shrink:0;border:1.5px solid var(--rule);border-radius:4px;background:var(--white);display:flex;align-items:center;justify-content:center;transition:all .2s;margin-top:1px}
.chk input:checked+.chk-box{background:var(--o);border-color:var(--o)}
.chk input:checked+.chk-box::after{content:'';width:9px;height:9px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M1.5 4.5l2 2 4-4' stroke='white' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.rad-row{display:flex;flex-direction:column;gap:9px}
.rad{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:.83rem;font-weight:300;color:var(--dim-2,#555)}
.rad input[type="radio"]{display:none}
.rad-dot{width:17px;height:17px;flex-shrink:0;border:1.5px solid var(--rule);border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;transition:border-color .2s}
.rad input:checked+.rad-dot{border-color:var(--o)}
.rad input:checked+.rad-dot::after{content:'';width:7px;height:7px;background:var(--o);border-radius:50%}
.btn-submit{
  width:100%;padding:15px;margin-top:24px;
  background:var(--ink);color:var(--white);border:none;cursor:pointer;border-radius:30px;
  font-family:var(--fd);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,transform .15s,box-shadow .2s;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.btn-submit:hover{background:var(--o);transform:translateY(-2px);box-shadow:0 12px 32px rgba(202, 77, 0,.35)}
.btn-submit:active{transform:scale(.98)}
.fg-fieldset{grid-column:1/-1;border:none;margin:0;padding:0;min-width:0}
.fg-fieldset .fsec{margin-top:0;padding:0}
.fsec-hint{font-family:var(--fb);font-weight:400;font-size:.62rem;letter-spacing:.04em;text-transform:none;color:var(--dim);margin-left:8px}
.field-error{display:block;margin-top:7px;font-family:var(--fb);font-size:.72rem;font-weight:500;color:#d64545;letter-spacing:.01em}
.field-error[hidden]{display:none}
.fg input.is-invalid,.fg textarea.is-invalid{border-color:#d64545;box-shadow:0 0 0 3px rgba(214,69,69,.14)}

.p-tier--managed {
  background: #f0f0f0;
}

.p-tier--managed:hover {
  background: #e9e9e9;
}

.p-tier--enterprise {
  background: var(--o);
  border-color: var(--o);
}

.p-tier--enterprise:hover {
  background: #ff751f;
}

.p-tier--enterprise .p-tier-label,
.p-tier--enterprise .p-amount,
.p-tier--enterprise .p-unit,
.p-tier--enterprise .p-desc,
.p-tier--enterprise .p-feats li {
  color: var(--ink);
}

.p-tier--enterprise .p-hr {
  background: rgba(0, 0, 0, 0.16);
}

.p-tier--enterprise .p-feats li::before {
  background-color: rgba(0, 0, 0, 0.12);
}

.p-tier--enterprise .p-btn-outline {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.p-tier--enterprise .p-btn-outline:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media(max-width:1024px){
    .hero-inner{grid-template-columns:minmax(0,1fr);padding:60px 24px 60px;text-align:center}
  .hero-kicker{justify-content:center}
  .hero-sub{margin-inline:auto}
  .btn-row{justify-content:center}
  .hero-terminal{display:none}
  /* keep the globe on tablet/mobile — it is the hero visual now, just smaller */
  .hero-globe{width:min(88vw,520px);order:-1}
  .hero-metrics{max-width:400px;margin-left:auto;margin-right:auto}
  .wrap{padding:0 24px}
  .services-head{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .pipeline-grid{grid-template-columns:1fr 1fr}
  .sol-inner{grid-template-columns:1fr;gap:40px}
  .sol-tabs{flex-direction:row;flex-wrap:wrap}
  .sol-sticky{position:static}
  .sol-tab.on{border-left:none;border-bottom:2px solid var(--o);padding-left:16px;padding-bottom:10px}
  .port-head{flex-direction:column;align-items:flex-start;gap:16px}
  .port-head p{text-align:left;max-width:none}
  .port-body{grid-template-columns:1fr}
  .port-diagram{border-right:none;border-bottom:1px solid var(--rule)}
  .price-grid{grid-template-columns:1fr;border:none;gap:16px}
  .p-tier{border:1px solid var(--rule)!important;border-radius:12px!important}
  .about-inner{grid-template-columns:1fr;gap:48px}
  .contact-inner{grid-template-columns:1fr;gap:48px}
  .fgrid{grid-template-columns:1fr}
  .cform{padding:28px 24px}
  .foot-inner{grid-template-columns:1fr 1fr}
  /* .footer-grid's own ladder lives with the footer block; it is a flex row
     now, so a grid-template-columns here would have been silently ignored. */
  .foot-bottom{flex-direction:column;gap:8px;text-align:center}
}
@media(max-width:600px){
  .hero-globe{width:100%;max-width:440px}
  .pipeline-grid{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr}
  /* 2x2 reads better than a single tall column on small screens */
  .hero-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   Mega-menu dropdowns (injected by layout.js)
   ============================================================ */
.main-nav { flex-wrap: nowrap; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.nav-chevron {
  width: 11px;
  height: 11px;
  opacity: 0.65;
  transition: transform 0.2s ease;
}
.nav-caret { display: none; }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 248px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 18px;
  background: var(--nav-glass-hover);
  border: 1px solid var(--nav-glass-border);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 70;
}
/* invisible bridge so the panel doesn't close in the hover gap */
.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}
.dropdown-panel a,
.dropdown-panel .is-soon {
  display: block;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--nav-fg-muted);
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.dropdown-panel a:hover {
  color: var(--primary);
  background: var(--nav-link-hover);
}
.dropdown-panel a.is-current {
  color: var(--primary);
  background: rgba(202, 77, 0, 0.12);
}
.dropdown-panel .is-soon {
  display: block;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0.5;
  font-style: italic;
  cursor: default;
  color: var(--nav-fg-muted);
}
.dd-viewall {
  margin-top: 4px;
  color: var(--primary) !important;
  font-weight: 700 !important;
}
.dd-viewall:hover { background: var(--nav-link-hover); }
.dd-arrow {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  margin-left: 2px;
}

/* Two-column mega panel for Solutions */
.dropdown-panel.mega {
  left: 0;
  right: auto;
  transform: translateX(0) translateY(8px);
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 4px 26px;
  width: min(680px, calc(100vw - 32px));
  min-width: 0;
  padding: 20px 24px;
}
.mega-col { display: flex; flex-direction: column; gap: 2px; }
.mega-col + .mega-col { border-left: 1px solid var(--nav-glass-border); padding-left: 16px; }
.mega-title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary);
  opacity: 0.85;
  padding: 4px 14px 10px;
}

@media (hover: hover) {
  .has-dropdown:hover > .dropdown-panel,
  .has-dropdown:focus-within > .dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .has-dropdown:hover > .nav-parent .nav-chevron,
  .has-dropdown:focus-within > .nav-parent .nav-chevron {
    transform: rotate(180deg);
  }
  .has-mega:hover > .dropdown-panel.mega,
  .has-mega:focus-within > .dropdown-panel.mega {
    transform: translateX(0) translateY(0);
  }
}

/* Mobile: dropdowns become accordions inside the fullscreen overlay */
@media (max-width: 1080px) {
  .site-header.is-open .nav-item {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .site-header.is-open .nav-parent {
    flex: 1;
    justify-content: space-between;
  }
  .site-header.is-open .has-dropdown > .nav-parent .nav-chevron { display: none; }
  .site-header.is-open .has-dropdown::after { display: none; }
  .site-header.is-open .has-dropdown {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .site-header.is-open .nav-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 4px;
    border: 1px solid var(--nav-glass-border);
    border-radius: 12px;
    background: var(--nav-link-hover);
    color: var(--nav-fg);
    cursor: pointer;
  }
  .site-header.is-open .nav-caret .nav-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.9;
  }
  .site-header.is-open .dropdown-panel {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    margin: 2px 0 6px;
    padding: 4px 0 4px 10px;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
  }
  .site-header.is-open .has-dropdown.is-expanded .dropdown-panel { display: flex; }
  .site-header.is-open .has-dropdown.is-expanded .dropdown-panel.mega { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .site-header.is-open .dropdown-panel.mega { min-width: 0; padding-left: 10px; }
  .site-header.is-open .mega-col + .mega-col { border-left: none; padding-left: 0; margin-top: 8px; }
  .site-header.is-open .has-dropdown.is-expanded .nav-caret .nav-chevron { transform: rotate(180deg); }
  .site-header.is-open .dropdown-panel a,
  .site-header.is-open .dropdown-panel .is-soon {
    font-size: 0.95rem;
    padding: 11px 14px;
  }
}

/* ============================================================
   Generic sub-page helpers (reused across the new pages)
   ============================================================ */
.page-head {
  padding: var(--subpage-head-pad-top) 0 var(--subpage-head-pad-bottom);
  /* transparent so the global particle canvas shows through on every page */
  background: transparent;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}
/* Same breadcrumb bar as the two hero variants, in the light-surface tone. */
.page-head .crumb {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 0 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
  letter-spacing: 0.01em;
}
.page-head .crumb a { color: var(--text-muted); }
.page-head .crumb a:hover { color: var(--primary); }
.page-head h1 {
  font-family: var(--fd, "Bricolage Grotesque", serif);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  letter-spacing: -0.032em;
  line-height: 1.05;
  margin: 14px 0 0;
  color: var(--text);
}
.page-head h1 em { font-style: normal; color: var(--primary); }
.page-lead {
  max-width: 640px;
  margin-top: 22px;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-muted);
}
.page-section { padding: var(--subpage-section-pad-y) 0; }
/* Alternating band removed — every section is transparent so the global
   particle field shows through uniformly. Class kept in the markup so the
   rhythm can be reintroduced from CSS alone if wanted. */
.page-section.alt { background: transparent; }
.section-title {
  font-family: var(--fd, "Bricolage Grotesque", serif);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 14px 0 0;
  color: var(--text);
}
/* CTA-only subpage sections use a tighter vertical rhythm than content grids. */
.page-section:has(> .wrap > .cta-band:only-child) {
  padding: var(--subpage-cta-section-pad-y) 0;
}

/* Keep imported homepage typography from leaking into shared subpages. */
.page-head,
.page-section {
  color: var(--text);
}
.page-section:not(.alt) { background: transparent; }
.page-section .eyebrow { color: var(--text-muted); }
.page-section .eyebrow.orange { color: var(--primary); }
.page-section :is(input, textarea, select) {
  color: var(--text);
  background-color: var(--surface-elevated);
  border-color: var(--border);
}
.page-section :is(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }
.section-intro {
  max-width: 600px;
  margin: 16px 0 40px;
  color: var(--text-muted);
  line-height: 1.7;
}
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.cta-band {
  margin: 0 auto;
  max-width: var(--max-width);
  padding: clamp(40px, 6vw, 64px);
  border-radius: 28px;
  /* transparent so the global animated background shows through the CTA box */
  background: transparent;
  border: 1px solid rgba(202, 77, 0, 0.28);
  color: #fff;
  text-align: center;
}
.cta-band h2 {
  font-family: var(--fd, "Bricolage Grotesque", serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.cta-band p {
  max-width: 520px;
  margin: 16px auto 28px;
  color: rgba(245, 245, 245, 0.7);
  line-height: 1.7;
}
.cta-band .btn-row { justify-content: center; }
.tag-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(202, 77, 0, 0.1);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 30px 28px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tile:hover {
  border-color: rgba(202, 77, 0, 0.32);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.tile .tile-ico {
  width: 42px;
  height: 42px;
  color: var(--primary);
  margin-bottom: 18px;
}
.tile h3 {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.029em;
  margin: 0 0 10px;
  color: var(--text);
}
.tile p {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
.tile .tile-price {
  font-family: var(--fd);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 4px 0 2px;
}
.tile .tile-price span {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
}
.tile .tile-foot { margin-top: auto; padding-top: 18px; }
.tile-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.tile-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.5;
}
.tile-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.85;
}
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid var(--border);
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-line:hover { border-color: var(--primary); color: var(--primary); }
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 36px;
}
[data-pricing-jumps] {
  justify-content: center;
  width: 100%;
}
.currency-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: -14px;
}
.currency-control label {
  display: inline;
  margin: 0;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}
.currency-control select {
  min-height: 42px;
  padding: 8px 38px 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-elevated);
  color: var(--text);
  font: 600 0.8rem/1 var(--font);
  cursor: pointer;
}
/* Scoped to the status line only. As a bare `.currency-control span` this
   also hit the picker's badge/code spans and stretched them to 100%. */
.currency-control > [data-currency-status] { width: 100%; color: var(--text-muted); font-size: 0.7rem; text-align: center; }
.chip {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.proj.hide { display: none; }
.anchor-offset {
  scroll-margin-top: 120px;
  border-top: 1px solid var(--border-soft);
}
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 40px;
}
.stat-strip .cell {
  background: var(--surface);
  padding: 28px 24px;
  text-align: center;
}
.stat-strip .cell .n {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.025em;
  color: var(--primary);
}
.stat-strip .cell .l {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
@media (max-width: 760px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
}

/* View All — trailing link at the end of each grid section */
.view-all-row { display: flex; justify-content: center; margin-top: 34px; }
.view-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary);
  padding: 10px 22px;
  border: 1px solid rgba(202, 77, 0, 0.3);
  border-radius: 999px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.view-all:hover { background: rgba(202, 77, 0, 0.1); border-color: var(--primary); }
.view-all svg { width: 14px; height: 14px; }

/* Products & Services catalogue */
.catalog-card .catalog-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 20px;
  color: var(--primary);
  font-size: 0.84rem;
  font-weight: 700;
}
.catalog-card .catalog-link svg { width: 14px; height: 14px; }
.tile > .tag-pill { align-self: flex-start; margin-bottom: 16px; }
.solution-overview-grid .tile { min-height: 320px; }
.card-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid rgba(202, 77, 0, 0.22);
  border-radius: 14px;
  background: rgba(202, 77, 0, 0.1);
  color: var(--primary);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease,
    box-shadow 0.22s ease, border-color 0.22s ease;
}
:is(a, .tile, .catalog-card):hover > .card-icon,
a:hover .card-icon {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(202, 77, 0, 0.42);
}

/* Theme contrast audit for the imported landing-page sections. Excluded from
   the homepage deck, which reuses #services and #contact and supplies its own
   surfaces — this rule was flattening both chapters to a flat black in dark
   mode and erasing the closing chapter's gradient. */
[data-theme="dark"] body:not(.market-home) :is(#services, #portfolio, #pricing, #contact) {
  --ink: var(--text);
  --ink-2: var(--surface-elevated);
  --ink-3: var(--surface-muted);
  --white: var(--surface-elevated);
  --mist: var(--surface-muted);
  --dim: var(--text-muted);
  --dim-2: var(--text-muted);
  --rule: var(--border);
  background: var(--surface);
  color: var(--text);
}
[data-theme="dark"] body:not(.market-home) :is(#services, #portfolio, #pricing) :is(h2, h3),
[data-theme="dark"] body:not(.market-home) #contact :is(h2, h3, .c-title, .fsec) { color: var(--text); }
[data-theme="dark"] :is(.svc-card, .port-frame, .p-tier, .fg input, .fg textarea, .fg select, .chk-box, .rad-dot) {
  background: var(--surface-elevated);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] :is(.svc-grid, .port-frame, .price-grid, .p-tier, .fg input, .fg textarea, .fg select) { border-color: var(--border); }
[data-theme="dark"] :is(.svc-card:hover, .p-tier:hover, .kpi-b, .port-notice, .cform) { background: var(--surface-muted); }
[data-theme="dark"] :is(.services-head p, .svc-copy, .pipeline-head h3, .p-copy, .port-head p, .port-info .desc, .kpi-b .kl, .port-notice, .price-head p, .p-tier-label, .p-unit, .p-desc, .p-feats li, .contact-l > p, #contact .contact-inner > .reveal > p, .c-val, .fg label, .chk, .rad) { color: var(--text-muted); }
[data-theme="dark"] :is(.svc-title, .p-title, .port-head h2, .kpi-b .kv, .price-head h2, .p-amount, .p-btn-outline, .contact-l h2, .c-title, .fsec, .fg input, .fg textarea, .fg select) { color: var(--text); }
[data-theme="dark"] .p-btn-outline { border-color: var(--border); }
[data-theme="dark"] .p-btn-outline:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="dark"] .p-tier.feat { background: #000000; }
[data-theme="dark"] .p-tier.feat :is(.p-amount, .p-btn-outline) { color: #fff; }
[data-theme="dark"] .page-section { color: var(--text); }

/* The [data-theme="light"] block that stood here — sixteen rules restyling the
   imported landing sections for a light theme — is gone. There is no light theme
   and no toggle to reach one: `data-theme="dark"` is now an attribute on <html>
   in every page, so these selectors could not match anything.

   The remaining [data-theme="dark"] rules are deliberately left as they are. They
   are not dead — they carry the dark surfaces the site actually paints — and two
   of them are load-bearing for *specificity*, not just for colour: see the note
   above the .review-card block further down, which is scoped the way it is
   specifically to outrank the `[data-theme="dark"] :is(… .p-tier …)` surface
   override. Dropping the prefix would lower those rules by one class and hand the
   cascade to whichever rule currently loses, which is a change with no visible
   upside. */

/* Cookie consent */
.cookie-banner {
  position: fixed;
  z-index: 120;
  right: clamp(16px, 3vw, 36px);
  bottom: clamp(16px, 3vw, 30px);
  left: clamp(16px, 3vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-elevated);
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}
.cookie-banner[hidden], .cookie-modal[hidden] { display: none; }
.cookie-banner-copy { max-width: 610px; }
.cookie-banner-copy strong { display: block; margin-bottom: 4px; font-family: var(--fd); font-size: 1rem; }
.cookie-banner-copy p { margin: 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.55; }
.cookie-banner-actions, .cookie-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.cookie-button {
  min-height: 42px;
  padding: 10px 17px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 700 0.78rem/1 var(--font);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.cookie-button:hover { transform: translateY(-1px); border-color: var(--primary); }
.cookie-button.primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.cookie-button.secondary { background: var(--surface); color: var(--text); }
.cookie-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px; }
.cookie-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, 0.58); cursor: default; }
.cookie-dialog {
  position: relative;
  width: min(100%, 610px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface-elevated);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}
.cookie-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.cookie-dialog-head h2 { margin: 8px 0 0; color: var(--text); font-family: var(--fd); font-size: 1.8rem; }
.cookie-close { border: 0; background: transparent; color: var(--text-muted); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.cookie-dialog-intro { margin: 18px 0 24px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.65; }
.cookie-options { display: grid; gap: 10px; margin-bottom: 26px; }
.cookie-option {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.cookie-option span { display: grid; gap: 3px; }
.cookie-option strong { color: var(--text); font-size: 0.88rem; }
.cookie-option small { color: var(--text-muted); font-size: 0.76rem; line-height: 1.45; }
.cookie-option input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary); }
.footer-cookie-link {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font: inherit;
  cursor: pointer;
}
.footer-cookie-link:hover { color: var(--primary); }
@media (max-width: 760px) {
  .cookie-banner { align-items: stretch; flex-direction: column; gap: 16px; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .cookie-button { flex: 1 1 100%; }
}

/* Permanent dark appearance and unified centered icon treatment.
   Was also selected via [data-theme="light"] and [data-theme="dark"], which
   forced the same values whichever theme was set — the clearest sign the theme
   was already notional. `:root` is the same specificity as either attribute
   selector, so collapsing to it changes which selectors are listed and nothing
   about the cascade. */
:root {
  --surface: #000000;
  --surface-elevated: #000000;
  --surface-muted: #050505;
  --surface-tag: rgba(255, 255, 255, 0.08);
  --text: #f5f5f5;
  --text-muted: rgba(245, 245, 245, 0.68);
  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.08);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 16px 48px rgba(202, 77, 0, 0.22);
  color-scheme: dark;
}

:is(.tile .tile-ico, .svc-icon) {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  align-self: start;
  margin: 0 0 22px;
  padding: 0;
  border: 1px solid rgba(202, 77, 0, 0.22);
  border-radius: 14px;
  background: rgba(202, 77, 0, 0.1);
  color: var(--primary);
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease,
    box-shadow 0.22s ease, border-color 0.22s ease;
}
:is(.tile .tile-ico, .svc-icon) > svg {
  width: 27px;
  height: 27px;
}

/* Unify icon glyph stroke weight sitewide regardless of each SVG's viewBox.
   non-scaling-stroke renders the stroke at a constant device width, so 24- and
   44-viewBox icons match the home page's .fs-ico / .ind-ico look exactly.
   .card-icon is the <svg> itself; .tile-ico/.svc-icon wrap a child <svg>. */
:is(.fs-ico, .ind-ico, .tile-ico, .svc-icon) svg,
.card-icon {
  stroke-width: 1.7;
}
:is(.fs-ico, .ind-ico, .card-icon, .tile-ico, .svc-icon) * {
  vector-effect: non-scaling-stroke;
}

/* Icon tile lifts to solid orange on hover when it sits inside an interactive card. */
:is(a, .tile, .catalog-card):hover > :is(.card-icon, .tile .tile-ico, .svc-icon),
a:hover :is(.card-icon, .tile .tile-ico, .svc-icon) {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(202, 77, 0, 0.42);
}

.product-page .tile .tile-ico,
.products-page .tile .tile-ico {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  padding: 0;
  border: 1px solid rgba(202, 77, 0, 0.22);
  border-radius: 14px;
  background: rgba(202, 77, 0, 0.1);
}

.product-page .tile .tile-ico > svg,
.products-page .tile .tile-ico > svg {
  width: 27px;
  height: 27px;
}

/* Homepage service architecture */
.home-catalog, .home-pricing, .home-story { padding: clamp(76px, 9vw, 126px) 0; background: #000000; color: #f5f5f5; border-top: 1px solid rgba(255,255,255,.08); }
.home-band { padding: clamp(72px, 8vw, 112px) 0; background: #000000; color: #f5f5f5; border-block: 1px solid rgba(255,255,255,.1); }
.home-section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.home-section-head h2, .split-heading h2, .company-intro h2 { margin: 10px 0 0; font-family: var(--fd); font-size: clamp(2.25rem, 5vw, 4.7rem); line-height: .98; letter-spacing: -0.044em; }
.featured-solution-list { border-top: 1px solid rgba(255,255,255,.2); }
.featured-solution-list a { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 24px; min-height: 92px; border-bottom: 1px solid rgba(255,255,255,.16); transition: color .2s, padding .2s, background .2s; }
.featured-solution-list a:hover { padding-inline: 14px; color: var(--primary); background: rgba(202, 77, 0,.035); }
.featured-solution-list span { color: var(--primary); font: 700 .92rem/1 var(--font); }
.featured-solution-list strong { font-family: var(--fd); font-size: clamp(1.2rem, 2.3vw, 2rem); line-height: 1.15; }
.featured-solution-list b { color: var(--primary); font-size: 1.5rem; }
.compact-directory { display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); margin-top: 54px; border: 1px solid rgba(255,255,255,.18); }
.compact-directory > * { min-width: 0; padding: 26px; border-left: 1px solid rgba(255,255,255,.14); }
.compact-directory > :first-child { border-left: 0; }
.compact-directory h2 { margin: 7px 0 0; font: 800 1.45rem/1.1 var(--fd); }
.compact-directory strong { display: block; margin-bottom: 9px; font-size: .95rem; line-height: 1.35; }
.compact-directory span:not(.eyebrow) { color: rgba(255,255,255,.58); font-size: .75rem; }
.status-label { display: inline-flex; padding: 5px 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; }
.ticker-coming b { margin-left: 7px; padding: 3px 7px; border: 1px solid rgba(202, 77, 0,.55); border-radius: 999px; color: var(--primary); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.split-heading { display: grid; grid-template-columns: minmax(240px,.75fr) 1.4fr; gap: clamp(50px, 8vw, 130px); align-items: start; }
.industry-index { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255,255,255,.18); }
.industry-index a { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 23px 10px 23px 0; border-bottom: 1px solid rgba(255,255,255,.15); font-weight: 650; line-height: 1.35; }
.industry-index a:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.15); }
.industry-index a:nth-child(even) { padding-left: 24px; }
.industry-index span { color: var(--primary); font-size: .72rem; }
.preview-rail { display: grid; grid-template-columns: repeat(4,1fr); border-block: 1px solid rgba(255,255,255,.18); }
.preview-rail a { min-height: 190px; padding: 28px; border-left: 1px solid rgba(255,255,255,.15); }
.preview-rail a:first-child { border-left: 0; }
.preview-rail strong, .preview-rail span { display: block; }
.preview-rail strong { min-height: 50px; font: 750 1rem/1.35 var(--fd); }
.preview-rail span { margin-top: 34px; color: rgba(255,255,255,.68); font-size: .88rem; }
.preview-rail span b { color: #fff; font-size: 1.35rem; }
.project-category-list { border-top: 1px solid rgba(255,255,255,.18); }
.project-category-list a { display: flex; justify-content: space-between; gap: 20px; padding: 19px 0; border-bottom: 1px solid rgba(255,255,255,.15); font: 700 clamp(1rem,1.7vw,1.25rem)/1.3 var(--fd); }
.project-category-list a:hover { color: var(--primary); }
.project-category-list span { color: var(--primary); }
.sample-review { max-width: 870px; margin: 0 0 clamp(80px,10vw,130px); }
.sample-review figcaption, .vision-mission span { color: var(--primary); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sample-review blockquote { margin: 24px 0 18px; font: 700 clamp(1.75rem,4vw,3.5rem)/1.12 var(--fd); letter-spacing: -0.028em; }
.sample-review cite { color: rgba(255,255,255,.62); font-style: normal; }
.company-intro { display: grid; grid-template-columns: .75fr 1.25fr; column-gap: 80px; align-items: start; }
.company-intro .eyebrow { grid-column: 1; }
.company-intro h2 { grid-column: 1; }
.company-intro h2 { font-size: clamp(2.2rem, 4vw, 4rem); overflow-wrap: normal; word-break: normal; }
.company-intro p { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: rgba(255,255,255,.72); font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.85; }
.vision-mission { display: grid; grid-template-columns: 1fr 1fr; margin-top: 72px; border-block: 1px solid rgba(255,255,255,.16); }
.vision-mission > div { padding: 32px 42px 32px 0; }
.vision-mission > div + div { padding-left: 42px; border-left: 1px solid rgba(255,255,255,.16); }
.vision-mission p { margin: 13px 0 0; font: 700 clamp(1.2rem,2.3vw,1.75rem)/1.35 var(--fd); }
.home-final-cta { padding: clamp(60px,8vw,100px) 0; background: var(--primary); color: #fff; text-align: center; }
.home-final-cta h2 { max-width: 980px; margin: 0 auto 32px; font: 800 clamp(2rem,4.5vw,4rem)/1.05 var(--fd); letter-spacing: -0.041em; }
.home-final-cta .btn-row { justify-content: center; }
.btn-dark, .btn-light { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 22px; border: 1px solid #000000; font-weight: 800; }
.btn-dark { background: #000000; color: #fff; }.btn-light { background: #fff; color: #000000; }

/* ─────────────────────────────────────────────
   LOGO MARQUEES — OUR CLIENTS / OUR PARTNERS
───────────────────────────────────────────── */
.logo-strip { padding: clamp(58px, 7vw, 96px) 0; background: #000000; color: #f5f5f5; border-top: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.logo-strip.home-band { border-block: 1px solid rgba(255,255,255,.1); }
.logo-strip .home-section-head { margin-bottom: 36px; }
.logo-strip .eyebrow { color: var(--primary); }
.logo-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; width: max-content; gap: 0; white-space: nowrap; will-change: transform; animation: scroll 38s linear infinite; }
.logo-track.reverse { animation-direction: reverse; }
.logo-chip {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 248px; height: 110px; padding: 0 38px; margin-right: 18px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.03);
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}
.logo-chip img { height: 46px; width: auto; display: block; opacity: .82; transition: opacity .22s ease; }
.logo-chip:hover { border-color: rgba(202, 77, 0,.45); background: rgba(202, 77, 0,.06); transform: translateY(-2px); }
.logo-chip:hover img { opacity: 1; }
@media (max-width: 620px) {
  .logo-chip { min-width: 192px; height: 88px; padding: 0 26px; }
  .logo-chip img { height: 36px; }
}

/* ─────────────────────────────────────────────
   TONAL DEPTH SCALE + GLASS SURFACES
   Keeps the dark concept but removes the flat-black blandness:
   layered near-blacks, hairline borders, soft elevation.
───────────────────────────────────────────── */
:root {
  --tone-0: #000000;   /* page base */
  --tone-1: #0a0a0a;   /* section band */
  --tone-2: #101012;   /* raised panel */
  --tone-3: #16161a;   /* card */
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --glow-orange: rgba(202, 77, 0, 0.16);
  --lift-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.5);
  --lift-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 44px rgba(0, 0, 0, 0.6);
}

/* Reusable raised surface: cards, panels, tiers */
.surface {
  background: linear-gradient(180deg, var(--tone-3), var(--tone-2));
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--lift-1);
}

body.has-modal-open { overflow: hidden; }

/* ─────────────────────────────────────────────
   GET STARTED MODAL
───────────────────────────────────────────── */
.quote-modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 20px;
}
.quote-modal[hidden] { display: none; }
.quote-backdrop {
  position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.22s ease;
}
.quote-modal.is-open .quote-backdrop { opacity: 1; }
.quote-dialog {
  position: relative;
  width: min(100%, 520px);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  padding: clamp(24px, 4vw, 34px);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--tone-3), var(--tone-1));
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--lift-2), 0 0 0 1px rgba(202, 77, 0, 0.06),
              0 -30px 80px -40px var(--glow-orange) inset;
  color: #fff;
  opacity: 0; transform: translateY(10px) scale(0.985);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.quote-modal.is-open .quote-dialog { opacity: 1; transform: none; }
/* The form outruns the viewport on shorter screens, so this panel scrolls.
   Left native that is a 17px light Windows bar with arrow buttons, reading as
   browser chrome dropped inside a dark dialog. Slimmed and tinted rather than
   hidden the way the horizontal rails are — here the content really does run
   past the fold, so the affordance has to survive. */
.quote-dialog {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.quote-dialog::-webkit-scrollbar { width: 11px; }
.quote-dialog::-webkit-scrollbar-track { background: transparent; }
.quote-dialog::-webkit-scrollbar-thumb {
  /* Transparent border + content-box clip insets the thumb from the dialog's
     rounded edge; painting the background alone would butt it against them. */
  background: rgba(255,255,255,.22);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
.quote-dialog::-webkit-scrollbar-thumb:hover { background: rgba(202,77,0,.6); background-clip: content-box; }
.quote-dialog h2 {
  margin: 6px 0 6px;
  font: 800 clamp(1.35rem, 3vw, 1.72rem)/1.12 var(--fd, "Bricolage Grotesque", sans-serif);
  letter-spacing: -0.025em;
}
.quote-intro { margin: 0 0 20px; color: rgba(255,255,255,.62); font-size: .88rem; line-height: 1.55; }
.quote-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--hairline);
  background: rgba(255,255,255,.04); color: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.quote-close:hover { background: rgba(255,255,255,.1); border-color: var(--hairline-strong); }

/* One field per row: labels all start at the same x and no field's label
   is longer than another's, so nothing looks misaligned. */
.quote-form { display: grid; grid-template-columns: 1fr; gap: 14px; }
.qf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qf.full { grid-column: 1 / -1; }
.qf label { font-size: .74rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.72); }
/* Hints live under the field, in the same place for every field. */
.qf-help { font-size: .74rem; line-height: 1.4; color: rgba(255,255,255,.45); }
.quote-form :is(input, select, textarea) {
  width: 100%; min-height: 46px; padding: 11px 13px;
  border-radius: 11px; border: 1px solid var(--hairline);
  background: rgba(255,255,255,.035); color: #fff;
  font: 400 .9rem/1.4 var(--font); appearance: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.quote-form textarea { min-height: 84px; resize: vertical; }
.quote-form :is(input, select, textarea)::placeholder { color: rgba(255,255,255,.34); }
.quote-form :is(input, select, textarea):focus-visible {
  outline: none; border-color: var(--primary);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(202, 77, 0,.18);
}
.quote-form :is(input, select).is-invalid { border-color: #ff5a4d; }
.quote-form select { cursor: pointer; }

/* ---- The phone row: country code + number ----
   One field presented as one control. The select carries the full country name
   so the list is scannable ("United Arab Emirates (+971)"), which makes it the
   wide half; 15rem fits the longest entry in the list without clipping, and the
   remainder still holds a national number comfortably at the modal's 520px.
   Below 460px there is not room for both, so they stack. */
.qf-phone, .fg-phone {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}
@media (max-width: 460px) {
  .qf-phone, .fg-phone { grid-template-columns: minmax(0, 1fr); }
}
/* The calc form's cells are half-width, which cannot hold both halves, so the
   phone cell takes the full row there. */
.calc-fgrid .fg:has(.fg-phone) { grid-column: 1 / -1; }

/* appearance:none strips the native arrow, and every select on the site was left
   without a replacement — readable, but indistinguishable from a text input. The
   dial code is now a dropdown a visitor has to *find*, so the affordance has to
   be there. Inline SVG rather than a pseudo-element: a select cannot carry one.

   Scoped to the dialog rather than written as a bare `.fg select` on purpose. The
   dark-theme block sets `background:` on .fg fields — a shorthand, so it resets
   background-image — from a selector carrying two class-level parts. A one-class
   selector loses to it and the chevron silently disappears; naming the dialog
   buys the specificity back. (Both these blocks lose the extra weight for free
   once the [data-theme] rules are flattened.) */
.quote-dialog .quote-form select, .calc-dialog .fg select {
  /* .quote-form already sets this; .fg never did, so without it the calc form
     drew the native arrow *and* the one below it. */
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5l4 4 4-4' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px 15px;
  padding-right: 34px;
  cursor: pointer;
}
.quote-form select option { background: #16161a; color: #fff; }
.quote-form .field-error { color: #ff6f63; font-size: .74rem; }

.quote-actions {
  grid-column: 1 / -1; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 4px;
}
/* The two send buttons are one unit, so the row wraps between the pair and the
   phone line instead of leaving WhatsApp stranded next to "Prefer to talk?". */
.quote-actions-send { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quote-actions .btn-fill { min-height: 46px; }
.quote-actions .btn-fill[disabled] { opacity: .6; cursor: progress; }

/* ---- WhatsApp send ----
   Secondary to "Send enquiry", not a rival to it: outlined rather than filled,
   so the orange stays the single primary action in the dialog. The green is
   carried by the mark and the hairline only — two saturated fills side by side
   in a dark modal is exactly the clunkiness this is meant to avoid. It is the
   same green as the floating action button, so the two read as one channel. */
.btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 13px 22px;
  font-family: var(--fd); font-size: .76rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: rgba(37, 211, 102, .1);
  border: 1px solid rgba(37, 211, 102, .42); border-radius: 30px;
  cursor: pointer; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, transform .15s ease;
}
.btn-wa svg { width: 17px; height: 17px; fill: #25d366; flex: none; }
.btn-wa:hover {
  background: rgba(37, 211, 102, .19);
  border-color: rgba(37, 211, 102, .72);
  transform: translateY(-2px);
}
.btn-wa:focus-visible { outline: 2px solid #25d366; outline-offset: 2px; }
.btn-wa[disabled] { opacity: .6; cursor: progress; transform: none; }

/* Narrow enough that two pills cannot share a line: each takes the full width
   rather than one of them shrinking to a squashed half. */
@media (max-width: 460px) {
  .quote-actions-send { width: 100%; }
  .quote-actions-send > * { flex: 1 1 100%; justify-content: center; }
}
.quote-alt { margin: 0; font-size: .8rem; color: rgba(255,255,255,.5); }
.quote-alt a { color: var(--primary); font-weight: 600; }
.quote-form .form-status { grid-column: 1 / -1; margin: 2px 0 0; font-size: .84rem; }
.quote-form .form-status.is-success { color: #4ade80; }

@media (max-width: 560px) {
  .quote-form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-dialog, .quote-backdrop { transition: none; }
}

/* ─────────────────────────────────────────────
   GLOBAL ANIMATED BACKGROUND
   The hero particle-network canvas, fixed behind every section.
───────────────────────────────────────────── */
#bg-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; background: #000000;
  pointer-events: none; display: block;
}
/* Dark home sections go transparent so the global canvas shows through.
   Orange bands (.ticker, .home-final-cta) stay opaque on purpose. */
#home,
.home-catalog, .home-industries, .home-pricing,
.logo-strip, .home-portfolio, .home-story {
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
}

.service-catalog-groups { display: grid; gap: 28px; margin-top: 34px; }
.service-catalog-group { padding-top: 22px; border-top: 1px solid var(--border); }
.service-catalog-group h3 { margin: 0 0 14px; color: var(--primary); font: 800 .78rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.service-name-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0 26px; }
.service-name-grid span { padding: 12px 0; border-bottom: 1px solid var(--border-soft); color: var(--text); font-size: .88rem; font-weight: 650; line-height: 1.35; }

/* ─────────────────────────────────────────────
   PRICING PAGE
   Selector, currency and the cards are one bordered block, so the
   choice and the prices it drives read as a single unit rather than
   as separate bands with dead space between them.
───────────────────────────────────────────── */
.pricing-shell { padding-top: 8px !important; }
.pricing-shell > .wrap {
  padding-top: clamp(20px, 2.6vw, 30px);
  padding-bottom: clamp(22px, 3vw, 34px);
  border-radius: 22px;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
              rgba(14,14,17,.55);
  box-shadow: var(--lift-1);
}
.pricing-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}
.pricing-controls .filter-row { margin: 0; gap: 8px; flex-wrap: wrap; width: auto; flex: 1 1 auto; }
/* Label sits inline with the picker and the rate note tucks underneath,
   so the control reads as one compact unit instead of three stacked bits. */
.pricing-controls .currency-control {
  margin: 0; flex: 0 0 auto;
  display: grid; grid-template-columns: auto auto; align-items: center;
  justify-items: end; gap: 3px 10px;
}
.pricing-controls .currency-control label {
  grid-column: 1; grid-row: 1;
  font-size: .62rem; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  white-space: nowrap;
}
.pricing-controls .currency-control .cx { grid-column: 2; grid-row: 1; }
.pricing-controls .currency-control [data-currency-status] {
  grid-column: 1 / -1; grid-row: 2;
  width: auto; max-width: 220px; text-align: right;
  font-size: .66rem; line-height: 1.3; color: rgba(255,255,255,.32);
}
.pricing-panel .section-title { margin: 6px 0 0; }
.pricing-panel .price-grid { margin-top: 22px !important; }
.pricing-panel .calc-cta-row { margin-top: 22px; }
.pricing-head { padding-bottom: 22px !important; }

@media (max-width: 900px) {
  .pricing-controls { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* ─────────────────────────────────────────────
   ITEMISED PRICE LIST (solution pages)
   Reads like a transparent price list rather than a grid of cards.
───────────────────────────────────────────── */
/* (.price-group / -head / -count removed: the catalogue renders groups as tab
   panels now, so nothing emitted that markup any more. `.price-list` and
   `.price-row` below are still live.) */
.price-list { list-style: none; margin: 0; padding: 0; }
.price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding: 15px 14px 15px 12px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  transition: background .18s ease, padding-left .18s ease;
}
.price-row:last-child { border-bottom: 0; }
.price-row:hover { background: rgba(255,255,255,.028); padding-left: 16px; }
.pr-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-name { color: var(--text); font: 650 .95rem/1.3 var(--fd, var(--font)); }
.pr-desc { color: var(--text-muted); font-size: .81rem; line-height: 1.45; }
.pr-price {
  display: inline-flex; align-items: baseline; gap: 6px;
  flex-shrink: 0; white-space: nowrap;
  /* tabular figures keep the price column visually aligned */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.pr-from {
  font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
}
.pr-price .svc-item-price {
  color: var(--primary); font: 800 1.02rem/1 var(--fd, var(--font));
  letter-spacing: -.02em;
}
@media (max-width: 560px) {
  .price-row { flex-direction: column; gap: 8px; align-items: flex-start; }
  .price-row:hover { padding-left: 12px; }
}

/* Individual service cards (name + description + indicative price) */
.svc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.svc-item-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-elevated); transition: border-color .2s, transform .2s, box-shadow .2s; }
.svc-item-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.06); }
.svc-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.svc-item-name { font: 700 .95rem/1.25 var(--fd); color: var(--text); }
.svc-item-price { flex-shrink: 0; font: 800 .72rem/1 var(--font); letter-spacing: .02em; color: var(--primary); white-space: nowrap; }
.svc-item-desc { margin: 0; color: var(--text-muted); font-size: .82rem; line-height: 1.5; }
.svc-cta-row { margin-top: 34px; display: flex; justify-content: center; }
.calc-cta-row { margin-top: 28px; display: flex; justify-content: center; }

/* Estimate calculator modal */
.calc-modal { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 20px; }
.calc-modal[hidden] { display: none; }
.calc-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.58); cursor: default; }
.calc-dialog { position: relative; width: min(860px, 100%); max-height: 90vh; overflow-y: auto; background: var(--surface-elevated, #fff); border: 1px solid var(--border); border-radius: 16px; padding: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.calc-dialog.is-contact-step { width: min(680px, 100%); }
.calc-dialog.is-contact-step .calc-head h2 { color: #fff; }
.calc-dialog.is-contact-step .calc-head .eyebrow { color: var(--primary); }
.calc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.calc-head h2 { margin: 8px 0 0; color: var(--text); font-family: var(--fd); font-size: 1.7rem; letter-spacing: -0.029em; }
.calc-close { background: none; border: 0; font-size: 2rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; }
.calc-close:hover { color: var(--text); }
.calc-progress { display: grid; grid-template-columns: auto minmax(28px, 1fr) auto; align-items: center; gap: 12px; margin: 20px 0 4px; }
.calc-progress span { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font: 700 .68rem/1 var(--font); letter-spacing: .09em; text-transform: uppercase; }
.calc-progress span b { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 50%; font-size: .6rem; }
.calc-progress span.is-current { color: var(--text); }
.calc-progress span.is-current b { border-color: var(--primary); color: #fff; background: var(--primary); }
.calc-progress i { height: 1px; background: var(--border); }
.calc-step[hidden] { display: none; }
.calc-intro { margin: 14px 0 22px; color: var(--text-muted); font-size: .88rem; line-height: 1.6; }
.calc-body { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: start; }
.calc-group + .calc-group { margin-top: 20px; }
.calc-group-title { font: 800 .72rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.calc-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.calc-option input { display: none; }
.calc-check { width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 5px; background: var(--surface, #fff); display: flex; align-items: center; justify-content: center; transition: all .2s; }
.calc-option input:checked + .calc-check { background: var(--primary); border-color: var(--primary); }
.calc-option input:checked + .calc-check::after { content: ''; width: 9px; height: 9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M1.5 4.5l2 2 4-4' stroke='white' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.calc-option-name { display: block; font-weight: 650; font-size: .87rem; color: var(--text); }
.calc-option-desc { display: block; font-size: .76rem; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }
.calc-option-price { font: 800 .82rem/1 var(--font); color: var(--text); white-space: nowrap; }
.calc-summary { position: sticky; top: 0; border: 1px solid var(--border); border-radius: 12px; padding: 20px; background: var(--surface-muted, var(--mist)); }
.calc-total-label { font: 500 .62rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.calc-total { font: 800 2.1rem/1 var(--fd); letter-spacing: -0.032em; color: var(--text); margin: 8px 0 6px; }
.calc-total-note { margin: 0 0 16px; font-size: .78rem; color: var(--text-muted); }
.calc-continue { width: 100%; justify-content: center; }
.calc-continue:disabled { opacity: .45; cursor: not-allowed; }
.calc-contact { margin-top: 22px; }
.calc-contact[hidden] { display: none; }
.calc-contact-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.calc-dialog.is-contact-step .calc-contact-head .fsec { margin: 0 0 7px; color: #fff; }
.calc-contact-head .fsec:focus { outline: none; }
.calc-contact-head p { max-width: 42ch; margin: 0; color: var(--text-muted); font-size: .8rem; line-height: 1.5; }
.calc-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.calc-step--contact .fg :is(input,select):focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(202,77,0,.18); }
.calc-contact-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
/* Same grouping as .quote-actions-send: the pair wraps together, away from the
   running total, rather than the total ending up between the two buttons. */
.calc-contact-send { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 460px) {
  .calc-contact-send { width: 100%; }
  .calc-contact-send > * { flex: 1 1 100%; justify-content: center; }
}
.calc-contact-total { flex: none; min-width: 10rem; padding: 14px 16px; border: 1px solid rgba(202,77,0,.5); border-radius: 10px; background: linear-gradient(145deg,rgba(202,77,0,.15),rgba(202,77,0,.035)); }
.calc-contact-total span { display: block; color: var(--primary); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.calc-contact-total strong { display: block; margin-top: 7px; color: #fff; font: 800 1.45rem/1 var(--fd); letter-spacing: -.03em; }
.calc-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 4px; border: 0; color: var(--text-muted); background: transparent; font: 700 .72rem/1 var(--font); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.calc-back:hover { color: var(--text); }
.calc-back:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.calc-submit { width: auto; margin-top: 0; padding: 14px 26px; border: 1px solid var(--primary); color: #fff; background: var(--primary); box-shadow: 0 10px 26px rgba(202,77,0,.28); }
.calc-submit:hover { border-color: #b84400; color: #fff; background: #b84400; box-shadow: 0 12px 30px rgba(202,77,0,.4); }
.calc-submit:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.calc-submit[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 720px) {
  .calc-modal { padding: 12px; }
  .calc-dialog { max-height: calc(100svh - 24px); padding: 24px 18px; }
  .calc-head h2 { font-size: 1.45rem; }
  .calc-progress { margin-top: 18px; }
  .calc-body { grid-template-columns: 1fr; }
  .calc-summary { position: static; }
  .calc-contact-head { align-items: stretch; flex-direction: column; gap: 14px; }
  .calc-contact-total { width: 100%; }
  .calc-fgrid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .calc-progress { gap: 8px; }
  .calc-progress span { gap: 5px; font-size: .61rem; letter-spacing: .07em; }
  .calc-progress span b { width: 24px; height: 24px; }
  .calc-contact-foot { align-items: stretch; flex-direction: column; }
  .calc-back { width: 100%; }
}
.coming-soon-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 32px; }
.coming-soon-card { padding: 24px; border: 1px solid var(--border); background: var(--surface-elevated); }
.coming-soon-card h3 { margin: 14px 0 8px; font: 800 1.1rem/1.25 var(--fd); }
.coming-soon-card p { margin: 0; color: var(--text-muted); font-size: .84rem; }

@media (max-width: 900px) {
  .compact-directory { grid-template-columns: 1fr 1fr; }.compact-directory > * { border-top: 1px solid rgba(255,255,255,.14); }.directory-title { grid-column: 1 / -1; }
  .split-heading, .company-intro { grid-template-columns: 1fr; }.company-intro p { grid-column: 1; grid-row: auto; margin-top: 25px; }
  .preview-rail { grid-template-columns: 1fr 1fr; }.preview-rail a:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.15); }.preview-rail a:nth-child(4) { border-top: 1px solid rgba(255,255,255,.15); }
  .service-name-grid, .coming-soon-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px) {
  .home-section-head { align-items: flex-start; flex-direction: column; }
  .featured-solution-list a { grid-template-columns: 42px 1fr auto; gap: 10px; min-height: 78px; }.featured-solution-list strong { font-size: 1.05rem; }
  .compact-directory, .industry-index, .preview-rail, .vision-mission, .service-name-grid, .coming-soon-grid { grid-template-columns: 1fr; }
  .compact-directory > *, .compact-directory > :first-child, .industry-index a:nth-child(odd), .industry-index a:nth-child(even), .preview-rail a, .preview-rail a:nth-child(3), .vision-mission > div + div { border-left: 0; }
  .industry-index a:nth-child(even) { padding-left: 0; }.preview-rail a { min-height: auto; border-top: 1px solid rgba(255,255,255,.15); }.preview-rail a:first-child { border-top: 0; }.preview-rail strong { min-height: 0; }.preview-rail span { margin-top: 14px; }
  .vision-mission > div + div { border-top: 1px solid rgba(255,255,255,.16); padding-left: 0; }.home-final-cta .btn-row { flex-direction: column; }.btn-dark,.btn-light { width: 100%; }
}

/* ─────────────────────────────────────────────
   FEATURED SOLUTION + INDUSTRY ICONS
───────────────────────────────────────────── */
.featured-solution-list a { grid-template-columns: 64px 46px 1fr auto; gap: 20px; }
.fs-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  color: var(--primary);
  background: rgba(202, 77, 0,.1);
  border: 1px solid rgba(202, 77, 0,.22);
  border-radius: 12px;
  transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.fs-ico svg { width: 23px; height: 23px; }
.featured-solution-list a:hover .fs-ico {
  background: var(--primary); color: #fff; border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(202, 77, 0,.42);
}
.fs-num { color: var(--primary); font: 700 .92rem/1 var(--font); letter-spacing: .04em; }

.industry-index a { grid-template-columns: 40px 1fr; align-items: center; gap: 12px; transition: color .2s ease, padding .2s ease, background .2s ease; }
.industry-index a:hover { color: var(--primary); }
.ind-ico {
  display: grid; place-items: center;
  width: 34px; height: 34px; color: var(--primary);
  transition: transform .22s ease;
}
.ind-ico svg { width: 24px; height: 24px; }
.industry-index a:hover .ind-ico { transform: translateY(-1px) scale(1.1); }

/* ─────────────────────────────────────────────
   REVIEWS
───────────────────────────────────────────── */
.reviews-block { margin: 0 0 clamp(72px, 9vw, 120px); }
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 38px; }
.reviews-head h2 { margin: 10px 0 0; font-family: var(--fd); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.041em; }

.google-rating {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}
.gr-logo svg { display: block; width: 36px; height: 36px; }
.gr-text { display: flex; flex-direction: column; gap: 4px; }
.gr-top { display: inline-flex; align-items: center; gap: 10px; }
.gr-top b { font: 800 1.9rem/1 var(--fd); letter-spacing: -0.025em; }
.gr-stars { display: inline-flex; gap: 2px; color: #ffb400; }
.gr-stars svg { width: 17px; height: 17px; }
.gr-meta { color: rgba(255,255,255,.6); font-size: .76rem; letter-spacing: .01em; }

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 26px 28px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  transition: border-color .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.review-card:hover {
  border-color: rgba(202, 77, 0,.32);
  background: rgba(255,255,255,.055);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
}
.rc-head { display: flex; align-items: center; gap: 12px; }
.rc-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; color: #fff; font: 800 1rem/1 var(--fd); }
.rc-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rc-name { font: 700 .92rem/1.2 var(--fd); }
.rc-date { margin-top: 2px; color: rgba(255,255,255,.5); font-size: .74rem; }
.rc-g { width: 19px; height: 19px; flex-shrink: 0; }
.rc-stars { display: inline-flex; gap: 2px; color: #ffb400; }
.rc-stars svg { width: 16px; height: 16px; }
.rc-stars svg.dim, .gr-stars svg.dim { color: rgba(255,255,255,.2); }
.review-card p { margin: 0; color: rgba(255,255,255,.76); font-size: .9rem; line-height: 1.65; }

@media (max-width: 900px) {
  .review-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .review-grid { grid-template-columns: 1fr; }
  .google-rating { width: 100%; }
  .featured-solution-list a { grid-template-columns: 46px 34px 1fr auto; gap: 12px; }
  .fs-ico { width: 40px; height: 40px; }
}

/* ─────────────────────────────────────────────
   PREMIUM PRICING TIERS (black / orange / white)
   Scoped to .price-grid so these win over the theme-audit rules above.
───────────────────────────────────────────── */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  border: 0;
  border-radius:var(--r-card);
  overflow: visible;
  align-items: stretch;
}
.price-grid .p-tier {
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.price-grid .p-tier::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}
.price-grid .p-tier:hover {
  background: #000000;
  border-color: rgba(202, 77, 0, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.6);
}
.price-grid .p-tier.feat {
  background: #000000;
  border-color: rgba(202, 77, 0, 0.6);
  box-shadow: 0 0 0 1px rgba(202, 77, 0, 0.3), 0 26px 60px rgba(202, 77, 0, 0.12);
}
.price-grid .p-tier.feat::after {
  content: "";
  position: absolute;
  inset: -45% 0 auto;
  height: 180px;
  background: radial-gradient(60% 100% at 50% 0, rgba(202, 77, 0, 0.2), transparent 70%);
  pointer-events: none;
}
.price-grid .p-tier.feat:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(202, 77, 0, 0.45), 0 30px 72px rgba(202, 77, 0, 0.22);
}
.price-grid .feat-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  background: var(--primary);
  color: #fff;
  font: 700 0.6rem/1 var(--fd);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
}
.price-grid .p-tier-label {
  margin-bottom: 18px;
  font: 600 0.66rem/1 var(--font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
}
.price-grid .p-amount {
  margin-bottom: 6px;
  font: 800 2.6rem/1 var(--fd);
  letter-spacing: -0.036em;
  color: #ffffff;
}
.price-grid .p-unit {
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0;
  text-transform: none;
}
.price-grid .p-desc {
  margin-bottom: 26px;
  min-height: 46px;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
.price-grid .p-hr {
  height: 1px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.1);
}
.price-grid .p-feats {
  flex: 1;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.price-grid .p-feats li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
}
.price-grid .p-feats li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: rgba(202, 77, 0, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2 2 4-4' stroke='%23FF6600' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.price-grid .p-btn-outline {
  width: 100%;
  margin-top: auto;
  padding: 14px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font: 700 0.74rem/1 var(--fd);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.price-grid .p-btn-outline:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  transform: translateY(-1px);
}
.price-grid .p-tier.feat .p-btn-outline {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.price-grid .p-tier.feat .p-btn-outline:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  box-shadow: 0 10px 28px rgba(202, 77, 0, 0.4);
}
@media (max-width: 1024px) {
  .price-grid { grid-template-columns: 1fr; }
}

/* Pricing pointer band on solution detail pages (all prices live on pricing.html) */
.pricing-pointer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  margin-top: 28px;
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: #000000;
}
.pricing-pointer p {
  margin: 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1.7;
}

/* Empty-state placeholder for the Products & Services catalogue (flow being reworked) */
.catalog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-top: 36px;
  padding: clamp(48px, 8vw, 92px) clamp(24px, 5vw, 56px);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  background: #000000;
}
.catalog-empty h3 {
  margin: 4px 0 0;
  font: 800 clamp(1.4rem, 3vw, 2rem)/1.1 var(--fd);
  letter-spacing: -0.025em;
  color: #fff;
}
.catalog-empty p {
  margin: 0;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.95rem;
  line-height: 1.7;
}
.catalog-empty .btn-fill { margin-top: 10px; }

/* ─────────────────────────────────────────────
   HOME — PREMIUM ACCENTS, TICKER ICONS, ANIMATION
───────────────────────────────────────────── */

/* Orange accents */
.home-section-head h2 em, .split-heading h2 em { font-style: normal; color: var(--primary); }
:is(.home-catalog, .home-industries, .home-pricing, .home-portfolio, .home-story) .eyebrow { color: var(--primary); }

/* Ticker — icons, premium edge fade, hover pause */
.ticker {
  position: relative;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-inner span { gap: 9px; }
.ticker-inner span svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.9; }

/* Techy faint dot-grid + drifting orange glow behind dark home sections */
.home-catalog, .home-industries { position: relative; overflow: hidden; }
.home-catalog > .wrap, .home-industries > .wrap { position: relative; z-index: 1; }
/* dotted grid overlay removed per request (particle background shows instead) */
.home-catalog::before, .home-industries::before {
  content: none;
}
.home-catalog::after, .home-industries::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  top: -22%; right: -12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(202, 77, 0, 0.1), transparent 65%);
}
.home-industries::after { right: auto; left: -16%; top: auto; bottom: -30%; }

/* Industries — premium cards */
.industry-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; border-top: 0; }
.industry-index a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 22px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px;
  background: rgba(255, 255, 255, 0.02); line-height: 1.4; font-weight: 400;
  transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.industry-index a:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.1); }
.industry-index a:nth-child(even) { padding-left: 22px; }
.industry-index a:hover {
  border-color: rgba(202, 77, 0, 0.4); background: rgba(202, 77, 0, 0.05);
  transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.industry-index .ind-ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: rgba(202, 77, 0, 0.1); border: 1px solid rgba(202, 77, 0, 0.22); color: var(--primary);
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.industry-index .ind-ico svg { width: 23px; height: 23px; }
.industry-index a:hover .ind-ico {
  background: var(--primary); color: #fff; border-color: var(--primary);
  transform: translateY(-1px); box-shadow: 0 8px 20px rgba(202, 77, 0, 0.4);
}
.industry-index .ind-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.industry-index .ind-text strong { color: #fff; font: 700 0.98rem/1.25 var(--fd); }
.industry-index .ind-desc { color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; font-weight: 400; }
.industry-index .ind-arrow {
  color: var(--primary); font-size: 1.25rem; opacity: 0; transform: translateX(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.industry-index a:hover .ind-arrow { opacity: 1; transform: translateX(0); }

/* Pricing rail — starting-from prices */
.pricing-rail a { display: flex; flex-direction: column; }
.pricing-rail .rail-price { margin-top: 16px; color: rgba(255, 255, 255, 0.5); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.pricing-rail .rail-price b { display: block; margin-top: 6px; color: var(--primary); font: 800 1.85rem/1 var(--fd); letter-spacing: -0.025em; text-transform: none; }
.pricing-rail .rail-price i { color: rgba(255, 255, 255, 0.5); font-style: normal; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; margin-left: 7px; }
.pricing-rail .rail-link { margin-top: auto; padding-top: 18px; color: #fff; font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.pricing-rail .rail-link b { color: var(--primary); transition: transform 0.2s ease; }
.pricing-rail a:hover { background: rgba(202, 77, 0, 0.05); }
.pricing-rail a:hover .rail-link b { transform: translateX(4px); }
.rail-note { margin: 22px 0 0; color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; }
.rail-note a { color: var(--primary); font-weight: 600; }
.rail-note a:hover { text-decoration: underline; }

@keyframes gridDrift { to { background-position: 34px 34px; } }
@keyframes glowPulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@media (prefers-reduced-motion: no-preference) {
  .home-catalog::before, .home-industries::before { animation: gridDrift 38s linear infinite; }
  .home-catalog::after, .home-industries::after { animation: glowPulse 9s ease-in-out infinite; }
}

@media (max-width: 720px) {
  .industry-index { grid-template-columns: 1fr; }
  .industry-index a:nth-child(odd) { border-right: 0; }
}

/* Carousel — even spacing (drop dot separators); spacing via per-item margin
   so the translateX(-50%) loop stays seamless (no gap/jump at the seam). */
.ticker-inner { gap: 0; }
.ticker-inner > span { margin-right: 56px; }
.ticker-inner span { gap: 10px; }
.ticker-inner span::after { content: none; }

/* ============================================================
   Pricing page — tabbed solution panels.
   The chip sub-nav switches which solution "window" is shown
   instead of stacking every solution down the page.
   ============================================================ */
.chip { font-family: var(--font); line-height: 1; -webkit-appearance: none; appearance: none; }
.pricing-panel { display: none; }
.pricing-panel.is-active {
  display: block;
  border-top: none;
  animation: pricingPanelIn 0.28s ease;
}
@keyframes pricingPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   TONAL DEPTH POLISH
   The page base stays black (and sections stay transparent so the
   particle field shows through) — depth is created on the SURFACES:
   layered translucent tones, hairline borders, a top sheen and soft
   elevation. This removes the flat-black blandness without changing
   the concept or introducing new brand colours.
   ═══════════════════════════════════════════════════════════════════ */

/* --- Shared raised-card treatment ------------------------------------ */
/* Scoped under :root/[data-theme] to outrank the earlier
   `[data-theme="dark"] :is(… .p-tier …)` surface overrides. */
:where(:root, [data-theme]) :is(.review-card, .industry-index a, .p-tier, .catalog-card, .svc-item-card),
[data-theme="dark"] :is(.review-card, .industry-index a, .p-tier, .catalog-card, .svc-item-card) {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(16,16,19,.72);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-1);
  transition: border-color .22s ease, transform .22s ease,
              box-shadow .22s ease, background .22s ease;
}
[data-theme="dark"] :is(.p-tier:hover, .review-card:hover, .catalog-card:hover) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(22,22,26,.85);
}
/* top sheen — the single cheapest cue that a surface is raised */
:is(.review-card, .industry-index a, .p-tier, .catalog-card)::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.22), transparent);
  pointer-events: none;
}
:is(.review-card, .industry-index a, .catalog-card):hover {
  transform: translateY(-3px);
  border-color: rgba(202, 77, 0,.34);
  box-shadow: var(--lift-2), 0 0 0 1px rgba(202, 77, 0,.08),
              0 20px 50px -28px var(--glow-orange);
}

/* --- Pricing tiers --------------------------------------------------- */
.price-grid {
  gap: 14px;
  border: 0;
  overflow: visible;
  border-radius:var(--r-card);
}
.p-tier {
  border-right: 1px solid var(--hairline) !important;
  border-radius: 18px;
  padding: 30px 26px 28px;
}
.p-tier:hover { background: rgba(22,22,26,.85); transform: translateY(-3px); }
.p-tier-label { color: rgba(255,255,255,.55) !important; }
/* Scoped to .p-tier: this used to be a bare `.p-amount { color:#fff !important }`
   which forced white onto every element carrying the currency-conversion hook,
   including the ones on light surfaces. */
.p-tier .p-amount { color: #fff !important; }
.p-amount { font-variant-numeric: tabular-nums; }
.p-unit, .p-desc { color: rgba(255,255,255,.6) !important; }
.p-feats li { color: rgba(255,255,255,.72) !important; }
.p-hr { background: var(--hairline) !important; }

/* Featured tier: lifted, warm-tinted, ringed — one clear primary choice */
.p-tier.feat {
  background:
    linear-gradient(180deg, rgba(202, 77, 0,.14), rgba(202, 77, 0,.03) 42%),
    rgba(20,16,14,.9) !important;
  border-color: rgba(202, 77, 0,.4) !important;
  box-shadow: var(--lift-2), 0 0 0 1px rgba(202, 77, 0,.16),
              0 30px 70px -34px rgba(202, 77, 0,.35);
  transform: translateY(-6px);
  z-index: 1;
}
.p-tier.feat:hover { transform: translateY(-9px); }
.feat-badge {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(202, 77, 0,.45);
}
.p-btn-outline {
  border-radius: 10px;
  border: 1px solid var(--hairline-strong) !important;
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
  min-height: 44px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.p-btn-outline:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: #fff !important;
}
.p-tier.feat .p-btn-outline {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.p-tier.feat .p-btn-outline:hover {
  background: #ff7a1f !important;
  box-shadow: 0 10px 26px rgba(202, 77, 0,.45);
}


/* Chips (pricing selector, filters) */
.chip {
  border: 1px solid var(--hairline) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.72) !important;
  min-height: 38px;
  border-radius: 9999px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover {
  background: rgba(255,255,255,.09) !important;
  color: #fff !important;
}
.chip.is-on {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px -6px rgba(202, 77, 0,.6);
}

/* A [data-theme="light"] override of --hairline stood here. Unreachable: there is
   no light theme, and the block above forces the same tokens for every theme
   anyway, so it never applied even when the attribute could vary. */

/* ═══════════════════════════════════════════════════════════════════
   FEATURED SOLUTIONS CAROUSEL
   One shared canvas (draw routine swaps per slide) on the left, a
   stack of panels in a single grid cell on the right — so switching
   slides can never shift layout. Surfaces stay translucent so the
   global particle field still shows through.
   ═══════════════════════════════════════════════════════════════════ */
.fs-carousel .home-section-head { align-items: flex-end; }

/* --- Arrows --- */
.fsc-arrows { display: flex; gap: 10px; flex-shrink: 0; }
.fsc-arrow {
  width: 44px; height: 44px;                 /* WCAG 2.5.8 touch target */
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: rgba(255,255,255,.04);
  color: #fff; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.fsc-arrow svg { width: 19px; height: 19px; }
.fsc-arrow:hover { background: rgba(202, 77, 0,.12); border-color: rgba(202, 77, 0,.45); color: var(--primary); }
.fsc-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --- Body: canvas left, panels right --- */
.fsc-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 60px);
  align-items: center;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 20px;
  border: 1px solid var(--hairline);
  /* translucent only — #bg-canvas must remain visible behind it */
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
              rgba(16,16,19,.55);
  box-shadow: var(--lift-1);
  touch-action: pan-y;                        /* keep vertical page scroll */
}
.fsc-body::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}

/* --- Canvas stage: aspect-ratio reserves the box => zero CLS --- */
.fsc-stage {
  position: relative; isolation: isolate;
  aspect-ratio: 16 / 11; width: 100%;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--hairline);
  background: radial-gradient(120% 90% at 50% 55%, rgba(202, 77, 0,.055), transparent 70%);
}
.fsc-canvas {
  display: block; width: 100%; height: 100%;
  opacity: 1; transition: opacity .22s ease;
}
.fsc-canvas.is-swapping { opacity: 0; }

/* --- Panels: all stacked in one cell => height = tallest panel --- */
.fsc-panels { display: grid; min-width: 0; }
.fsc-panel {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
  /* visibility removes it from tab order AND the a11y tree */
  transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s;
}
.fsc-panel.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; transition-delay: 0s;
}
.fsc-eyebrow {
  margin: 0 0 12px; display: flex; align-items: center; gap: 10px;
  color: var(--primary); font: 700 .78rem/1 var(--font);
  letter-spacing: .14em; text-transform: uppercase;
}
.fsc-num { font-variant-numeric: tabular-nums; }
.fsc-sep { opacity: .45; }
.fsc-title {
  margin: 0 0 16px; color: #fff;
  font: 800 clamp(1.55rem, 3vw, 2.7rem)/1.07 var(--fd);
  letter-spacing: -0.036em;
}
.fsc-desc {
  margin: 0 0 26px; max-width: 46ch;
  color: rgba(255,255,255,.66);
  font-size: clamp(.94rem, 1.15vw, 1.04rem); line-height: 1.7;
}
.fsc-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 22px; border-radius: 9999px;
  border: 1px solid rgba(202, 77, 0,.42);
  background: rgba(202, 77, 0,.09);
  color: var(--primary); font: 600 .9rem/1 var(--font);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.fsc-link:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.fsc-link svg { transition: transform .2s ease; }
.fsc-link:hover svg { transform: translateX(3px); }
.fsc-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --- Foot: dots + counter --- */
.fsc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-top: 22px;
}
.fsc-dots { display: flex; align-items: center; margin-inline: -8px; }
/* full 44px hit area around a 9px pip */
.fsc-dot {
  width: 44px; height: 44px; margin: 0 -6px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
}
.fsc-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.24);
  transition: background .2s ease, width .2s ease, border-radius .2s ease;
}
.fsc-dot:hover::before { background: rgba(255,255,255,.5); }
.fsc-dot.is-on::before {
  width: 26px; border-radius: 9999px; background: var(--primary);
  box-shadow: 0 0 0 1px rgba(202, 77, 0,.25), 0 4px 14px -4px var(--glow-orange);
}
.fsc-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: -8px; border-radius: 50%; }
.fsc-count { margin: 0; color: rgba(255,255,255,.42); font: 600 .78rem/1 var(--font); letter-spacing: .1em; }
.fsc-count b { color: #fff; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .fsc-body { grid-template-columns: 1fr; gap: 26px; }
  .fsc-stage { order: -1; aspect-ratio: 16 / 9; }
  .fs-carousel .home-section-head { flex-direction: row; align-items: flex-end; }
}
@media (max-width: 620px) {
  .fsc-stage { aspect-ratio: 4 / 3; }
  .fsc-body { padding: 16px; border-radius: 16px; }
  .fsc-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fsc-panel, .fsc-canvas, .fsc-link, .fsc-link svg, .fsc-dot::before, .fsc-arrow { transition: none; }
  .fsc-panel { transform: none; }
}

/* --- Case Studies empty state ------------------------------------------ */
.cs-empty {
  max-width: 620px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: clamp(34px, 5vw, 58px) clamp(22px, 4vw, 44px);
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
              rgba(16,16,19,.55);
  box-shadow: var(--lift-1);
}
.cs-empty-ico {
  display: grid; place-items: center; width: 60px; height: 60px;
  border-radius: 16px; color: var(--primary);
  background: rgba(202, 77, 0,.1); border: 1px solid rgba(202, 77, 0,.24);
}
.cs-empty-ico svg { width: 27px; height: 27px; }
.cs-empty h2 {
  margin: 0; color: #fff;
  font: 800 clamp(1.3rem, 2.5vw, 1.8rem)/1.15 var(--fd);
  letter-spacing: -0.025em;
}
.cs-empty p { margin: 0; color: var(--text-muted); font-size: .93rem; line-height: 1.7; }
.cs-empty .btn-fill { margin-top: 6px; min-height: 46px; }

/* Solution pages' #pricing block was opaque (background:var(--white), which
   resolves to a dark tone in this theme) and blocked the particle field.
   Flatten it so every section on every page reads the same. */
#pricing { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════
   SOLUTION / SERVICE CARDS — matched to the homepage carousel
   Same surface treatment, top sheen, icon plate and orange pill CTA as
   .fsc-body / .fsc-link, so the Solutions and Services pages read as
   the same family as the hero carousel.
   ═══════════════════════════════════════════════════════════════════ */
.solution-overview-grid .tile {
  position: relative;
  min-height: 0;
  padding: 26px 24px 24px;
  border-radius: 18px;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
              rgba(16,16,19,.55);
  box-shadow: var(--lift-1);
  overflow: hidden;
}
/* top sheen, same cue the carousel body uses */
.solution-overview-grid .tile::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.solution-overview-grid a.tile:hover {
  transform: translateY(-3px);
  border-color: rgba(202, 77, 0,.34);
  box-shadow: var(--lift-2), 0 0 0 1px rgba(202, 77, 0,.08),
              0 20px 50px -28px var(--glow-orange);
}
/* icon sits on a plate rather than floating */
.solution-overview-grid .tile > .card-icon {
  width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: 13px;
  background: rgba(202, 77, 0,.1);
  border: 1px solid rgba(202, 77, 0,.24);
  color: var(--primary);
}
.solution-overview-grid .tile > .card-icon svg { width: 23px; height: 23px; }
.solution-overview-grid .tile > .tag-pill {
  margin-bottom: 13px;
  font-size: .62rem; letter-spacing: .12em;
}
.solution-overview-grid .tile h3 {
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  font-weight: 800; letter-spacing: -0.025em;
  color: #fff; margin-bottom: 9px;
}
.solution-overview-grid .tile p {
  font-size: .87rem; font-weight: 400; line-height: 1.65;
  color: rgba(255,255,255,.62);
}
/* CTA becomes the carousel's orange pill */
.solution-overview-grid .catalog-card .catalog-link {
  align-self: flex-start;
  margin-top: auto;
  padding: 0 18px;
  min-height: 40px;
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 9999px;
  border: 1px solid rgba(202, 77, 0,.42);
  background: rgba(202, 77, 0,.09);
  color: var(--primary);
  font: 600 .82rem/1 var(--font);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.solution-overview-grid .catalog-card:hover .catalog-link {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
/* "Coming soon" tiles read as clearly inactive */
.solution-overview-grid article.tile { opacity: .82; }
.solution-overview-grid article.tile > .card-icon {
  background: rgba(255,255,255,.05);
  border-color: var(--hairline);
  color: rgba(255,255,255,.5);
}

/* ═══════════════════════════════════════════════════════════════════
   CURRENCY PICKER
   Compact custom control so the row no longer wraps, with a currency
   symbol badge per option (a native <option> can't render one).
   ═══════════════════════════════════════════════════════════════════ */
/* Native select stays in the DOM for the conversion logic but must not be
   visible OR clickable — otherwise its invisible box sits over the custom
   trigger and swallows clicks. `select.cx-native` outranks the earlier
   `.currency-control select` sizing rules. */
select.cx-native {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  min-height: 0 !important; padding: 0 !important; margin: -1px !important;
  border: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
.cx { position: relative; flex-shrink: 0; }
.cx-btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 0 12px 0 8px;
  border-radius: 9999px;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,.045);
  color: #fff; cursor: pointer;
  font: 650 .8rem/1 var(--font);
  transition: background .18s ease, border-color .18s ease;
}
.cx-btn:hover { background: rgba(255,255,255,.09); border-color: var(--hairline-strong); }
.cx-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Fixed square badge. Width is pinned defensively — an ancestor rule
   targeting bare `span` previously stretched this into an ellipse. */
.cx .cx-badge {
  display: grid; place-items: center;
  width: 26px; min-width: 26px; max-width: 26px;
  height: 26px; flex: 0 0 26px;
  border-radius: 50%;
  background: rgba(202, 77, 0,.14);
  border: 1px solid rgba(202, 77, 0,.3);
  color: var(--primary);
  font: 700 .72rem/1 var(--font);
  letter-spacing: -.02em;
  text-align: center;
}
.cx .cx-code {
  width: auto; font-variant-numeric: tabular-nums;
  letter-spacing: .04em; text-align: left; white-space: nowrap;
}
.cx .cx-name { width: auto; text-align: left; }
.cx-chev { width: 11px; height: 11px; opacity: .55; flex-shrink: 0; }
.cx-btn[aria-expanded="true"] .cx-chev { transform: rotate(180deg); }

/* The panel must never be see-through: an opaque `background-color` is stated
   first so it still reads solid if the gradient (or a tone token) fails to
   resolve on a given surface. z-index clears the cookie banner, and the width
   is clamped to the viewport so the right-anchored panel cannot run off-screen
   on narrow layouts. */
.cx-list {
  position: absolute; z-index: 125; top: calc(100% + 8px); right: 0;
  min-width: 232px; max-width: calc(100vw - 2rem);
  margin: 0; padding: 6px;
  list-style: none;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background-color: var(--tone-1, #0a0a0a);
  background-image: linear-gradient(180deg, var(--tone-3), var(--tone-1));
  box-shadow: var(--lift-2);
}
.cx-list[hidden] { display: none; }
.cx-opt {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 6px 10px;
  border-radius: 10px; cursor: pointer;
  color: rgba(255,255,255,.78); font: 500 .84rem/1.2 var(--font);
  transition: background .15s ease, color .15s ease;
}
.cx-opt:hover, .cx-opt:focus-visible {
  background: rgba(255,255,255,.07); color: #fff; outline: none;
}
.cx-opt.is-on { background: rgba(202, 77, 0,.12); color: #fff; }
.cx-opt.is-on .cx-badge { background: var(--primary); border-color: var(--primary); color: #fff; }
.cx-opt .cx-code { font-weight: 700; min-width: 34px; }
.cx-opt .cx-name { color: rgba(255,255,255,.5); font-size: .8rem; }
.cx-opt.is-on .cx-name { color: rgba(255,255,255,.68); }
/* The "indicative conversion" disclaimer used to sit under each in-page
   picker. With one compact control in the header there is no room beside it,
   so it reads as a footnote inside the panel — visible exactly when someone
   is choosing a currency, which is the only moment it matters. */
.cx-note {
  margin: 6px 4px 2px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  color: rgba(255,255,255,.4);
  font: 400 .68rem/1.35 var(--font);
}

/* ── Currency control above a pricing block ───────────────────────────
   script.js injects this at the top-left of whichever pricing block the page
   has, and only when there are figures to convert — so it needs no hidden
   state. Compact: badge + code, label as screen-reader text, disclaimer inside
   the dropdown (.cx-note above). */
.currency-bar {
  justify-content: flex-end;
  width: max-content;
  margin: 0 0 clamp(.85rem, 1.6vw, 1.15rem) auto;
}
/* Railed placement: the selector becomes a two-column grid so the picker sits
   on the label's row at the far right, directly above the end of the rail,
   with the rail spanning both columns underneath. */
:is(.pricing-selector, .svc-selector):has(.currency-bar--railed) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
:is(.pricing-selector-label, .svc-rail-label) { grid-column: 1; grid-row: 1; }
.currency-bar--railed {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin: 0 0 .4rem;
}
:is(.pricing-category-rail, .svc-rail) { grid-column: 1 / -1; grid-row: 2; }
.currency-bar .cx-btn { min-height: 32px; padding: 0 9px 0 6px; gap: 7px; }
.currency-bar .cx-badge { width: 19px; height: 19px; font-size: .62rem; }
.currency-bar .cx-code { font-size: .72rem; }
.currency-bar .cx-chev { width: 9px; height: 9px; }
/* Opens down-and-right: the control is left-aligned, so a right-anchored panel
   would hang off the left edge of the content column. */
.currency-bar .cx-list { right: auto; left: 0; }

/* (Pricing-row layout for this control lives with the pricing-page rules
   above — a second definition here previously overrode that grid.) */
@media (max-width: 900px) {
  /* Stacked layout: left-align the whole control so it lines up with the
     chips above it, and anchor the popup to the left edge from there. */
  .pricing-controls .currency-control {
    justify-items: start;
    justify-content: start;
    /* max-content so the full-width status row can't stretch the columns
       and push the picker away from its label */
    grid-template-columns: max-content max-content;
  }
  .pricing-controls .currency-control [data-currency-status] { text-align: left; }
  .cx-list { right: auto; left: 0; }
}
/* Never let the popup run off a narrow screen (it is 232px min-width and
   anchored to the trigger, which can sit well right of the viewport edge). */
@media (max-width: 620px) {
  .cx-list { min-width: 0; width: max-content; max-width: calc(100vw - 36px); }
}

/* ============================================================
   2026 MARKET REFRESH — authored UAE technology direction
   ============================================================ */
/* The tokens sit at the root, not on .market-home, because the chapters are not
   the only thing built from them: `.sfig-*` and `.duo-*` are the homepage's
   figure classes, and the five solution detail pages reuse the same SVGs inside
   `.detail-figure`. Scoped to .market-home, every fill and stroke on those pages
   resolved to an invalid var() — which computes to `none`, so the figures went
   blank. Root is the correct scope for a value more than one page reads. */
:root {
  --market-orange: #ca4d00;
  --market-black: #030303;
  --market-ink: #f3f0e9;
  --market-muted: rgba(243,240,233,.61);
  --market-line: rgba(243,240,233,.14);
  /* The six below were literals repeated across the chapters — the heading
     white, the body grey, the eyebrow orange, and the same two hues as rgb
     triplets because the figures need them at a dozen different opacities.
     Naming them is what lets a chapter change surface: see "Chapter tone". */
  --market-heading: #f7f2e9;
  --market-body: #bdb5aa;
  --market-index: #e36416;
  --market-ink-rgb: 247,242,233;
  --market-accent-rgb: 227,100,22;
  --market-spark: #f07a32;
  /* The two steps of an idle solution tab. Variables rather than literals
     because the alpha that reads as "recessive" over black is not the alpha
     that reads as recessive over paper: 34% ink on cream is 2.1:1, which is
     past recessive and into unreadable. */
  --market-tab-num: rgba(var(--market-ink-rgb),.34);
  --market-tab-label: rgba(var(--market-ink-rgb),.5);
  /* The surface as a triplet, for the handful of places that invert onto it —
     the price ledger's hover band paints ink-on-surface as surface-on-ink. */
  --market-black-rgb: 3,3,3;
  /* Read by home-refresh.js, which toggles `market-on-light` from it. */
  --market-tone: dark;
}
.market-home {
  background: var(--market-black);
  color: var(--market-ink);
  font-family: var(--font);
}
.market-home .header-shell { position: absolute; inset: 0 0 auto; }
.market-home .site-header { background: rgba(3,3,3,.7); border-color: rgba(255,255,255,.1); backdrop-filter: blur(18px); }
.market-home main { overflow: clip; background: #030303; }
.market-home h1, .market-home h2, .market-home h3, .market-home strong { font-family: var(--fd); }
.market-home em { color: var(--market-orange); font-style: normal; }
.market-overline, .market-index { margin: 0 0 1rem; color: var(--market-orange); font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.market-index { color: rgba(243,240,233,.45); }
/* The hero glows are centred horizontally. They were at 72–82% x, which put the
   light behind the right-hand figure on a wide two-column hero — but the columns
   collapse below 760px and the glow stayed put, leaving it stranded in empty space
   beside the stacked content. The vertical positions are untouched: each glow sits
   deliberately high in its band rather than at the middle. */
.market-hero { position: relative; min-height: max(700px,100svh); display: grid; align-items: center; padding: clamp(7rem,11vh,9rem) clamp(1.25rem,5vw,5rem) 4.5rem; border-bottom: 1px solid var(--market-line); background: radial-gradient(circle at 50% 47%,rgba(202,77,0,.11),transparent 27%),#030303; }
.market-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:100% 12.5vh,8.333vw 100%; mask-image:linear-gradient(90deg,#000,transparent 46%,#000); }
.market-hero-grid { position: relative; z-index: 1; width: min(100%,1500px); margin: 0 auto; display:grid; grid-template-columns:minmax(0,.9fr) minmax(34rem,1.1fr); align-items:center; gap:clamp(1rem,4vw,5rem); }
.market-hero-copy { position:relative; z-index:2; padding-top:1rem; }
.market-hero h1 { max-width: 12.9ch; margin:0; font-size:clamp(4rem,7vw,7.4rem); line-height:.84; letter-spacing:-0.06em; text-wrap:balance; }
.market-lede { max-width: 37rem; margin:2rem 0 0; color:var(--market-muted); font-size:clamp(1.03rem,1.4vw,1.28rem); line-height:1.48; }
.market-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2rem; margin-top:2rem; }
.market-home .btn-fill { border-radius:var(--r-btn); padding:1rem 1.35rem; background:var(--market-orange); color:#fff; font-weight:700; }
.text-link { display:inline-flex; align-items:center; gap:.7rem; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.32); font-size:.86rem; font-weight:700; }
.text-link span { color:var(--market-orange); }
.market-globe { position:relative; width:min(48vw,760px); aspect-ratio:1; justify-self:end; }
.market-globe canvas { width:100%; height:100%; display:block; }
.globe-coordinate { position:absolute; padding:.25rem .4rem; color:rgba(255,255,255,.45); border-left:1px solid var(--market-orange); font:600 .58rem/1.2 ui-monospace,monospace; letter-spacing:.12em; }
.globe-coordinate--one { top:22%; right:5%; }.globe-coordinate--two { bottom:17%; left:7%; }
.hero-scroll { position:absolute; z-index:2; left:clamp(1.25rem,5vw,5rem); bottom:1.5rem; display:flex; align-items:center; gap:.8rem; color:rgba(255,255,255,.45); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; }
.hero-scroll i { width:3.5rem; height:1px; background:linear-gradient(90deg,var(--market-orange),transparent); }
.market-section { padding:clamp(5.5rem,10vw,10rem) 0; border-bottom:1px solid var(--market-line); background:#030303; }
.market-heading-row { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr); align-items:end; gap:3rem; margin-bottom:clamp(2.7rem,5vw,5rem); }
.market-heading-row h2,.market-final h2 { max-width:16ch; margin:0; font-size:clamp(3rem,5.5vw,6rem); line-height:.9; letter-spacing:-0.054em; }
.market-heading-row > p { max-width:29rem; margin:0 0 .3rem; color:var(--market-muted); }
.path-section { background:linear-gradient(145deg,#060504,#020202); }
.service-index { background:#050505; }
.service-ledger { border-top:1px solid var(--market-line); }
.service-ledger > a { position:relative; display:grid; grid-template-columns:3rem minmax(14rem,1.2fr) minmax(12rem,.8fr) 2rem; align-items:center; gap:1rem; min-height:6.7rem; padding:1rem .5rem; border-bottom:1px solid var(--market-line); transition:padding .3s ease,background .3s ease; }
.service-ledger > a::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--market-orange); transform:scaleY(0); transition:transform .3s ease; }
.service-ledger > a:hover { padding-inline:1.1rem; background:rgba(202,77,0,.06); }.service-ledger > a:hover::before{transform:scaleY(1)}
.service-ledger span { color:var(--market-orange); font:600 .66rem ui-monospace,monospace; }.service-ledger h3{margin:0;font-size:clamp(1.35rem,2.7vw,2.55rem);line-height:1;letter-spacing:-0.036em}.service-ledger p{margin:0;color:var(--market-muted);font-size:.82rem}.service-ledger i{font-style:normal;color:var(--market-orange)}
/* No surface of its own — the chapter tone block owns that now, and the two
   colour rules that lived here were the paper restatement it no longer needs. */
.pricing-guidance .market-heading-row>p { color:var(--market-muted); }
.price-bento { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(11rem,auto); gap:1px; background:rgba(23,21,19,.2); border:1px solid rgba(23,21,19,.2); }
.price-bento article { display:flex; flex-direction:column; padding:1.5rem; background:#f5f1e8; }
.price-bento-main { grid-column:span 6; grid-row:span 2; min-height:23rem; background:#16130f!important;color:#f6f0e6; }
.price-bento article:not(.price-bento-main) { grid-column:span 3; }
.price-bento p { margin:0;color:#ca4d00;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; }.price-bento strong{display:block;margin:auto 0 .8rem;font-size:clamp(1.5rem,2.5vw,2.6rem);line-height:.95;letter-spacing:-.045em}.price-bento-main strong{font-size:clamp(2.2rem,4.6vw,5.2rem)}.price-bento strong b{color:#ca4d00}.price-bento small{font-size:.75rem;font-weight:500}.price-bento article>span{max-width:30rem;color:rgba(23,21,19,.6);font-size:.78rem}.price-bento-main>span{color:rgba(255,255,255,.58)}.price-bento a{margin-top:1.5rem;color:#fff;font-size:.78rem;font-weight:700}.price-all-link{margin-top:2rem;display:inline-flex!important}
.testimonial-section { background:var(--market-black); }
.testimonial-layout { display:grid; grid-template-columns:minmax(18rem,.7fr) minmax(0,1.3fr); gap:clamp(3rem,8vw,9rem); }
.testimonial-intro h2 { margin:0; font-size:clamp(2.7rem,4.5vw,5rem); line-height:.92; letter-spacing:-0.048em; }
.sample-note { max-width:25rem;margin-top:1.5rem;color:var(--market-muted);font-size:.72rem; }
.testimonial-carousel { min-height:28rem; display:grid; grid-template-rows:1fr auto; padding:2rem 0 0; border-top:1px solid var(--market-line); }
.testimonial { display:none; align-content:center; }.testimonial.is-active{display:grid}.testimonial blockquote{margin:0;max-width:24ch;font-size:clamp(1.7rem,3vw,3.1rem);line-height:1.12;letter-spacing:-.04em}.testimonial p{margin:2rem 0 0;color:var(--market-muted);font-size:.76rem;line-height:1.5}.testimonial-controls{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--market-line);padding-top:1rem}.testimonial-controls button{width:2.5rem;height:2.5rem;border:1px solid var(--market-line);border-radius:var(--r-btn);color:var(--market-heading);background:transparent;cursor:pointer}.testimonial-controls button:hover{border-color:var(--market-orange);color:var(--market-orange)}.testimonial-controls span{color:var(--market-muted);font:600 .66rem ui-monospace,monospace}
.market-final { position:relative; padding:clamp(6rem,12vw,12rem) 0; background:radial-gradient(circle at 50% 42%,rgba(202,77,0,.17),transparent 30%),#030303; }.market-final .wrap{position:relative;z-index:1}/* Both halves of this two-line headline (it carries a <br>) must fit without
   wrapping; Roboto needs 20.7ch for the longer one. */
.market-final h2{max-width:22.3ch}

@media (max-width: 1050px){.market-hero-grid{grid-template-columns:1fr 1fr}.market-hero h1{font-size:clamp(3.7rem,8vw,6rem)}.market-globe{width:52vw;margin-right:-8vw}.price-bento-main{grid-column:span 8}.price-bento article:not(.price-bento-main){grid-column:span 4}}
@media (max-width: 760px){.market-hero{min-height:100svh;padding-top:7.2rem}.market-hero-grid{grid-template-columns:1fr;align-content:center}.market-hero-copy{order:2;margin-top:-3.5rem}.market-hero h1{font-size:clamp(3.6rem,16vw,5.5rem)}.market-lede{font-size:.98rem}.market-globe{order:1;width:min(105vw,33rem);justify-self:center;margin:-4rem -10vw 0;opacity:.8}.globe-coordinate{display:none}.hero-scroll{display:none}.market-home .floating-actions{display:none}.market-heading-row{grid-template-columns:1fr;gap:1.3rem}.market-heading-row h2{font-size:clamp(2.8rem,13vw,4rem)}.service-ledger>a{grid-template-columns:2rem 1fr 1.5rem}.service-ledger p{display:none}.price-bento{grid-template-columns:1fr}.price-bento-main,.price-bento article:not(.price-bento-main){grid-column:1;grid-row:auto;min-height:14rem}.testimonial-layout{grid-template-columns:1fr}.testimonial-carousel{min-height:24rem}.market-final h2{font-size:clamp(3rem,13vw,4.5rem)}}
@media (prefers-reduced-motion:reduce){.market-home *, .market-home *::before,.market-home *::after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}}

.catalog-page { --catalog-orange:#ca4d00; background:#050505; color:#f2efe8; font-family:var(--font); }
.catalog-page main { background:#050505; overflow:clip; }.catalog-page em{color:var(--catalog-orange);font-style:normal}.catalog-page .page-head{padding-top:calc(var(--header-height) + 4rem)}
/* Hero padding was up to 13rem top and 8rem bottom, which left most of the
   first screen empty on every inner page. Roughly halved. */
.catalog-hero { position:relative; padding:clamp(5.5rem,7.5vw,7rem) 0 clamp(2.75rem,4.5vw,4.25rem); border-bottom:1px solid rgba(255,255,255,.13); background:radial-gradient(circle at 50% 38%,rgba(202,77,0,.12),transparent 26%),#050505; }
.catalog-hero::before{content:"";position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:100% 25%,8.333% 100%;mask-image:linear-gradient(90deg,transparent,#000)}
.catalog-hero .wrap{position:relative}
/* Breadcrumb bar. Sharing the hero background with nothing between it and the
   headline, the trail read as a stray line of copy; a hairline under it gives
   it its own register, the way it has on every other page. */
.catalog-hero .crumb{margin:0 0 clamp(1.75rem,3.2vw,2.75rem);padding-bottom:.85rem;border-bottom:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.45);font-size:.7rem;letter-spacing:.01em}.catalog-hero .crumb a{color:#ca4d00}.catalog-hero .crumb a:hover{color:#f07a32}
/* Copy left, page figure right. The old layout put the lead paragraph in the
   right column; it now sits under the headline so the figure has that space. */
.catalog-hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center;gap:clamp(1.5rem,4vw,3.5rem)}
.catalog-hero h1{margin:0;font-size:clamp(3rem,5.6vw,5.6rem);line-height:.86;letter-spacing:-0.057em}
.catalog-hero-grid>p,.catalog-hero-lead{max-width:34rem;margin:1.25rem 0 0;color:rgba(255,255,255,.6);font-size:clamp(.98rem,1.25vw,1.15rem);line-height:1.55}
.hero-eyebrow{margin:0 0 1rem;color:#ca4d00;font-size:.67rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* ── Page hero figures ───────────────────────────────────────────────
   The landing-page figures, enlarged, one per inner page. They reuse the
   .sfig-* / .duo-* ink so there is a single set of drawing styles, but their
   loops run unconditionally here rather than being gated on a deck chapter. */
/* Capped so the hero's row height is set by the copy, not by the figure — an
   oversized SVG was vertically centring the text and opening a gap under the
   breadcrumb that read as stray padding. */
.page-figure{width:min(100%,24rem);justify-self:end;pointer-events:none}
.page-figure svg{width:100%;height:auto;display:block;overflow:visible}
.page-figure :is(rect,circle,path){vector-effect:non-scaling-stroke}
.page-figure .sfig-payload{animation:sfigLift 4.6s cubic-bezier(.42,0,.58,1) infinite}
.page-figure .sfig-orbit circle{animation:sfigBreathe 5.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.page-figure .sfig-orbit circle:last-child{animation-delay:-2.6s}
.page-figure .sfig-token{animation:sfigToken 5s cubic-bezier(.42,0,.58,1) infinite}
.page-figure .sfig-cta{animation:sfigPulse 3.2s ease-in-out infinite}
/* The duo- family is drawn *hidden* and revealed by its animation: the pulse and
   trend paths sit at full stroke-dashoffset, the bars at scaleY(0), the dot at
   opacity 0. So a container these rules do not reach shows nothing at all, not a
   still frame — and `.detail-figure` was such a container.

   Managed IT and Digital Marketing carry duo art in their hero (they are the two
   offerings whose figure is shared with the home page's featured-service cards), so
   Managed IT was missing its pulse line entirely and Digital Marketing rendered an
   empty axis: no bars, no trend, no dot. The sfig- family had already been extended
   to `.detail-figure` further down this file; this is the same extension, for the
   family that was missed. Reduced motion needs no change — its resets are
   unscoped, which is why those pages looked *correct* with motion turned off. */
:is(.page-figure,.detail-figure) .duo-pulse path{animation:duoTrace 3.4s cubic-bezier(.42,0,.58,1) infinite}
:is(.page-figure,.detail-figure) .duo-bars rect{animation:duoGrow .8s cubic-bezier(.22,1,.36,1) forwards}
:is(.page-figure,.detail-figure) .duo-bars rect:nth-child(2){animation-delay:.1s}
:is(.page-figure,.detail-figure) .duo-bars rect:nth-child(3){animation-delay:.2s}
:is(.page-figure,.detail-figure) .duo-bars rect:nth-child(4){animation-delay:.3s}
:is(.page-figure,.detail-figure) .duo-trend{animation:duoDraw 1.6s cubic-bezier(.22,1,.36,1) .35s forwards}
:is(.page-figure,.detail-figure) .duo-trend-dot{animation:duoDot .5s ease 1.8s forwards}
:is(.page-figure,.detail-figure) .duo-dots circle{fill:#050505}

/* ── Page figures, second family (xfig-) ─────────────────────────────
   The inner pages used to borrow the homepage's three solution scenes
   verbatim, so About wore the Web & App figure and Pricing wore the AI one.
   These are the parts every replacement is built from: same grammar as the
   homepage scenes — hairline structure in warm white, orange only on the
   element that carries the meaning — composed into a scene that belongs to
   exactly one page. A homepage figure now appears only on its own solution
   page, which is the one repeat that is meant to happen. */
.xfig-plate{fill:rgba(255,255,255,.02);stroke:rgba(247,242,233,.14);stroke-width:1}
.xfig-plate--key{fill:rgba(227,100,22,.07);stroke:rgba(227,100,22,.45)}
.xfig-line{fill:none;stroke:rgba(247,242,233,.16);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.xfig-line--dash{stroke-dasharray:3 5}
.xfig-key{fill:none;stroke:rgba(227,100,22,.58);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.xfig-key--soft{stroke:rgba(227,100,22,.32)}
.xfig-key--fill{fill:rgba(227,100,22,.08)}
.xfig-node{fill:#050403;stroke:rgba(227,100,22,.8);stroke-width:1.4}
.xfig-dot{fill:#f07a32}
.xfig-bar{fill:rgba(247,242,233,.12)}
.xfig-bar--key{fill:rgba(227,100,22,.34)}
.xfig-ghost{fill:none;stroke:rgba(247,242,233,.07);stroke-width:1}

/* Motion is opt-in per element so a scene animates one idea, not all of it.
   Each scene needs ONE motion big enough to notice from across the page —
   the first pass gave several figures a single breathing dot, which is
   technically animated and reads as completely static. */
/* Sequenced highlight: children of a .xfig-seq group light in turn, so a set
   of nodes reads as a circuit being walked rather than a static diagram. The
   nth-child delays are negative so the cycle is already underway on load. */
:is(.page-figure,.detail-figure) .xfig-seq > *{animation:xfigSeq 4.8s ease-in-out infinite}
:is(.page-figure,.detail-figure) .xfig-seq > *:nth-child(1){animation-delay:-4.8s}
:is(.page-figure,.detail-figure) .xfig-seq > *:nth-child(2){animation-delay:-4s}
:is(.page-figure,.detail-figure) .xfig-seq > *:nth-child(3){animation-delay:-3.2s}
:is(.page-figure,.detail-figure) .xfig-seq > *:nth-child(4){animation-delay:-2.4s}
:is(.page-figure,.detail-figure) .xfig-seq > *:nth-child(5){animation-delay:-1.6s}
:is(.page-figure,.detail-figure) .xfig-seq > *:nth-child(6){animation-delay:-.8s}
@keyframes xfigSeq{0%,72%,100%{opacity:.22}12%,42%{opacity:1}}
/* A genuine rotation about the scene centre, for the cycles that should turn. */
:is(.page-figure,.detail-figure) .xfig-spin{transform-box:view-box;transform-origin:170px 140px;animation:xfigSpin 14s linear infinite}
:is(.page-figure,.detail-figure) .xfig-spin--slow{animation-duration:26s}
:is(.page-figure,.detail-figure) .xfig-spin--rev{animation-direction:reverse}
@keyframes xfigSpin{to{transform:rotate(360deg)}}
/* Draw-on: a stroke that redraws itself, for lines that describe a process. */
:is(.page-figure,.detail-figure) .xfig-draw{stroke-dasharray:var(--dash,320);stroke-dashoffset:var(--dash,320);animation:xfigDraw 5.2s cubic-bezier(.42,0,.58,1) infinite}
@keyframes xfigDraw{0%{stroke-dashoffset:var(--dash,320)}45%,62%{stroke-dashoffset:0}100%{stroke-dashoffset:calc(var(--dash,320) * -1)}}
/* Vertical drift, for stacked plates that should feel like they are settling. */
:is(.page-figure,.detail-figure) .xfig-float{animation:xfigFloat 6s ease-in-out infinite}
:is(.page-figure,.detail-figure) .xfig-float--b{animation-delay:-2s}
:is(.page-figure,.detail-figure) .xfig-float--c{animation-delay:-4s}
@keyframes xfigFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* Scale pulse from the element's own centre, for a beacon or a reading. */
:is(.page-figure,.detail-figure) .xfig-ping{transform-box:fill-box;transform-origin:center;animation:xfigPing 3.2s ease-out infinite}
@keyframes xfigPing{0%{transform:scale(.55);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}

:is(.page-figure,.detail-figure) .xfig-breathe{animation:xfigBreathe 5.4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
:is(.page-figure,.detail-figure) .xfig-blink{animation:xfigBlink 3.6s ease-in-out infinite}
:is(.page-figure,.detail-figure) .xfig-blink--b{animation-delay:-1.2s}
:is(.page-figure,.detail-figure) .xfig-blink--c{animation-delay:-2.4s}
:is(.page-figure,.detail-figure) .xfig-travel{stroke-dasharray:4 8;animation:xfigTravel 3.8s linear infinite}
:is(.page-figure,.detail-figure) .xfig-rise{animation:xfigRise 5s cubic-bezier(.42,0,.58,1) infinite}
:is(.page-figure,.detail-figure) .xfig-tip{transform-box:fill-box;transform-origin:center;animation:xfigTip 6.4s ease-in-out infinite alternate}
/* view-box stated rather than assumed: the origin is given in user units on
   the element, and a fill-box default would pin it to the cone's own bounds. */
:is(.page-figure,.detail-figure) .xfig-sweep{transform-box:view-box;animation:xfigSweep 7s ease-in-out infinite alternate}
@keyframes xfigBreathe{from{opacity:.3}to{opacity:1}}
@keyframes xfigBlink{0%,100%{opacity:.28}50%{opacity:1}}
@keyframes xfigTravel{to{stroke-dashoffset:-48}}
@keyframes xfigRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes xfigTip{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
@keyframes xfigSweep{from{transform:rotate(-11deg)}to{transform:rotate(11deg)}}

/* Sector grid — the one figure with no landing-page equivalent. */
.pfig-grid rect{fill:rgba(255,255,255,.02);stroke:rgba(247,242,233,.13);stroke-width:1}
.pfig-grid rect{transform-box:fill-box;transform-origin:center;animation:pfigTile 6s ease-in-out infinite}
.pfig-grid rect:nth-child(3),.pfig-grid rect:nth-child(6),.pfig-grid rect:nth-child(9),.pfig-grid rect:nth-child(14){fill:rgba(227,100,22,.14);stroke:rgba(227,100,22,.5)}
.pfig-grid rect:nth-child(2){animation-delay:-.4s}.pfig-grid rect:nth-child(3){animation-delay:-.8s}
.pfig-grid rect:nth-child(4){animation-delay:-1.2s}.pfig-grid rect:nth-child(5){animation-delay:-1.6s}
.pfig-grid rect:nth-child(6){animation-delay:-2s}.pfig-grid rect:nth-child(7){animation-delay:-2.4s}
.pfig-grid rect:nth-child(8){animation-delay:-2.8s}.pfig-grid rect:nth-child(9){animation-delay:-3.2s}
.pfig-grid rect:nth-child(10){animation-delay:-3.6s}.pfig-grid rect:nth-child(11){animation-delay:-4s}
.pfig-grid rect:nth-child(12){animation-delay:-4.4s}.pfig-grid rect:nth-child(13){animation-delay:-4.8s}
.pfig-grid rect:nth-child(14){animation-delay:-5.2s}.pfig-grid rect:nth-child(15){animation-delay:-5.6s}
.pfig-grid rect:nth-child(16){animation-delay:-6s}
.pfig-link path{stroke:rgba(227,100,22,.35);stroke-width:1.2;stroke-dasharray:3 5}
@keyframes pfigTile{0%,100%{opacity:.45}50%{opacity:1}}

@media (max-width:900px){
  .catalog-hero-grid{grid-template-columns:1fr;gap:2rem}
  .page-figure{width:min(74vw,20rem);justify-self:start;order:-1}
}
@media (prefers-reduced-motion:reduce){
  .page-figure :is(.sfig-payload,.sfig-orbit circle,.sfig-token,.sfig-cta,.duo-pulse path,.duo-bars rect,.duo-trend,.duo-trend-dot),
  :is(.page-figure,.detail-figure) :is(.xfig-breathe,.xfig-blink,.xfig-travel,.xfig-rise,.xfig-tip,.xfig-sweep,.xfig-spin,.xfig-draw,.xfig-float,.xfig-ping),
  :is(.page-figure,.detail-figure) .xfig-seq > *,
  .pfig-grid rect{animation:none!important}
  :is(.page-figure,.detail-figure) .xfig-seq > *{opacity:1}
  :is(.page-figure,.detail-figure) .xfig-draw{stroke-dasharray:none;stroke-dashoffset:0}
  :is(.page-figure,.detail-figure) .xfig-ping{display:none}
  .page-figure :is(.duo-pulse path,.duo-trend){stroke-dashoffset:0}
  .page-figure .duo-bars rect{transform:scaleY(1)}
  .page-figure .duo-trend-dot{opacity:1}
  /* Everything that animated by fading must settle visible, not at its
     keyframe start. */
  :is(.page-figure,.detail-figure) :is(.xfig-breathe,.xfig-blink){opacity:1}
  :is(.page-figure,.detail-figure) .xfig-travel{stroke-dasharray:none}
}

/* ── Detail-page hero art ────────────────────────────────────────────
   Sits at the top of the hero's right column, above the lede, so the
   headline column keeps its full width and nothing overlaps the copy. When
   the grid collapses to one column it stacks like any other block. */
/* Alone in the right column now, so it is centred rather than pushed against the
   edge, and considerably larger — 15.5rem was sized for a column it shared with
   the lead and the button. */
.detail-figure{width:min(100%,26rem);margin:0 auto;pointer-events:none}
.detail-figure svg{width:100%;height:auto;display:block;overflow:visible}
.detail-figure :is(rect,circle,path,line){vector-effect:non-scaling-stroke}
/* Stacked below the copy on narrow screens, so centred there too. */
@media (max-width:760px){.detail-figure{width:min(72vw,16rem);margin:1.75rem auto 0}}

/* ── Inner-page ledger rows (industries, about) ──────────────────────
   Same grammar as the homepage service ledger. */
.page-ledger{border-top:1px solid rgba(255,255,255,.14)}
.page-ledger>*{
  position:relative;
  display:grid;
  grid-template-columns:3rem minmax(0,1.05fr) minmax(0,1.25fr) 1.5rem;
  align-items:center;
  gap:1.25rem;
  min-height:5.6rem;
  padding:1.1rem .6rem;
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:padding .3s cubic-bezier(.22,1,.36,1),background-color .3s ease;
}
.page-ledger>*::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#ca4d00;transform:scaleY(0);transition:transform .3s ease}
/* A careers row opens a dialog rather than navigating, so it is a button (step
   28). The grid comes from .page-ledger>* above; these are the parts a button
   does not inherit — and the hover affordances, which were written for `a` and
   now cover both, because a row that responds to the pointer is the only signal
   that it does something. */
.page-ledger button{appearance:none;width:100%;margin:0;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.14);color:inherit;font:inherit;text-align:left;cursor:pointer}
.page-ledger :is(a,button):hover{padding-inline:1.2rem .6rem;background:rgba(202,77,0,.06)}
.page-ledger :is(a,button):hover::before{transform:scaleY(1)}
.page-ledger :is(a,button):focus-visible{outline:2px solid #ca4d00;outline-offset:-2px}
/* The empty state, when nothing is open. Sits where the ledger would. */
.careers-empty{margin:clamp(1.5rem,3vw,2.25rem) 0 0;color:rgba(255,255,255,.56);font-size:.9rem}
/* The job dialog's responsibilities, which are stored prose. */
.job-body{margin:0 0 1.5rem;color:rgba(255,255,255,.7);font-size:.88rem;line-height:1.6}
.job-body :is(h2,h3,h4){margin:1.4rem 0 .5rem;font-size:1rem;color:#f7f2e9}
.job-body :is(h2,h3,h4):first-child{margin-top:0}
.job-body p{margin:0 0 .8rem}
.job-body ul,.job-body ol{margin:0 0 .9rem;padding-left:1.2rem}
.job-body li{margin:0 0 .35rem}
.page-ledger .pl-ref{align-self:start;margin-top:.2rem;color:#ca4d00;font:700 .66rem/1 ui-monospace,monospace}
.page-ledger h3{margin:0;font-size:clamp(1.3rem,2.3vw,2.1rem);line-height:1.02;letter-spacing:-0.036em;color:#f7f2e9}
.page-ledger p{margin:0;color:rgba(255,255,255,.56);font-size:.84rem;line-height:1.45}
.page-ledger i{justify-self:end;color:#ca4d00;font-style:normal;transition:transform .28s ease}
.page-ledger :is(a,button):hover i{transform:translate(.18rem,-.18rem)}
@media (max-width:760px){
  .page-ledger>*{grid-template-columns:2.2rem minmax(0,1fr);gap:.4rem .8rem;min-height:0}
  .page-ledger p{grid-column:2}
  .page-ledger i{display:none}
  /* Sector icons are 3rem wide. Their old 2.2rem track ended exactly where the
     title began, so the bordered icon and first glyph visually collided. */
  .sector-ledger>*{grid-template-columns:3rem minmax(0,1fr);gap:.55rem 1rem;padding-block:1.25rem}
}

/* ── Stat rail (about) ───────────────────────────────────────────── */
/* .page-stats / .page-stat removed with the About page's uptime-and-hypercare
   strip — the figures were not ones the business publishes, and nothing else
   used the component. */

/* ── Empty state (case studies) ────────────────────────────────────
   An empty state is the only thing on its section, so it is centred in the
   column and its own contents are centred with it. Left-aligned, the narrow
   panel read as a stray card that had lost its grid. */
.page-empty{
  display:grid;
  justify-items:center;
  gap:1.1rem;
  max-width:46rem;
  margin-inline:auto;
  padding:clamp(1.75rem,4vw,3rem);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-panel);
  background:linear-gradient(150deg,rgba(202,77,0,.1),#090807 58%);
  text-align:center;
}
.page-empty-ico{display:grid;border-radius:var(--r-btn);place-items:center;width:3rem;height:3rem;border:1px solid rgba(227,100,22,.5);color:#ca4d00;background:rgba(227,100,22,.1)}
.page-empty-ico svg{width:1.4rem;height:1.4rem}
.page-empty h2{margin:0;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1;letter-spacing:-0.041em;color:#f7f2e9}
.page-empty p{margin:0;max-width:44rem;color:rgba(255,255,255,.62);line-height:1.6}
.page-empty .btn-fill{border-radius:var(--r-btn);background:#ca4d00;color:#fff}

/* Industry detail pages follow the site's chapter rhythm explicitly:
   black hero, paper challenges, black recommendations, orange close. The
   scope keeps other catalogue directories on their existing surfaces. */
.industry-detail .catalog-directory:not(.is-tinted){background:#ece7dc;color:#171411}
.industry-detail .catalog-directory:not(.is-tinted) .catalog-section-head p{color:#b84400}
.industry-detail .catalog-directory:not(.is-tinted) .page-ledger{border-color:rgba(23,20,17,.2)}
.industry-detail .catalog-directory:not(.is-tinted) .page-ledger>*{border-color:rgba(23,20,17,.18)}
.industry-detail .catalog-directory:not(.is-tinted) .page-ledger>*::before{background:#b84400}
.industry-detail .catalog-directory:not(.is-tinted) .page-ledger .pl-ref{color:#b84400}
.industry-detail .catalog-directory:not(.is-tinted) .page-ledger h3{color:#171411}
.industry-detail .catalog-directory:not(.is-tinted) .page-ledger p{color:rgba(23,20,17,.66)}
.industry-detail .catalog-directory.is-tinted{background:#0a0908;color:#f7f2e9}

/* Small utilities used by the rebuilt inner pages. */
.catalog-directory.is-tinted{background:#0a0908}
.catalog-hero-lead.is-wide{max-width:56rem}
.page-ledger.has-top-gap{margin-top:clamp(1.5rem,3vw,2.25rem)}
.hero-eyebrow.stack-group{margin-top:1.75rem}

/* ── Tag rows (about platforms) ──────────────────────────────────── */
.page-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.page-tags span{padding:.42rem .7rem;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.66);font-size:.72rem;font-weight:600}
.page-tags span:hover{border-color:rgba(227,100,22,.6);color:#f7f2e9}
.catalog-directory{padding:clamp(3.25rem,5.5vw,5.5rem) 0}.catalog-section-head{display:grid;grid-template-columns:.45fr 1.55fr;gap:2rem;margin-bottom:clamp(1.5rem,2.5vw,2.25rem)}.catalog-section-head p,.catalog-roadmap .wrap>div>p{margin:.3rem 0 0;color:#ca4d00;font-size:.67rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.catalog-section-head h2,.catalog-roadmap h2{max-width:17.3ch;margin:0;font-size:clamp(2.5rem,4.5vw,4.8rem);line-height:.93;letter-spacing:-0.048em}
.catalog-rows{border-top:1px solid rgba(255,255,255,.14)}.catalog-rows>a{position:relative;display:grid;grid-template-columns:3.5rem minmax(16rem,1fr) minmax(8rem,.25fr) 1.5rem;align-items:center;gap:1rem;min-height:8rem;padding:1.1rem .65rem;border-bottom:1px solid rgba(255,255,255,.14);transition:.32s ease}.catalog-rows>a::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#ca4d00;transform:scaleY(0);transition:transform .3s ease}.catalog-rows>a:hover{padding-inline:1.3rem;background:rgba(202,77,0,.06)}.catalog-rows>a:hover::before{transform:scaleY(1)}.catalog-rows>a>span{align-self:start;margin-top:.5rem;color:#ca4d00;font:.65rem ui-monospace,monospace}.catalog-rows h3{margin:0 0 .35rem;font-size:clamp(1.5rem,2.5vw,2.7rem);line-height:1;letter-spacing:-0.036em}.catalog-rows p{margin:0;color:rgba(255,255,255,.52);font-size:.82rem}.catalog-rows b{color:rgba(255,255,255,.43);font-size:.7rem;font-weight:600}.catalog-rows i{color:#ca4d00;font-style:normal}
.catalog-roadmap{padding:clamp(3rem,5vw,4.75rem) 0;background:#11100e}.catalog-roadmap>.wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem}.roadmap-list{border-top:1px solid rgba(255,255,255,.14)}.roadmap-list span{display:block;padding:1.2rem .2rem;border-bottom:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.62)}
/* Closing CTA band. It used to be #eae5db, which sat directly under the paper
   pricing section and read as one continuous block. Orange separates it from
   both light and dark sections above it, and steps cleanly into the black
   footer below. */
/* Closing CTA is centred: one headline, one line of copy, one button stacked on
   a single axis. Shared by every catalogue and detail page. */
/* ── Service detail dialog ───────────────────────────────────────────
   Native <dialog>, styled to match the enquiry modal (dark surface, warm
   white, orange accents) so opening one from a paper-toned table does not
   feel like a different site. */
.svc-dialog{
  width:min(100% - 2rem,34rem);
  max-height:min(88vh,46rem);
  margin:auto;
  padding:clamp(1.5rem,4vw,2.25rem);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-panel);
  background:linear-gradient(180deg,var(--tone-3),var(--tone-1));
  background-color:#0a0a0a;
  color:#fff;
  box-shadow:var(--lift-2);
  overflow-y:auto;
}
/* Same scrollbar treatment as .quote-dialog, and for the same reason: left
   native, an 11px light bar butts straight into the panel's rounded corner and
   reads as browser chrome dropped inside a dark dialog. The transparent border
   plus content-box clip insets the thumb off that corner — painting the
   background alone is what produces the overlap. */
.svc-dialog{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
.svc-dialog::-webkit-scrollbar{width:11px}
.svc-dialog::-webkit-scrollbar-track{background:transparent}
.svc-dialog::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
  background-clip:content-box;
  border:3px solid transparent;
  border-radius:999px;
}
.svc-dialog::-webkit-scrollbar-thumb:hover{background:rgba(202,77,0,.6);background-clip:content-box}
.svc-dialog::backdrop{background:rgba(4,3,2,.72);backdrop-filter:blur(3px)}
.svc-dialog-close{
  position:absolute;
  top:clamp(1rem,2.5vw,1.4rem);
  right:clamp(1rem,2.5vw,1.4rem);
  display:grid;
  place-items:center;
  width:2.1rem;
  height:2.1rem;
  border:1px solid var(--hairline);
  border-radius:50%;
  color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.svc-dialog-close svg{width:.9rem;height:.9rem}
.svc-dialog-close:hover{color:#fff;border-color:var(--primary);background:rgba(202,77,0,.18)}
/* The site orange, not a lightened one. The enquiry modal's own eyebrow sits on
   the same near-black surface at the same weight and uses --primary, so a
   brighter tint here made the dialog read as a different family. */
.svc-dialog-group{margin:0 0 .6rem;color:var(--primary);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.svc-dialog-title{margin:0;padding-right:2.5rem;font-size:clamp(1.5rem,3vw,2rem);line-height:1.05;letter-spacing:-.03em;color:#fff}
.svc-dialog-price{margin:.7rem 0 0;color:var(--primary);font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.svc-dialog-long{margin:1.1rem 0 0;color:rgba(255,255,255,.76);line-height:1.6}
.svc-dialog-block{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--hairline)}
.svc-dialog-block[hidden]{display:none}
.svc-dialog-block h3{margin:0 0 .7rem;color:rgba(255,255,255,.5);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.svc-dialog-block ul{margin:0;padding:0;list-style:none;display:grid;gap:.85rem}
.svc-dialog-block li{position:relative;padding-left:1.25rem;color:rgba(255,255,255,.82);font-size:.88rem;line-height:1.5}
/* .42rem matches the ring used on the rest of the site (.service-feature li);
   this one was .55rem and read as a chunky O beside 14px text. Centred on the
   first line rather than offset by a guessed em value, so it stays aligned if
   the type scale moves. */
.svc-dialog-block li::before{content:"";position:absolute;top:calc((1.5em - .42rem) / 2);left:.06rem;width:.42rem;height:.42rem;border:1.4px solid var(--primary);border-radius:50%}
.svc-dialog-block p{margin:0;color:rgba(255,255,255,.76);font-size:.88rem;line-height:1.6}
.svc-dialog-note{margin:1.25rem 0 0;color:rgba(255,255,255,.46);font-size:.7rem;line-height:1.5}
.svc-dialog-actions{margin-top:1.5rem}
.svc-dialog-actions .btn-fill{width:100%;justify-content:center}
@media (prefers-reduced-motion:reduce){.svc-dialog::backdrop{backdrop-filter:none}}

/* ── Detail-page FAQ ─────────────────────────────────────────────────
   Five questions, then out to the full FAQ. Dark on purpose: it sits between
   the paper pricing block and the orange closing CTA, and without a tonal
   break those two ran together into one long light stretch. */
.detail-faq{padding:clamp(4rem,7vw,6.5rem) 0;background:#0c0b0a;color:#f7f2e9}
.detail-faq-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.detail-faq-head>div>p{margin:0 0 1rem;color:#ca4d00;font-size:.67rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.detail-faq-head h2{margin:0;font-size:clamp(2.2rem,4vw,3.6rem);line-height:.94;letter-spacing:-0.044em;color:#f7f2e9}
.detail-faq-head .text-link{flex:0 0 auto;color:#f7f2e9;white-space:nowrap}
.detail-faq details{border-top:1px solid rgba(255,255,255,.14)}
.detail-faq details:last-of-type{border-bottom:1px solid rgba(255,255,255,.14)}
.detail-faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.25rem 0;color:#f7f2e9;font-weight:800;cursor:pointer;list-style:none}
.detail-faq summary::-webkit-details-marker{display:none}
.detail-faq summary::after{content:"+";flex:0 0 auto;color:#ca4d00;font-size:1.3rem;line-height:1;transition:transform .25s ease}
.detail-faq details[open] summary::after{transform:rotate(45deg)}
.detail-faq summary:is(:hover,:focus-visible){color:#ca4d00}
.detail-faq summary:focus-visible{outline:2px solid #ca4d00;outline-offset:3px}
.detail-faq details p{max-width:62ch;margin:0;padding:0 3rem 1.5rem 0;color:rgba(255,255,255,.64);line-height:1.6}
@media(max-width:760px){
  .detail-faq-head{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .detail-faq details p{padding-right:1.5rem}
}
.catalog-cta{padding:clamp(3.75rem,7vw,6.5rem) 0;background:#b84400;color:#fff;text-align:center}
.catalog-cta h2{max-width:27.1ch;margin:0 auto;font-size:clamp(2.6rem,4.4vw,4.6rem);line-height:.92;letter-spacing:-0.048em;color:#fff;text-wrap:balance}
.catalog-cta p{max-width:36rem;margin:1.1rem auto 1.75rem;color:#fff}
.catalog-cta .btn-fill{border-radius:var(--r-btn);background:#fff;color:#b84400}
.catalog-cta .btn-fill:hover{background:#171411;color:#fff}
/* ── Services directory ──────────────────────────────────────────────
   Four equal cards. The previous bento gave Managed IT a double-height tile
   it had nothing to fill, so two thirds of the strongest card on the page was
   empty. Equal weight suits four offerings of comparable value, and each card
   now carries what it actually covers instead of a headline and air. */
.service-showcase{padding:clamp(3.25rem,5.5vw,5.5rem) 0}
.service-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,1.6vw,1.25rem);
}
.service-feature{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(1.5rem,2.6vw,2.1rem);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-card);
  background:#090909;
  transition:border-color .25s ease,background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.service-feature:hover{
  border-color:#ca4d00;
  background:#11100e;
  transform:translateY(-4px);
  box-shadow:0 1.2rem 2.4rem -.7rem rgba(202,77,0,.4);
}
.service-feature:focus-visible{outline:2px solid #ca4d00;outline-offset:3px}
/* Icon replaces the reference number: what the service is, not where it sits
   in a list nobody is counting. */
.dir-ico{
  display:grid;
  place-items:center;
  width:2.9rem;
  height:2.9rem;
  margin-bottom:1.1rem;
  border:1px solid rgba(202,77,0,.35);
  border-radius:var(--r-btn);
  color:#ca4d00;
  background:rgba(202,77,0,.1);
  transition:color .25s ease,background-color .25s ease,border-color .25s ease;
}
.dir-ico svg{width:1.4rem;height:1.4rem}
.service-feature:hover .dir-ico{color:#fff;background:#ca4d00;border-color:#ca4d00}
.service-feature-kicker{color:#ca4d00;font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.service-feature h2{max-width:19.7ch;margin:.5rem 0 .8rem;font-size:clamp(1.6rem,2.6vw,2.35rem);line-height:.98;letter-spacing:-0.036em}
.service-feature p{max-width:42ch;margin:0;color:rgba(255,255,255,.6);font-size:.88rem;line-height:1.55}
.service-feature ul{display:grid;gap:.4rem;margin:1.25rem 0 0;padding:0;list-style:none}
.service-feature li{position:relative;padding-left:1.1rem;color:rgba(255,255,255,.5);font-size:.78rem}
.service-feature li::before{content:"";position:absolute;top:.5em;left:0;width:.4rem;height:.4rem;border:1.4px solid #ca4d00;border-radius:50%}
.service-feature i{margin-top:auto;padding-top:1.4rem;color:#ca4d00;font-size:.78rem;font-weight:700;font-style:normal}
@media(max-width:720px){.service-feature-grid{grid-template-columns:1fr}}

/* Solutions ledger: same icon set, sized for a row rather than a card.
   Covers both list containers — solutions-overview uses .catalog-rows and the
   about/industries ledgers use .page-ledger. */
:is(.page-ledger,.catalog-rows) .pl-ico{
  display:grid;
  place-items:center;
  width:3rem;
  height:3rem;
  border:1px solid rgba(202,77,0,.32);
  border-radius:var(--r-btn);
  color:#ca4d00;
  background:rgba(202,77,0,.08);
  transition:color .25s ease,background-color .25s ease,border-color .25s ease;
}
:is(.page-ledger,.catalog-rows) .pl-ico svg{width:1.55rem;height:1.55rem}
:is(.page-ledger,.catalog-rows) a:hover .pl-ico{color:#fff;background:#ca4d00;border-color:#ca4d00}
/* The row's first column was sized and typed for a monospace reference
   number; the icon needs the box, not the type. Both lists are already
   align-items:center, so the icon just has to stop opting out of it — the
   inherited align-self:start/margin-top belongs to the old numeral. */
:is(.page-ledger,.catalog-rows) > * > .pl-ico{align-self:center;margin-top:0;flex:0 0 auto}
@media(max-width:760px){.catalog-hero-grid,.catalog-section-head,.catalog-roadmap>.wrap{grid-template-columns:1fr;gap:1.5rem}.catalog-hero h1{font-size:clamp(3.6rem,16vw,5rem)}.catalog-rows>a{grid-template-columns:3rem 1fr 1.2rem;min-height:7rem}.catalog-rows b{display:none}.service-feature-grid{grid-template-columns:1fr}}

/* Hero rhythm matches .catalog-hero so the two hero variants sit at the same
   height, and the breadcrumb reads as a label on the hero instead of floating
   in six rems of empty space above it. */
.detail-hero{padding:clamp(5.5rem,7.5vw,7rem) 0 clamp(2.75rem,4.5vw,4.25rem);border-bottom:1px solid rgba(255,255,255,.14);background:radial-gradient(circle at 50% 40%,rgba(202,77,0,.14),transparent 27%),#050505}.detail-hero .crumb{margin:0 0 clamp(1.75rem,3.2vw,2.75rem);padding-bottom:.85rem;border-bottom:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.42);font-size:.7rem;letter-spacing:.01em}.detail-hero .crumb a{color:#ca4d00}.detail-hero .crumb a:hover{color:#f07a32}/* Centred, not baseline-aligned. With align-items:end the headline sat on the
   same baseline as a two-line lede and the whole hero read bottom-heavy —
   worse once the right column gained a figure and grew taller than the h1. */
.detail-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:4rem}.detail-number{color:#ca4d00!important;font-size:.67rem!important;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.detail-hero h1{margin:0;font-size:clamp(4rem,7vw,7rem);line-height:.85;letter-spacing:-0.06em}/* The lead and the CTA sit under the headline in the left column, so the figure
   has the right column to itself. This used to be `>div:last-child>p`, which
   stopped selecting anything the moment the lead changed columns — hence the
   explicit class. */
.detail-lead{max-width:34rem;margin:1.75rem 0 2rem;color:rgba(255,255,255,.62);font-size:clamp(1rem,1.4vw,1.22rem)}.detail-hero .btn-fill{border-radius:var(--r-btn);background:#ca4d00;color:#fff}
.detail-outcomes{padding:2.2rem 0;border-bottom:1px solid rgba(255,255,255,.14);background:#0c0b0a}.detail-outcomes .wrap{display:grid;grid-template-columns:.35fr 1.65fr;gap:2rem}.detail-outcomes p{margin:0;color:#ca4d00;font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.detail-outcomes .wrap>div{display:grid;grid-template-columns:repeat(4,1fr)}.detail-outcomes span{padding:0 1rem;border-left:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.65);font-size:.73rem}
.detail-pricing{padding:clamp(5rem,9vw,9rem) 0;background:#ece7dc;color:#171411}.detail-pricing-head{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:4rem;margin-bottom:3rem}.detail-pricing-head>div>p{margin:0 0 1rem;color:#ca4d00;font-size:.67rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.detail-pricing h2{margin:0;font-size:clamp(2.8rem,5vw,5.4rem);line-height:.9;letter-spacing:-0.052em}.detail-pricing-head>p{max-width:31rem;margin:0;color:rgba(23,20,17,.62)}
/* ── Catalogue: sub-service tabs + itemised list ─────────────────────
   The rail and its label mirror the pricing page exactly (shared rules
   above); only the surrounding layout is stated here. */
/* One column. This was `minmax(0,1fr) auto` to seat the currency picker beside
   the rail; with the picker gone the empty second track still contributed its
   1.75rem column gap, so the rail stopped short of the panel edge below it. */
.detail-pricing .svc-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:end;
  gap:.9rem;
  margin-bottom:clamp(1.25rem,2.4vw,1.75rem);
}
.detail-pricing .svc-panel{border:1px solid rgba(23,20,17,.17);border-radius:var(--r-card);background:#f6f2e9;overflow:hidden}
.detail-pricing .svc-panel[hidden]{display:none}
.detail-pricing .svc-panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.4rem;border-bottom:1px solid rgba(23,20,17,.17)}
/* Orange, at 1.3rem bold — large text, so 4.11:1 clears the 3:1 the size
   requires. The row names below stay near-black so the accent marks the group
   rather than competing with every line under it. */
.detail-pricing .svc-panel-head h3{margin:0;color:#ca4d00;font-size:1.3rem}
.detail-pricing .svc-panel-count{color:rgba(23,20,17,.6);font-size:.68rem;white-space:nowrap}
.detail-pricing .svc-panel-note{margin:0;padding:1rem 1.4rem;border-top:1px solid rgba(23,20,17,.13);color:rgba(23,20,17,.62);font-size:.7rem;line-height:1.5}
.detail-pricing .price-list{margin:0;padding:0;list-style:none}
/* The row is a <button> now, so the element defaults have to be undone before
   it can look like a table row again. */
.detail-pricing .price-row{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto 1.1rem;
  align-items:center;
  gap:2rem;
  padding:1.15rem 1.4rem;
  border:0;
  border-bottom:1px solid rgba(23,20,17,.13);
  color:inherit;
  background:transparent;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.detail-pricing .price-list li:last-child .price-row{border-bottom:0}
/* Hover/focus inverts the row to orange. Every child that carried its own
   paper-surface colour has to be restated, because those were absolute values
   rather than inherited ones. */
.detail-pricing .price-row:is(:hover,:focus-visible){
  background:#b84400;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 .6rem 1.4rem -.4rem rgba(184,68,0,.55);
  outline:none;
}
.detail-pricing .price-row:is(:hover,:focus-visible) :is(.pr-name,.svc-item-price,.svc-item-price--quote){color:#fff}
.detail-pricing .price-row:is(:hover,:focus-visible) :is(.pr-desc,.pr-from){color:rgba(255,255,255,.82)}
.detail-pricing .price-row:is(:hover,:focus-visible) .pr-more{color:#fff;transform:translateX(3px)}
.detail-pricing .pr-more{display:grid;place-items:center;color:rgba(23,20,17,.4);transition:color .2s ease,transform .2s ease}
.detail-pricing .pr-more svg{width:1rem;height:1rem}
.detail-pricing .pr-text{display:grid}
/* Stated, not inherited: the base `.pr-name` rule uses var(--text), which the
   dark theme resolves to near-white — invisible on this paper panel. Every
   other cell in the row already states its own colour. */
.detail-pricing .pr-name{color:#171411;font-weight:700}/* Alphas on this paper panel are set at the point where each lands above
   4.5:1, not by eye: .55 gave the description 3.94:1 and .42 gave the "from"
   label 2.68:1. The price uses #b84400 for the same reason the tier cards do —
   #ca4d00 only reaches 4.11:1 here, and the price is the one line on the row
   nobody should have to squint at. */
.detail-pricing .pr-desc{color:rgba(23,20,17,.62);font-size:.75rem}.detail-pricing .pr-price{text-align:right}.detail-pricing .pr-from{display:block;color:rgba(23,20,17,.6);font-size:.6rem;text-transform:uppercase}.detail-pricing .svc-item-price{color:#b84400;font-weight:800;white-space:nowrap}.detail-pricing .svc-item-price--quote{color:#171411}.detail-pricing .currency-control label,.detail-pricing [data-currency-status]{color:rgba(23,20,17,.58)}
@media(max-width:900px){
  .detail-pricing .svc-controls{grid-template-columns:1fr}
}
@media(max-width:760px){.detail-hero-grid,.detail-pricing-head,.detail-outcomes .wrap{grid-template-columns:1fr;gap:1.5rem}.detail-hero h1{font-size:clamp(3.5rem,16vw,5rem)}.detail-outcomes .wrap>div{grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14)}.detail-outcomes span{min-height:4.2rem;display:grid;place-items:center start;padding:.8rem;background:#0c0b0a;border:0}.detail-pricing .price-row{grid-template-columns:1fr auto;gap:.7rem 1rem}.detail-pricing .pr-price{grid-column:1;text-align:left}.detail-pricing .pr-from{display:inline;margin-right:.4rem}.detail-pricing .pr-more{grid-column:2;grid-row:1 / span 2;align-self:center}}

.pricing-market{padding:clamp(3.25rem,5.5vw,5.5rem) 0;background:#ece7dc;color:#171411}.pricing-market-head{display:grid;grid-template-columns:minmax(0,1fr);align-items:end;gap:3rem}
.pricing-market-head>div>p{margin:0 0 1rem;color:#ca4d00;font-size:.67rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.pricing-market-head h2{max-width:16ch;margin:0;font-size:clamp(2.8rem,5vw,5.3rem);line-height:.9;letter-spacing:-0.052em}.pricing-market .currency-control label,.pricing-market [data-currency-status]{color:rgba(23,20,17,.58)}
/* Controls row: capability rail on the left, currency picker on the same line
   at its right. Both carry a label on the line above, so the two labels and
   the two controls each share a baseline and read as one instrument bar.
   The margin above is deliberately tight — the heading has nothing in its
   right-hand column, and a large gap there left the section looking unfinished. */
.pricing-controls-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.9rem;
  margin:clamp(1.35rem,2.6vw,2rem) 0 clamp(.9rem,1.8vw,1.25rem);
}

/* Parked beside the billing switch on subscription categories. */
.billing-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem 1.5rem;margin-bottom:1.1rem}
.billing-row .billing-switch{margin-bottom:0}
/* Scoped to the section, not to one container: the control moves between the
   dock and the billing row, so its own type has to travel with it. Matched to
   .pricing-selector-label so the two labels read as one family. */
.pricing-market .pricing-currency label{
  margin:0 0 .5rem;
  color:rgba(23,20,17,.45);
  font:700 .58rem/1 ui-monospace,monospace;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.pricing-market .pricing-currency .cx-btn{min-height:48px}
.pricing-market .pricing-currency [data-currency-status]{
  color:rgba(23,20,17,.5);
  font-size:.62rem;
}
/* The shared currency picker is authored for dark surfaces; on these paper
   sections it was near-invisible — a transparent pill on #ece7dc. Restated for
   light, and applied to the solution pages' catalogue too: same surface, same
   control, so it must not be styled twice. */
.pricing-market .cx-btn,.detail-pricing .cx-btn{border-color:rgba(23,20,17,.3);color:#171411;background:rgba(23,20,17,.05)}
.pricing-market .cx-btn:hover,.detail-pricing .cx-btn:hover{border-color:#b84400;background:rgba(202,77,0,.1)}
.pricing-market .cx-badge,.detail-pricing .cx-badge{border-color:rgba(202,77,0,.45);background:rgba(202,77,0,.16);color:#b84400}
.pricing-market .cx-chev,.detail-pricing .cx-chev{opacity:.75}
.pricing-market .cx-list,.detail-pricing .cx-list{border-color:rgba(23,20,17,.2);background:#f7f3ea;box-shadow:0 1.2rem 2.4rem rgba(23,20,17,.18)}
.pricing-market .cx-opt,.detail-pricing .cx-opt{color:rgba(23,20,17,.78)}
.pricing-market .cx-opt:hover,.pricing-market .cx-opt:focus-visible,.detail-pricing .cx-opt:hover,.detail-pricing .cx-opt:focus-visible{background:rgba(23,20,17,.06);color:#171411}
.pricing-market .cx-opt.is-on,.detail-pricing .cx-opt.is-on{background:rgba(202,77,0,.12);color:#171411}
.pricing-market .cx-opt.is-on .cx-badge,.detail-pricing .cx-opt.is-on .cx-badge{background:#b84400;border-color:#b84400;color:#fff}
.pricing-market .cx-opt .cx-name,.detail-pricing .cx-opt .cx-name{color:rgba(23,20,17,.5)}

/* Instrument-panel selector: bracketed frame and a filled active segment with
   a clipped corner. Shared by the pricing page's capability rail and the
   solution pages' sub-service rail — same surface, same meaning. */
.pricing-selector,.svc-selector{position:relative;min-width:0}
.pricing-selector-label,.svc-rail-label{
  margin:0 0 .5rem;
  color:rgba(23,20,17,.45);
  font:700 .58rem/1 ui-monospace,monospace;
  letter-spacing:.22em;
  text-transform:uppercase;
}
/* A recessed well rather than a flat grey block: warm paper tone a shade
   darker than the section, a white top highlight, and a soft inner shadow so
   the active segment reads as sitting proud of the channel. */
.pricing-category-rail,.svc-rail{
  position:relative;
  display:flex;
  gap:0;
  margin:0;
  padding:5px;
  border:1px solid rgba(23,20,17,.14);
  background:linear-gradient(180deg,#e4ddd0,#eae4d9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 2px 6px rgba(23,20,17,.07),
    0 1px 0 rgba(255,255,255,.5);
  overflow-x:auto;
  scrollbar-width:none;
}
.pricing-category-rail::-webkit-scrollbar,.svc-rail::-webkit-scrollbar{display:none}
/* Corner brackets, drawn not typed. */
.pricing-selector::before,.pricing-selector::after,.svc-selector::before,.svc-selector::after{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border:1px solid #b84400;
  pointer-events:none;
}
.pricing-selector::before,.svc-selector::before{left:-1px;bottom:-1px;border-width:0 0 1px 1px}
.pricing-selector::after,.svc-selector::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.pricing-category-rail button,.svc-rail button{
  position:relative;
  flex:0 0 auto;
  display:grid;
  place-content:center;
  padding:.75rem .95rem;
  border:0;
  color:rgba(23,20,17,.62);
  background:transparent;
  cursor:pointer;
  transition:color .22s ease,background-color .22s ease,box-shadow .22s ease;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);
}
/* Once there is room for them all, the segments divide the rail evenly so its
   full width is used and its edges align with the cards below. Narrower than
   that and they keep their natural width and the rail scrolls instead. */
@media(min-width:900px){
  .pricing-category-rail button,.svc-rail button{flex:1 1 0;min-width:0}
}
.pricing-category-rail button + button::before,.svc-rail button + button::before{
  content:"";
  position:absolute;
  inset:22% auto 22% 0;
  width:1px;
  background:rgba(23,20,17,.14);
}
.pricing-category-rail button span,.svc-rail button span{font:700 .74rem/1 var(--font);white-space:nowrap}
.pricing-category-rail button:hover,.svc-rail button:hover{color:#b84400;background:rgba(255,255,255,.55)}
.pricing-category-rail button.is-on,.svc-rail button.is-on{
  color:#fff;
  background:linear-gradient(180deg,#c85200,#a93e00);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 .45rem 1rem -.35rem rgba(169,62,0,.6);
}
.pricing-category-rail button.is-on + button::before,.svc-rail button.is-on + button::before{background:transparent}

/* ── Billing period switch ───────────────────────────────────────────
   Only rendered for categories that actually hold a "/ month" tier, so it
   never appears over one-off project fees. */
.billing-switch{
  display:inline-flex;
  gap:0;
  margin:0 0 1.1rem;
  padding:4px;
  border:1px solid rgba(23,20,17,.14);
  background:linear-gradient(180deg,#e4ddd0,#eae4d9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 2px 6px rgba(23,20,17,.07);
}
.billing-switch button{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  padding:.55rem 1rem;
  border:0;
  color:rgba(23,20,17,.62);
  background:transparent;
  font:700 .74rem/1 var(--font);
  cursor:pointer;
  transition:color .22s ease,background-color .22s ease,box-shadow .22s ease;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);
}
/* color:inherit is load-bearing — `.catalog-page em` paints every em orange,
   which on the active orange segment made this line disappear. */
.billing-switch button em{color:inherit;font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.04em;opacity:.72}
.billing-switch button:hover{color:#b84400;background:rgba(255,255,255,.55)}
.billing-switch button.is-on{
  color:#fff;
  background:linear-gradient(180deg,#c85200,#a93e00);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 .45rem 1rem -.35rem rgba(169,62,0,.6);
}
.billing-switch button.is-on em{opacity:.9}
/* Sits inside .tier-price so it needs no extra row in the card's grid. */
.tier-annual-note{
  display:block;
  margin-top:.45rem;
  font-size:.62rem;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.02em;
  opacity:.72;
}
.tier-annual-note[hidden]{display:none}

/* ── Tier carousel ───────────────────────────────────────────────────
   Scroll-snap row at every width. When all three cards fit, .is-static
   hides the controls instead of swapping in a different layout. */
.tier-carousel{position:relative}
.tier-track{
  display:grid;
  grid-auto-flow:column;
  /* A floor per column, not just 1fr (CMS-PLAN §7.3, Phase 6 step 20). Three
     cards divide the row comfortably; a fourth would squeeze all four until the
     price and the feature list wrapped. With a minimum width the row simply
     starts scrolling instead — which the carousel already handles, and which
     .is-static already hides the controls for when everything fits. */
  grid-auto-columns:minmax(min(17rem,100%),1fr);
  gap:clamp(.85rem,1.5vw,1.35rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  /* Room for the hover lift so it is not clipped by the scroll container. */
  padding:.5rem .25rem 1rem;
  margin-inline:-.25rem;
}
.tier-track::-webkit-scrollbar{display:none}
.tier-card{
  position:relative;
  border-radius:var(--r-card);
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  gap:.85rem;
  min-width:0;
  padding:clamp(1.4rem,2.4vw,2rem);
  border:1px solid rgba(23,20,17,.16);
  scroll-snap-align:start;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
}
/* Hover: orange edge, orange bloom, a little more lift. Stated once here and
   the border colour restated per tone below, so all three cards answer the
   pointer the same way without the light/accent/dark ladder breaking down. */
.tier-card:hover{
  transform:translateY(-7px);
  border-color:#b84400;
  box-shadow:0 1.6rem 3rem -.6rem rgba(184,68,0,.42),0 0 0 1px rgba(184,68,0,.5);
}
.tier-card:focus-within{border-color:#b84400;box-shadow:0 0 0 1px rgba(184,68,0,.5)}
.tier-label{display:flex;align-items:center;gap:.55rem;margin:0;font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.tier-badge{
  position:absolute;
  top:clamp(1.4rem,2.4vw,2rem);
  right:clamp(1.4rem,2.4vw,2rem);
  padding:.28rem .55rem;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
/* 800 is the site-wide weight for a price figure (.p-amount, .svc-item-price,
   the calculator total). The card was inheriting body weight, so the largest
   number on the pricing page was the only one not set bold. The unit and
   "Survey & quote" suffixes below keep their own lighter weights. */
.tier-price{margin:0;font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:800;line-height:1;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
/* .p-amount also carries the legacy pricing-page type; the card sets scale.
   Three classes deep on purpose: a legacy
   `[data-theme="dark"] :is(…, .p-amount, .port-head h2, …)` rule scores
   (0,2,1) because :is() takes its most specific argument, so a two-class
   selector here loses and the figure came out near-white on the white card. */
.tier-card .tier-price .p-amount{font:inherit;letter-spacing:inherit;margin:0;color:inherit}
.tier-price .tier-unit,.tier-price .tier-quote{font-size:.72rem;font-weight:600;letter-spacing:0}
.tier-price .tier-quote{font-size:1.35rem;font-weight:700;letter-spacing:-.03em}
.tier-desc{min-height:2.6em;margin:0;font-size:.82rem;line-height:1.45}
.tier-feats{margin:0;padding:1.1rem 0 0;border-top:1px solid;list-style:none}
.tier-feats li{display:grid;grid-template-columns:1rem 1fr;align-items:start;gap:.55rem;padding:.34rem 0;font-size:.79rem;line-height:1.4}
.tier-tick{width:1rem;height:1rem;margin-top:.12em}
.tier-cta{
  min-height:2.9rem;
  padding:.75rem 1rem;
  border:1px solid;
  border-radius:var(--r-btn);
  font:700 .8rem var(--font);
  cursor:pointer;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}

/* Tone 1 — white. Near-black text, orange accents. */
.tier-card--light{background:#fff;color:#171411}
.tier-card--light .tier-label{color:#b84400}
.tier-card--light .tier-desc{color:rgba(23,20,17,.7)}
.tier-card--light .tier-feats{border-color:rgba(23,20,17,.14)}
.tier-card--light .tier-feats li{color:rgba(23,20,17,.8)}
.tier-card--light .tier-tick{color:#b84400}
.tier-card--light .tier-cta{border-color:rgba(23,20,17,.3);color:#171411;background:transparent}
.tier-card--light .tier-cta:hover{border-color:#b84400;color:#fff;background:#b84400}

/* Tone 2 — orange, the highlighted middle option. #b84400 rather than #ca4d00
   so white body text clears 4.5:1 (5.06:1 vs 4.60:1); hierarchy comes from
   size and weight, not from lowering opacity into failing contrast. */
.tier-card--accent{background:#b84400;color:#fff;border-color:#b84400}
.tier-card--accent .tier-label{color:#fff}
.tier-card--accent .tier-desc{color:#fff}
.tier-card--accent .tier-feats{border-color:rgba(255,255,255,.32)}
.tier-card--accent .tier-feats li{color:#fff}
.tier-card--accent .tier-tick{color:#fff}
.tier-card--accent .tier-badge{color:#b84400;background:#fff}
.tier-card--accent .tier-cta{border-color:#fff;color:#b84400;background:#fff}
.tier-card--accent .tier-cta:hover{color:#fff;background:#8f3400;border-color:#fff}

/* Tone 3 — black. Warm off-white text, orange accents. */
.tier-card--dark{background:#171411;color:#f6f0e6;border-color:#171411}
.tier-card--dark .tier-label{color:#f79553}
.tier-card--dark .tier-desc{color:rgba(246,240,230,.78)}
.tier-card--dark .tier-feats{border-color:rgba(255,255,255,.18)}
.tier-card--dark .tier-feats li{color:rgba(246,240,230,.86)}
.tier-card--dark .tier-tick{color:#f79553}
.tier-card--dark .tier-cta{border-color:rgba(255,255,255,.35);color:#f6f0e6;background:transparent}
.tier-card--dark .tier-cta:hover{border-color:#ca4d00;color:#fff;background:#ca4d00}

/* ── Fourth tone (§7.3, step 20) ─────────────────────────────────────
   `tone` is a per-tier field rather than the card's position, so a plan can
   carry four tiers and the fourth has a defined look instead of inheriting
   whatever the sequence happened to reach. Outline is the quietest of the
   four: the page's own background with a drawn edge, which reads as "further
   up the range" without competing with the accent card for attention.

   Theme-independent, like the other three: .pricing-market is #ece7dc in both
   themes, so a dark-mode variant here would put pale ink on a cream card. */
.tier-card--outline{background:transparent;color:#171411;border-color:rgba(23,20,17,.28)}
.tier-card--outline .tier-label{color:#b84400}
.tier-card--outline .tier-desc{color:rgba(23,20,17,.7)}
.tier-card--outline .tier-feats{border-color:rgba(23,20,17,.14)}
.tier-card--outline .tier-feats li{color:rgba(23,20,17,.8)}
.tier-card--outline .tier-tick{color:#b84400}
.tier-card--outline .tier-cta{border-color:rgba(23,20,17,.3);color:#171411;background:transparent}
.tier-card--outline .tier-cta:hover{border-color:#b84400;color:#fff;background:#b84400}

/* The accent card is already this orange, so an orange edge would vanish on
   it. It gets a warm-white ring instead — same gesture, opposite direction,
   which is what keeps the middle card reading as the highlighted one even
   while it is being hovered. */
.tier-card--accent:hover{
  border-color:#fff;
  box-shadow:0 1.6rem 3rem -.6rem rgba(184,68,0,.55),0 0 0 1px rgba(255,255,255,.65);
}
.tier-card--accent:focus-within{border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.65)}

.tier-controls{display:flex;align-items:center;justify-content:center;gap:1rem;padding-top:.35rem}
.tier-carousel.is-static .tier-controls,
.tier-carousel.is-static .tier-nav{display:none}
/* The arrows sit on the cards rather than under them: at the vertical middle of
   the row, one against each edge, where a thumb already is. The dots keep the
   row below to themselves. */
.tier-viewport{position:relative}
.tier-nav{
  position:absolute;
  top:50%;
  z-index:3;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:2.5rem;
  height:2.5rem;
  border:1px solid rgba(23,20,17,.18);
  border-radius:50%;
  color:#171411;
  /* Opaque, because it floats over a white, an orange and a near-black card in
     turn and has to stay legible on all three. */
  background:#f6f2e9;
  box-shadow:0 .5rem 1.1rem -.4rem rgba(23,20,17,.4);
  cursor:pointer;
  transition:border-color .22s ease,color .22s ease,background-color .22s ease;
}
.tier-nav--prev{left:0}
.tier-nav--next{right:0}
.tier-nav svg{width:1rem;height:1rem}
.tier-nav:hover{border-color:#b84400;color:#fff;background:#b84400}
.tier-dots{display:flex;align-items:center;gap:.45rem}
.tier-dots button{
  width:.55rem;
  height:.55rem;
  padding:0;
  border:1px solid rgba(23,20,17,.4);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:background-color .22s ease,border-color .22s ease,transform .22s ease;
}
.tier-dots button.is-on{background:#b84400;border-color:#b84400;transform:scale(1.25)}

/* ── Estimate builder band ───────────────────────────────────────────
   The published tiers answer "what does the usual shape cost"; this answers
   "mine isn't the usual shape". A single full-width card under the row, with
   the same corner brackets as the capability selector so it reads as part of
   the same instrument set rather than a stray promo. */
.pricing-estimate{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(1rem,2.5vw,1.75rem);
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
  padding:clamp(1.35rem,2.6vw,1.9rem) clamp(1.35rem,2.6vw,2rem);
  border:1px solid rgba(23,20,17,.17);
  border-radius:var(--r-panel);
  background:#f6f2e9;
}
/* No corner brackets here: they read as a machined frame only on a square
   edge, and this card is rounded. The rail keeps its own. */
.pricing-estimate-ico{
  display:grid;
  border-radius:var(--r-btn);
  place-items:center;
  width:3rem;
  height:3rem;
  border:1px solid rgba(202,77,0,.32);
  background:rgba(202,77,0,.1);
  color:#b84400;
}
.pricing-estimate-ico svg{width:1.5rem;height:1.5rem}
.pricing-estimate-copy h3{margin:0 0 .3rem;font-size:clamp(1.05rem,1.7vw,1.32rem);letter-spacing:-0.029em}
.pricing-estimate-copy p{margin:0;max-width:52ch;color:rgba(23,20,17,.62);font-size:.82rem;line-height:1.5}
.pricing-estimate .btn-fill{border-radius:var(--r-btn);white-space:nowrap}

@media (max-width:900px){
  .billing-row{justify-content:flex-start}
  /* One card per view, centred, with a sliver of each neighbour either side.

     The width is set by the padding rather than by grid-auto-columns: a track
     of `100%` is exactly the content box, so the two side paddings are the
     whole of the leftover. Half the leftover on each side is what puts the card
     in the middle — and it also means the first card centres at scroll offset 0
     and the last at the end of the range, so mandatory snapping can reach every
     one of them.

     NOT `minmax(0, 82%)`, which is what this was: with a zero floor the grid
     never overflows at all. It divides the container between the three tracks
     and each lands far below its maximum, which is how a phone ended up with
     three ~100px cards side by side instead of a swipeable row.

     9% of the track is the peek; past a 24rem card the padding takes the rest,
     so a tablet gets a readable card rather than a 700px one. */
  .tier-track{
    grid-auto-columns:100%;
    padding-inline:max(9%,calc((100% - 24rem) / 2));
  }
  .tier-card{scroll-snap-align:center}
}
@media (max-width:720px){
  .pricing-estimate{grid-template-columns:auto minmax(0,1fr);row-gap:1.1rem}
  .pricing-estimate .btn-fill{grid-column:1 / -1;justify-self:start}
}
@media (max-width:560px){
  .tier-desc{min-height:0}
  .billing-switch{width:100%}
  .billing-switch button{flex:1 1 0;justify-content:center}
}
.pricing-market .pricing-panel{display:none}.pricing-market .pricing-panel.is-active{display:block}.pricing-panel-title{display:flex;justify-content:space-between;align-items:end;gap:2rem;padding:2rem 0}.pricing-panel-title p{margin:0 0 .7rem;color:#ca4d00;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.pricing-panel-title h2{max-width:19.7ch;margin:0;font-size:clamp(2rem,3.8vw,4rem);line-height:.94;letter-spacing:-0.044em}.pricing-panel-title .btn-fill{border-radius:var(--r-btn);background:#171411;color:#fff;white-space:nowrap}
.market-tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(23,20,17,.2);border:1px solid rgba(23,20,17,.2);border-radius:var(--r-card);overflow:hidden}.market-tier{min-height:30rem;display:flex;flex-direction:column;padding:1.5rem;background:#f6f2e9}.market-tier.is-featured{background:#171411;color:#f6f2e9}.market-tier>span{color:#ca4d00;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.market-tier h3{margin:auto 0 1rem;font-size:clamp(1.8rem,3vw,3.2rem);line-height:.95;letter-spacing:-0.041em}.market-tier h3 .p-amount{font:inherit}.market-tier h3 small{font-size:.72rem;font-weight:500;letter-spacing:0}.market-tier>p{min-height:2.5rem;margin:0;color:rgba(23,20,17,.57);font-size:.79rem}.market-tier.is-featured>p{color:rgba(255,255,255,.55)}.market-tier ul{margin:1.5rem 0;padding:1.3rem 0 0;border-top:1px solid rgba(23,20,17,.16);list-style:none}.market-tier.is-featured ul{border-color:rgba(255,255,255,.15)}.market-tier li{padding:.35rem 0;color:rgba(23,20,17,.62);font-size:.73rem}.market-tier.is-featured li{color:rgba(255,255,255,.62)}.market-tier>button{margin-top:auto;padding:.8rem;border:1px solid rgba(23,20,17,.25);border-radius:var(--r-btn);color:inherit;background:transparent;font-weight:700;cursor:pointer}.market-tier.is-featured>button{border-color:#ca4d00;color:#fff}.market-tier>button:hover{background:#ca4d00;color:#fff;border-color:#ca4d00}.pricing-disclaimer{max-width:58rem;margin:2rem 0 0;color:rgba(23,20,17,.52);font-size:.69rem;line-height:1.5}
@media(max-width:800px){.pricing-market-head{grid-template-columns:1fr}.pricing-market .currency-control{justify-self:start}.pricing-panel-title{align-items:start;flex-direction:column}.market-tier-grid{grid-template-columns:1fr}.market-tier{min-height:24rem}}

/* ============================================================
   HOMEPAGE SLIDE DECK
   Native scroll snapping keeps touch, keyboard, and reduced-motion
   behaviour intact while each chapter reads as a composed viewport.
   ============================================================ */
/* Scrolling is fully manual — no CSS snap at all. Even `y proximity` hands the
   gesture to the compositor, which is what made a trackpad feel locked: the
   many small deltas of one swipe kept getting recaptured by the current
   section. Alignment is instead a *suggestion* applied by the settle routine in
   home-refresh.js, which waits for the gesture to end and only then eases to
   whichever chapter already covers more than half the viewport. */
html.market-home-page {
  scroll-behavior: smooth;
  scroll-snap-type: none;
  scroll-padding-top: 0;
}

.market-home .header-shell {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
}

.market-home .site-header {
  width: min(calc(100% - 2rem), 1480px);
  margin: .75rem auto 0;
}
.market-home .floating-actions { display: none; }
.market-home .site-footer {
  position: relative;
  z-index: 2;
}

.market-slide {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  overflow: hidden;
}

.market-slide > .wrap { position: relative; z-index: 2; }

.market-section,
.market-final {
  display: grid;
  align-items: center;
  padding-top: clamp(7rem, 11vh, 8.5rem);
  padding-bottom: clamp(3.75rem, 7vh, 6rem);
}

.market-progress {
  position: fixed;
  z-index: 45;
  top: 50%;
  right: clamp(1rem, 2.2vw, 2.25rem);
  display: grid;
  gap: .2rem;
  transform: translateY(-50%);
}

.market-progress a {
  display: grid;
  grid-template-columns: 1.35rem 1.5rem auto;
  align-items: center;
  gap: .55rem;
  min-height: 1.65rem;
  color: rgba(255,255,255,.28);
}

.market-progress span,
.market-progress b {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.market-progress i {
  width: .7rem;
  height: 1px;
  background: currentColor;
  transition: width .35s cubic-bezier(.22,1,.36,1), background-color .35s ease;
}

.market-progress b {
  opacity: 0;
  transform: translateX(.35rem);
  transition: opacity .25s ease, transform .25s ease;
}

.market-progress a:hover,
.market-progress a.is-active { color: #fff; }
.market-progress a:focus-visible { outline: none; }
.market-progress a:focus-visible i { outline: 2px solid var(--market-orange); outline-offset: 4px; }
.market-progress a:hover b { opacity: 1; transform: none; }
.market-progress a.is-active span { color: var(--market-orange); }
.market-progress a.is-active i { width: 1.5rem; background: var(--market-orange); box-shadow: 0 0 .8rem rgba(202,77,0,.8); }
.market-home.market-on-light .market-progress a { color: rgba(23,21,19,.28); }
.market-home.market-on-light .market-progress a:hover,
.market-home.market-on-light .market-progress a.is-active { color: #171513; }

.market-hero {
  --hero-pad-b: clamp(2.75rem, 5vh, 4rem);
  min-height: 100dvh;
  padding-top: clamp(5.75rem, 9vh, 7.25rem);
  padding-bottom: var(--hero-pad-b);
  overflow: hidden;
}

/* Scroll cue: a vertical rail with a signal falling down it, rather than the
   previous horizontal gradient dash that read as a stray rule. */
.hero-scroll {
  left: 50%;
  bottom: 1rem;
  flex-direction: column;
  gap: .7rem;
  transform: translateX(-50%);
  border: 0;
}
.hero-scroll span { font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hero-scroll i {
  position: relative;
  width: 1px;
  height: 2.6rem;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(247,242,233,.28), rgba(247,242,233,.02));
}
.hero-scroll i b {
  position: absolute;
  inset: 0 auto auto 50%;
  width: 3px;
  height: 1rem;
  margin-left: -1.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--market-orange));
  animation: heroCueFall 2.4s cubic-bezier(.55,0,.45,1) infinite;
}
.hero-scroll:hover span { color: #f7f2e9; }
@keyframes heroCueFall {
  0% { transform: translateY(-100%); opacity: 0; }
  35%, 65% { opacity: 1; }
  100% { transform: translateY(2.6rem); opacity: 0; }
}

/* ── Featured solutions ──────────────────────────────────────────────
   Carousel: one machined figure on the left, the selected solution's
   title, description and inclusions on the right. Only one panel is in
   the accessibility tree at a time. */
.solution-chapter { background: var(--market-black); }
/* Switch bar on top, figure + copy below, "everything else" prompt last. */
.solution-stage {
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  gap: clamp(.9rem,2.2vh,1.6rem);
}
.solution-body {
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  align-items: center;
  gap: clamp(1.5rem,4vw,4rem);
  min-height: 0;
}

/* Control strip: numbered segments with a loading-bar style active indicator. */
.solution-switch {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: stretch;
  gap: 1rem;
  border-top: 1px solid var(--market-line);
}
.solution-tabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.solution-tabs::-webkit-scrollbar { display: none; }
.solution-tabs button {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: baseline;
  gap: .6rem;
  padding: .95rem .9rem .9rem 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: opacity .25s ease;
}
.solution-tabs button::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 2px;
  background: var(--market-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.solution-tabs button span {
  color: var(--market-tab-num);
  font: 700 .62rem/1 ui-monospace,monospace;
  letter-spacing: .08em;
  transition: color .25s ease;
}
.solution-tabs button b {
  overflow: hidden;
  color: var(--market-tab-label);
  font-size: clamp(.82rem,1.05vw,.98rem);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .25s ease;
}
.solution-tabs button:hover b { color: rgba(var(--market-ink-rgb),.82); }
.solution-tabs button.is-on::before { transform: scaleX(1); }
.solution-tabs button.is-on span { color: var(--market-orange); }
.solution-tabs button.is-on b { color: var(--market-heading); }
.solution-arrows { display: flex; align-items: center; gap: .4rem; }
.solution-arrows button {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--market-line);
  border-radius:var(--r-btn);
  color: var(--market-heading);
  background: transparent;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.solution-arrows button svg { width: .95rem; height: .95rem; }
.solution-arrows button:hover { border-color: var(--market-orange); color: var(--market-orange); background: rgba(var(--market-accent-rgb),.08); }

/* Catch-all prompt for anyone whose need is not one of the three. */
.solution-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.4rem;
  padding-top: clamp(.75rem,1.8vh,1.25rem);
  border-top: 1px solid var(--market-line);
}
.solution-more p { margin: 0; color: var(--market-body); font-size: .84rem; }
.solution-figure { position: relative; aspect-ratio: 1.13; min-height: 0; }
.sfig {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.sfig.is-active { opacity: 1; transform: none; }
.sfig svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sfig rect, .sfig circle, .sfig path { vector-effect: non-scaling-stroke; }

/* Shared figure ink */
.sfig-frames rect { fill: rgba(var(--market-ink-rgb),.02); stroke: rgba(var(--market-ink-rgb),.14); stroke-width: 1; }
.sfig-frames rect:last-child { fill: rgba(var(--market-accent-rgb),.05); stroke: rgba(var(--market-accent-rgb),.42); }
.sfig-bars rect { fill: rgba(var(--market-ink-rgb),.14); }
.sfig-bars rect:nth-child(n+4) { fill: rgba(var(--market-ink-rgb),.06); stroke: rgba(var(--market-ink-rgb),.12); stroke-width: 1; }
.sfig-cta { fill: var(--market-orange); }
.sfig-nodes circle { fill: var(--market-black); stroke: rgba(var(--market-accent-rgb),.8); stroke-width: 1.4; }
.sfig-region rect { fill: rgba(var(--market-ink-rgb),.02); stroke: rgba(var(--market-ink-rgb),.13); stroke-width: 1; stroke-dasharray: 3 5; }
.sfig-stack rect { fill: rgba(var(--market-ink-rgb),.12); }
.sfig-stack--target rect { fill: rgba(var(--market-accent-rgb),.32); }
.sfig-lift { stroke: rgba(var(--market-accent-rgb),.4); stroke-width: 1.2; stroke-dasharray: 3 5; }
.sfig-payload { fill: var(--market-spark); }
.sfig-orbit circle { fill: none; stroke: rgba(var(--market-ink-rgb),.08); stroke-width: 1; }
.sfig-flow { stroke: rgba(var(--market-ink-rgb),.16); stroke-width: 1.2; }
.sfig-gate rect { fill: rgba(var(--market-ink-rgb),.03); stroke: rgba(var(--market-ink-rgb),.2); stroke-width: 1; }
.sfig-hub circle { fill: rgba(var(--market-accent-rgb),.08); stroke: rgba(var(--market-accent-rgb),.55); stroke-width: 1.4; }
.sfig-token { fill: var(--market-spark); }
.sfig-spark path { stroke: rgba(var(--market-accent-rgb),.5); stroke-width: 1.4; stroke-linecap: round; }

/* Figure motion only runs on the current chapter and only for the active panel. */
.market-slide.is-current .sfig.is-active .sfig-payload { animation: sfigLift 4.6s cubic-bezier(.42,0,.58,1) infinite; }
.market-slide.is-current .sfig.is-active .sfig-orbit circle { animation: sfigBreathe 5.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.market-slide.is-current .sfig.is-active .sfig-orbit circle:last-child { animation-delay: -2.6s; }
.market-slide.is-current .sfig.is-active .sfig-token { animation: sfigToken 5s cubic-bezier(.42,0,.58,1) infinite; }
.market-slide.is-current .sfig.is-active .sfig-cta { animation: sfigPulse 3.2s ease-in-out infinite; }
@keyframes sfigLift {
  0%, 8% { transform: translate(0,0); opacity: 0; }
  18% { opacity: 1; }
  76%, 100% { transform: translate(76px,-78px); opacity: 0; }
}
@keyframes sfigBreathe { to { transform: scale(1.06); opacity: .5; } }
@keyframes sfigToken {
  0% { transform: translateX(0); }
  50% { transform: translateX(232px); }
  50.01%, 100% { transform: translateX(232px); opacity: 0; }
}
@keyframes sfigPulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

/* ── One stored figure, three containers (CMS-PLAN §8.7) ─────────────
   Each offering stores one animation, and it is rendered into its detail
   hero (.detail-figure), the home carousel (.sfig) and a home service panel
   (.duo-figure). The loops above were written per container, so the same
   markup animated in one place and sat still in the others — .detail-figure
   in particular only ever carried the xfig-* loops.

   The home containers stay gated on the deck: .sfig runs only for the current
   chapter's active panel, and .duo-figure only while its chapter is current, so
   nothing animates off-screen. A detail hero is the whole page and runs
   unconditionally, like .page-figure. */
:is(.detail-figure, .market-slide.is-current .duo-figure) .sfig-payload { animation: sfigLift 4.6s cubic-bezier(.42,0,.58,1) infinite; }
:is(.detail-figure, .market-slide.is-current .duo-figure) .sfig-orbit circle { animation: sfigBreathe 5.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
:is(.detail-figure, .market-slide.is-current .duo-figure) .sfig-orbit circle:last-child { animation-delay: -2.6s; }
:is(.detail-figure, .market-slide.is-current .duo-figure) .sfig-token { animation: sfigToken 5s cubic-bezier(.42,0,.58,1) infinite; }
:is(.detail-figure, .market-slide.is-current .duo-figure) .sfig-cta { animation: sfigPulse 3.2s ease-in-out infinite; }
/* The duo panel's box was drawn around a 240×180 illustration and the stored
   figures are 340×280, so this held the taller viewBox to the old footprint
   rather than letting it push the panel's copy down. 11rem was the whole reason
   the icons read as thumbnails — widening `.duo-figure` alone just letterboxed
   them. It is a viewport fraction now, the same 40vh width cap expressed as the
   height it produces, so the figure still cannot outgrow its row on a short
   screen but is free to use the space it has. */
.duo-figure svg { max-height: 33vh; }
@media (prefers-reduced-motion: reduce) {
  :is(.detail-figure, .duo-figure) :is(.sfig-payload, .sfig-orbit circle, .sfig-token, .sfig-cta) { animation: none !important; }
}

.solution-panels { position: relative; min-width: 0; }
.solution-panel[hidden] { display: none; }
.solution-eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  color: var(--market-orange);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.solution-eyebrow span { font-family: ui-monospace, monospace; }
.solution-panel h3 {
  max-width: 22.3ch;
  margin: 0 0 1rem;
  font-size: clamp(2.1rem,3.8vw,3.7rem);
  line-height: .96;
  letter-spacing: -0.047em;
}
.solution-panel > p { max-width: 46ch; margin: 0 0 clamp(1.1rem,2.4vh,1.75rem); font-size: clamp(.9rem,1.1vw,1.02rem); line-height: 1.55; }
.solution-includes {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .1rem 1.5rem;
  margin: 0 0 clamp(1.1rem,2.4vh,1.75rem);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--market-line);
}
.solution-includes li {
  position: relative;
  padding: .55rem 0 .55rem 1.1rem;
  border-bottom: 1px solid var(--market-line);
  color: var(--market-body);
  font-size: .8rem;
}
.solution-includes li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: .34rem;
  height: .34rem;
  border-radius: 50%;
  background: var(--market-orange);
  transform: translateY(-50%);
}

/* One fixed canvas carries the same luminous material through every chapter.
   It sits between section surfaces and their content, creating a true morph
   rather than six unrelated decorative diagrams. */
.signal-continuum {
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .82;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0 27%, rgba(0,0,0,.16) 40%, #000 57%, #000 100%);
  transition: opacity 900ms cubic-bezier(.32,.72,0,1);
  will-change: opacity;
}

.market-home[data-market-scene="top"] .signal-continuum { opacity: 0; }
/* The shared canvas is held at zero on every chapter: each one now fills its
   width with content or carries its own figure, so the continuum had nowhere
   left to draw except behind text. The element and its script stay in place so
   a chapter can opt back in (see `liveScenes` in signal-continuum.js). */
.market-home .signal-continuum { opacity: 0; }
.market-home.market-on-light .signal-continuum { opacity: .74; }
.market-home.market-on-light .signal-continuum { opacity:0; }
.market-slide { isolation: auto; }
/* .wrap carries `margin: 0 auto`, and auto inline margins on a grid item beat
   stretch alignment — so a wrap whose content happened to be narrow (the
   services heading) shrink-wrapped and centred itself while every other
   chapter filled only by accident of having wide content. Pin the width. */
.market-slide > .wrap { position: relative; z-index: 2; width: 100%; }

/* Hero credibility strip: the partner marks that used to occupy a whole
   chapter now sit as one quiet band pinned to the base of the hero. Its
   height is a variable so the scroll cue can clear it deterministically. */
.market-hero { --trust-h: clamp(3.4rem,6.5vh,4.5rem); }
.hero-trust {
  position: relative;
  z-index: 2;
  align-self: end;
  width: min(100%,1500px);
  height: var(--trust-h);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(8,minmax(0,1fr));
  border-top: 1px solid rgba(var(--market-ink-rgb),.1);
}
.hero-trust div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 0;
  padding: 0 .35rem;
  transition: opacity .25s ease;
}
.hero-trust div + div { border-left: 1px solid rgba(var(--market-ink-rgb),.08); }
.hero-trust img {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  object-fit: contain;
  opacity: .62;
  filter: grayscale(1) brightness(0) invert(1);
}
.hero-trust span {
  overflow: hidden;
  color: rgba(var(--market-ink-rgb),.42);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hero-trust:hover div { opacity: .5; }
.hero-trust div:hover { opacity: 1; }

/* ── Featured services ───────────────────────────────────────────────
   Two services, so the chapter is split down the middle rather than
   pretending to be a carousel. Hovering one half advances it and recedes
   the other; the flex basis carries the whole effect. */
.service-duo {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  padding-top: clamp(6rem,10vh,8rem);
  border-bottom: 1px solid var(--market-line);
  background: var(--market-black);
}
.service-duo-head { align-self: start; padding-bottom: clamp(1.25rem,3vh,2.25rem); }
.service-duo-head h2 { max-width: 24.7ch; margin: 0; font-size: clamp(2.4rem,4.4vw,4.6rem); line-height: .92; letter-spacing: -0.049em; }
.duo-grid { display: flex; min-height: 0; border-top: 1px solid var(--market-line); }
.duo-panel {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto auto auto auto auto;
  gap: .5rem;
  padding: clamp(1.5rem,3vw,2.75rem) clamp(1.25rem,3vw,3rem) clamp(1.75rem,4vh,2.75rem);
  transition: flex-basis .5s cubic-bezier(.22,1,.36,1), background-color .4s ease, opacity .4s ease;
}
.duo-panel + .duo-panel { border-left: 1px solid var(--market-line); }
.duo-panel.is-active { background: #c24e06; }
.duo-panel::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--market-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
/* Pointer movement selects the same persistent state as keyboard focus and the
   mobile controls, so the interaction does not disappear when hover ends. */
@media (hover: hover) and (pointer: fine) {
  .duo-grid .duo-panel { flex-basis: 42%; opacity: .55; }
  .duo-grid .duo-panel.is-active { flex-basis: 58%; opacity: 1; }
}
.duo-panel:hover::before, .duo-panel:focus-within::before { transform: scaleX(1); }
.duo-panel.is-active::before { background: #171411; transform: scaleX(1); }
/* 15rem left the figure at 38% of the panel with ~70px of dead space above and
   below it — a thumbnail in a full-height chapter. The third term is what keeps
   that honest on a short screen: the row it sits in is `minmax(0,1fr)`, so it
   can be squeezed below the figure's height, and a width capped only in rem
   would then overflow. 40vh is the widest that still clears the row. */
.duo-figure { align-self: center; justify-self: start; width: min(100%,21rem,40vh); }
.duo-figure--marketing { transform: translateX(clamp(-1rem,-1.2vw,-.7rem)); }
.duo-figure svg { width: 100%; height: auto; display: block; overflow: visible; }
.duo-shield path { fill: rgba(var(--market-accent-rgb),.05); stroke: rgba(var(--market-accent-rgb),.4); stroke-width: 1.3; }
.duo-pulse path { fill: none; stroke: var(--market-spark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 150; stroke-dashoffset: 150; }
.duo-dots circle { fill: var(--market-black); stroke: rgba(var(--market-accent-rgb),.7); stroke-width: 1.3; }
.duo-axis path { stroke: rgba(var(--market-ink-rgb),.16); stroke-width: 1; }
.duo-bars rect { fill: rgba(var(--market-ink-rgb),.1); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.duo-bars rect:last-child { fill: rgba(var(--market-accent-rgb),.42); }
.duo-trend { stroke: rgba(var(--market-accent-rgb),.55); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 190; stroke-dashoffset: 190; }
.duo-trend-dot { fill: var(--market-spark); opacity: 0; }
.market-slide.is-current .duo-pulse path { animation: duoTrace 3.4s cubic-bezier(.42,0,.58,1) infinite; }
.market-slide.is-current .duo-bars rect { animation: duoGrow .8s cubic-bezier(.22,1,.36,1) forwards; }
.market-slide.is-current .duo-bars rect:nth-child(2) { animation-delay: .1s; }
.market-slide.is-current .duo-bars rect:nth-child(3) { animation-delay: .2s; }
.market-slide.is-current .duo-bars rect:nth-child(4) { animation-delay: .3s; }
.market-slide.is-current .duo-trend { animation: duoDraw 1.6s cubic-bezier(.22,1,.36,1) .35s forwards; }
.market-slide.is-current .duo-trend-dot { animation: duoDot .5s ease 1.8s forwards; }
@keyframes duoTrace { 0% { stroke-dashoffset: 150; } 55%,100% { stroke-dashoffset: -150; } }
@keyframes duoGrow { to { transform: scaleY(1); } }
@keyframes duoDraw { to { stroke-dashoffset: 0; } }
@keyframes duoDot { to { opacity: 1; } }
.duo-index { margin: 0; color: var(--market-orange); font: 700 .68rem/1 ui-monospace,monospace; letter-spacing: .1em; }
.duo-panel h3 { margin: 0; font-size: clamp(1.7rem,3vw,2.9rem); line-height: .96; letter-spacing: -0.044em; }
.duo-lede { max-width: 34ch; margin: 0; font-size: clamp(.85rem,1.05vw,.98rem); line-height: 1.5; }
.duo-includes { margin: .3rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--market-line); }
.duo-includes li {
  position: relative;
  padding: .5rem 0 .5rem 1.15rem;
  border-bottom: 1px solid var(--market-line);
  color: var(--market-body);
  font-size: .78rem;
}
.duo-includes li::before { content: "→"; position: absolute; left: 0; color: var(--market-orange); font-size: .7rem; }
.duo-panel .text-link { justify-self: start; margin-top: .5rem; }
.duo-controls { display: none; }

/* ── Priorities ──────────────────────────────────────────────────────
   Was five columns of mostly-empty space with a headline wrapping at 13ch.
   Now an asymmetric editorial split: a narrow intro rail and a vertical
   list where only the open row carries its detail. */
.path-section { background: var(--market-black); }
.path-layout {
  display: grid;
  grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
  align-items: start;
  gap: clamp(2rem,5vw,5.5rem);
}
.path-intro { position: relative; padding-top: .35rem; }
.path-intro h2 { max-width: none; margin: 0; font-size: clamp(2.6rem,4.6vw,4.8rem); line-height: .9; letter-spacing: -0.052em; }
.path-statement { max-width: 26rem; margin: clamp(1rem,2.5vh,1.75rem) 0 0; font-size: clamp(.9rem,1.15vw,1.08rem); line-height: 1.55; }
.path-counter {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: clamp(1.5rem,4vh,2.5rem) 0 0;
  font: 700 .7rem/1 ui-monospace,monospace;
}
.path-counter b { color: var(--market-orange); font-size: 1.5rem; letter-spacing: -.04em; }
.path-counter i { width: 2.2rem; height: 1px; background: var(--market-line); }
.path-counter span { color: rgba(var(--market-ink-rgb),.4); }
.path-list { border-top: 1px solid var(--market-line); }
.path-row { border-bottom: 1px solid var(--market-line); }
.path-row > button {
  width: 100%;
  display: grid;
  grid-template-columns: 2.6rem minmax(0,1fr) 1.4rem;
  align-items: center;
  gap: 1.1rem;
  min-height: clamp(3.6rem,6.4vh,4.6rem);
  padding: .7rem .35rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: padding .3s cubic-bezier(.22,1,.36,1);
}
.path-row > button:hover { padding-inline: .9rem .35rem; }
.path-num { color: rgba(var(--market-ink-rgb),.36); font: 700 .68rem/1 ui-monospace,monospace; transition: color .25s ease; }
.path-row > button b {
  color: var(--market-heading);
  font-size: clamp(1.15rem,2.05vw,1.95rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}
/* The open/closed mark is drawn, not typed, so it can rotate cleanly. */
.path-mark { position: relative; width: 1.4rem; height: 1.4rem; justify-self: end; }
.path-mark::before, .path-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(var(--market-ink-rgb),.45);
  transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .25s ease;
}
.path-mark::before { width: .8rem; height: 1px; transform: translate(-50%,-50%); }
.path-mark::after { width: 1px; height: .8rem; transform: translate(-50%,-50%); }
.path-row.is-active .path-num { color: var(--market-orange); }
.path-row.is-active .path-mark::before { background: var(--market-orange); }
.path-row.is-active .path-mark::after { background: var(--market-orange); transform: translate(-50%,-50%) scaleY(0); }
.path-row-body {
  display: grid;
  grid-template-rows: 0fr;
  padding-left: 3.7rem;
  opacity: 0;
  transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, padding-bottom .45s ease;
}
.path-row-body > * { overflow: hidden; }
.path-row.is-active .path-row-body { grid-template-rows: 1fr; padding-bottom: 1.1rem; opacity: 1; }
.path-row-body p { max-width: 48ch; margin: 0 0 .8rem; font-size: .84rem; line-height: 1.5; }
/* This is the section's only way through to a solution page, so it is sized as
   a real call to action rather than a footnote under the copy. */
.path-row-body a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.1rem;
  border: 1px solid rgba(var(--market-ink-rgb),.28);
  color: var(--market-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.path-row-body a:hover {
  border-color: var(--market-orange);
  background: var(--market-orange);
  color: var(--market-heading);
  transform: translateY(-1px);
}
.path-row-body a span { color: var(--market-orange); font-size: 1.05em; transition: transform .2s ease, color .2s ease; }
.path-row-body a:hover span { color: var(--market-heading); transform: translateX(3px); }
.path-row.is-active { background: linear-gradient(100deg,rgba(var(--market-accent-rgb),.07),transparent 60%); }
/* The whole closed row is the hit area (see home-refresh.js), so it says so.
   pointer-events belt-and-braces the collapsed link: even mid-transition, a
   click cannot reach a solution page from a row that has not opened. */
.path-row:not(.is-active) { cursor: pointer; }
.path-row:not(.is-active) .path-row-body { pointer-events: none; }

/* Pricing plot: an engraved rate curve on paper. Ink hairlines and a single
   warm wash, so it belongs to the light chapter instead of sitting on top
   of it. Drawn once per visit — no perpetual motion on a reading surface. */
/* The decorative step-chart that used to sit behind the rate sheet has been
   removed — the ledger is the graphic. With nothing to bleed past the edges,
   this chapter no longer needs to clip, which also stops the currency
   dropdown from being cut off by the slide's overflow. */
.pricing-guidance.market-slide { overflow: visible; }

/* Paint order for the open currency dropdown. The picker sits in the heading
   row and the rate sheet is its next sibling, and BOTH carry a GSAP entry
   transform — which makes each one its own stacking context. That traps the
   dropdown's z-index inside the heading row, so the later-painting ledger drew
   straight over an opaque panel and it read as see-through. z-index on the two
   rows themselves is what actually orders them. */
.pricing-guidance .market-heading-row { position: relative; z-index: 6; }
.pricing-guidance .price-ledger { position: relative; z-index: 1; }

/* Pricing chapter aside: the exclusions note with the currency picker under
   it, so the control sits with the money rather than floating in the header. */
.pricing-aside { display: grid; justify-items: start; gap: 1rem; }
.pricing-aside > p { max-width: 29rem; margin: 0; }
/* Label and picker share a line; the live-rate status drops to its own so a
   long "cached conversion" message cannot wrap into a three-line column. */
.pricing-currency { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin: 0; }
.pricing-currency label { color: rgba(var(--market-ink-rgb),.62); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pricing-currency [data-currency-status] { flex: 0 0 100%; color: rgba(var(--market-ink-rgb),.5); font-size: .62rem; }
/* Closing chapter: the headline is "bring us the bottleneck", so the figure is
   one — six crowded lines squeeze through a constriction and come out fanned
   wide. Centred by grid alignment, not translateY(-50%), because the entry
   tween writes its own transform here and a baked percentage translate would
   drift on resize. */
.final-bottleneck {
  position: absolute;
  z-index: 1;
  inset: 0 clamp(-1rem,-.5vw,0rem) 0 auto;
  width: min(46vw,35rem);
  display: grid;
  align-content: center;
  pointer-events: none;
}
.final-bottleneck svg { width: 100%; height: auto; display: block; overflow: visible; }
.final-bottleneck path { fill: none; stroke-linecap: round; }
/* Inbound is deliberately duller and tighter than outbound. */
.final-bottleneck .bn-in path { stroke: rgba(247,242,233,.22); stroke-width: 1; }
.final-bottleneck .bn-jaw path { stroke: rgba(227,100,22,.55); stroke-width: 2; }
.final-bottleneck .bn-out path { stroke: rgba(227,100,22,.3); stroke-width: 1.4; }
.final-bottleneck .bn-core-halo { fill: none; stroke: rgba(227,100,22,.3); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.final-bottleneck .bn-core-dot { fill: #f07a32; }

/* One pass of flow: inbound crowds in, the core fires as it clears the pinch,
   outbound streams away. Staggering the outbound lines is what sells the
   "released" half. */
.market-slide.is-current .final-bottleneck .bn-in path {
  stroke-dasharray: 34 210;
  animation: bnIn 4.4s cubic-bezier(.55,0,.85,.4) infinite;
}
.market-slide.is-current .final-bottleneck .bn-in path:nth-child(2) { animation-delay: -.35s; }
.market-slide.is-current .final-bottleneck .bn-in path:nth-child(3) { animation-delay: -.7s; }
.market-slide.is-current .final-bottleneck .bn-in path:nth-child(4) { animation-delay: -1.05s; }
.market-slide.is-current .final-bottleneck .bn-in path:nth-child(5) { animation-delay: -1.4s; }
.market-slide.is-current .final-bottleneck .bn-in path:nth-child(6) { animation-delay: -1.75s; }
.market-slide.is-current .final-bottleneck .bn-out path {
  stroke-dasharray: 60 300;
  animation: bnOut 4.4s cubic-bezier(.15,.6,.4,1) infinite;
}
.market-slide.is-current .final-bottleneck .bn-out path:nth-child(2) { animation-delay: .12s; }
.market-slide.is-current .final-bottleneck .bn-out path:nth-child(3) { animation-delay: .24s; }
.market-slide.is-current .final-bottleneck .bn-out path:nth-child(4) { animation-delay: .36s; }
.market-slide.is-current .final-bottleneck .bn-out path:nth-child(5) { animation-delay: .48s; }
.market-slide.is-current .final-bottleneck .bn-out path:nth-child(6) { animation-delay: .6s; }
.market-slide.is-current .final-bottleneck .bn-core-halo { animation: bnFire 4.4s cubic-bezier(.22,1,.36,1) infinite; }
.market-slide.is-current .final-bottleneck .bn-core-dot { animation: bnFireDot 4.4s cubic-bezier(.22,1,.36,1) infinite; }

@keyframes bnIn { from { stroke-dashoffset: 244; } to { stroke-dashoffset: 0; } }
@keyframes bnOut { from { stroke-dashoffset: 360; } to { stroke-dashoffset: 0; } }
@keyframes bnFire {
  0%, 34% { opacity: .25; transform: scale(.7); }
  46% { opacity: 1; transform: scale(1.12); }
  70%, 100% { opacity: .25; transform: scale(.7); }
}
@keyframes bnFireDot {
  0%, 34% { opacity: .55; }
  46% { opacity: 1; }
  70%, 100% { opacity: .55; }
}

/* Call button: a real target sized to sit beside the primary CTA. Padding is
   symmetric now that the phone glyph is gone — the asymmetric inline padding
   existed only to hug it. `align-items: stretch` on the row keeps both buttons
   the same height without restating .btn-fill's padding here. */
.final-actions { align-items: stretch; gap: 1rem 1.25rem; }
.btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.6rem;
  border: 1px solid rgba(247,242,233,.24);
  border-radius: var(--r-btn);
  color: #f7f2e9;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.btn-call-text { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.btn-call:hover { border-color: var(--market-orange); background: rgba(227,100,22,.09); transform: translateY(-2px); }
.btn-call:focus-visible { outline: 2px solid var(--market-orange); outline-offset: 3px; }

/* Contrast system: warm white and orange on dark chapters, near-black and
   orange on the pricing chapter. Supporting copy remains visibly secondary
   without falling below a readable tonal range. */
.market-home :is(.market-hero,.solution-chapter,.service-duo,.path-section,.testimonial-section,.market-final) :is(h1,h2,h3,strong,blockquote) { color:var(--market-heading); }
.market-home :is(.market-hero,.solution-chapter,.service-duo,.path-section,.testimonial-section,.market-final) :is(.market-lede,.market-heading-row>p,.pricing-aside>p,.solution-panel>p:not(.solution-eyebrow),.duo-lede,.path-statement,.testimonial p,.sample-note,.path-row-body p) { color:var(--market-body); }
.market-home .market-index { color:var(--market-index); }
.market-home .text-link { color:var(--market-heading); border-bottom-color:rgba(var(--market-ink-rgb),.48); }

/* ── Where the accent lands, chapter by chapter ──────────────────────
   One accented thing per chapter, and it is always the element the reader is
   trying to find: the tab they are on, the service they want, the row they
   opened, the line they need in the price list. The rules are gathered here
   rather than spread through each chapter's block because "what is orange"
   is one decision, and it was previously six. */

/* Solutions: the selected tab, and the way out of the chapter. */
.market-home .solution-tabs button.is-on b { color: var(--market-orange); }
.market-home .solution-more .text-link { color: var(--market-orange); }

/* Services: the resting title is the accent; selecting a panel moves the
   orange onto the surface, with a near-black title and white supporting copy.
   Specificity has to beat the contrast system's `:is(h1,h2,h3,…)`, hence the
   chapter in the selector rather than `.duo-panel h3`. */
.market-home .service-duo .duo-panel h3 { color: var(--market-orange); }
.market-home .service-duo .duo-panel.is-active h3 { color: #171411; }
.market-home .service-duo .duo-panel.is-active :is(.duo-lede,.duo-includes li) { color: #fff; }
.market-home .service-duo .duo-panel.is-active .duo-includes,
.market-home .service-duo .duo-panel.is-active .duo-includes li { border-color: rgba(255,255,255,.34); }
.market-home .service-duo .duo-panel.is-active .duo-includes li::before { color: #171411; }
.market-home .service-duo .duo-panel.is-active .text-link { color: #171411; border-bottom-color: rgba(23,20,17,.58); }
.market-home .service-duo .duo-panel.is-active .text-link span { color: #171411; }
.duo-panel.is-active .duo-shield path { fill: rgba(23,20,17,.08); stroke: rgba(23,20,17,.58); }
.duo-panel.is-active .duo-pulse path { stroke: #fff; }
.duo-panel.is-active .duo-dots circle { fill: #c24e06; stroke: rgba(23,20,17,.7); }
.duo-panel.is-active .duo-axis path { stroke: rgba(23,20,17,.32); }
.duo-panel.is-active .duo-bars rect { fill: rgba(23,20,17,.18); }
.duo-panel.is-active .duo-bars rect:last-child { fill: rgba(255,255,255,.58); }
.duo-panel.is-active .duo-trend { stroke: rgba(255,255,255,.86); }
.duo-panel.is-active .duo-trend-dot { fill: #171411; }

/* Priorities: the open row is the accent, not a tint behind it. Re-declaring
   the tone variables is the whole inversion — the title reads `--market-heading`
   and the body reads `--market-body` already, so they follow without either
   being named here. Black on the title, white underneath, as asked. */
.market-home .path-row.is-active {
  --market-heading: #fff;
  --market-body: #fff;
  --market-line: rgba(255,255,255,.32);
  --market-ink-rgb: 255,255,255;
  background: #c24e06;
}
/* White at 4.79:1, where the near-black it replaced was 3.68:1 — a pass only
   for large bold type. The title is the one thing that changes tone twice as
   you read down the list, so it is worth having it clear the bar outright.
   The mark follows the title. */
.market-home .path-row.is-active :is(.path-mark::before,.path-mark::after) { background: #fff; }
/* Now that the row is a filled block, its content cannot sit flush against the
   edge of the colour. .9rem matches the inset the button already animates to on
   hover, so opening a row does not shunt the title sideways. */
.market-home .path-row.is-active { padding-inline: .9rem; }
/* A solid white pill: on an orange field an outlined button is a ghost, and
   this is the only way through to the solution page. Orange on white is 5.9:1.
   `justify-self` is what makes it a button rather than a band — the row body is
   a single-column grid, so an inline-flex child still stretches the full width
   without it. It read as a wide outline before and only became obvious once the
   fill went solid. */
.market-home .path-row.is-active .path-row-body a {
  justify-self: start;
  border-radius: var(--r-btn);
  border-color: #fff;
  background: #fff;
  color: #b04000;
}
.market-home .path-row.is-active .path-row-body a span { color: #b04000; }
.market-home .path-row.is-active .path-row-body a:hover {
  background: transparent;
  color: #fff;
}
.market-home .path-row.is-active .path-row-body a:hover span { color: #fff; }

/* Pricing: the accent moves to the service name and the figures go quiet.
   A price list is scanned down the left column to find the row, then read
   across — so the accent belongs on the thing being searched for, and the
   figures compare better as one uniform column. It also stops the numeric
   column fighting "Survey & quote", which is a value in the same column and
   is not a number at all. */
.market-home .pricing-guidance .price-ledger-row h3 { color: var(--market-orange); }
.market-home .pricing-guidance .p-amount { color: var(--market-heading); }
.market-home .pricing-guidance .p-amount small { color: var(--market-muted); }
.market-home .pricing-guidance .price-ledger-row:is(:hover,:focus-visible) h3 { color: var(--market-black); }
.market-home .pricing-guidance .price-ledger-row:is(:hover,:focus-visible) .p-amount { color: var(--market-black); }
.market-home .pricing-guidance .price-ledger-row:is(:hover,:focus-visible) .p-amount small { color: rgba(var(--market-black-rgb),.62); }

/* Proof: the reviewer, not the company under them. `<b>` exists in the markup
   for this — see renderTestimonials in shared/render/home.js. */
.market-home .testimonial p b { color: var(--market-orange); font-weight: 700; }

/* ── Chapter numbering ───────────────────────────────────────────────
   Every 01 / 02 / 03 on the homepage sits in its own element, so the numbering
   comes off in one place rather than out of six templates — three of which the
   CMS regenerates on every build, which would have taken a hand-edit back out.

   Where a number held a grid column, the column goes with it: hiding the span
   alone would have left the label indented into the gap it used to fill. */
.market-home :is(.market-progress a > span,
                 .solution-tabs button > span,
                 .solution-eyebrow > span,
                 .duo-index,
                 .path-num,
                 .path-counter) { display: none; }
.market-home .path-row > button { grid-template-columns: minmax(0,1fr) 1.4rem; }
.market-home .solution-tabs button { grid-template-columns: minmax(0,1fr); }

/* ── Orange accents ──────────────────────────────────────────────────
   The panel eyebrow asks for the accent in `.solution-eyebrow`, and had been
   losing it since the contrast system landed: `.solution-panel>p` scores (0,3,0)
   against that rule's (0,1,0), so "Digital products" was painting as body copy
   on both surfaces. Excluding it is the whole fix — the eyebrow already knew
   what colour it wanted.

   The short rule before each chapter label is the second accent, and it is a
   pseudo-element on purpose: it lands on paper and on ink alike, and it needs
   no markup, which matters because these headings come from the CMS. */
.market-home .solution-eyebrow { color: var(--market-orange); }
.market-home :is(.market-index,.solution-eyebrow)::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 2px;
  margin-right: .1rem;
  vertical-align: .22em;
  background: var(--market-orange);
}

/* ── Chapter tone ────────────────────────────────────────────────────
   The homepage used to run four near-black chapters in a row before the cream
   pricing band arrived, so the first half of the scroll read as one long
   surface. It alternates now: ink → paper → ink → paper → ink → paper → orange,
   with the hero holding the ink end (its globe canvas and radial glow are built
   for a black field) and the close holding the orange.

   A chapter states nothing but its surface and the inks that sit on it — every
   rule inside reads them from these variables, which is what the tokenising
   above was for. Nothing here sets a colour on a component.

   `--market-tone` is the same fact in a form JavaScript can read:
   home-refresh.js toggles `market-on-light` off it as each chapter becomes
   current, so the progress rail and the background canvas follow the surface
   without a second list of which chapters are light.

   Applied by id: the seven chapters are fixed and their ids already carry
   weight (the progress rail links to them). The classes are the general form,
   for a chapter that needs a tone without being one of these. */
.market-home .chapter--light,
.market-home #featured-solutions,
.market-home #paths,
.market-home #proof {
  --market-tone: light;
  --market-black: #ede9df;
  --market-ink: #171513;
  --market-heading: #171513;
  --market-body: rgba(var(--market-ink-rgb),.72);
  --market-muted: rgba(var(--market-ink-rgb),.62);
  --market-line: rgba(var(--market-ink-rgb),.17);
  --market-ink-rgb: 23,21,19;
  /* #b04000 rather than the brand #ca4d00: on paper the lighter one measures
     4.48:1 for the small uppercase eyebrow, two hundredths under. */
  --market-orange: #b04000;
  --market-index: #b04000;
  --market-accent-rgb: 176,64,0;
  --market-spark: #b04000;
  /* 4.75:1 and 6.2:1 rather than 2.1:1 and 3.3:1 — see the note on the
     defaults. Still two clear steps below the selected tab's full ink. */
  --market-tab-num: rgba(var(--market-ink-rgb),.62);
  --market-tab-label: rgba(var(--market-ink-rgb),.7);
  --market-black-rgb: 237,233,223;
  /* The chapters do not set `color` themselves — they inherit body's, which was
     resolved against the dark palette. Restating it here is what makes an
     unstyled inherited string follow the surface it is sitting on. */
  color: var(--market-ink);
  background: var(--market-black);
}
/* An orange chapter is not in the rotation any more — the close is the only one
   — but the tone stays defined, because it is the surface a chapter would ask
   for and the close is not the sort of thing to hand-roll twice. */
.market-home .chapter--accent {
  --market-tone: accent;
  --market-black: #c24e06;
  --market-ink: #fff;
  --market-heading: #fff;
  /* Full white, not the tinted white the dark chapters use for body copy. On
     this surface rgba(var(--market-black-rgb),.82) is 3.73:1 and even .92 only reaches
     4.28:1 — the orange is light enough that there is no room to tint. */
  --market-body: #fff;
  --market-muted: #fff;
  --market-line: rgba(var(--market-black-rgb),.3);
  --market-ink-rgb: 255,255,255;
  /* Orange on orange is nothing, so the accent role resolves to white. */
  --market-orange: #fff;
  --market-index: #fff;
  --market-accent-rgb: 255,255,255;
  --market-spark: #fff;
  --market-black-rgb: 194,78,6;
  color: var(--market-ink);
  background: var(--market-black);
}

/* The pricing chapter used to carry a block of its own here, restating every
   heading, figure and hover state for the paper surface it was the only chapter
   to have. It is a dark chapter now and paper is no longer special, so the
   restatement is gone: the ledger below reads the tone variables like everything
   else, and setting `--market-tone: light` on this chapter would give back the
   cream version — accessible accent and all — without a line of it returning. */
.market-home .pricing-guidance :is(h2,h3) { color:var(--market-heading); }

/* A still warm bloom behind the globe. The previous version rotated a 62rem
   conic gradient through a blur filter every frame for an effect that was
   barely visible — this is the same light for none of the paint cost. */
.market-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(64vw, 62rem);
  aspect-ratio: 1;
  right: -8%;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(202,77,0,.1), rgba(202,77,0,.035) 42%, transparent 66%);
  transform: translateY(-50%);
  pointer-events: none;
}

.market-hero-copy { padding-top: 0; }
.market-hero-grid { grid-template-columns: minmax(0,.92fr) minmax(31rem,1.08fr); }
.market-globe {
  width: min(45vw, 690px);
  aspect-ratio: 1.14;
  display: grid;
  place-items: center;
  isolation: isolate;
  will-change: transform;
}
.market-globe canvas { position: relative; z-index: 2; }

.hero-motion-field,
.hero-motion-field::before,
.hero-motion-field::after,
.motion-orbit {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(202,77,0,.18);
  border-radius: 50%;
  pointer-events: none;
}

/* Two orbits instead of five concentric rings, and the signal nodes now ride
   the orbit path rather than blinking at fixed points. Same element count,
   far less visual noise, and the motion finally means something. */
.hero-motion-field { z-index: 1; border-color: rgba(var(--market-black-rgb),.06); transform: rotate(-11deg); }
.hero-motion-field::before { content: ""; inset: 11% -9%; border-color: rgba(202,77,0,.11); }
.motion-orbit { inset: 16% -4%; border-color: rgba(202,77,0,.22) transparent rgba(202,77,0,.07); animation: motionOrbit 22s linear infinite; }
.motion-orbit--two { inset: -1% 23%; border-color: rgba(var(--market-black-rgb),.13) transparent rgba(202,77,0,.12); animation-duration: 31s; animation-direction: reverse; }
.motion-orbit b {
  position: absolute;
  top: -.24rem;
  left: 50%;
  width: .48rem;
  height: .48rem;
  margin-left: -.24rem;
  border-radius: 50%;
  background: #f28a49;
  box-shadow: 0 0 0 .32rem rgba(202,77,0,.12), 0 0 1.1rem rgba(202,77,0,.8);
}
.motion-orbit--two b { top: auto; bottom: -.24rem; background: #ffd3b6; box-shadow: 0 0 0 .3rem rgba(var(--market-black-rgb),.07), 0 0 .9rem rgba(255,211,182,.55); }

@keyframes motionOrbit { to { transform: rotate(360deg); } }

.market-heading-row { margin-bottom: clamp(2.25rem,4vh,3.75rem); }
.path-accordion { min-height: min(44vh, 27rem); }
.service-ledger > a { min-height: clamp(4.6rem,8vh,6.4rem); }

/* Pricing is a rate sheet, not a tower of cards. One shared column template
   spans the header and every row, and the amount is split into
   prefix / figure / unit so the figures stack on a single optical baseline
   instead of drifting with the length of "/ month". */
.price-ledger {
  /* The amount column is a fixed width, not `auto`. Each row is its own grid,
     so a content-sized amount column made every row resolve slightly
     different column edges — descriptions started up to 21px apart. */
  --ledger-cols: minmax(10rem,.92fr) minmax(11rem,1.08fr) 15.5rem 1.4rem;
  --ledger-gap: 1.25rem;
  /* The unit sub-column ("/ month"). Shared by the amount grid and the column
     header so the label sits over the figures, not over the units. */
  --price-unit-col: 3.9rem;
  --price-amount-gap: .4rem;
  border-top: 1px solid rgba(var(--market-ink-rgb),.22);
}
.price-ledger-head {
  display: grid;
  grid-template-columns: var(--ledger-cols);
  gap: var(--ledger-gap);
  margin: 0;
  padding: .55rem .7rem;
  border-bottom: 1px solid rgba(var(--market-ink-rgb),.14);
  color: rgba(var(--market-ink-rgb),.42);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.price-ledger-head span:nth-child(3) { text-align: right; padding-right: calc(var(--price-unit-col) + var(--price-amount-gap)); }
.price-ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--ledger-cols);
  align-items: center;
  gap: var(--ledger-gap);
  min-height: clamp(4.65rem,8vh,5.8rem);
  padding: .8rem .7rem;
  border-bottom: 1px solid rgba(var(--market-ink-rgb),.18);
  color: var(--market-heading);
  transition: color .28s ease, padding .28s cubic-bezier(.22,1,.36,1), background-color .28s ease;
}
.price-ledger-row::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--market-orange); transform:scaleY(0); transition:transform .28s ease; }
.price-ledger-row h3 { margin:0; font-size:clamp(1.2rem,1.55vw,1.45rem); line-height:1.05; letter-spacing:-0.028em; text-wrap:balance; }
.price-ledger-row p { margin:0; color:rgba(var(--market-ink-rgb),.54); font-size:.78rem; line-height:1.4; }
/* The figure lives in a .p-amount span because script.js rewrites that
   element's first text node when the currency changes, preserving the unit
   child. The nested grid keeps the converted figure on the shared right edge
   whatever its new length. */
.price-ledger-row strong {
  display: grid;
  grid-template-columns: 2.5rem minmax(0,1fr);
  align-items: baseline;
  gap: var(--price-amount-gap);
  font-size: clamp(1.1rem,1.75vw,1.55rem);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-ledger-row .p-amount {
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--price-unit-col);
  align-items: baseline;
  gap: var(--price-amount-gap);
  /* .p-amount also carries the legacy pricing-page type (2.1rem, its own
     family and tracking). Inside the ledger the row sets the scale. */
  font: inherit;
  font-weight: 800;
  letter-spacing: inherit;
  margin: 0;
  text-align: right;
}
.price-ledger-row strong small { font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.price-ledger-row .p-amount small { text-align: left; }
.price-ledger-row strong .pl-pre { justify-self: end; }
/* Ends where the figures end (columns 1–2), not at the container edge, so the
   quote row reads as part of the same right-hand column. */
.price-ledger-row strong .pl-quote { grid-column: 1 / -1; justify-self: end; padding-right: calc(var(--price-unit-col) + var(--price-amount-gap)); font-size: .95rem; font-weight: 700; letter-spacing: 0; }
.price-ledger-row > i { justify-self: end; color:var(--market-orange); font-style:normal; transition:transform .28s ease; }
.price-ledger-row:is(:hover,:focus-visible) { padding-inline:1.15rem; color:var(--market-black); background:var(--market-ink); }
.price-ledger-row:is(:hover,:focus-visible)::before { transform:scaleY(1); }
.price-ledger-row:is(:hover,:focus-visible) p,.price-ledger-row:is(:hover,:focus-visible) strong small { color:rgba(var(--market-black-rgb),.55); }
.price-ledger-row:is(:hover,:focus-visible) strong .pl-quote { color:rgba(var(--market-black-rgb),.82); }
.price-ledger-row:is(:hover,:focus-visible) > i { transform:translate(.18rem,-.18rem); }
.price-ledger-row:focus-visible { outline:2px solid var(--market-orange); outline-offset:2px; }
/* No highlighted first row. It used to carry a tinted background declared
   *after* the :hover rule, so on hover the tint won the background while
   :hover still won the colour — white text on pale tan, unreadable. Every row
   now reads identically. */
.price-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(1.1rem,2.5vh,1.75rem);
  padding-top: clamp(1.1rem,2.5vh,1.6rem);
  border-top: 1px solid rgba(var(--market-ink-rgb),.14);
}
.price-footer p { max-width:34rem; margin:0; color:rgba(var(--market-ink-rgb),.5); font-size:.74rem; line-height:1.5; }
.price-all-link { margin-top:0; }
.pricing-guidance { padding-top:clamp(6rem,10vh,7.5rem); padding-bottom:clamp(2.5rem,5vh,4rem); }
.pricing-guidance .market-heading-row { margin-bottom:clamp(1.5rem,3.5vh,2.6rem); }
.pricing-guidance .market-heading-row h2 { font-size:clamp(2.8rem,4.8vw,5.2rem); }
.pricing-guidance .price-ledger-row { min-height:clamp(4rem,7vh,5rem); }

/* ── Closing chapter: orange field ───────────────────────────────────
   Every chapter above this one is dark, and so is the footer below it, so a
   dark closing band merged into the footer and the page ended without a
   visible edge. Filling it with brand orange makes the last thing before the
   footer unmistakably the last thing, and everything inside inverts: what was
   warm-white becomes near-black, what was orange becomes white.

   The field is --primary-hover rather than --primary. Both are brand orange,
   but #ca4d00 is dark enough that near-black body copy lands at 3.99:1 — under
   AA — while #e55c00 carries the same text at 5.15:1. The headline would pass
   on either; the supporting copy would not. */
.market-final {
  --final-ink: #171411;
  background:
    radial-gradient(circle at 78% 44%, rgba(255,255,255,.14), transparent 42%),
    var(--primary-hover);
}
.market-home .market-final :is(h1,h2,h3,strong) { color: var(--final-ink); }
/* Full ink, not a faded one: at .72 alpha this label lands at 3.52:1 on the
   orange. Its subordinate role is carried by size and tracking instead — the
   same trade the tier cards make. */
.market-home .market-final .market-index { color: var(--final-ink); }
/* The accent line flips with everything else: orange on dark becomes white
   on orange. */
.market-home .market-final em { color: #fff; }

/* Primary CTA inverts to a white fill; the hover lift keeps its shadow but
   drops the orange glow, which is invisible against an orange field. */
.market-home .market-final .btn-fill { background: #fff; color: var(--final-ink); }
.market-home .market-final .btn-fill:hover { background: var(--final-ink); color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.market-home .market-final .btn-fill:focus-visible { outline: 2px solid var(--final-ink); outline-offset: 3px; }

/* Call button: dark outline and ink, with the icon disc inverted to white. */
/* Solid, not outlined. An outline on a saturated orange field is always the
   quieter of the two buttons no matter how heavy it is; filled near-black
   beside filled white gives two unmistakable ways to make contact and lets
   the pair read as alternatives rather than primary-and-afterthought. */
.market-final .btn-call {
  border-color: var(--final-ink);
  color: #fff;
  background: var(--final-ink);
}
.market-final .btn-call:hover { border-color: var(--final-ink); background: #000; color: #fff; }
.market-final .btn-call:focus-visible { outline-color: var(--final-ink); outline-offset: 4px; }

/* Bottleneck figure. The reading survives the inversion because the contrast
   between the two halves is what carries it: crowded inbound stays the dull
   side (now dark), released outbound stays the bright side (now white). */
.final-bottleneck .bn-in path { stroke: rgba(23,20,17,.3); }
.final-bottleneck .bn-jaw path { stroke: rgba(23,20,17,.6); }
.final-bottleneck .bn-out path { stroke: rgba(255,255,255,.62); }
.final-bottleneck .bn-core-halo { stroke: rgba(255,255,255,.55); }
.final-bottleneck .bn-core-dot { fill: #fff; }

@media (max-width: 1180px) {
  .market-progress { display: none; }
  .market-hero-grid { grid-template-columns: minmax(0,1fr) minmax(26rem,.9fr); }
  .market-globe { width:min(47vw,600px); }
}

/* Short laptop screens still snap one chapter per viewport, so any chapter
   taller than the viewport puts its own footer permanently out of reach.
   This pass compresses the type and row rhythm enough for the tallest
   chapters — capabilities, roadmap, pricing — to fit at 768px. */
@media (min-width: 761px) and (max-height: 860px) {
  .market-section,
  .market-final {
    padding-top: clamp(5.5rem,8.5vh,7rem);
    padding-bottom: clamp(1.75rem,4vh,3.25rem);
  }
  .market-heading-row { margin-bottom: clamp(1.25rem,2.6vh,2rem); }
  .market-heading-row h2,
  .market-final h2 { font-size: clamp(2.4rem,4vw,3.9rem); }
  .future-index .market-heading-row h2 { font-size: clamp(2.2rem,3.6vw,3.4rem); }
  .pricing-guidance .market-heading-row h2 { font-size: clamp(2.2rem,3.7vw,3.5rem); }
  .service-ledger > a { min-height: clamp(3.5rem,6.2vh,4.5rem); padding-block: .65rem; }
  .service-ledger h3 { font-size: clamp(1.2rem,2vw,1.9rem); }
  .price-ledger-row { min-height: clamp(3.3rem,5.8vh,4.2rem); padding-block: .42rem; }
  .price-ledger-head { padding-block: .35rem; }
  .pricing-guidance .market-heading-row { margin-bottom: clamp(1.1rem,2.2vh,1.6rem); }
  .pricing-aside { gap: .6rem; }
  .pricing-aside > p { font-size: .82rem; }
  .price-footer { margin-top: .8rem; padding-top: .8rem; }
  .price-footer p { font-size: .7rem; }
  .testimonial-carousel { min-height: 0; }
  /* New chapters: trim the type and row rhythm the same way. */
  .solution-panel h3 { font-size: clamp(1.9rem,3.2vw,2.9rem); }
  .solution-includes li { padding-block: .42rem; font-size: .76rem; }
  .solution-panel > p { font-size: .86rem; }
  .service-duo { padding-top: clamp(5.75rem,9vh,7rem); }
  .service-duo-head h2 { font-size: clamp(2.2rem,3.6vw,3.4rem); }
  .duo-panel { gap: .35rem; padding-block: clamp(1.1rem,2.5vh,1.75rem); }
  .duo-panel h3 { font-size: clamp(1.5rem,2.5vw,2.2rem); }
  .duo-includes li { padding-block: .4rem; font-size: .74rem; }
  .path-intro h2 { font-size: clamp(2.2rem,3.7vw,3.6rem); }
  .path-row > button { min-height: clamp(3.1rem,5.4vh,4rem); }
  .path-row > button b { font-size: clamp(1.05rem,1.75vw,1.6rem); }
}

@media (max-width: 760px) {
  html.market-home-page { scroll-snap-type: none; }
  .market-home .site-header { width:calc(100% - 1rem); margin-top:.5rem; }
  .market-slide { min-height:auto; }
  .market-section,.market-final { min-height:100svh; padding:7rem 0 4rem; }
  .market-hero { min-height:100svh; padding:6.5rem 1.25rem 3.25rem; --hero-pad-b:3.25rem; }
  .market-hero-grid { grid-template-columns:1fr; gap:0; }
  .market-hero-copy { order:2; margin-top:-1.25rem; }
  .market-globe { order:1; width:min(102vw,31rem); aspect-ratio:1.2; margin:-2.5rem -8vw 0; opacity:.9; }
  /* Solutions carousel stacks: figure above, copy below, controls last. */
  .solution-stage { grid-template-columns:1fr; gap:1.5rem; }
  .solution-figure { width:min(72vw,17rem); aspect-ratio:1.1; justify-self:center; }
  .solution-panel h3 { font-size:clamp(1.9rem,9vw,2.6rem); }
  .solution-includes { grid-template-columns:1fr; }
  .solution-switch { grid-template-columns:1fr; gap:.5rem; }
  .solution-tabs button { padding:.75rem .7rem .7rem 0; }
  .solution-arrows { justify-content:flex-end; }
  .solution-body { grid-template-columns:1fr; }
  .solution-tabs button { padding:.5rem .7rem; font-size:.68rem; }
  /* The split duo becomes a swipe. Stacking the two panels was the previous
     answer and it read as two half-finished sections opening one under the
     other — a 50/50 vertical cut is unreadable at this width, but so is a
     vertical stack of two things that are meant to be compared.

     Each surface now spans the viewport. The arrows carry discoverability, so
     the next card no longer needs to intrude as a narrow, easily mistaken
     clipped column; mandatory snapping still makes both endpoints exact.

     The !important is not decoration: the pointer rule above scores (0,2,0)
     with `.duo-grid:hover .duo-panel`, so a plain flex-basis here would lose to
     it on a small laptop with a mouse. */
  .service-duo { min-height:100svh; }
  .duo-grid {
    grid-row:2;
    grid-column:1;
    flex-direction:row;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    padding-inline:0;
  }
  .duo-grid::-webkit-scrollbar { display:none; }
  .duo-panel { box-sizing:border-box; flex:0 0 100%!important; opacity:1!important; scroll-snap-align:center; scroll-snap-stop:always; padding-inline:clamp(3.75rem,13vw,4.75rem); }
  .duo-panel + .duo-panel { border-left:0; }
  /* Same enlargement as the desktop figure. 11rem was 57% of the panel with the
     copy already tight beneath it; the vh term keeps a short phone from having
     the chapter pushed past one screen. */
  .duo-figure { width:min(72vw,14rem,30vh); }
  .duo-figure--marketing { transform:translateX(-.8rem); }
  .duo-controls {
    grid-row:2;
    grid-column:1;
    z-index:3;
    display:block;
    position:relative;
    align-self:stretch;
    pointer-events:none;
  }
  .duo-controls button {
    position:absolute;
    top:50%;
    width:2.75rem;
    height:2.75rem;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(23,20,17,.2);
    border-radius:50%;
    color:#171411;
    background:rgba(247,242,233,.95);
    box-shadow:0 .5rem 1.5rem rgba(0,0,0,.18);
    cursor:pointer;
    pointer-events:auto;
    transform:translateY(-50%);
    transition:background-color .2s ease, color .2s ease, transform .2s ease;
  }
  .duo-controls button:first-child { left:.55rem; }
  .duo-controls button:last-child { right:.55rem; }
  .duo-controls button:hover { color:#fff; background:#171411; transform:translateY(-50%) scale(1.04); }
  .duo-controls button:active { transform:translateY(-50%) scale(.96); }
  .duo-controls button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
  .duo-controls svg { width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .duo-controls p {
    position:absolute;
    left:50%;
    bottom:.8rem;
    margin:0;
    padding:.35rem .55rem;
    border:1px solid rgba(247,242,233,.32);
    color:#fff;
    background:rgba(3,3,3,.72);
    font:700 .62rem/1 ui-monospace,monospace;
    letter-spacing:.08em;
    transform:translateX(-50%);
  }
  .service-duo-head h2 { font-size:clamp(2.2rem,11vw,3rem); }
  .path-layout { grid-template-columns:1fr; gap:2rem; }
  .path-intro h2 { font-size:clamp(2.6rem,13vw,3.8rem); }
  .path-counter { display:none; }
  .path-row-body { padding-left:0; }
  .final-actions > :is(.btn-fill,.btn-call) { box-sizing:border-box; width:100%; justify-content:center; }
  .price-ledger { --ledger-cols:minmax(0,1fr) auto; --ledger-gap:.7rem; }
  .price-ledger-head { display:none; }
  .price-ledger-row { padding:1rem .25rem; }
  /* 1.2rem, not 1.1rem: the service name carries the chapter's accent now, and
     #ca4d00 on ink is 4.49:1 — which is a pass for bold type at 18.66px and up,
     and a fail at 17.6px. 19.2px is the cheapest side of that line. */
  .price-ledger-row h3 { font-size:1.2rem; }
  .price-ledger-row p { display:none; }
  /* Prefix and figure share the first line so the figure still ends on the
     container's right edge; the unit drops beneath it, right-aligned. */
  .price-ledger-row strong { grid-template-columns:auto auto; justify-content:end; row-gap:.1rem; font-size:1rem; }
  .price-ledger-row strong .pl-pre { grid-area:1 / 1; justify-self:end; }
  .price-ledger-row .p-amount { grid-area:1 / 2; grid-template-columns:auto; justify-items:end; row-gap:.1rem; }
  .price-ledger-row .p-amount small { text-align:right; }
  .price-ledger-row strong .pl-quote { grid-column:1 / -1; padding-right:0; }
  .price-ledger-row > i { display:none; }
  .price-footer { align-items:flex-start; flex-direction:column; }
  .price-all-link { width:100%; justify-content:center; }
  .signal-continuum {
    opacity: .52;
    mask-image: linear-gradient(90deg, transparent 0 8%, rgba(0,0,0,.14) 26%, #000 58%, #000 100%);
  }
  .market-home.market-on-light .signal-continuum { opacity:.44; }
  .final-bottleneck { width:104vw; right:-22vw; opacity:.6; }
}

@media (prefers-reduced-motion: reduce) {
  html.market-home-page { scroll-snap-type:none; scroll-behavior:auto; }
  .signal-continuum { transition:none; }
  .motion-orbit,
  .hero-scroll i b,
  .final-bottleneck .bn-in path,
  .final-bottleneck .bn-out path,
  .final-bottleneck .bn-core-halo,
  .final-bottleneck .bn-core-dot,
  .pricing-plot .plot-line,
  .sfig-payload, .sfig-token, .sfig-cta, .sfig-orbit circle,
  .duo-pulse path, .duo-bars rect, .duo-trend, .duo-trend-dot { animation:none!important; }
  /* Reduced motion still gets the finished drawing, just not the drawing of it. */
  .pricing-plot .plot-line { stroke-dashoffset:0; }
  .pricing-plot .plot-area,
  .pricing-plot .plot-marks rect,
  .pricing-plot .plot-head { opacity:1; transition:none; }
  .final-bottleneck :is(.bn-in path,.bn-out path) { stroke-dasharray:none!important; stroke-dashoffset:0!important; }
  .final-bottleneck .bn-core-halo { opacity:.3; }
  .duo-pulse path, .duo-trend { stroke-dashoffset:0; }
  .duo-bars rect { transform:scaleY(1); }
  .duo-trend-dot { opacity:1; }
  .sfig { transition:none; }
  .path-row-body { transition:none; }
}

.faq-section,.legal-content{padding:clamp(5rem,9vw,9rem) 0;background:#ece7dc;color:#171411}.faq-layout,.legal-grid{display:grid;grid-template-columns:minmax(12rem,.34fr) minmax(0,1.66fr);gap:clamp(3rem,8vw,8rem)}.faq-layout aside,.legal-grid aside{align-self:start;position:sticky;top:calc(var(--header-height) + 2rem);display:grid;gap:.7rem;padding-top:1rem;border-top:2px solid #ca4d00}.faq-layout aside p,.legal-grid aside p{margin:0 0 .5rem;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.faq-layout aside a,.legal-grid aside a,.legal-grid aside span{color:rgba(23,20,17,.58);font-size:.75rem}.faq-layout section{padding:0 0 4rem}.faq-layout section+section{padding-top:4rem;border-top:1px solid rgba(23,20,17,.18)}.faq-layout h2{margin:0 0 1.5rem;font-size:clamp(2.2rem,4vw,4rem);letter-spacing:-0.044em}.faq-layout details{border-top:1px solid rgba(23,20,17,.2)}.faq-layout details:last-child{border-bottom:1px solid rgba(23,20,17,.2)}.faq-layout summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 0;font-weight:800;cursor:pointer;list-style:none}.faq-layout summary::after{content:"+";color:#ca4d00;font-size:1.3rem}.faq-layout details[open] summary::after{transform:rotate(45deg)}.faq-layout details p{max-width:50rem;margin:0;padding:0 3rem 1.5rem 0;color:rgba(23,20,17,.62)}
.legal-notice{display:grid;grid-template-columns:.35fr 1.65fr;gap:2rem;margin-bottom:5rem;padding:1.3rem;border-left:3px solid #ca4d00;background:#dfd9cd}.legal-notice strong{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em}.legal-notice p{margin:0;color:rgba(23,20,17,.62);font-size:.78rem}.legal-grid article{max-width:53rem}.legal-grid article h2{margin:3rem 0 .8rem;font-size:clamp(1.45rem,2.5vw,2.3rem);letter-spacing:-0.028em}.legal-grid article h2:first-child{margin-top:0}.legal-grid article p{color:rgba(23,20,17,.67)}.legal-grid article a{color:#9d3c00;text-decoration:underline;text-underline-offset:.15em}
/* Solution-specific questions live on their own pages rather than being
   duplicated here; this section is the index into them. */
.faq-jump-lead{max-width:52ch;margin:0 0 1.75rem;color:rgba(23,20,17,.62);line-height:1.6}

/* ── By-solution accordion ───────────────────────────────────────────
   Two levels: an offering opens to reveal its own questions, each of which
   opens to its answer. The outer row is given a card surface so the nesting
   is obvious — without it, twenty summaries in a column read as one flat
   list and the visitor loses track of which offering they are inside. */
.faq-solutions{display:grid;gap:.6rem}
.faq-solution{border:1px solid rgba(23,20,17,.2);border-radius:var(--r-card);background:#f6f2e9;overflow:hidden}
.faq-solution > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.05rem 1.3rem;
  color:#171411;
  cursor:pointer;
  list-style:none;
  transition:background-color .2s ease,color .2s ease;
}
.faq-solution > summary::-webkit-details-marker{display:none}
.faq-solution > summary::after{
  content:"+";
  flex:0 0 auto;
  color:#ca4d00;
  font-size:1.3rem;
  line-height:1;
  transition:transform .25s ease,color .2s ease;
}
.faq-solution[open] > summary::after{transform:rotate(45deg)}
.faq-solution > summary:hover{background:#b84400;color:#fff}
.faq-solution > summary:hover::after,.faq-solution > summary:hover .faq-solution-count{color:#fff}
.faq-solution > summary:focus-visible{outline:2px solid #b84400;outline-offset:-2px}
.faq-solution-name{font-size:1rem;font-weight:800;letter-spacing:-.01em}
.faq-solution-count{margin-left:auto;color:rgba(23,20,17,.5);font-size:.68rem;white-space:nowrap;transition:color .2s ease}
.faq-solution[open] > summary{border-bottom:1px solid rgba(23,20,17,.16)}
.faq-solution-body{padding:.4rem 1.3rem 1.3rem}
/* Inner questions: hairline rows, no card, so the two levels never compete. */
.faq-solution-body details{border-bottom:1px solid rgba(23,20,17,.14)}
.faq-solution-body details:first-child{border-top:0}
.faq-solution-body summary{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem 0;color:#171411;font-size:.92rem;font-weight:700;cursor:pointer;list-style:none;
}
.faq-solution-body summary::-webkit-details-marker{display:none}
.faq-solution-body summary::after{content:"+";color:#ca4d00;font-size:1.1rem;line-height:1;transition:transform .25s ease}
.faq-solution-body details[open] summary::after{transform:rotate(45deg)}
.faq-solution-body summary:hover{color:#b84400}
.faq-solution-body details p{max-width:64ch;margin:0;padding:0 2rem .95rem 0;color:rgba(23,20,17,.68);font-size:.88rem;line-height:1.6}
.faq-solution-body > .text-link{display:inline-flex;margin-top:1.1rem;color:#171411}
/* A row arrived at from a detail page gets a moment of emphasis so it is
   obvious which one the link opened. */
.faq-solution.is-targeted{border-color:#b84400;box-shadow:0 0 0 1px rgba(184,68,0,.45)}
@media (max-width:560px){
  .faq-solution-count{display:none}
  .faq-solution-body{padding-inline:1rem}
}
@media(max-width:760px){.faq-layout,.legal-grid,.legal-notice{grid-template-columns:1fr}.faq-layout aside,.legal-grid aside{position:static}.legal-notice{gap:.6rem}}

/* ════════════════════════════════════════════════════════════════════
   DISPLAY WEIGHT
   Roboto replaced Cabinet Grotesk on titles, and Cabinet Grotesk has since
   been removed from Assets/vendor entirely. Roboto and Inter share a
   skeleton, so weight is now doing the separating that the letterforms used
   to do — titles are set in Black.

   Stated once, last in the sheet, rather than edited into the ~70 heading
   rules above: those declare their own 700/800 at the same specificity, so
   only source order reliably wins. Change --fd-weight (:root) to retune.

   Scope is deliberately titles + the price figure — the same set shown in
   the preview. Buttons, eyebrows, KPI values and small labels that also use
   the display face keep the weights they were designed at.
   ════════════════════════════════════════════════════════════════════ */
:is(h1, h2, h3, h4),
.tier-price,
.price-ledger-row .p-amount {
  font-weight: var(--fd-weight);
}