/* ═══════════ FONTS (self-hosted) ═══════════
   Montserrat variable font (all weights 100–900 in one file), served from
   /public/fonts so there's no round trip to Google. The latin file is
   preloaded in each page's <head>. Montserrat is licensed under the
   SIL Open Font License 1.1. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/public/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/public/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Arial resized to Montserrat's proportions. If Montserrat ever arrives late
   (slow connection), the temporary text takes up the same space, so the swap
   is barely visible and nothing jumps. */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  ascent-override: 85.79%;
  descent-override: 22.25%;
  line-gap-override: 0%;
  size-adjust: 112.83%;
}

:root {
  --ink: #140830;
  --purple-600: #6c2cd4;
  --purple-700: #5623ab;
  --purple-800: #401a82;
  --purple-900: #2e1361;
  --purple-400: #986be1;
  --purple-300: #b696ea;
  --purple-200: #d3c0f2;
  --purple-100: #e9dff9;
  --purple-50: #f3eefc;
  --white: #ffffff;
  --ink-soft: #4a3f59;
  --line: #d3c0f2;
  --success: #246b4c;
  --danger: #a3244a;
  --max: 1200px;
  --radius: 16px;
  --shadow-soft: 0 18px 50px rgba(20, 8, 48, 0.12);
  --shadow-purple: 0 12px 0 rgba(108, 44, 212, 0.16);
  --space-section: clamp(4.5rem, 9vw, 8rem);
  --display: clamp(3rem, 7vw, 7rem);
  --h1: clamp(2.1rem, 4.5vw, 4.8rem);
  --h2: clamp(2.2rem, 4.5vw, 4.5rem);
  --h3: clamp(1.35rem, 2.2vw, 1.85rem);
  --body: 1.0625rem;

  /* Legacy aliases retained for shared component rules. */
  --violet: var(--purple-600);
  --violet-dark: var(--purple-700);
  --periwinkle: var(--purple-300);
  --lavender: var(--purple-50);
  --violet-wash: var(--purple-100);
  --shadow-violet: var(--shadow-purple);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: var(--body);
  line-height: 1.55;
  font-weight: 400;
  font-feature-settings: "ss01" on, "tnum" on;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .18;
  background-image: linear-gradient(rgba(108, 44, 212, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 44, 212, .045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

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

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

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--purple-600);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--purple-200);
  backdrop-filter: blur(18px);
}

.site-header::before {
  display: block;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--purple-600), var(--purple-300), var(--purple-600));
}

.nav-shell {
  min-height: 78px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 176px;
  padding: .62rem;
  border-radius: 12px;
  background: var(--white);
}

.brand img {
  width: 176px;
  height: auto;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
}

.nav-link,
.nav-trigger {
  min-height: 44px;
  padding: .65rem .85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 650;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav-link:hover,
.nav-trigger:hover,
.nav-link[aria-current="page"] {
  color: var(--purple-600);
  background: var(--purple-100);
  transform: translateY(-1px);
}

.nav-dropdown {
  position: relative;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.nav-trigger svg {
  transition: transform 180ms ease;
}

.nav-dropdown.open .nav-trigger svg {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + .7rem);
  display: grid;
  min-width: 260px;
  padding: .55rem;
  border: 1px solid var(--purple-200);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.nav-dropdown.open .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-menu a {
  padding: .85rem;
  border-radius: 10px;
  color: var(--ink);
  font-size: .92rem;
}

.dropdown-menu a:hover {
  background: var(--purple-50);
  color: var(--purple-600);
}

.nav-action {
  margin-left: .5rem;
  white-space: nowrap;
}

.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: .6rem;
  color: var(--ink);
}

.container {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
}

.narrow {
  max-width: 780px;
}

.section {
  position: relative;
  padding: var(--space-section) 0;
}

.section-band {
  background: linear-gradient(135deg, var(--purple-50), var(--white) 62%, var(--purple-100));
}

.section-wash {
  background: var(--purple-50);
}

.section-dark {
  background: var(--ink);
  color: var(--white);
}

.rule {
  border-top: 1px solid var(--purple-200);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.25rem;
  color: var(--purple-600) !important;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 2.4rem;
  height: 3px;
  content: "";
  border-radius: 999px;
  background: var(--purple-600);
}

.section-heading {
  max-width: 800px;
  margin-bottom: 3.25rem;
}

.section-heading h2,
.section-heading h3 {
  margin: 0 0 1rem;
  font-size: var(--h2);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 350;
}

.section-heading p {
  margin: 0;
  max-width: 680px;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.4;
}

.section-dark .section-heading p,
.section-dark .eyebrow {
  color: var(--purple-300);
}

.section-dark .eyebrow::before {
  background: var(--purple-300);
}

.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
}

.hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 80% 22%, rgba(108, 44, 212, .8), transparent 32%), linear-gradient(115deg, rgba(20, 8, 48, .98), rgba(64, 26, 130, .92));
}

.hero::after {
  position: absolute;
  right: -8%;
  top: 10%;
  width: 48vw;
  max-width: 680px;
  aspect-ratio: 1;
  border: 1px solid rgba(182, 150, 234, .5);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 42px rgba(182, 150, 234, .1), 0 0 0 84px rgba(182, 150, 234, .05);
}

.hero>.container {
  position: relative;
  z-index: 1;
}

.hero-light {
  color: var(--ink);
  background: var(--purple-50);
}

.hero-light::before {
  background: linear-gradient(120deg, var(--white), var(--purple-50));
}

.hero-light::after {
  border-color: var(--purple-200);
  box-shadow: 0 0 0 42px rgba(108, 44, 212, .06), 0 0 0 84px rgba(108, 44, 212, .03);
}

.hero-light h1,
.hero-light .narrow h1,
.hero.hero-light .narrow h1 {
  color: var(--ink) !important;
}

.hero-light p,
.hero-light .narrow p,
.hero.hero-light .narrow p {
  color: var(--ink-soft) !important;
}

.hero-light .eyebrow {
  color: var(--purple-600);
}

.hero-light .eyebrow::before {
  background: var(--purple-600);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(340px, .82fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
  min-height: min(640px, calc(100svh - 110px));
  padding-top: clamp(2.25rem, 4vw, 3.75rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.75rem);
}

.hero h1 {
  max-width: 820px;
  margin: 0 0 1.5rem;
  color: var(--white);
  font-size: var(--h1);
  line-height: .89;
  letter-spacing: -.085em;
  font-weight: 350;
}

.hero .reveal {
  opacity: 1;
  transform: none;
}

.hero .narrow h1,
.hero .narrow p {
  color: var(--white);
}

.hero p {
  max-width: 650px;
  margin: 0;
  color: var(--purple-200);
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  line-height: 1.42;
}

.hero .eyebrow {
  color: var(--purple-300);
}

.hero .eyebrow::before {
  background: var(--purple-300);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.25rem;
}

.hero-note {
  margin-top: 1.35rem;
  color: var(--ink-soft);
  font-size: .88rem;
}

.hero .hero-note {
  color: var(--purple-200);
}

.hero-art {
  position: relative;
  min-height: 430px;
}

.hero-art::before,
.hero-art::after {
  position: absolute;
  content: "";
  border: 1px solid var(--purple-300);
  border-radius: 20px;
}

.hero-art::before {
  inset: 3% 0 10% 9%;
  transform: rotate(-7deg);
  background: rgba(255, 255, 255, .06);
}

.hero-art::after {
  inset: 12% 7% 0 0;
  transform: rotate(7deg);
  border-color: var(--purple-400);
}

.dashboard {
  position: absolute;
  inset: 8% 7% 8% 3%;
  z-index: 1;
  display: grid;
  grid-template-columns: .2fr 1fr;
  border: 2px solid var(--white);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 18px 18px 0 rgba(182, 150, 234, .28), var(--shadow-soft);
  transform: rotate(-2deg);
  overflow: hidden;
}

.dashboard-side {
  padding: 1.1rem .7rem;
  background: var(--ink);
}

.dashboard-side span {
  display: block;
  width: 100%;
  height: 8px;
  margin: .72rem 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .22);
}

.dashboard-side span:first-child {
  width: 72%;
  background: var(--purple-300);
}

.dashboard-main {
  padding: 1.3rem;
}

.dashboard-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--purple-200);
}

.dashboard-top strong {
  display: block;
  font-size: 1.15rem;
}

.dashboard-top small {
  color: var(--ink-soft);
}

.dashboard-pill {
  width: 74px;
  height: 22px;
  border-radius: 99px;
  background: var(--purple-200);
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
  margin: 1rem 0;
}

.dashboard-stat {
  padding: .9rem;
  border-radius: 10px;
  background: var(--purple-50);
}

.dashboard-stat b {
  display: block;
  color: var(--purple-600);
  font-size: 1.35rem;
  font-weight: 600;
}

.dashboard-stat small {
  color: var(--ink-soft);
  font-size: .7rem;
}

.dashboard-chart {
  position: relative;
  min-height: 140px;
  overflow: hidden;
  border: 1px solid var(--purple-200);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--white), var(--purple-50));
}

.dashboard-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 rgba(108, 44, 212, .2);
}

.button-primary {
  background: var(--purple-600);
  color: var(--white);
}

.button-primary:hover {
  background: var(--purple-700);
}

.button-secondary {
  border-color: var(--purple-600);
  color: var(--purple-600);
  background: var(--white);
}

.button-secondary:hover {
  background: var(--purple-50);
}

.button-light {
  border-color: var(--purple-300);
  color: var(--white);
  background: transparent;
}

.button-light:hover {
  background: rgba(182, 150, 234, .14);
  box-shadow: 0 8px 0 rgba(182, 150, 234, .18);
}

.button-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0;
  color: var(--purple-600);
  background: transparent;
  font-weight: 700;
}

.button-text:hover {
  transform: none;
  color: var(--purple-700);
}

.button-text svg {
  transition: transform 180ms ease;
}

.button-text:hover svg {
  transform: translateX(5px);
}

.section-dark .button-text,
.section-dark a.button-text {
  color: var(--purple-300);
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 1.15rem;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  position: relative;
  padding: 1.7rem;
  border: 1px solid var(--purple-200);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 3px 0 rgba(108, 44, 212, .06);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.card:hover {
  transform: translateY(-8px);
  border-color: var(--purple-600);
  background: var(--white);
  box-shadow: 0 16px 0 rgba(108, 44, 212, .14), var(--shadow-soft);
}

.grid-3 .card:nth-child(2) {
  transform: translateY(16px);
}

.grid-3 .card:nth-child(2):hover {
  transform: translateY(8px);
}

.card h3 {
  margin: .85rem 0 .6rem;
  font-size: var(--h3);
  line-height: 1.06;
  letter-spacing: -.04em;
  font-weight: 500;
}

.card p {
  margin: 0;
  color: var(--ink-soft);
}

.card .button-text {
  margin-top: 1.3rem;
}

.icon-box {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  color: var(--white);
  background: var(--purple-600);
  box-shadow: 6px 6px 0 var(--purple-200);
}

.icon-box svg {
  width: 22px;
  height: 22px;
}

.label {
  display: block;
  color: var(--purple-600);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.trust-strip {
  position: relative;
  padding: 1.35rem 0;
  border-block: 1px solid var(--purple-800);
  background: var(--ink);
  color: var(--white);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.trust-item {
  padding: .75rem 1rem;
  border-left: 3px solid var(--purple-300);
}

.trust-item strong {
  display: block;
  color: var(--purple-300);
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 600;
}

.trust-item span {
  display: block;
  margin-top: .4rem;
  color: var(--purple-200);
  font-size: .82rem;
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 8vw, 8rem);
  align-items: center;
}

.split.reverse .split-copy {
  order: 2;
}

.split.reverse .split-visual {
  order: 1;
}

.split-copy h2 {
  margin: 0 0 1rem;
  font-size: var(--h2);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 350;
}

.split-copy p:not(.fx-eyebrow) {
  max-width: 620px;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.split-copy .button {
  margin-top: 1rem;
}

.visual-panel {
  position: relative;
  min-height: 330px;
  padding: 1.5rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--purple-50);
  overflow: hidden;
  box-shadow: 15px 15px 0 var(--purple-200);
}

.visual-panel::before {
  position: absolute;
  width: 230px;
  height: 230px;
  border: 2px solid var(--purple-600);
  border-radius: 50%;
  right: -55px;
  bottom: -90px;
  content: "";
  box-shadow: 0 0 0 24px rgba(108, 44, 212, .08);
}

.visual-panel::after {
  position: absolute;
  left: 1.5rem;
  bottom: 1.35rem;
  width: 45%;
  height: 3px;
  content: "";
  border-radius: 99px;
  background: var(--purple-600);
  box-shadow: 0 -13px 0 rgba(108, 44, 212, .3), 0 -26px 0 rgba(108, 44, 212, .16);
}

.visual-panel h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 260px;
  font-size: 2.3rem;
  line-height: .96;
  font-weight: 350;
  letter-spacing: -.06em;
}

.visual-panel p {
  position: relative;
  z-index: 1;
  max-width: 280px;
  margin: 1rem 0 0;
  color: var(--ink-soft);
}

.visual-panel .glyph {
  position: absolute;
  right: 16%;
  top: 24%;
  color: var(--purple-600);
  opacity: .85;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.metric {
  padding: 1.3rem 0;
  border-top: 3px solid var(--purple-600);
}

.metric strong {
  display: block;
  color: var(--purple-600);
  font-size: clamp(2.7rem, 5vw, 5rem);
  font-weight: 350;
  line-height: .9;
  letter-spacing: -.08em;
}

.metric span {
  display: block;
  max-width: 180px;
  margin-top: .7rem;
  color: var(--ink-soft);
}

.section-dark .metric {
  border-color: var(--purple-300);
}

.section-dark .metric span {
  color: var(--purple-200);
}

.section-dark .metric strong {
  color: var(--purple-300);
}

.product-list {
  display: grid;
  gap: .55rem;
}

.product-row {
  display: grid;
  grid-template-columns: .7fr 1.15fr .45fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--purple-200);
  border-radius: 12px;
  background: var(--purple-50);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.product-row:hover {
  transform: translateX(8px);
  border-color: var(--purple-600);
  background: var(--white);
}

.product-row h3 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 500;
}

.product-row p {
  margin: 0;
  color: var(--ink-soft);
}

.product-row .button-text {
  justify-self: end;
}

.tabs {
  margin-top: 2rem;
}

.tab-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
  margin-bottom: 2rem;
}

.tab {
  min-height: 86px;
  padding: .95rem;
  border: 1px solid var(--purple-200);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  text-align: left;
  font-weight: 700;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.tab:hover {
  border-color: var(--purple-600);
  background: var(--purple-50);
  transform: translateY(-3px);
}

.tab[aria-selected="true"] {
  border-color: var(--purple-600);
  background: var(--purple-600);
  color: var(--white);
  box-shadow: 8px 8px 0 var(--purple-200);
  transform: translate(-2px, -2px);
}

.tab[aria-selected="true"]::after {
  display: block;
  margin-top: .25rem;
  content: "Active";
  color: var(--white);
  font-size: .72rem;
  font-weight: 500;
}

.tab-panel {
  animation: panel-in 260ms ease both;
}

.tab-panel[hidden] {
  display: none;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.service-card {
  min-height: 190px;
}

.service-card.highlight {
  border-color: var(--purple-600);
  background: var(--purple-100);
}

.related-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.related-card {
  padding: 1.6rem;
  border: 1px solid var(--purple-200);
  border-radius: var(--radius);
  background: var(--purple-50);
  box-shadow: 8px 8px 0 rgba(108, 44, 212, .12);
}

.related-card h3 {
  margin: .35rem 0 .5rem;
  font-size: 1.25rem;
  font-weight: 500;
}

.related-card p {
  margin: 0;
  color: var(--ink-soft);
}

.panel-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--purple-200);
}

.panel-footer .link-line {
  color: var(--purple-600);
  font-weight: 700;
}

.callout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2.2rem;
  border: 2px solid var(--purple-600);
  border-radius: var(--radius);
  background: var(--purple-100);
  box-shadow: 12px 12px 0 var(--purple-200);
  overflow: hidden;
}

.callout::after {
  position: absolute;
  right: 12%;
  top: -55px;
  width: 150px;
  height: 150px;
  border: 2px solid var(--purple-600);
  border-radius: 50%;
  content: "";
  opacity: .35;
}

.callout h2 {
  margin: 0 0 .5rem;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: .95;
  font-weight: 350;
  letter-spacing: -.06em;
}

.callout p {
  max-width: 720px;
  margin: 0;
  color: var(--ink-soft);
}

.quote {
  margin: 2rem 0;
  padding: 1.6rem 1.85rem;
  border-left: 5px solid var(--purple-600);
  border-radius: 0 14px 14px 0;
  background: var(--purple-50);
  color: var(--ink);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.04em;
}

.placeholder {
  padding: 1rem;
  border: 1px dashed var(--purple-600);
  border-radius: 10px;
  color: var(--ink-soft);
  background: var(--purple-50);
  font-size: .9rem;
}

.final-cta {
  position: relative;
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  overflow: hidden;
}

.final-cta::before {
  position: absolute;
  right: 8%;
  top: -35%;
  width: 420px;
  aspect-ratio: 1;
  border: 1px solid rgba(182, 150, 234, .45);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 36px rgba(182, 150, 234, .1), 0 0 0 72px rgba(182, 150, 234, .05);
}

.final-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
}

.final-cta h2 {
  max-width: 760px;
  margin: 0 0 1rem;
  font-size: clamp(2.5rem, 5.4vw, 5.4rem);
  line-height: .9;
  letter-spacing: -.08em;
  font-weight: 350;
}

.final-cta p {
  max-width: 650px;
  margin: 0;
  color: var(--purple-200);
  font-size: 1.12rem;
}

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.form-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--purple-200);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 12px 12px 0 var(--purple-200);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field {
  display: grid;
  gap: .4rem;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: .88rem;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: .75rem .85rem;
  border: 1px solid #9d91aa;
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
}

.field textarea {
  min-height: 145px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--purple-600);
  box-shadow: 0 0 0 4px rgba(108, 44, 212, .16);
  outline: none;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.error {
  min-height: 1.15em;
  color: var(--danger);
  font-size: .8rem;
}

.form-status {
  margin: 1rem 0 0;
  padding: .85rem;
  border-radius: 10px;
  background: #e6f4ed;
  color: var(--success);
}

.contact-panel {
  padding-top: 1rem;
}

.contact-panel h2 {
  margin: 0 0 1rem;
  font-size: 2.2rem;
  font-weight: 350;
  letter-spacing: -.06em;
  line-height: .98;
}

.contact-panel p {
  color: var(--ink-soft);
}

.contact-line {
  padding: 1rem 0;
  border-top: 1px solid var(--purple-200);
}

.contact-line strong {
  display: block;
  margin-bottom: .25rem;
}

.contact-line span {
  color: var(--ink-soft);
}

.site-footer {
  padding: 4.5rem 0 1.5rem;
  border-top: 1px solid var(--purple-800);
  background: var(--ink);
  color: var(--white);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, 1fr);
  gap: 2rem;
}

.footer-brand .brand {
  width: fit-content;
  min-width: 0;
}

.footer-brand .brand {
  background: transparent;
  padding: 0;
  min-width: 0;
}

.footer-brand .brand img {
  width: 132px;
}

.footer-brand p {
  max-width: 260px;
  color: var(--purple-200);
  font-size: .92rem;
}

.footer-title {
  margin: 0 0 .85rem;
  color: var(--purple-300);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: .55rem;
}

.footer-links a {
  color: var(--white);
  font-size: .92rem;
  opacity: .86;
}

.footer-links a:hover {
  color: var(--purple-300);
  opacity: 1;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(182, 150, 234, .3);
  color: var(--purple-200);
  font-size: .8rem;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.2, .7, .2, 1);
}

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

/* Homepage and Finance page: no scroll-triggered fade. Content is visible
   from the first paint, even before script.js runs. */
.home-page .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 900px) {
  .nav-shell {
    gap: .8rem;
  }

  .brand {
    min-width: 145px;
  }

  .brand img {
    width: 145px;
  }

  .site-nav {
    gap: 0;
  }

  .nav-link,
  .nav-trigger {
    padding-inline: .55rem;
    font-size: .82rem;
  }

  .hero-grid,
  .split,
  .form-layout {
    gap: 2rem;
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-row {
    grid-template-columns: .75fr 1fr;
  }

  .product-row .button-text {
    grid-column: 2;
    justify-self: start;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 1rem;
  }

  body::before {
    background-size: 28px 28px;
  }

  .container {
    width: min(100% - 1.5rem, var(--max));
  }

  .nav-shell {
    min-height: 68px;
    padding-inline: .75rem;
  }

  .brand {
    min-width: 0;
    flex: 1;
    padding: .5rem;
  }

  .brand img {
    width: 138px;
  }

  .menu-toggle {
    display: inline-flex;
    order: 2;
  }

  .nav-action {
    order: 3;
    margin-left: 0;
    padding-inline: .9rem;
    font-size: .8rem;
  }

  .site-nav {
    position: absolute;
    left: .75rem;
    right: .75rem;
    top: calc(100% + .5rem);
    display: none;
    align-items: stretch;
    flex-direction: column;
    padding: .6rem;
    border: 1px solid var(--purple-200);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-soft);
  }

  .site-nav.open {
    display: flex;
  }

  .nav-link,
  .nav-trigger {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }

  .nav-dropdown {
    width: 100%;
  }

  .dropdown-menu {
    position: static;
    display: none;
    margin: .2rem 0 0;
    box-shadow: none;
    border: 0;
    padding: .2rem .5rem;
  }

  .nav-dropdown.open .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu {
    display: grid;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .hero::after {
    right: -30%;
    top: 25%;
    width: 80vw;
  }

  .hero-grid,
  .split,
  .form-layout {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    min-height: calc(100svh - 112px);
    gap: .7rem;
    padding-top: 1rem;
    padding-bottom: 1.1rem;
  }

  .hero h1 {
    font-size: clamp(2.4rem, 10.5vw, 3.45rem);
  }

  .hero-actions {
    margin-top: 1rem;
  }

  .hero-art {
    min-height: 175px;
    order: -1;
  }

  .dashboard {
    inset: 5% 2% 6% 0;
  }

  .dashboard-main {
    padding: .9rem;
  }

  .dashboard-stat {
    padding: .65rem;
  }

  .dashboard-chart {
    min-height: 100px;
  }

  .trust-grid,
  .grid-3,
  .grid-4,
  .service-grid {
    grid-template-columns: 1fr;
  }

  .grid-3 .card:nth-child(2) {
    transform: none;
  }

  .grid-3 .card:nth-child(2):hover {
    transform: translateY(-8px);
  }

  .grid-2,
  .related-row {
    grid-template-columns: 1fr;
  }

  .section-heading {
    margin-bottom: 2rem;
  }

  .section-heading h2,
  .split-copy h2 {
    font-size: clamp(2.25rem, 12vw, 3.5rem);
  }

  .tab-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .tab {
    min-height: 86px;
    font-size: .88rem;
  }

  .product-row {
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  .product-row .button-text {
    grid-column: auto;
  }

  .callout,
  .final-cta-inner {
    grid-template-columns: 1fr;
  }

  .final-cta-inner .button {
    justify-self: start;
  }

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

  .field.full {
    grid-column: auto;
  }

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

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Human-led editorial redesign: precise, tactile, and enterprise-first. */
body::before {
  display: none;
}

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--ink);
  backdrop-filter: none;
}

.site-header::before {
  height: 3px;
  background: var(--purple-600);
}

.brand {
  border-radius: 0;
  padding: .62rem .75rem;
}

.nav-link,
.nav-trigger {
  border-radius: 0;
  color: var(--ink);
  font-size: .86rem;
  letter-spacing: .01em;
}

.nav-link:hover,
.nav-trigger:hover,
.nav-link[aria-current="page"] {
  color: var(--purple-600);
  background: transparent;
  transform: none;
  box-shadow: inset 0 -2px 0 var(--purple-600);
}

.dropdown-menu {
  border-radius: 0;
  border-color: var(--ink);
  box-shadow: 8px 8px 0 var(--purple-200);
  transform: translateY(-8px);
}

.dropdown-menu a {
  border-radius: 0;
}

.nav-action {
  border-radius: 4px;
}

.hero {
  color: var(--ink);
  background: var(--white);
}

.hero::before {
  inset: 0 auto 0 0;
  width: 42%;
  background: var(--purple-50);
}

.hero::after {
  display: none;
}

.hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .82fr);
  min-height: 530px;
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}

.hero h1 {
  color: var(--ink);
  max-width: 720px;
  font-size: clamp(3.4rem, 6.1vw, 6.4rem);
  line-height: .92;
  letter-spacing: -.075em;
  font-weight: 350;
}

.hero p,
.hero .hero-note {
  color: var(--ink-soft);
}

.hero .eyebrow {
  color: var(--purple-600);
}

.hero .eyebrow::before {
  background: var(--purple-600);
}

.hero-art {
  min-height: 360px;
}

.hero-art::before,
.hero-art::after {
  border-radius: 0;
}

.hero-art::before {
  inset: 0 10% 10% 0;
  border: 1px solid var(--purple-600);
  transform: translate(16px, 12px);
  background: transparent;
}

.hero-art::after {
  inset: 10% 0 0 10%;
  border: 1px solid var(--ink);
  transform: none;
}

.dashboard {
  inset: 7% 5% 7% 5%;
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: 12px 12px 0 var(--purple-200);
  transform: none;
}

.dashboard-side {
  border-right: 1px solid var(--ink);
  background: var(--ink);
}

.dashboard-side span {
  border-radius: 0;
}

.dashboard-main {
  padding: 1.35rem;
}

.dashboard-top {
  border-bottom-color: var(--ink);
}

.dashboard-pill {
  border-radius: 0;
  background: var(--purple-600);
}

.dashboard-stat {
  border-radius: 0;
  border: 1px solid var(--purple-200);
  background: var(--white);
}

.dashboard-chart {
  border-radius: 0;
  border-color: var(--ink);
  background: var(--purple-50);
}

.button {
  min-height: 46px;
  border-radius: 4px;
  box-shadow: none;
}

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

.button-primary {
  background: var(--purple-600);
}

.button-secondary {
  background: var(--white);
}

.button-light {
  border-radius: 4px;
}

.button-text {
  min-height: 36px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.section {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
}

.section-band {
  background: var(--purple-50);
}

.section-wash {
  background: var(--white);
}

.section-dark {
  background: var(--ink);
}

.section-heading {
  margin-bottom: 2.5rem;
}

.section-heading h2,
.section-heading h3,
.split-copy h2 {
  font-weight: 350;
}

.eyebrow {
  letter-spacing: .14em;
}

.grid-3 .card:nth-child(2) {
  transform: none;
}

.grid-3 .card:nth-child(2):hover {
  transform: translateY(-4px);
}

.card {
  border-radius: 0;
  border-color: var(--ink);
  box-shadow: none;
  background: var(--white);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--purple-600);
  box-shadow: 6px 6px 0 var(--purple-200);
}

.card h3 {
  font-weight: 500;
}

.icon-box {
  border-radius: 0;
  box-shadow: none;
  background: var(--purple-600);
}

.trust-strip {
  border-block-color: var(--ink);
  background: var(--white);
  color: var(--ink);
}

.trust-item {
  border-left: 2px solid var(--purple-600);
}

.trust-item strong {
  color: var(--ink);
}

.trust-item span {
  color: var(--ink-soft);
}

.product-row {
  border-radius: 0;
  border-color: var(--ink);
  background: var(--white);
}

.product-row:hover {
  transform: none;
  border-color: var(--purple-600);
  background: var(--purple-50);
}

.visual-panel {
  border-radius: 0;
  box-shadow: 12px 12px 0 var(--purple-200);
}

.visual-panel::before {
  border-radius: 0;
  box-shadow: none;
  transform: rotate(45deg);
}

.metric {
  border-top-color: var(--ink);
}

.metric strong {
  color: var(--purple-600);
  font-weight: 450;
}

.tab {
  border-radius: 0;
  border-color: var(--ink);
}

.tab:hover {
  transform: none;
}

.tab[aria-selected="true"] {
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--purple-200);
  transform: none;
}

.service-card,
.related-card {
  border-radius: 0;
}

.related-card {
  box-shadow: none;
  border-color: var(--ink);
}

.service-card.highlight {
  background: var(--purple-50);
}

.callout {
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--purple-200);
}

.callout::after {
  display: none;
}

.quote {
  border-radius: 0;
}

.placeholder {
  border-radius: 0;
}

.final-cta::before {
  display: none;
}

.final-cta {
  border-top: 1px solid var(--purple-300);
}

.form-card {
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--purple-200);
}

.field input,
.field select,
.field textarea {
  border-radius: 0;
  border-color: var(--ink);
}

.form-status {
  border-radius: 0;
}

.site-footer {
  border-top-color: var(--purple-300);
}

.footer-brand .brand {
  border-radius: 0;
}

@media (max-width: 680px) {
  .hero::before {
    width: 100%;
    height: 46%;
    bottom: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: .8rem;
    padding-top: 1rem;
    padding-bottom: 1.25rem;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 11vw, 3.6rem);
  }

  .hero-art {
    order: 2;
    min-height: 112px;
    width: 100%;
    margin-top: .35rem;
  }

  .hero-art::before {
    inset: 0 4% 4% 0;
    transform: translate(5px, 5px);
  }

  .hero-art::after {
    inset: 4% 0 0 4%;
  }

  .dashboard {
    inset: 0 5% 0 5%;
    box-shadow: 5px 5px 0 var(--purple-200);
  }

  .dashboard-side {
    padding: .45rem .35rem;
  }

  .dashboard-side span {
    height: 4px;
    margin: .38rem 0;
  }

  .dashboard-main {
    padding: .55rem .65rem;
  }

  .dashboard-top {
    padding-bottom: .35rem;
  }

  .dashboard-top strong {
    font-size: .78rem;
  }

  .dashboard-top small {
    font-size: .6rem;
  }

  .dashboard-stats {
    margin: .35rem 0;
  }

  .dashboard-stat {
    padding: .3rem .4rem;
  }

  .dashboard-stat b {
    font-size: .78rem;
  }

  .dashboard-stat small {
    font-size: .5rem;
  }

  .dashboard-chart {
    min-height: 32px;
  }

  .card:hover {
    transform: translateY(-3px);
    box-shadow: 4px 4px 0 var(--purple-200);
  }

  .form-card {
    box-shadow: 5px 5px 0 var(--purple-200);
  }
}

/* Compact hero pass: keep the entire opening message above the fold. */
.hero-grid {
  min-height: 430px;
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
  gap: clamp(1rem, 4vw, 3.5rem);
}

.hero h1 {
  font-size: clamp(2.9rem, 5.2vw, 5.35rem);
  margin-bottom: 1rem;
}

.hero-art {
  min-height: 280px;
}

.hero-actions {
  margin-top: 1.35rem;
}

@media (max-width: 680px) {
  .hero-grid {
    min-height: 0;
    gap: .55rem;
    padding-top: .7rem;
    padding-bottom: .75rem;
  }

  .hero h1 {
    font-size: clamp(2.15rem, 9vw, 3rem);
    line-height: .93;
    margin-bottom: .65rem;
  }

  .hero p {
    font-size: .94rem;
    line-height: 1.35;
  }

  .hero-actions {
    margin-top: .65rem;
  }

  .hero-art {
    min-height: 86px;
    margin-top: .2rem;
  }

  .dashboard {
    inset: 0 7% 0 7%;
  }

  .dashboard-main {
    padding: .35rem .5rem;
  }

  .dashboard-top {
    padding-bottom: .2rem;
  }

  .dashboard-top strong {
    font-size: .68rem;
  }

  .dashboard-top small {
    font-size: .5rem;
  }

  .dashboard-pill {
    width: 38px;
    height: 10px;
  }

  .dashboard-stats {
    margin: .2rem 0;
    gap: .25rem;
  }

  .dashboard-stat {
    padding: .2rem .25rem;
  }

  .dashboard-stat b {
    font-size: .65rem;
  }

  .dashboard-stat small {
    font-size: .42rem;
  }

  .dashboard-chart {
    min-height: 22px;
  }
}

/* Supplied hero background: replace the diagram artwork with the user's image. */
.hero {
  color: var(--white);
  background-color: var(--ink);
  background-image: url('/public/hero-background.webp');
  background-position: center;
  background-size: cover;
}

.hero::before {
  inset: 0;
  width: auto;
  background: linear-gradient(90deg, rgba(20, 8, 48, .96) 0%, rgba(20, 8, 48, .82) 48%, rgba(20, 8, 48, .42) 100%);
}

.hero::after {
  display: none;
}

.hero-grid {
  grid-template-columns: 1fr;
  min-height: 430px;
}

.hero-grid> :first-child {
  max-width: 760px;
}

.hero-art {
  display: none;
}

.hero h1,
.hero.hero-light h1,
.hero.hero-light .narrow h1 {
  color: var(--white) !important;
}

.hero p,
.hero.hero-light p,
.hero.hero-light .narrow p {
  color: var(--purple-200) !important;
}

.hero .eyebrow,
.hero.hero-light .eyebrow {
  color: var(--purple-300);
}

.hero .eyebrow::before,
.hero.hero-light .eyebrow::before {
  display: none;
}

@media (max-width: 680px) {
  .hero {
    background-position: 58% center;
  }

  .hero-grid {
    min-height: 360px;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
  }

  .hero-grid> :first-child {
    max-width: 100%;
  }
}

/* Slightly taller hero pass, still designed to stay above the fold. */
.hero-grid {
  min-height: 510px;
  padding-top: 2.3rem;
  padding-bottom: 2.3rem;
}

@media (max-width: 680px) {
  .hero-grid {
    min-height: 420px;
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
  }
}

/* Preview edit request wpe_5de9a1c651e1c53757e46bc8: dark trust strip. */
.trust-strip {
  background-color: var(--ink);
  color: var(--white);
  border-block-color: var(--purple-300);
}

.trust-item {
  border-left-color: var(--purple-300);
}

.trust-item strong {
  color: var(--white);
}

.trust-item span {
  color: var(--purple-300);
}

/* Homepage-only typography requested by the user. */
.home-page {
  font-family: "Montserrat", "Montserrat Fallback", Inter, "Segoe UI", Arial, sans-serif;
}

.home-page h1,
.home-page h2,
.home-page h3,
.home-page h4 {
  font-family: "Montserrat", "Montserrat Fallback", Inter, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
}

.home-page strong,
.home-page b,
.home-page .eyebrow,
.home-page .label,
.home-page .button,
.home-page .nav-link,
.home-page .nav-trigger,
.home-page .footer-title {
  font-family: "Montserrat", "Montserrat Fallback", Inter, "Segoe UI", Arial, sans-serif;
  font-weight: 600;
}

.home-page .eyebrow::before {
  display: none;
}

/* Microsoft Cloud Solution Provider mark beside the FusionX Consulting logo. */
.partner-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 42px;
  margin-left: 12px;
  flex: 0 0 auto;
}

.partner-brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-shell {
  --header-logo-width: 176px;
}

.brand,
.partner-brand {
  width: var(--header-logo-width);
  min-width: var(--header-logo-width);
  flex: 0 0 var(--header-logo-width);
}

.brand img {
  display: block;
  width: 100%;
}

@media (max-width: 680px) {
  .nav-shell {
    --header-logo-width: 120px;
  }

  .nav-shell {
    gap: .25rem;
    padding-inline: .5rem;
  }

  .brand {
    padding: 0;
  }

  .partner-brand {
    width: var(--header-logo-width);
    min-width: var(--header-logo-width);
    height: 27px;
    margin-left: 0;
  }

  .nav-action {
    padding-inline: .65rem;
    font-size: .72rem;
  }
}

@media (680px < width <= 1100px) {
  .nav-shell {
    --header-logo-width: 120px;
    gap: .25rem;
    padding-inline: .5rem;
  }

  .brand {
    padding: 0;
  }

  .partner-brand {
    width: var(--header-logo-width);
    min-width: var(--header-logo-width);
    height: 27px;
    margin-left: 0;
  }

  .menu-toggle {
    display: inline-flex;
    order: 2;
    margin-left: auto;
  }

  .nav-action {
    order: 3;
    margin-left: 0;
    padding-inline: .65rem;
    font-size: .72rem;
  }

  .site-nav {
    position: absolute;
    left: .75rem;
    right: .75rem;
    top: calc(100% + .5rem);
    display: none;
    align-items: stretch;
    flex-direction: column;
    padding: .6rem;
    border: 1px solid var(--purple-200);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-soft);
  }

  .site-nav.open {
    display: flex;
  }

  .nav-link,
  .nav-trigger {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }

  .nav-dropdown {
    width: 100%;
  }

  .dropdown-menu {
    position: static;
    display: none;
    margin: .2rem 0 0;
    box-shadow: none;
    border: 0;
    padding: .2rem .5rem;
  }

  .nav-dropdown.open .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu {
    display: grid;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media (max-width: 900px) {
  .menu-toggle {
    margin-left: auto;
  }
}

/* Global responsive container system: full-width backgrounds stay independent. */
.container,
.nav-shell {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 32px;
}

.brand {
  width: calc(var(--header-logo-width) * 1.2);
  min-width: calc(var(--header-logo-width) * 1.2);
  flex-basis: calc(var(--header-logo-width) * 1.2);
}

.nav-shell {
  box-sizing: border-box;
}

@media (680px < width <= 900px) {

  .container,
  .nav-shell {
    padding-inline: 24px;
  }
}

@media (max-width: 680px) {

  .container,
  .nav-shell {
    padding-inline: 16px;
  }

  .nav-shell {
    --header-logo-width: 104px;
    gap: .25rem;
  }

  .partner-brand {
    width: var(--header-logo-width);
    min-width: var(--header-logo-width);
    height: 24px;
  }

  .nav-action {
    padding-inline: .55rem;
    font-size: .7rem;
  }
}

@media (min-width: 1600px) {

  .container,
  .nav-shell {
    max-width: 1600px;
  }
}

/* Slightly enlarge the supplied CSP mark without changing FusionX Consulting branding. */
.partner-brand {
  width: calc(var(--header-logo-width) * 1.075);
  min-width: calc(var(--header-logo-width) * 1.075);
  flex-basis: calc(var(--header-logo-width) * 1.075);
  height: 45.1px;
}

@media (680px < width <= 1100px) {
  .partner-brand {
    height: 34.1px;
  }
}

@media (max-width: 680px) {
  .partner-brand {
    height: 30.3px;
  }

  .menu-toggle {
    padding: .35rem;
  }

  .nav-action {
    padding-inline: .3rem;
  }
}

/* Keep both header marks on one continuous scale while the viewport changes. */
.nav-shell {
  --header-logo-width: clamp(104px, 12vw, 176px);
}

.brand {
  padding: 0;
}

.partner-brand {
  height: calc(var(--header-logo-width) * .3018);
}

/* Sticky Split Layout for Consulting Services */
#services .split {
  align-items: start;
}

#services .split-copy {
  position: sticky;
  top: calc(78px + 3rem);
  /* Below site-header with breathing room */
}

#services .product-list {
  padding-bottom: 2rem;
}

@media (max-width: 900px) {
  #services .split {
    align-items: normal;
  }

  #services .split-copy {
    position: relative;
    top: auto;
  }
}

/* --- ECOSYSTEM VISUAL REDESIGN --- */
.eco-section {
  padding: clamp(5rem, 8vw, 8rem) 0;
  background: transparent;
  overflow: hidden;
}

.eco-container {
  display: grid;
  grid-template-columns: minmax(0, 36%) minmax(0, 64%);
  align-items: center;
}

.eco-content {
  /* An explicit width keeps the size container from collapsing to 0
     when the column is centred with auto margins on smaller screens */
  width: 100%;
  padding-right: clamp(2rem, 5vw, 4rem);
  container-type: inline-size;
}

/* Sized to its column, not the viewport, so "Transforming" never outgrows it */
.eco-content h2 {
  margin: 0 0 1rem;
  font-size: min(var(--h2), 16cqi);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 350;
  color: var(--ink);
}

.eco-content p:not(.eyebrow):not(.fx-eyebrow) {
  margin: 0 0 1.75rem;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.5;
  max-width: 620px;
}

.eco-divide {
  width: 140px;
  height: 3px;
  margin-bottom: 2rem;
  background: var(--purple-600);
  border-radius: 99px;
}

.eco-link {
  font-size: 1.15rem;
}

/* Radial Ecosystem Graphic */
.eco-rad-wrapper {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.eco-rad-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(108, 44, 212, 0.12) 0%, rgba(182, 150, 234, 0.05) 50%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.eco-connectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.eco-connectors line,
.eco-connectors circle {
  transition: opacity 600ms ease;
}

.eco-rad-wrapper:not(.is-visible) .eco-connectors line {
  opacity: 0.2;
}

.eco-rad-wrapper.is-visible .eco-connectors line {
  opacity: 1;
}

/* Central Dynamics 365 Hub */
.eco-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 160px;
  height: 160px;
  background: transparent;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 3;
  box-shadow: none;
  opacity: 0;
  transition: opacity 600ms ease 100ms, transform 600ms cubic-bezier(.175, .885, .32, 1.275) 100ms;
}

.eco-rad-wrapper.is-visible .eco-hub {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.eco-hub-inner {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
}

.eco-hub-inner img {
  width: 100%;
}

.hub-label {
  display: block;
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  margin-top: .4rem;
  letter-spacing: .01em;
  white-space: nowrap;
}



.eco-hub-inner {
  width: 80px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Solution Nodes */
.eco-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  transform: translate(-50%, -50%);
  /* Base */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  /* Just fade in smoothly once the lines appear */
  transition: opacity 700ms ease 900ms;
}

.eco-rad-wrapper.is-visible .eco-node {
  opacity: 1;
}

.node-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  box-shadow: none;
  margin: 0 auto .4rem;
  transition: transform 250ms ease;
}

.node-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.eco-node strong {
  display: block;
  font-size: .85rem;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: .25rem;
  transition: color 250ms ease;
}

.eco-node span {
  display: block;
  font-size: .7rem;
  color: var(--ink-soft);
  line-height: 1.25;
}

/* Hover effects */
.eco-node:hover {
  z-index: 5;
}

.eco-node:hover .node-icon {
  transform: scale(1.15);
  box-shadow: none;
}

.eco-node:hover strong {
  color: var(--purple-600);
}

/* Node Positioning: Nodes positioned outside Ring 2 (r=185) to guarantee zero overlap with lines */
.en-1 {
  left: 50%;
  top: 6.5%;
}

.en-2 {
  left: 81%;
  top: 16%;
}

.en-3 {
  left: 91%;
  top: 50%;
}

.en-4 {
  left: 81%;
  top: 84%;
}

.en-5 {
  left: 50%;
  top: 93.5%;
}

.en-6 {
  left: 19%;
  top: 84%;
}

.en-7 {
  left: 9%;
  top: 50%;
}

.en-8 {
  left: 19%;
  top: 16%;
}

/* Responsive Ecosystem Adjustments */
@media (max-width: 1200px) {
  .eco-hero-title {
    font-size: clamp(2.4rem, 3.8vw, 3.2rem);
  }

  .eco-rad-wrapper {
    transform: scale(0.85);
    transform-origin: center right;
  }
}

@media (max-width: 900px) {
  .eco-container {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .eco-content {
    padding-right: 0;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
  }

  /* The label is a flex row, so text-align doesn't centre it */
  .eco-content .fx-eyebrow {
    justify-content: center;
  }

  .eco-divide {
    margin-inline: auto;
  }

  .eco-rad-wrapper {
    transform: scale(0.9);
    transform-origin: center;
    margin-top: -2rem;
  }

  .eco-hero-title {
    font-size: clamp(2.4rem, 6vw, 3rem);
  }
}

@media (max-width: 680px) {
  .eco-rad-wrapper {
    max-width: 100%;
    aspect-ratio: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem 0;
    margin-top: 0;
  }

  .eco-connectors {
    display: none;
  }

  .eco-rad-glow {
    top: 90px;
    height: 180px;
    width: 180px;
    left: 50%;
    transform: translateX(-50%);
  }

  .eco-hub {
    position: relative;
    top: auto;
    left: auto;
    transform: none !important;
    margin-bottom: 1.5rem;
  }

  .eco-node {
    position: relative;
    top: auto;
    left: auto;
    transform: none !important;
    width: 100%;
    max-width: 340px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 1rem;
    text-align: left;
    padding: 1rem;
    background: var(--white);
    border: 1px solid rgba(108, 44, 212, 0.1);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(20, 8, 48, 0.03);
    /* For mobile stacking, fade them in a sequence */
    opacity: 0;
    animation: eco-fade 600ms ease forwards 400ms;
  }

  .eco-rad-wrapper:not(.is-visible) .eco-node {
    animation: none;
  }

  .eco-node .node-icon {
    grid-row: 1 / 3;
    margin: 0;
    width: 50px;
    height: 50px;
    box-shadow: none;
    border: 1px solid rgba(20, 8, 48, 0.05);
  }

  .eco-node .node-icon img {
    width: 26px;
    height: 26px;
  }

  .eco-node strong {
    align-self: end;
    margin-bottom: 0.1rem;
    font-size: .95rem;
  }

  .eco-node span {
    align-self: start;
    font-size: .75rem;
  }

  /* Make a pseudo line down the middle for mobile */
  .eco-rad-wrapper::after {
    content: "";
    position: absolute;
    top: 140px;
    bottom: 40px;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, rgba(108, 44, 212, 0.4), transparent);
    z-index: 1;
    transform: translateX(-50%);
  }
}

@keyframes eco-fade {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer-brand .brand {
  min-width: 211px;
}

.footer-brand .brand img {
  width: 211px;
}

.product-row {
  background-color: #D4C2FC;
}

/* ==========================================================================
   Homepage Consulting Services Showcase (Montserrat Typography, Equal-Height)
   ========================================================================== */

.service-section {
  position: relative;
  scroll-margin-top: 90px;
  background: var(--white);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(4rem, 6.5vw, 6rem);
}

/* Top Section Header (Spanning full width of container, left-aligned) */
.service-section-header {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  text-align: left;
}

.service-section-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.25rem;
  color: var(--purple-600) !important;
  font-family: "Montserrat", "Montserrat Fallback", Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.service-section-header .eyebrow::before {
  display: none !important;
}

.service-section-title {
  margin: 0 0 1rem;
  font-family: "Montserrat", "Montserrat Fallback", Inter, "Segoe UI", Arial, sans-serif;
  font-size: var(--h2) !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
  font-weight: 350 !important;
  color: var(--ink);
}

.service-section-desc {
  margin: 0;
  max-width: 780px;
  color: var(--ink-soft);
  font-family: "Montserrat", "Montserrat Fallback", Inter, "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.4;
  font-weight: 400;
}

/* Two-Column Equal-Height Grid */
.service-showcase-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: start;
}

/* Left Column: 7 Selectable Vertical Buttons */
.service-tabs-nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.65rem;
  align-self: start;
}

.service-tab-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
  padding: 0.95rem 1.25rem;
  border-radius: 999px;
  background: var(--white);
  border: 1.5px solid rgba(182, 150, 234, 0.45);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600 !important;
  cursor: pointer;
  outline: none;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
  text-align: left;
  box-shadow: 0 2px 6px rgba(20, 8, 48, 0.03);
  flex: none;
}

.tab-num {
  display: none;
}

.tab-label {
  font-size: 0.95rem;
  font-weight: 600 !important;
  line-height: 1.2;
  flex-grow: 1;
}

.tab-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--purple-300);
  font-weight: 600 !important;
  transition: transform 200ms ease, color 200ms ease;
  line-height: 1;
}

.service-tab-btn:hover {
  border-color: var(--purple-600);
  background: var(--purple-50);
  transform: translateX(4px);
}

.service-tab-btn:hover .tab-arrow {
  color: var(--purple-600);
  transform: translateX(3px);
}

.service-tab-btn:focus-visible {
  outline: 2px solid var(--purple-600);
  outline-offset: 3px;
}

.service-tab-btn[aria-selected="true"] {
  background: linear-gradient(135deg, #6c2cd4 0%, #4e1db8 100%);
  border-color: #6c2cd4;
  color: var(--white);
  box-shadow: 0 10px 26px rgba(108, 44, 212, 0.32);
  transform: translateX(4px);
}

.service-tab-btn[aria-selected="true"] .tab-num {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.service-tab-btn[aria-selected="true"] .tab-arrow {
  color: var(--white);
  transform: translateX(3px);
}

/* Right Column: Card Stage (Stretches to match left column height) */
.service-card-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-self: start;
}

.service-card-stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.service-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  animation: svc-fade-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.service-panel[hidden] {
  display: none;
}

@keyframes svc-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-content-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.panel-body {
  display: flex;
  flex-direction: column;
}

.service-phase-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  background: rgba(108, 44, 212, 0.08);
  border: 1px solid rgba(108, 44, 212, 0.18);
  font-size: 0.76rem;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-600);
  margin-bottom: 1.25rem;
}

.service-panel-title {
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 500 !important;
  color: var(--ink);
  margin: 0 0 1.25rem;
}

.service-panel-desc {
  font-size: 1.05rem;
  line-height: 1.68;
  font-weight: 400 !important;
  color: var(--ink-soft);
  margin: 0 0 2rem;
  max-width: 820px;
}

/* Features Row (Clean typography columns, vertical dividers, no icons) */
.service-features-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(211, 192, 242, 0.55);
  margin-top: auto;
}

.feature-col {
  flex: 1;
  display: flex;
  align-items: center;
}

.feature-text {
  font-size: 0.92rem;
  font-weight: 600 !important;
  color: var(--ink);
  line-height: 1.35;
}

.feature-divider {
  width: 1px;
  height: 32px;
  background: rgba(211, 192, 242, 0.6);
  flex-shrink: 0;
}

/* 4-Column Content Grid for Service Panels */
.service-columns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(211, 192, 242, 0.45);
}

.service-content-col {
  padding: 0 1.5rem;
  border-left: 1px solid rgba(211, 192, 242, 0.45);
}

.service-content-col:first-child {
  padding-left: 0;
  border-left: none;
}

.service-content-col:last-child {
  padding-right: 0;
}

.service-content-col h4 {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.service-content-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.service-content-col li {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.4;
  font-weight: 400;
}

/* Responsive queries */
@media (max-width: 1040px) {
  .service-showcase-grid {
    grid-template-columns: 310px 1fr;
    gap: 1.75rem;
  }
}

@media (max-width: 960px) {
  .service-showcase-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .service-tabs-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    height: auto;
  }

  .service-tab-btn {
    flex: none;
  }

  .service-tab-btn:hover,
  .service-tab-btn[aria-selected="true"] {
    transform: none;
  }
}

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

  .service-card-stage {
    padding: 1.5rem 0;
  }

  .service-features-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .service-columns-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .service-content-col {
    border-left: none;
    padding: 0;
  }

  .feature-divider {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CHALLENGE SECTION — scoped to .chl-
   ═══════════════════════════════════════════════════════════════ */

.chl-section {
  background: transparent;
}

/* Centred header */
.chl-header {
  text-align: center;
  margin-bottom: 3rem;
}

.chl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
  color: var(--purple-600);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.chl-eyebrow::before,
.chl-eyebrow::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1.5px;
  background: var(--purple-600);
  opacity: .45;
}

.chl-heading {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.05;
  color: var(--ink);
}

/* 3-column grid */
.chl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  align-items: stretch;
}

.chl-col {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Base card */
.chl-card {
  border-radius: var(--radius);
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chl-card h3 {
  margin: .75rem 0 0;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.chl-card p,
.chl-card .chl-list {
  margin: 0;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: .92rem;
  line-height: 1.6;
}

/* Subtitle line (e.g. "Dynamics 365 connects…") — styled like h3 */
.chl-card-sub {
  margin: 0 !important;
  padding-top: 0 !important;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem) !important;
  font-weight: 400 !important;
  color: var(--purple-800) !important;
  line-height: 1.2;
  letter-spacing: -.035em;
}

/* Light card heading — dark purple */
.chl-card--light h3 {
  color: var(--purple-800);
}

/* Label */
.chl-label {
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--purple-400);
}

/* Card variants */
.chl-card--dark {
  background: var(--ink);
  color: var(--white);
}

.chl-card--dark .chl-label {
  color: var(--purple-300);
}

.chl-card--dark p {
  color: var(--purple-200);
}

.chl-card--light {
  background: var(--white);
  border: 1px solid var(--purple-200);
  color: var(--ink);
}

.chl-card--full {
  flex: 1;
}

.chl-card--diagram {
  background: var(--white);
  border: 1px solid var(--purple-200);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chl-card--violet {
  background: var(--purple-600);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.chl-card--violet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .12), transparent 60%);
  pointer-events: none;
}

.chl-card--violet .chl-label {
  color: var(--purple-200);
}

.chl-card--violet h3 {
  color: var(--white);
}

.chl-card--violet p {
  color: var(--purple-200);
  font-size: .88rem;
}

/* Laptop / photo image */
.chl-img-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  flex: 1;
  min-height: 180px;
}

.chl-img-wrap--top {
  flex: 1.1;
  /* slightly taller than the bottom image */
}

.chl-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cost label */
.chl-cost-label {
  margin: 1.25rem 0 .85rem !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
}

/* Checklist */
.chl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.chl-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.chl-list li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: .1rem;
  border-radius: 50%;
  background: var(--purple-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* D365 Diagram */
.chl-diagram {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
}

.chl-dia-hub {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--purple-100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  flex-shrink: 0;
}

.chl-dia-hub img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chl-dia-nodes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}

.chl-dia-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .5rem .3rem;
  border-radius: 10px;
  background: var(--purple-50);
  font-size: .6rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}

.chl-dia-node img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 900px) {
  .chl-grid {
    grid-template-columns: 1fr 1fr;
  }

  .chl-col:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
  }
}

@media (max-width: 600px) {
  .chl-grid {
    grid-template-columns: 1fr;
  }

  .chl-col:last-child {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   FusionX Consulting PREMIUM MARQUEE  —  fully scoped, zero side-effects
   All classes prefixed .fxm-  to avoid conflicts with site styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────── */
.fxm-section {
  --fxm-bg: #ffffff;
  --fxm-charcoal: #28262C;
  --fxm-violet: #6F2ED4;
  --fxm-periwinkle: #D4C2FC;
  --fxm-mist: #F9F5FF;
  --fxm-divider: #D4C2FC;

  /* Fixed slot width — the structural backbone.
     Icon centres are exactly --fxm-slot apart at every breakpoint.
     Phrases are centred inside each slot.                         */
  --fxm-slot: 460px;
  --fxm-icon-size: 38px;
  --fxm-text-size: clamp(1rem, 1.8vw, 1.3rem);
  --fxm-speed: 30s;

  position: relative;
  background: var(--fxm-bg);
  padding: 0;
  font-family: 'Montserrat', "Montserrat Fallback", 'Segoe UI', Arial, sans-serif;
  overflow: hidden;
  /* confine marquee overflow to section */
}

/* ── Header ──────────────────────────────────────────────── */
.fxm-header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.fxm-brand-label {
  margin: 0 0 0.35rem;
  color: var(--fxm-charcoal);
  font-size: clamp(0.62rem, 1vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: lowercase;
}

.fxm-sub-label {
  margin: 0;
  color: var(--fxm-periwinkle);
  font-size: clamp(0.55rem, 0.85vw, 0.68rem);
  font-weight: 500;
  letter-spacing: 0.15em;
}

/* ── Dividers ─────────────────────────────────────────────── */
.fxm-divider {
  width: 100%;
  height: 1px;
  background: var(--fxm-divider);
  opacity: 0.6;
}

/* ── Viewport (clips the scrolling track) ────────────────── */
.fxm-viewport {
  width: 100%;
  overflow: hidden;
  /* Subtle lavender tint behind the track */
  background: #6F2ED4;
  padding: clamp(0.6rem, 1.2vw, 0.9rem) 0;
  cursor: default;
  /* Pause animation on hover */
}

.fxm-viewport:hover .fxm-track {
  animation-play-state: paused;
}

/* ── Track: two groups side-by-side, animated left ──────── */
.fxm-track {
  display: flex;
  /* Animate exactly one group width (6 slots × --fxm-slot).
     translateX value is set via JS for precision; fallback below. */
  animation: fxm-scroll var(--fxm-speed) linear infinite;
  will-change: transform;
}

/* ── Group: contains 6 slots in a row ───────────────────── */
.fxm-group {
  display: flex;
  flex-shrink: 0;
}

/* ── Slot: fixed-width cell — THIS is what keeps icons equal ─
   Layout inside each slot:
     [← phrase centred in available space ─] [icon at right edge]
   The icon sits at the RIGHT boundary of every slot, so
   adjacent slot icons are exactly --fxm-slot apart.            */
.fxm-slot {
  display: grid;
  grid-template-columns: 1fr var(--fxm-icon-size);
  align-items: center;
  width: var(--fxm-slot);
  flex-shrink: 0;
  padding: 0 0.5rem 0 1.25rem;
  gap: 1rem;
}

/* ── Phrase text ─────────────────────────────────────────── */
.fxm-phrase {
  display: block;
  text-align: center;
  color: #F0EAFF;
  font-family: 'Montserrat', "Montserrat Fallback", 'Segoe UI', Arial, sans-serif;
  font-size: var(--fxm-text-size);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── Accent phrases — same charcoal as primary ──────────── */
.fxm-phrase.fxm-accent {
  color: #F0EAFF;
  font-weight: 500;
}

/* ── Separator icon ──────────────────────────────────────── */
.fxm-icon {
  display: block;
  width: var(--fxm-icon-size);
  height: var(--fxm-icon-size);
  object-fit: contain;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  filter: brightness(0) invert(1) opacity(0.75);
}

/* ── Footer ──────────────────────────────────────────────── */
.fxm-footer {
  text-align: center;
  margin-top: clamp(1rem, 2vw, 1.75rem);
}

.fxm-footer-label {
  margin: 0;
  color: var(--fxm-periwinkle);
  font-size: clamp(0.5rem, 0.75vw, 0.62rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: lowercase;
}

/* ── Keyframe: scroll left by exactly one group width ────── */
/* 6 slots × 340px = 2040px — the translateX matches this exactly
   so group A exits precisely as group B takes its position.    */
@keyframes fxm-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-1 * var(--fxm-slot) * 6));
  }
}

/* ── Responsive: tablet (≤ 900px) ───────────────────────── */
@media (max-width: 900px) {
  .fxm-section {
    --fxm-slot: 380px;
    --fxm-icon-size: 30px;
    --fxm-speed: 24s;
  }
}

/* ── Responsive: mobile (≤ 600px) ───────────────────────── */
@media (max-width: 600px) {
  .fxm-section {
    --fxm-slot: 310px;
    --fxm-icon-size: 24px;
    --fxm-text-size: 0.88rem;
    --fxm-speed: 20s;
  }

  .fxm-slot {
    padding: 0 0.25rem 0 0.75rem;
    gap: 0.5rem;
  }
}

/* ── Accessibility: reduced motion ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fxm-track {
    animation: none;
    /* Show content as a static, readable flex row */
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .fxm-group:last-child {
    /* Hide the duplicate group when not animating */
    display: none;
  }

  .fxm-slot {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
  }

  .fxm-phrase {
    white-space: normal;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HERO GLOWS  —  homepage only
   script.js feeds --fx-hero (0…1 across the first viewport) so the
   glows drift slightly as you scroll past the hero.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --fx-hero: 0;
  --fx-ease: cubic-bezier(.16, 1, .3, 1);
}

@keyframes fx-breathe {
  from {
    scale: .94;
    opacity: .78;
  }

  to {
    scale: 1.1;
    opacity: 1;
  }
}

/* ── Hero bloom ───────────────────────────────────────────────
   The same language, concentrated behind the headline and the
   dashboard. Masked so it dissolves into the page below.       */

.hero {
  isolation: isolate;
}

.hero-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
}

.hero-aurora__pool {
  position: absolute;
  border-radius: 50%;
  will-change: translate, rotate, scale;
  animation: fx-breathe 24s var(--fx-ease) infinite alternate;
}

.hero-aurora__pool--violet {
  top: -32vmax;
  right: -20vmax;
  width: 70vmax;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%,
      rgba(108, 44, 212, .23) 0%,
      rgba(108, 44, 212, .09) 42%,
      rgba(108, 44, 212, 0) 70%);
  translate: calc(var(--fx-hero) * 6vw) calc(var(--fx-hero) * -18vh);
  rotate: calc(var(--fx-hero) * -26deg);
}

.hero-aurora__pool--orchid {
  bottom: -34vmax;
  left: -16vmax;
  width: 52vmax;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%,
      rgba(211, 192, 242, .4) 0%,
      rgba(211, 192, 242, .14) 44%,
      rgba(211, 192, 242, 0) 72%);
  translate: calc(var(--fx-hero) * -8vw) calc(var(--fx-hero) * 16vh);
  rotate: calc(var(--fx-hero) * 20deg);
  animation-duration: 29s;
  animation-delay: -9s;
}

.hero-aurora__pool--glow {
  right: 4vw;
  bottom: -24vmax;
  width: 44vmax;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%,
      rgba(152, 107, 225, .3) 0%,
      rgba(152, 107, 225, .1) 46%,
      rgba(152, 107, 225, 0) 72%);
  translate: calc(var(--fx-hero) * 12vw) calc(var(--fx-hero) * 10vh);
  animation-duration: 21s;
  animation-delay: -4s;
}

@media (prefers-reduced-motion: reduce) {
  .hero-aurora__pool {
    animation: none;
    translate: none;
    rotate: none;
  }
}

/* ═══════════════════════════════════════════════════════════════ */

/* ── Homepage polish ─────────────────────────────────────────── */

/* Small labels on dark backgrounds: larger and brighter so they read easily */
.trust-item span {
  font-size: .9rem;
  color: var(--purple-200);
}

.chl-card--dark p {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
}

.footer-bottom {
  font-size: .875rem;
}

/* Final CTA: stacked actions on the right */
.final-cta-inner {
  align-items: center;
}

.final-cta-actions {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 220px;
}

.final-cta-actions .button {
  justify-content: center;
}

@media (max-width: 900px) {
  .final-cta-actions {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }
}

/* Mobile: give the hero headline room to breathe */
@media (max-width: 680px) {
  .hero h1 {
    line-height: 1.05;
    text-wrap: balance;
  }
}

/* Mobile header: drop the CSP badge so logo, menu and CTA fit without touching the edge */
@media (max-width: 480px) {
  .partner-brand {
    display: none;
  }

  .menu-toggle {
    margin-left: auto;
  }

  .nav-action {
    padding-inline: .8rem;
    font-size: .8rem;
  }
}

/* ═══════════ BLOG SECTION ═══════════ */
.blog-section {
  --blog-ink: #17143d;
  --blog-muted: #77739c;
  --blog-purple: #6528f5;
  --blog-border: #e8dfff;
  --blog-pill-border: #ddd1ff;
  padding: clamp(3rem, 6vw, 5rem) 0;
  font-family: "Montserrat", "Montserrat Fallback", Inter, "Segoe UI", Arial, sans-serif;
}

/* Services: purple tile-grid image that fades to white at the bottom.
   The white wash on top softens it; raise/lower --services-bg-wash (0–1) to tune. */
.service-section {
  --services-bg-wash: .5;
  background:
    linear-gradient(rgba(255, 255, 255, var(--services-bg-wash)), rgba(255, 255, 255, var(--services-bg-wash))),
    #fff url("/public/services-bg.webp") center top / 100% auto no-repeat;
}

@media (max-width: 900px) {
  .service-section {
    background-size: auto, auto 720px;
  }
}

/* Solutions: soft lavender haze, flipped upside down so the purple
   pools at the top-left and fades to white at the bottom.
   The image sits on a flipped layer behind the content. */
#solutions {
  isolation: isolate;
  background: #fff;
}

#solutions::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: url("/public/solutions-bg.webp") center / cover no-repeat;
  transform: scaleY(-1);
}
/* ── Shared purple glow background (blog) ──
   Purple glow across the top, a lighter wave from the top-right,
   fading to pale lavender. Add class="fx-glow" to a <section>. */
.fx-glow {
  position: relative;
  z-index: 1;
  overflow: clip; /* clip (not hidden) so sticky children keep working */
  isolation: isolate;
  background:
    radial-gradient(ellipse 50% 65% at 52% -8%, rgba(132, 72, 230, .85), rgba(140, 82, 232, .35) 45%, rgba(140, 82, 232, 0) 75%),
    radial-gradient(ellipse 45% 55% at 8% 0%, rgba(182, 150, 234, .5), rgba(182, 150, 234, 0) 75%),
    linear-gradient(180deg, #e2d4fb 0%, #eee6fd 40%, #f8f5ff 68%, #fbfaff 100%);
}

.fx-glow::before,
.fx-glow::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.fx-glow::before {
  top: -62%;
  right: -24%;
  width: 72%;
  aspect-ratio: 1;
  background: linear-gradient(200deg, rgba(240, 233, 255, .2) 20%, rgba(232, 222, 255, .65) 70%);
  filter: blur(14px);
}

.fx-glow::after {
  top: -38%;
  right: -30%;
  width: 46%;
  aspect-ratio: 1;
  background: linear-gradient(200deg, rgba(250, 247, 255, .25) 20%, rgba(246, 241, 255, .7) 70%);
  filter: blur(10px);
}

/* Shared "● LABEL" eyebrow above section headings */
.fx-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
}

.fx-eyebrow::before {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  content: "";
}

.blog-heading {
  max-width: 760px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.blog-title {
  margin: 0 0 1.1rem;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.065em;
}

.blog-intro {
  max-width: 34ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.5;
}

/* Filters */
.blog-filter-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}

.blog-filters {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.blog-filter {
  display: inline-flex;
  align-items: center;
  height: 40px;
  min-height: 0;
  padding: 0 23px;
  border: 1px solid var(--blog-pill-border);
  border-radius: 999px;
  background: #fff;
  color: var(--blog-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}

.blog-filter:hover {
  border-color: #b9a3ff;
}

.blog-filter.is-active {
  border-color: transparent;
  background: linear-gradient(90deg, #6528f5, #7138f7);
  color: #fff;
}

.blog-filter:focus-visible,
.blog-card-arrow:focus-visible,
.blog-card-title a:focus-visible {
  outline: 2px solid var(--blog-purple);
  outline-offset: 3px;
}

.blog-filter-line {
  flex: 1;
  height: 1px;
  background: var(--blog-pill-border);
}

/* Grid */
/* Single-row carousel: 3 cards visible on desktop, scroll for more */
.blog-grid {
  --blog-gap: 28px;
  --blog-per-view: 3;
  display: flex;
  gap: var(--blog-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.blog-grid::-webkit-scrollbar {
  display: none;
}

.blog-empty {
  flex: 1;
  color: var(--blog-muted);
}

/* Prev / next arrows (hidden when everything fits) */
.blog-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.blog-nav[hidden] {
  display: none;
}

.blog-nav-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: 1px solid #cdbcff;
  border-radius: 50%;
  background: #fff;
  color: var(--blog-purple);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}

.blog-nav-btn:hover:not(:disabled) {
  border-color: var(--blog-purple);
  background: var(--blog-purple);
  color: #fff;
}

.blog-nav-btn:disabled {
  opacity: .4;
  cursor: default;
}

.blog-nav-btn:focus-visible {
  outline: 2px solid var(--blog-purple);
  outline-offset: 3px;
}

/* Card */
.blog-card {
  flex: 0 0 calc((100% - (var(--blog-per-view) - 1) * var(--blog-gap)) / var(--blog-per-view));
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--blog-border);
  border-radius: 18px;
  background: #fff;
}

.blog-card-media {
  position: relative;
  height: 172px;
  overflow: hidden;
  background: #f1ecff;
}

.blog-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f3effe, #e9e2fc);
  color: #b9a8ea;
}

.blog-card-badge {
  position: absolute;
  top: 22px;
  left: 25px;
  display: inline-flex;
  align-items: center;
  height: 33px;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(88, 40, 200, .78);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.blog-card .blog-card-title {
  margin: 0 0 12px;
  color: var(--blog-ink);
  font-family: inherit;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.blog-card-title a {
  color: inherit;
  text-decoration: none;
}

.blog-card-title a:hover {
  color: var(--blog-purple);
}

.blog-card-desc {
  margin: 0 0 20px;
  max-width: 34ch;
  color: var(--blog-muted);
  font-size: 16px;
  line-height: 1.45;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  color: #3d3966;
  font-size: 13px;
}

.blog-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.blog-meta-item svg {
  flex-shrink: 0;
  color: var(--blog-purple);
}

.blog-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}

.blog-card-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  flex-shrink: 0;
  border: 1px solid #cdbcff;
  border-radius: 50%;
  color: var(--blog-purple);
  transition: background-color .2s, color .2s, border-color .2s;
}

.blog-card-arrow:hover {
  border-color: var(--blog-purple);
  background: var(--blog-purple);
  color: #fff;
}

/* Tablet: two per row, scrollable filters */
@media (max-width: 1024px) {
  .blog-grid {
    --blog-per-view: 2;
  }

  .blog-filters {
    flex-shrink: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .blog-filters::-webkit-scrollbar {
    display: none;
  }
}

/* Mobile: one per row */
@media (max-width: 640px) {
  .blog-filter-row {
    margin-inline: -16px;
    padding-inline: 16px;
    margin-bottom: 22px;
  }

  .blog-filter-line {
    display: none;
  }

  .blog-filters {
    gap: 10px;
  }

  .blog-filter {
    padding: 0 18px;
    font-size: 14px;
  }

  /* One card plus a peek of the next, so it's obvious the row swipes */
  .blog-grid {
    --blog-gap: 16px;
    --blog-per-view: 1.15;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .blog-nav {
    display: none;
  }

  .blog-card-media {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .blog-card .blog-card-title {
    font-size: 21px;
  }

  .blog-card-desc {
    font-size: 15px;
  }
}

/* ═══════════ INDUSTRIES SECTION ═══════════
   White background. Left: label, heading, intro, button.
   Right: six tall photo cards with a dark overlay, white icon + label.
   Photo per card: style="--industry-img: url('...')" on .industry-card. */
.industries-section {
  background: #fff;
}

.industries-grid {
  display: grid;
  grid-template-columns: minmax(270px, 30%) 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.industries-copy h2 {
  margin: 0 0 1.25rem;
  color: var(--ink);
  font-size: clamp(2.2rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.industries-intro {
  max-width: 30ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.45;
}

.industries-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2rem;
}

.industries-cta svg {
  transition: transform .2s;
}

.industries-cta:hover svg {
  transform: translateX(3px);
}

/* Cards */
.industry-cards {
  /* One row of large cards that scrolls sideways (swipe, trackpad or the bar below) */
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 6px 0 24px; /* room for the hover lift and the scrollbar */
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Pill scrollbar: pale lavender track, soft purple thumb, fully rounded.
   (Chrome, Edge, Safari. Setting the standard scrollbar-width/-color
   would make Chrome ignore these, so those are Firefox-only below.) */
.industry-cards::-webkit-scrollbar {
  height: 12px;
}

.industry-cards::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #eeebf8;
}

.industry-cards::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #ae9ef3;
}

.industry-cards::-webkit-scrollbar-thumb:hover {
  background: #9a86ee;
}

/* Firefox only allows colours, not size or shape */
@supports (-moz-appearance: none) {
  .industry-cards {
    scrollbar-color: #ae9ef3 #eeebf8;
  }
}

/* Let the card row shrink inside the grid so it scrolls instead of stretching the page */
.industries-grid > * {
  min-width: 0;
}

.industry-card {
  position: relative;
  display: flex;
  flex: 0 0 clamp(190px, 16vw, 230px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  aspect-ratio: 1 / 2;
  overflow: hidden;
  padding: 1rem .6rem;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(20, 8, 48, .35) 0%, rgba(20, 8, 48, .55) 100%),
    var(--industry-img, linear-gradient(160deg, #3a1d78 0%, #1f0d45 55%, #140830 100%)) center / cover no-repeat;
  color: #fff;
  text-align: center;
  transition: transform .3s var(--fx-ease, ease);
}

.industry-card:hover {
  transform: translateY(-4px);
}

.industry-card svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.industry-card span {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Tablet: stack copy above the scrolling card row */
@media (max-width: 1100px) {
  .industries-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile: slightly smaller cards, still scrolling sideways */
@media (max-width: 640px) {
  .industry-card {
    flex-basis: 170px;
    aspect-ratio: 1 / 1.8;
  }
}

/* Homepage Solutions diagram: the Finance node links to /finance */
a.eco-node {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.eco-node .node-icon {
  transition: transform .25s;
}

a.eco-node:hover .node-icon,
a.eco-node:focus-visible .node-icon {
  transform: translateY(-3px) scale(1.06);
}

a.eco-node:hover strong {
  color: var(--purple-600);
}

/* ═══════════════════════════════════════════════════════════════
   FINANCE PAGE  (finance.html)
   Shared header, footer, .fx-eyebrow and .button styles; everything
   else is prefixed fn-. Interactions live in /finance.js.
   ═══════════════════════════════════════════════════════════════ */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.fx-eyebrow--light {
  color: #fff;
}

.fx-eyebrow--light::before {
  background: #fff;
}

.fn-page {
  --fn-line: #ece6fb;
  --fn-soft: #faf8ff;
  --fn-header: 78px;
}

/* Headings on this page, except inside shared dark bands (e.g. the homepage CTA),
   which keep their own homepage styling */
.fn-page h1,
.fn-page section:not(.section-dark):not(.fn-copilot) h2 {
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -.06em;
}

.fn-page h3 {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.02em;
}

.fn-btn,
.fn-link-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  /* 44px tap area without changing how the link looks */
  min-height: 44px;
}

.fn-link-btn {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
}

.fn-link-btn:hover {
  color: var(--purple-600);
}

.fn-btn svg,
.fn-link-btn svg {
  transition: transform .2s;
}

.fn-btn:hover svg {
  transform: translateX(3px);
}

.fn-link-btn:hover svg {
  transform: translateY(2px);
}

.fn-check {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--purple-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c2cd4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.fn-section {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0;
  scroll-margin-top: calc(var(--fn-header) + 64px);
}

.fn-head {
  max-width: 760px;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.fn-head h2 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.05;
  text-wrap: balance;
}

.fn-head p:not(.fx-eyebrow) {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
}

.fn-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 2rem 4rem;
  align-items: end;
  max-width: none;
}

.fn-head--split h2 {
  margin: 0;
}

.fn-head--center {
  margin-inline: auto;
  text-align: center;
}

.fn-head--center .fx-eyebrow {
  justify-content: center;
}

.fn-footnote {
  max-width: 68ch;
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.5;
  opacity: .85;
}

/* ── 1. Hero: full-bleed photo with a brand-navy overlay ──
   Photo: public/finance-hero.webp (glass towers framing a bright sky).
   The overlay is darkest on the left where the text sits and fades to the
   right, so white text has strong contrast and the sky stays the focal point. */
.fn-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 86vh, 820px);
  overflow: hidden;
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--ink);
  color: #fff;
}

.fn-hero > .container {
  width: 100%;
}

.fn-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Each solution page sets its own photo with style="--fn-hero-img: url(...)" */
  background: var(--fn-hero-img, url("/public/finance-hero.webp")) center 45% / cover no-repeat;
  animation: fn-hero-settle 2.4s cubic-bezier(.16, 1, .3, 1) both;
}

.fn-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 8, 48, .95) 0%, rgba(20, 8, 48, .86) 32%, rgba(20, 8, 48, .5) 60%, rgba(20, 8, 48, .15) 100%),
    linear-gradient(0deg, rgba(20, 8, 48, .6) 0%, rgba(20, 8, 48, 0) 38%),
    radial-gradient(ellipse 45% 60% at 78% 42%, rgba(108, 44, 212, .3), rgba(108, 44, 212, 0) 70%);
  content: "";
}

@keyframes fn-hero-settle {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

.fn-hero-copy {
  max-width: 640px;
  text-shadow: 0 2px 24px rgba(20, 8, 48, .35);
}

.fn-hero h1 {
  margin: 0;
  color: #fff;
  /* Each page sets --fn-title-em on the h1 = the title's width in ems (icon
     included), so on small screens the title shrinks just enough to stay on
     one line. */
  font-size: min(clamp(1.85rem, 5vw, 4.5rem), calc((100vw - 32px) / var(--fn-title-em, 1)));
  line-height: .92;
  letter-spacing: -.07em;
}

/* "Dynamics 365 Finance" on one line, with the Dynamics 365 Finance icon
   beside it. The icon's visible artwork is exactly the height of
   the capital letters: Montserrat caps = 0.70em, and the artwork fills 91.3%
   of the SVG box, so the box is 0.70 / 0.913 = 0.767em. The artwork sits on
   the text baseline (its built-in bottom padding is 4.2% of the box = 0.032em).
   The heading may run wider than the copy column. */
.fn-hero-title {
  display: flex;
  align-items: baseline;
  gap: .18em;
  width: max-content;
  max-width: calc(100vw - 32px);
  white-space: nowrap;
}

.fn-hero-icon {
  flex-shrink: 0;
  width: auto;
  height: .767em;
  transform: translateY(.032em);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .25));
}
.fn-hero-lead {
  margin: .75rem 0 1.5rem;
  color: #fff;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.fn-hero-text {
  max-width: 34rem;
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.6;
}

.fn-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  margin-top: 2.25rem;
}

.fn-hero .fn-link-btn {
  color: #fff;
}

.fn-hero .fn-link-btn:hover {
  color: var(--purple-200);
}

.fn-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  margin: 2.5rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  list-style: none;
}

.fn-hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #fff;
  font-size: .9rem;
  font-weight: 500;
}

/* Trust items: one line with small dot separators on wide screens,
   stacked (no dots) on narrower screens so a dot never starts a line */
@media (width > 900px) {
  .fn-hero-trust {
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
  }

  .fn-hero-trust li {
    white-space: nowrap;
  }

  .fn-hero-trust li + li::before {
    width: 4px;
    height: 4px;
    margin-right: .95rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    content: "";
  }
}

@media (max-width: 900px) {
  .fn-hero-trust {
    flex-direction: column;
  }
}

/* ── 2. Sticky section nav ── */
.fn-subnav {
  position: sticky;
  top: var(--fn-header);
  z-index: 40;
  border-block: 1px solid var(--fn-line);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.fn-subnav-list {
  display: flex;
  gap: .35rem;
  margin: 0;
  padding: .65rem 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.fn-subnav-list::-webkit-scrollbar {
  display: none;
}

.fn-subnav a {
  display: inline-flex;
  padding: .5rem 1rem;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}

.fn-subnav a:hover {
  color: var(--ink);
  background: var(--purple-50);
}

.fn-subnav a.is-active {
  background: var(--ink);
  color: #fff;
}

/* ── 3. Overview: pain → outcome ── */
.fn-pain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fn-pain {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--fn-line);
  border-radius: 22px;
  background: #fff;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.fn-pain:hover {
  border-color: var(--purple-200);
  box-shadow: 0 24px 50px rgba(64, 26, 130, .08);
  transform: translateY(-4px);
}

.fn-pain-before {
  flex: 1;
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.4;
  letter-spacing: -.015em;
}

.fn-pain-after {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--purple-200);
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.55;
}

.fn-pain-after strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--purple-600);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── 4. Capabilities bento ── */
.fn-capabilities {
  background: linear-gradient(180deg, #fff 0%, var(--fn-soft) 18%, var(--fn-soft) 82%, #fff 100%);
}

.fn-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fn-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.75rem;
  border: 1px solid var(--fn-line);
  border-radius: 22px;
  background: #fff;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.fn-tile:hover {
  border-color: var(--purple-200);
  box-shadow: 0 24px 50px rgba(64, 26, 130, .08);
  transform: translateY(-4px);
}

.fn-tile h3 {
  margin: 0 0 .6rem;
  font-size: 1.12rem;
  line-height: 1.25;
}

.fn-tile p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.55;
}

/* General ledger feature tile: light tile-grid image (white top-left,
   purple bottom-right), so the text sits top-left in dark ink.
   Image file: public/capabilities-ledger.webp. Until it exists, the
   gradient underneath gives the same white-to-purple look. */
.fn-tile--feature {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: flex-start;
  padding: clamp(2rem, 3vw, 2.75rem);
  border-color: var(--fn-line);
  background:
    url("/public/capabilities-ledger.webp") right 30% / cover no-repeat,
    radial-gradient(ellipse 85% 75% at 100% 100%, rgba(167, 105, 238, .55), rgba(196, 160, 245, .25) 45%, rgba(255, 255, 255, 0) 75%),
    #fbf9ff;
}

.fn-tile--feature h3 {
  max-width: 22rem;
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.045em;
}

.fn-tile--feature p {
  max-width: 26rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

.fn-tile--wide {
  grid-column: span 2;
}

.fn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.fn-tags {
  max-width: 26rem;
}

.fn-tags li {
  padding: .4rem .8rem;
  border: 1px solid var(--purple-200);
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 500;
}

/* ── 5. Copilot (dark) ── */
.fn-copilot {
  overflow: hidden;
  background:
    radial-gradient(ellipse 45% 60% at 85% 30%, rgba(108, 44, 212, .55), rgba(108, 44, 212, 0) 70%),
    radial-gradient(ellipse 40% 50% at 10% 90%, rgba(152, 107, 225, .25), rgba(152, 107, 225, 0) 70%),
    var(--ink);
  color: #fff;
}

.fn-copilot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.fn-copilot h2 {
  margin: 0 0 1rem;
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.05;
}

.fn-copilot-copy > p:not(.fx-eyebrow):not(.fn-footnote) {
  max-width: 34rem;
  margin: 0;
  color: var(--purple-200);
  font-size: 1.05rem;
  line-height: 1.6;
}

.fn-ai-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.fn-ai-list li {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.fn-ai-list h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  color: #fff;
  font-size: 1.05rem;
}

.fn-ai-list p {
  margin: 0;
  color: var(--purple-200);
  font-size: .9rem;
  line-height: 1.55;
}

.fn-pill {
  padding: .2rem .55rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  color: var(--purple-200);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fn-copilot .fn-footnote {
  color: var(--purple-200);
  opacity: .7;
}

.fn-chat {
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.fn-chat-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.fn-chat-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}

.fn-chat-bar strong {
  margin-left: .6rem;
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
}

.fn-msg {
  max-width: 88%;
  margin-bottom: .85rem;
  padding: .85rem 1rem;
  border-radius: 16px;
  font-size: .9rem;
  line-height: 1.5;
}

.fn-msg p {
  margin: 0;
}

.fn-msg b {
  font-weight: 600;
}

.fn-msg--user {
  margin-left: auto;
  border-bottom-right-radius: 4px;
  background: var(--purple-600);
  color: #fff;
}

.fn-msg--ai {
  border-bottom-left-radius: 4px;
  background: rgba(255, 255, 255, .09);
  color: #f1ecfd;
}

.fn-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .8rem;
}

.fn-msg-actions span {
  padding: .35rem .75rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-size: .78rem;
}

.fn-msg--typing {
  display: inline-flex;
  gap: .35rem;
  margin-bottom: 0;
}

.fn-msg--typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple-200);
  animation: fn-typing 1.2s ease-in-out infinite;
}

.fn-msg--typing i:nth-child(2) { animation-delay: .15s; }
.fn-msg--typing i:nth-child(3) { animation-delay: .3s; }

@keyframes fn-typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ── 6. Integrations ── */
.fn-eco {
  --eco-gap: 1.25rem;
  --eco-line: var(--purple-300);
  --eco-drop: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--eco-gap);
  row-gap: 0;
}

/* Connector tree between the hub and the three groups:
   ::before = stem down from the hub, ::after = crossbar joining the
   centres of the outer columns. Each group's ::before is its drop. */
.fn-eco-lines {
  position: relative;
  grid-column: 1 / -1;
  height: var(--eco-drop);
}

.fn-eco-lines::before,
.fn-eco-lines::after {
  position: absolute;
  background: var(--eco-line);
  content: "";
}

.fn-eco-lines::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.fn-eco-lines::after {
  bottom: 0;
  left: calc((100% - 2 * var(--eco-gap)) / 6);
  right: calc((100% - 2 * var(--eco-gap)) / 6);
  height: 1px;
}

.fn-eco-hub {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  justify-self: center;
  padding: 1rem 1.75rem 1rem 1.1rem;
  border: 1px solid var(--purple-200);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 8px var(--purple-50), 0 20px 40px rgba(64, 26, 130, .1);
}

.fn-eco-hub img {
  width: 44px;
  height: 44px;
}

.fn-eco-hub strong {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
}

.fn-eco-group {
  position: relative;
  padding: 1.75rem;
  border: 1px solid var(--fn-line);
  border-radius: 22px;
  background: #fff;
}

/* Drop from the crossbar into the top of each group, ending in a node dot */
.fn-eco-group {
  margin-top: var(--eco-drop);
}

.fn-eco-group::before {
  position: absolute;
  top: calc(-1 * var(--eco-drop));
  left: 50%;
  width: 1px;
  height: var(--eco-drop);
  background: var(--eco-line);
  transform: translateX(-50%);
  content: "";
}

.fn-eco-group::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid var(--eco-line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px #fff;
  transform: translate(-50%, -50%);
  content: "";
}

.fn-eco-title {
  margin: 0 0 1.25rem;
  color: var(--purple-600);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fn-eco-group ul {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fn-eco-group li {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 500;
}

.fn-eco-group li img {
  width: 30px;
  height: 30px;
}

.fn-eco-group li img {
  flex-shrink: 0;
  object-fit: contain;
}

/* ── 7. Compare table ── */
.fn-compare {
  background: var(--fn-soft);
}

.fn-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--fn-line);
  border-radius: 22px;
  background: #fff;
}

.fn-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: .95rem;
}

.fn-table th,
.fn-table td {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--fn-line);
  text-align: left;
  vertical-align: top;
}

.fn-table tbody tr:last-child th,
.fn-table tbody tr:last-child td {
  border-bottom: 0;
}

.fn-table thead th {
  padding-block: 1.5rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.fn-table thead th img {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: .6rem;
}

.fn-table tbody th {
  width: 24%;
  color: var(--ink);
  font-weight: 600;
}

.fn-table td {
  color: var(--ink-soft);
  line-height: 1.5;
}

.fn-table .fn-col-hl {
  background: rgba(108, 44, 212, .05);
  color: var(--ink);
}

/* ── 8. Process steps ── */
.fn-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each step sits under a thin rule that turns brand purple on hover */
.fn-step {
  position: relative;
  padding-top: 1.25rem;
  border-top: 2px solid var(--purple-100);
  transition: border-color .25s;
}

.fn-step:hover {
  border-top-color: var(--purple-600);
}

/* Plain step number: no circle, just a small purple label */
.fn-step-num {
  display: block;
  margin-bottom: .6rem;
  color: var(--purple-600);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

.fn-step h3 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
}

.fn-step p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.55;
}

/* ── 9. Why FusionX Consulting ── */
.fn-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.fn-why-media {
  position: relative;
}

.fn-why-media::before {
  position: absolute;
  inset: -5% 12% 16% -4%;
  z-index: -1;
  border-radius: 40px 140px 40px 40px;
  background: linear-gradient(160deg, #ece4fd, #f6f2ff);
  content: "";
}

.fn-why-media > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  border-radius: 24px 110px 24px 24px;
}

.fn-why-badge {
  position: absolute;
  right: -4%;
  bottom: 8%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--fn-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 50px rgba(64, 26, 130, .14);
}

.fn-why-badge img {
  display: block;
  width: 170px;
  height: auto;
}

.fn-why-copy h2 {
  margin: 0 0 2rem;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.06;
}

.fn-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0 0 2rem;
  border-bottom: 1px solid var(--fn-line);
  list-style: none;
}

.fn-stats strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -.04em;
}

.fn-stats span {
  color: var(--ink-soft);
  font-size: .85rem;
  line-height: 1.4;
}

.fn-why-list {
  display: grid;
  gap: .85rem;
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
}

.fn-why-list li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  color: var(--ink);
  font-size: .98rem;
  line-height: 1.45;
}

/* ── 11. FAQ ── */
.fn-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.fn-faq-intro {
  position: sticky;
  top: calc(var(--fn-header) + 90px);
}

.fn-faq-intro h2 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.05;
}

.fn-faq-intro p:not(.fx-eyebrow) {
  margin: 0 0 1.75rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}

.fn-faq-list {
  border-top: 1px solid var(--fn-line);
}

.fn-qa {
  border-bottom: 1px solid var(--fn-line);
}

.fn-qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  color: var(--ink);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.015em;
  list-style: none;
  cursor: pointer;
  transition: color .2s;
}

.fn-qa summary::-webkit-details-marker {
  display: none;
}

.fn-qa summary:hover {
  color: var(--purple-600);
}

.fn-qa summary:focus-visible {
  outline: 2px solid var(--purple-600);
  outline-offset: 4px;
  border-radius: 6px;
}

.fn-qa summary::after {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--purple-200);
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c2cd4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat;
  content: "";
  transition: transform .3s, background-color .3s;
}

.fn-qa[open] summary::after {
  background-color: var(--purple-50);
  transform: rotate(45deg);
}

.fn-qa-body {
  padding: 0 3.5rem 1.6rem 0;
  animation: fn-reveal .35s ease;
}

.fn-qa-body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.7;
}

@keyframes fn-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .fn-pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fn-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fn-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 2.5rem;
  }

}

@media (max-width: 900px) {
  .fn-head--split,
  .fn-copilot-grid,
  .fn-why,
  .fn-faq-grid {
    grid-template-columns: 1fr;
  }

  /* Narrow screens: text spans the full width, so darken the photo evenly */
  .fn-hero::after {
    background:
      linear-gradient(180deg, rgba(20, 8, 48, .72) 0%, rgba(20, 8, 48, .82) 55%, rgba(20, 8, 48, .92) 100%),
      radial-gradient(ellipse 70% 50% at 70% 20%, rgba(108, 44, 212, .3), rgba(108, 44, 212, 0) 70%);
  }

  .fn-hero-bg {
    background-position: center;
  }

  /* Single column: the connector becomes one straight spine down the centre,
     from the hub through each stacked group */
  .fn-eco {
    grid-template-columns: 1fr;
    row-gap: var(--eco-drop);
  }

  .fn-eco-lines {
    display: none;
  }

  .fn-eco-group {
    margin-top: 0;
  }

  .fn-eco-group::before {
    top: calc(-1 * var(--eco-drop));
    height: var(--eco-drop);
  }

  .fn-why-badge {
    right: 4%;
  }

  .fn-faq-intro {
    position: static;
  }
}

@media (max-width: 640px) {
  .fn-pain-grid,
  .fn-bento,
  .fn-ai-list {
    grid-template-columns: 1fr;
  }

  .fn-tile--feature,
  .fn-tile--wide {
    grid-column: auto;
    grid-row: auto;
  }

  .fn-tile--feature h3 {
    margin-top: 2rem;
  }

  .fn-steps {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }

  .fn-stats {
    grid-template-columns: 1fr;
  }

  .fn-hero {
    min-height: 0;
  }

  .fn-qa-body {
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fn-hero-bg,
  .fn-msg--typing i {
    animation: none;
  }

  .fn-pain,
  .fn-tile {
    transition: none;
  }
}

/* Brand name: always "FusionX Consulting" exactly as written (only F, X and C
   capitalised), even inside labels styled as uppercase. Wrap the name in
   <span class="brand-name"> wherever the surrounding text is transformed. */
.brand-name {
  text-transform: none;
}

/* ══════════════════════════════════════════════════════════════
   SOLUTIONS MEGA-MENU (header, every page)
   Desktop (>1100px): full-width panel under the header with the eight
   solutions in three grouped columns.
   Opens on hover or click; Escape or a click outside closes it.
   ≤1100px: becomes a simple icon list inside the mobile menu.
   ══════════════════════════════════════════════════════════════ */
.nav-mega {
  position: static;
}

/* Trigger looks "current" on any solution page */
.nav-mega .nav-trigger.is-current {
  color: var(--purple-600);
  box-shadow: inset 0 -2px 0 var(--purple-600);
}

.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  border-top: 1px solid var(--purple-100);
  border-bottom: 1px solid rgba(20, 8, 48, .08);
  background:
    radial-gradient(ellipse 40% 80% at 100% 0%, rgba(167, 105, 238, .08), rgba(167, 105, 238, 0) 70%),
    #fff;
  box-shadow: 0 40px 80px -30px rgba(20, 8, 48, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .32s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .32s;
}

.nav-mega.open .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.mega-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.75rem 32px 2rem;
}

/* Grouped solution links */
.mega-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2rem;
  align-content: start;
}

.mega-group-title {
  margin: 0 .75rem .5rem;
  color: var(--ink-soft);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mega-link {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: .9rem;
  padding: .7rem .75rem;
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s ease;
}

.mega-link:hover,
.mega-link:focus-visible,
.mega-link[aria-current="page"] {
  background: var(--purple-50);
}

.mega-link:focus-visible {
  outline: 2px solid var(--purple-600);
  outline-offset: 2px;
}

.mega-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--purple-100);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 16px -8px rgba(20, 8, 48, .3);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}

.mega-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.mega-link:hover .mega-icon {
  box-shadow: 0 10px 22px -10px rgba(108, 44, 212, .55);
  transform: translateY(-2px) scale(1.05);
}

.mega-name {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.mega-link[aria-current="page"] .mega-name {
  color: var(--purple-600);
}

.mega-desc {
  display: block;
  margin-top: .15rem;
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.4;
}

/* Links glide in one after another when the panel opens */
@keyframes mega-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.nav-mega.open .mega-link {
  animation: mega-in .45s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 30ms + 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .mega-panel,
  .mega-icon {
    transition: none;
  }

  .nav-mega.open .mega-link {
    animation: none;
  }
}

/* Tablet and phone: a compact icon list inside the mobile menu */
@media (max-width: 1100px) {
  .nav-mega {
    position: relative;
  }

  .mega-panel {
    position: static;
    display: none;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .nav-mega.open .mega-panel {
    display: block;
  }

  .mega-inner {
    display: block;
    padding: .25rem 0 .5rem;
  }

  .mega-desc {
    display: none;
  }

  .mega-groups {
    grid-template-columns: 1fr;
  }

  .mega-group-title {
    margin: .75rem .5rem .25rem;
  }

  .mega-link {
    grid-template-columns: 34px 1fr;
    gap: .7rem;
    padding: .45rem .5rem;
    border-radius: 10px;
  }

  .mega-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .mega-icon img {
    width: 20px;
    height: 20px;
  }

  .mega-name {
    font-size: .88rem;
  }

  .nav-mega.open .mega-link {
    animation: none;
  }

  /* The open menu can now be taller than the screen */
  .site-nav.open {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Service pages (sv-). Built on the solution-page tokens (fn-page),
   but with their own editorial compositions: typographic hero,
   statement band, lens index, coverage matrix, week plan.
   ═══════════════════════════════════════════════════════════════ */
.sv-page {
  --sv-muted: rgba(20, 8, 48, .42);
}

/* ── Hero: shared design for every service page, on the service-hero image ── */
.sv-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 84vh, 780px);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  overflow: hidden;
  background: #efe8ff url("/public/service-hero.webp") center / cover no-repeat;
  isolation: isolate;
}

/* Soft white wash behind the text column so copy stays crisp over the bright band */
.sv-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .28) 45%, rgba(255, 255, 255, 0) 75%);
  content: "";
}

.sv-hero > .container {
  width: min(100% - 2.5rem, var(--max));
}

.sv-hero-inner {
  max-width: 760px;
}

.sv-hero .fx-eyebrow {
  margin: 0 0 1.25rem;
}

.sv-crumb {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 500;
}

.sv-crumb a {
  color: var(--ink-soft);
  text-decoration: none;
}

.sv-crumb a:hover {
  color: var(--purple-600);
}

.sv-crumb span {
  color: var(--purple-300);
}

.fn-page h1.sv-hero-title {
  max-width: 16ch;
  margin: 0 0 1.5rem;
  font-size: clamp(2.5rem, 5.6vw, 5.25rem);
  line-height: 1;
  text-wrap: balance;
}

.sv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

.sv-lens-label {
  margin: 0;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── Statement band ── */
.sv-statement {
  background: var(--fn-soft);
}

.sv-statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}

.sv-statement-text {
  margin: 0;
  color: var(--sv-muted);
  font-size: clamp(1.55rem, 3vw, 2.6rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.035em;
}

.sv-statement-text strong {
  color: var(--ink);
  font-weight: 500;
}

.sv-stat {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
}

.sv-stat-num {
  margin: 0 0 .75rem;
  color: var(--ink);
  font-size: clamp(4rem, 8vw, 6.75rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.06em;
}

.sv-stat figcaption p {
  margin: 0 0 .9rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}

.sv-stat cite {
  font-size: .8rem;
  font-style: normal;
}

.sv-stat cite a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sv-stat cite a:hover {
  color: var(--purple-600);
}

/* ── Lens index ── */
.sv-index {
  border-bottom: 1px solid var(--fn-line);
}

.sv-lens {
  border-top: 1px solid var(--fn-line);
}

.sv-lens h3 {
  margin: 0;
  font-size: inherit;
}

.sv-lens-trigger {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 18rem) 44px;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sv-lens-trigger:focus-visible {
  outline: 2px solid var(--purple-600);
  outline-offset: 4px;
  border-radius: 4px;
}

.sv-lens-num {
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .08em;
}

.sv-lens-name {
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.05em;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), color .2s;
}

.sv-lens-q {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.45;
}

.sv-lens-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--purple-200);
  border-radius: 4px;
  transition: background-color .2s, border-color .2s;
}

.sv-lens-toggle::before,
.sv-lens-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--ink);
  content: "";
  transform: translate(-50%, -50%);
  transition: transform .3s;
}

.sv-lens-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.sv-lens-trigger:hover .sv-lens-name {
  color: var(--purple-600);
  transform: translateX(10px);
}

.sv-lens.is-open .sv-lens-name {
  color: var(--purple-600);
}

.sv-lens.is-open .sv-lens-toggle {
  border-color: var(--ink);
  background: var(--ink);
}

.sv-lens.is-open .sv-lens-toggle::before,
.sv-lens.is-open .sv-lens-toggle::after {
  background: #fff;
}

.sv-lens.is-open .sv-lens-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.sv-lens-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: 2rem 1.5rem;
  padding: 0 calc(44px + 1.5rem) clamp(1.75rem, 3vw, 2.5rem) calc(4.5rem + 1.5rem);
  animation: fn-reveal .35s ease;
}

.sv-lens-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}

.sv-lens-list li {
  padding: .8rem 0;
  border-top: 1px solid var(--fn-line);
  color: var(--ink);
  font-size: .98rem;
  line-height: 1.45;
}

.sv-lens-out {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.55;
}

.sv-lens-out .sv-lens-label {
  display: block;
  margin-bottom: .9rem;
}

/* ── Coverage matrix ── */
.sv-coverage {
  border-top: 1px solid var(--fn-line);
}

.sv-coverage-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.sv-coverage-intro h2 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.05;
  text-wrap: balance;
}

.sv-coverage-intro > p:not(.fx-eyebrow) {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
}

.sv-platforms {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fn-line);
}

.sv-platforms p:last-child {
  margin: .8rem 0 0;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.65;
}

.sv-matrix-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.sv-matrix-filter button {
  min-height: 40px;
  padding: .45rem .95rem;
  border: 1px solid var(--purple-200);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}

.sv-matrix-filter button:hover {
  border-color: var(--ink);
}

.sv-matrix-filter button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.sv-matrix-filter button:focus-visible {
  outline: 2px solid var(--purple-600);
  outline-offset: 2px;
}

.sv-matrix table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sv-matrix thead th {
  padding: 0 .5rem .9rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  vertical-align: bottom;
}

.sv-matrix thead th:first-child {
  width: 36%;
  padding-left: 0;
  text-align: left;
}

.sv-matrix tbody th {
  padding: 1rem .5rem 1rem 0;
  border-top: 1px solid var(--fn-line);
  color: var(--ink);
  font-size: .98rem;
  font-weight: 500;
  text-align: left;
}

.sv-matrix tbody th span {
  display: block;
  margin-top: .2rem;
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.4;
}

.sv-matrix td {
  border-top: 1px solid var(--fn-line);
  text-align: center;
  transition: opacity .25s, background-color .25s;
}

.sv-matrix td::before {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  content: "";
}

.sv-matrix td[data-v="2"]::before {
  background: var(--ink);
}

.sv-matrix td[data-v="1"]::before {
  border: 1.5px solid var(--ink);
}

.sv-matrix td[data-v="0"]::before {
  width: 10px;
  height: 1.5px;
  background: var(--purple-200);
}

/* Cell text is for screen readers on desktop; the marks carry it visually */
.sv-matrix td span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sv-matrix:not([data-lens="all"]) [data-col]:not(.is-on) {
  opacity: .22;
}

.sv-matrix [data-col].is-on {
  background: var(--purple-50);
}

.sv-matrix td.is-on[data-v="2"]::before {
  background: var(--purple-600);
}

.sv-matrix td.is-on[data-v="1"]::before {
  border-color: var(--purple-600);
}

.sv-matrix-key {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.1rem 0 0;
  color: var(--ink-soft);
  font-size: .8rem;
}

.sv-key {
  display: inline-block;
  width: 11px;
  height: 11px;
}

.sv-key--2 {
  background: var(--ink);
}

.sv-key--1 {
  margin-left: 1.25rem;
  border: 1.5px solid var(--ink);
}

.sv-key--0 {
  width: 10px;
  height: 1.5px;
  margin-left: 1.25rem;
  background: var(--purple-200);
}

/* ── Week plan (Gantt) ── */
.sv-plan {
  background: var(--fn-soft);
}

.sv-gantt {
  --sv-text: minmax(0, 4.5fr);
  --sv-track: minmax(0, 7.5fr);
}

.sv-gantt-scale,
.sv-gantt-row {
  display: grid;
  grid-template-columns: var(--sv-text) var(--sv-track);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}

.sv-gantt-scale {
  padding-bottom: .9rem;
}

.sv-gantt-scale::before {
  content: "";
}

.sv-gantt-weeks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sv-gantt-scale span {
  padding-left: .5rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sv-gantt-row {
  align-items: center;
  padding: 1.35rem 0;
  border-top: 1px solid var(--purple-100);
}

.sv-gantt-row:last-child {
  border-bottom: 1px solid var(--purple-100);
}

.sv-gantt-text h3 {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
}

.sv-gantt-text p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.55;
}

.sv-gantt-when {
  display: none;
}

.sv-gantt-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-self: stretch;
  align-items: center;
  background-image: repeating-linear-gradient(90deg, var(--purple-200) 0 1px, transparent 1px calc(100% / 6));
}

.sv-gantt-bar {
  grid-column: var(--from) / var(--to);
  height: 14px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--ink);
}

.sv-gantt-row--key .sv-gantt-bar {
  background: var(--purple-600);
}

/* ── Deliverables (dark) ── */
.sv-deliver-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.sv-deliver h2 {
  margin: 0 0 2rem;
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.06em;
}

.sv-deliver-list {
  margin: 0;
}

.sv-deliver-list div {
  padding: 1.1rem 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.sv-deliver-list dt {
  margin-bottom: .3rem;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 500;
}

.sv-deliver-list dd {
  margin: 0;
  color: var(--purple-200);
  font-size: .95rem;
  line-height: 1.55;
}

.sv-mock {
  margin: 0;
}

.sv-mock-window {
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.sv-mock-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--fn-line);
  background: var(--fn-soft);
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 500;
}

.sv-mock-dots {
  display: flex;
  gap: 6px;
}

.sv-mock-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--purple-200);
}

.sv-mock-score {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--fn-line);
}

.sv-mock-score div {
  padding: 1rem 1.1rem 1.1rem;
}

.sv-mock-score div + div {
  border-left: 1px solid var(--fn-line);
}

.sv-mock-score span {
  display: block;
  color: var(--ink-soft);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sv-mock-score b {
  display: block;
  margin-top: .35rem;
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -.04em;
}

.sv-mock-score b::after {
  display: block;
  height: 4px;
  margin-top: .55rem;
  background: linear-gradient(90deg, var(--ink) calc(var(--s) * 20%), var(--purple-100) 0);
  content: "";
}

.sv-mock-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 7.5rem 5.25rem;
  gap: .75rem;
  align-items: center;
  padding: .75rem 1.1rem;
  font-size: .82rem;
  line-height: 1.35;
}

.sv-mock-row + .sv-mock-row {
  border-top: 1px solid var(--fn-line);
}

.sv-mock-row span:first-child,
.sv-mock-row span:nth-child(3) {
  color: var(--ink-soft);
}

.sv-mock-head {
  color: var(--ink-soft);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sv-sev {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
}

.sv-sev::before {
  width: 8px;
  height: 8px;
  background: var(--ink-soft);
  content: "";
}

.sv-sev--high {
  color: var(--danger);
}

.sv-sev--high::before {
  background: var(--danger);
}

.sv-sev--low {
  color: var(--success);
}

.sv-sev--low::before {
  background: var(--success);
}

.sv-mock figcaption {
  margin-top: 1rem;
  color: var(--purple-200);
  font-size: .8rem;
}

/* ── Frameworks ── */
.sv-fw {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 5rem);
  margin: 0;
}

.sv-fw-item {
  padding: 1.75rem 0 2rem;
  border-top: 1px solid var(--fn-line);
}

.sv-fw-item dt {
  color: var(--ink);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.04em;
}

.sv-fw-item dd {
  margin: .75rem 0 0;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.6;
}

.sv-fw-item dd.sv-fw-meta {
  margin-top: .6rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  .sv-coverage-grid,
  .sv-deliver-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-coverage-intro {
    max-width: 720px;
  }

  .sv-lens-trigger {
    grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 14rem) 44px;
  }

  .sv-lens-body {
    grid-template-columns: minmax(0, 1fr);
    padding-left: calc(3.25rem + 1.5rem);
  }

  .sv-lens-out {
    max-width: 560px;
  }
}

@media (max-width: 860px) {
  .sv-statement-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-stat {
    max-width: 420px;
  }

  .sv-gantt-scale {
    display: none;
  }

  .sv-gantt-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .65rem;
  }

  .sv-gantt-when {
    display: block;
    margin: 0;
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .sv-gantt-track {
    height: 22px;
  }
}

/* ── Phone ── */
@media (max-width: 640px) {
  .fn-page h1.sv-hero-title {
    font-size: clamp(2.3rem, 10.5vw, 3rem);
  }

  .sv-hero {
    min-height: 0;
    background-position: 30% center;
  }

  .sv-hero::before {
    background: rgba(255, 255, 255, .45);
  }

  .sv-lens-trigger {
    grid-template-columns: 2.25rem minmax(0, 1fr) 40px;
    gap: .25rem 1rem;
  }

  .sv-lens-q {
    grid-column: 2;
    grid-row: 2;
  }

  .sv-lens-toggle {
    grid-column: 3;
    grid-row: 1;
    width: 40px;
    height: 40px;
  }

  .sv-lens-body {
    padding: 0 0 1.75rem;
  }

  .sv-lens-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-lens-trigger:hover .sv-lens-name {
    transform: none;
  }

  .sv-mock-score {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sv-mock-score div:nth-child(3) {
    border-left: 0;
  }

  .sv-mock-score div:nth-child(n + 3) {
    border-top: 1px solid var(--fn-line);
  }

  .sv-mock-row {
    grid-template-columns: minmax(0, 1fr) 4.75rem;
  }

  .sv-mock-row span:first-child,
  .sv-mock-row span:nth-child(3) {
    display: none;
  }

  .sv-fw {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-lens-name,
  .sv-lens-body {
    transition: none;
    animation: none;
  }
}

/* ── Service pages, part 2: hero variants and per-page compositions ── */
.sv-page [role=tabpanel][hidden],
.sv-lens-panel[hidden] {
  display: none;
}

:where(.sv-page .fn-section) h2 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.05;
  text-wrap: balance;
}

.sv-page .fn-section.section-dark h2 {
  color: #fff;
  font-weight: 400;
  letter-spacing: -.06em;
}

.sv-hero-lead {
  max-width: 600px;
  margin: 0;
  color: #2f2448;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
}

.sv-note {
  margin: 1.25rem 0 0;
  color: var(--ink-soft);
  font-size: .8rem;
}

/* Dark hero */

/* ═══ Digital Consulting ═══ */

.sv-mock figcaption {
  line-height: 1.5;
}

/* Challenge picker */
.sv-picker {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.sv-picker-list {
  border-bottom: 1px solid var(--fn-line);
}

.sv-picker-list button {
  display: block;
  width: 100%;
  padding: 1.15rem 1rem 1.15rem 1.25rem;
  border: 0;
  border-top: 1px solid var(--fn-line);
  border-left: 2px solid transparent;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: -.02em;
  text-align: left;
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}

.sv-picker-list button:hover {
  color: var(--ink);
}

.sv-picker-list button[aria-selected="true"] {
  border-left-color: var(--ink);
  background: var(--fn-soft);
  color: var(--ink);
}

.sv-picker-list button:focus-visible,
.sv-paths-tabs button:focus-visible,
.sv-roles button:focus-visible,
.sv-toggle button:focus-visible,
.sv-stack button:focus-visible {
  outline: 2px solid var(--purple-600);
  outline-offset: 2px;
}

.sv-picker-panel {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 2px solid var(--ink);
  background: var(--fn-soft);
  animation: fn-reveal .35s ease;
}

.sv-picker-lead {
  margin: .9rem 0 2rem;
  color: var(--ink);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -.015em;
}

.sv-picker-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2rem;
}

.sv-picker-cols ul {
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.sv-picker-cols li {
  padding: .7rem 0;
  border-top: 1px solid var(--purple-100);
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.45;
}

.sv-picker-tag {
  margin: .75rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--purple-100);
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
}

/* Newspaper columns */
.sv-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sv-columns article {
  padding: 0 clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--fn-line);
}

.sv-columns article:first-child {
  padding-left: 0;
  border-left: 0;
}

.sv-columns h3 {
  margin: 0 0 .75rem;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.15;
}

.sv-columns p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.6;
}

.sv-columns ul {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.sv-columns li {
  padding: .7rem 0;
  border-top: 1px solid var(--fn-line);
  font-size: .92rem;
}

/* Discover → Decide → Deliver */
.sv-dc-approach {
  background: var(--fn-soft);
}

.sv-relay {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(2rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-relay li {
  position: relative;
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}

.sv-relay li:not(:last-child)::after {
  position: absolute;
  top: -.85rem;
  right: calc(clamp(2rem, 4vw, 3.5rem) / -2 - .5rem);
  padding: 0 .25rem;
  background: var(--fn-soft);
  color: var(--ink);
  font-size: 1.1rem;
  content: "→";
}

.sv-relay-when {
  margin: 0 0 .75rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sv-relay h3 {
  margin: 0 0 .75rem;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -.05em;
}

.sv-relay p {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.6;
}

.sv-relay-out {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--purple-200);
}

.sv-relay-out .sv-lens-label {
  display: block;
  margin-bottom: .4rem;
}

.sv-relay p.sv-relay-out {
  color: var(--ink);
}

/* Independence band */
.sv-dc-indep-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.sv-dc-indep-statement {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.055em;
}

.sv-dc-principles,
.sv-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-dc-principles li,
.sv-checklist li {
  padding: 1.1rem 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: var(--purple-200);
  font-size: .95rem;
  line-height: 1.6;
}

.sv-dc-principles strong,
.sv-checklist strong {
  display: block;
  margin-bottom: .25rem;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 500;
}

/* ═══ Digital Transformation ═══ */

.sv-mi-cite {
  font-size: .8rem;
  font-style: normal;
}

.sv-toggle {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 2rem;
  padding: 4px;
  border: 1px solid var(--purple-200);
  border-radius: 4px;
}

.sv-toggle button {
  min-height: 42px;
  padding: .5rem 1.4rem;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

.sv-toggle button[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}

.sv-flow-panel {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 9.5fr);
  gap: 2rem clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  animation: fn-reveal .35s ease;
}

.sv-flow-count {
  margin: 0;
}

.sv-flow-count div {
  padding: .9rem 0;
  border-top: 1px solid var(--fn-line);
}

.sv-flow-count dt {
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sv-flow-count dd {
  margin: .2rem 0 0;
  color: var(--ink);
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05em;
}

.sv-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}

.sv-flow--after {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem 1.75rem;
}

.sv-flow li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-height: 118px;
  padding: 1rem 1.1rem;
  border: 1px solid var(--fn-line);
  border-top: 2px solid var(--purple-200);
  background: #fff;
}

.sv-flow li:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -1.55rem;
  color: var(--purple-300);
  content: "→";
  transform: translateY(-50%);
}

.sv-flow:not(.sv-flow--after) li:nth-child(3n)::after {
  content: none;
}

.sv-flow--after li:not(:last-child)::after {
  right: -1.4rem;
}

.sv-flow span {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
}

.sv-flow em {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--ink-soft);
  font-size: .68rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sv-flow em::before {
  width: 8px;
  height: 8px;
  background: currentColor;
  content: "";
}

.sv-flow li.is-manual {
  border-top-color: var(--danger);
}

.sv-flow li.is-manual em {
  color: var(--danger);
}

.sv-flow li.is-auto {
  border-top-color: var(--purple-600);
}

.sv-flow li.is-auto em {
  color: var(--purple-600);
}

.sv-flow--after li.is-manual {
  border-top-color: var(--ink);
}

.sv-flow--after li.is-manual em {
  color: var(--ink);
}

/* Four shifts */
.sv-dt-shifts-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.sv-dt-shifts-head {
  position: sticky;
  top: calc(var(--fn-header) + 90px);
}

.sv-dt-shifts-head > p:not(.fx-eyebrow) {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}

.sv-shift-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--fn-line);
}

.sv-shift-list li {
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--fn-line);
}

.sv-shift {
  display: grid;
  gap: .6rem;
  margin: .9rem 0 1rem;
}

.sv-shift-from {
  color: var(--ink-soft);
  font-size: 1rem;
  text-decoration: line-through;
  text-decoration-color: var(--purple-300);
  text-decoration-thickness: 1px;
}

.sv-shift-to {
  color: var(--ink);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -.04em;
}

.sv-shift-to::before {
  margin-right: .5rem;
  content: "→";
}

.sv-shift-tags {
  margin: 0;
  color: var(--ink-soft);
  font-size: .85rem;
}

/* Staircase roadmap */
.sv-dt-roadmap {
  background: var(--fn-soft);
}

.sv-stairs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-stairs > li {
  padding: 1.5rem 1.5rem 2rem;
  border-top: 2px solid var(--ink);
  background: #fff;
}

.sv-stairs > li:nth-child(1) { min-height: 270px; }
.sv-stairs > li:nth-child(2) { min-height: 350px; }

.sv-stairs > li:nth-child(3) {
  min-height: 430px;
  border-top-color: var(--purple-600);
  background: var(--ink);
  color: #fff;
}

.sv-stairs-when {
  margin: 0 0 .5rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sv-stairs h3 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -.05em;
}

.fn-page .sv-stairs > li:nth-child(3) h3,
.sv-stairs > li:nth-child(3) li {
  color: #fff;
}

.sv-stairs > li:nth-child(3) .sv-stairs-when {
  color: var(--purple-200);
}

.sv-stairs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-stairs ul li {
  padding: .6rem 0;
  border-top: 1px solid var(--fn-line);
  background: none;
  color: var(--ink);
  font-size: .93rem;
}

.sv-stairs > li:nth-child(3) ul li {
  border-top-color: rgba(255, 255, 255, .16);
}

/* Ledger table */
.sv-ledger {
  border-bottom: 1px solid var(--fn-line);
}

.sv-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--fn-line);
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.5;
}

.sv-ledger-row > span:first-child {
  color: var(--ink);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 500;
}

.sv-ledger-head {
  padding: .8rem 0;
  border-top-color: var(--ink);
}

.sv-ledger-head > span,
.sv-ledger-head > span:first-child {
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sv-ledger--raci .sv-ledger-row {
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr);
}

.sv-ledger--raci b {
  color: var(--ink);
  font-weight: 600;
}

/* ═══ Application Development ═══ */

/* Build paths */
.sv-paths-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1rem;
}

.sv-paths-tabs button {
  display: grid;
  gap: .3rem;
  padding: 1.25rem 1.5rem;
  border: 0;
  border-top: 3px solid var(--fn-line);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}

.sv-paths-tabs button span {
  color: var(--ink);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  letter-spacing: -.04em;
}

.sv-paths-tabs button small {
  font-size: .85rem;
}

.sv-paths-tabs button:hover {
  border-top-color: var(--purple-300);
}

.sv-paths-tabs button[aria-selected="true"] {
  border-top-color: var(--ink);
  background: var(--fn-soft);
}

.sv-paths-panel {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 2rem clamp(2rem, 5vw, 4rem);
  padding: clamp(1.75rem, 3vw, 2.75rem) 1.5rem;
  background: var(--fn-soft);
  animation: fn-reveal .35s ease;
}

.sv-paths-lead {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.4;
  letter-spacing: -.02em;
}

.sv-spec {
  margin: 0;
}

.sv-spec div {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: .85rem 0;
  border-top: 1px solid var(--purple-100);
}

.sv-spec dt {
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sv-spec dd {
  margin: 0;
  color: var(--ink);
  font-size: .97rem;
  line-height: 1.5;
}

/* Statements */
.sv-statements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2.5rem, 6vw, 6rem);
}

.sv-statements article {
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--fn-line);
}

.sv-statements h3 {
  margin: 0 0 .9rem;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -.045em;
}

.sv-statements p:not(.sv-shift-tags) {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* Delivery rhythm */
.sv-ad-delivery {
  background: var(--fn-soft);
}

.sv-rhythm {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2.5fr) minmax(0, 2.5fr);
  gap: 1.5rem .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-rhythm-bar {
  display: flex;
  gap: 6px;
  height: 16px;
  margin-bottom: 1.5rem;
  background: var(--ink);
}

.sv-rhythm-step--sprints .sv-rhythm-bar {
  background: none;
}

.sv-rhythm-bar i {
  flex: 1;
  background: var(--ink);
}

.sv-rhythm-bar i:nth-child(odd) {
  background: var(--purple-400);
}

.sv-rhythm-step--key .sv-rhythm-bar {
  background: var(--purple-600);
}

.sv-rhythm-step--tail .sv-rhythm-bar {
  background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 16px);
}

.sv-rhythm h3 {
  margin: 0 0 .5rem;
  font-size: 1.2rem;
}

.sv-rhythm p {
  margin: 0;
  padding-right: 1rem;
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.55;
}

/* Quality */
.sv-ad-quality-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.sv-ad-quality-lead {
  margin: 0;
  color: var(--purple-200);
  font-size: 1.05rem;
  line-height: 1.6;
}

.sv-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
}

/* ═══ Managed IT Services ═══ */

.sv-mi-risk-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}

.sv-mi-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}

.sv-mi-figures .sv-stat-num {
  font-size: clamp(3rem, 5.5vw, 5rem);
}

.sv-mi-figures .sv-stat figcaption p {
  margin: 0;
}

.sv-mi-cite {
  grid-column: 1 / -1;
}

.sv-mi-cite a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* IT stack */
.sv-stack-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.sv-stack {
  display: grid;
  gap: 8px;
}

.sv-stack button {
  width: calc(100% - var(--n, 0) * 22px);
  min-height: 62px;
  margin-left: calc(var(--n, 0) * 22px);
  padding: 0 1.25rem;
  border: 1px solid var(--purple-200);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .25s;
}

.sv-stack button:hover {
  border-color: var(--ink);
  transform: translateX(4px);
}

.sv-stack button[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.sv-stack button.sv-stack-wrapper {
  margin-top: 8px;
  border-style: dashed;
  border-color: var(--purple-400);
}

.sv-stack-wrapper[aria-selected="true"] {
  border-style: solid;
}

.sv-stack-panels [role=tabpanel] {
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
  animation: fn-reveal .35s ease;
}

.sv-stack-panels h3 {
  margin: 0 0 .75rem;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -.045em;
}

.sv-stack-panels p {
  max-width: 560px;
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* Incidents */
.sv-mi-incidents {
  background: var(--fn-soft);
}

.sv-mi-incident-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.sv-chain {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--purple-100);
}

.sv-chain li {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-top: 1px solid var(--purple-100);
}

.sv-chain h3 {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  font-size: 1.15rem;
}

.sv-chain h3::before {
  width: 10px;
  height: 10px;
  background: var(--ink);
  content: "";
}

.sv-chain li:nth-child(3) h3::before {
  background: var(--purple-600);
}

.sv-chain p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.55;
}

.sv-prio {
  margin: 0;
}

.sv-prio table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
}

.sv-prio caption {
  margin-bottom: .75rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
}

.sv-prio th {
  padding: .4rem;
  color: var(--ink-soft);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
}

.sv-prio thead th {
  vertical-align: bottom;
}

.sv-prio tbody th {
  text-align: left;
}

.sv-prio td {
  height: 64px;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  transition: transform .2s;
}

.sv-prio td:hover {
  transform: scale(1.05);
}

.sv-prio .p1 { background: var(--ink); color: #fff; }
.sv-prio .p2 { background: var(--purple-600); color: #fff; }
.sv-prio .p3 { background: var(--purple-200); color: var(--ink); }
.sv-prio .p4 { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--purple-200); }

.sv-prio figcaption {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.55;
}

/* ═══ Training and Adoption ═══ */

.sv-ta-evidence {
  background: var(--fn-soft);
}

.sv-ta-evidence-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.sv-ta-evidence-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}

.sv-bars {
  margin: 0;
}

.sv-bar + .sv-bar {
  margin-top: 2rem;
}

.sv-bar p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .75rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
}

.sv-bar b {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05em;
}

.sv-bar-track {
  display: block;
  height: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--purple-200);
}

.sv-bar-track span {
  display: block;
  width: calc(var(--v) * 1%);
  height: 100%;
  background: var(--ink);
}

.sv-bar--muted .sv-bar-track span {
  background: var(--purple-300);
}

.sv-bar--muted b {
  color: var(--ink-soft);
}

.sv-bars figcaption {
  margin-top: 1.5rem;
  color: var(--ink-soft);
  font-size: .82rem;
}

.sv-bars cite {
  display: block;
  margin-top: .35rem;
  font-style: normal;
}

.sv-bars cite a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Role paths */
.sv-roles {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.25rem;
}

.sv-roles button {
  min-height: 46px;
  padding: .6rem 1.25rem;
  border: 1px solid var(--purple-200);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}

.sv-roles button:hover {
  border-color: var(--ink);
}

.sv-roles button[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.sv-ta-paths [role=tabpanel] {
  animation: fn-reveal .35s ease;
}

.sv-ta-paths .sv-paths-lead {
  max-width: 44ch;
  margin-bottom: 2.25rem;
}

.sv-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-path::before {
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--purple-200);
  content: "";
}

.sv-path li {
  position: relative;
  padding-top: 2rem;
}

.sv-path li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--ink);
  content: "";
}

.sv-path-when {
  display: block;
  margin-bottom: .5rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sv-path h3 {
  margin: 0 0 .5rem;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -.035em;
}

.sv-path p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.55;
}

/* ADKAR */
.sv-ta-change-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.sv-ta-change-head p:not(.fx-eyebrow) {
  margin: 0;
  color: var(--purple-200);
  font-size: 1.05rem;
  line-height: 1.6;
}

.sv-adkar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-adkar li {
  padding: 0 1.25rem;
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.sv-adkar li:first-child {
  padding-left: 0;
  border-left: 0;
}

.sv-adkar-letter {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--purple-300);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 200;
  line-height: .9;
  letter-spacing: -.05em;
}

.fn-page .sv-adkar h3 {
  margin: 0 0 .5rem;
  color: #fff;
  font-size: 1.15rem;
}

.sv-adkar p {
  margin: 0;
  color: var(--purple-200);
  font-size: .9rem;
  line-height: 1.55;
}

/* ── Part 2: tablet ── */
@media (max-width: 1024px) {
  .sv-picker,
  .sv-stack-wrap,
  .sv-mi-incident-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 0;
  }

  .sv-columns article:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .sv-flow-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-flow-count {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.5rem;
  }

  .sv-flow--after {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sv-flow--after li:nth-child(3)::after {
    content: none;
  }

  .sv-paths-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-adkar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 0;
  }

  .sv-adkar li:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 860px) {
  .sv-dt-shifts-grid,
  .sv-relay,
  .sv-dc-indep-grid,
  .sv-ad-quality-grid,
  .sv-mi-risk-grid,
  .sv-ta-evidence-grid,
  .sv-statements {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-dt-shifts-head {
    position: static;
  }

  .sv-relay li:not(:last-child)::after {
    content: none;
  }

  .sv-stairs {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-stairs > li:nth-child(n) {
    min-height: 0;
  }

  .sv-rhythm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
  }
}

/* ── Part 2: phone ── */
@media (max-width: 640px) {

  .sv-picker-cols,
  .sv-columns,
  .sv-checklist,
  .sv-path,
  .sv-rhythm,
  .sv-mi-figures,
  .sv-paths-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-columns article {
    padding-left: 0;
    border-left: 0;
  }

  .sv-path::before {
    top: 0;
    bottom: 0;
    left: 5px;
    width: 2px;
    height: auto;
  }

  .sv-path li {
    padding: 0 0 0 2rem;
  }

  .sv-flow,
  .sv-flow--after {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .sv-flow li {
    min-height: 0;
    flex-direction: row;
    align-items: center;
  }

  .sv-flow li:not(:last-child)::after,
  .sv-flow:not(.sv-flow--after) li:nth-child(3n):not(:last-child)::after,
  .sv-flow--after li:nth-child(3):not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -1.55rem;
    left: 1.1rem;
    content: "↓";
    transform: none;
  }

  .sv-flow em {
    flex-shrink: 0;
  }

  .sv-flow-count dd {
    font-size: 2rem;
  }

  .sv-ledger-head {
    display: none;
  }

  .sv-ledger-row,
  .sv-ledger--raci .sv-ledger-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .3rem;
  }

  .sv-ledger--raci .sv-ledger-row > span:nth-child(2)::before {
    color: var(--ink-soft);
    content: "FusionX Consulting: ";
  }

  .sv-ledger--raci .sv-ledger-row > span:nth-child(3)::before {
    content: "Your team: ";
  }

  .sv-spec div {
    grid-template-columns: minmax(0, 1fr);
    gap: .3rem;
  }

  .sv-paths-tabs button {
    padding: 1rem;
  }

  .sv-paths-panel {
    padding-inline: 1rem;
  }

  .sv-stack button {
    width: 100%;
    margin-left: 0;
  }

  .sv-chain li {
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
  }

  .sv-adkar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .sv-adkar li,
  .sv-adkar li:first-child,
  .sv-adkar li:nth-child(4) {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-left: 0;
  }

  .sv-adkar-letter {
    grid-row: span 2;
    margin: 0;
    font-size: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-picker-panel,
  .sv-flow-panel,
  .sv-paths-panel,
  .sv-stack-panels [role=tabpanel],
  .sv-ta-paths [role=tabpanel] {
    animation: none;
  }
}

/* Homepage services: heading with a "Learn more" link to the service page */
.service-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin: 0 0 1.25rem;
}

.service-panel-head .service-panel-title {
  margin: 0;
}

.service-panel-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .55rem 1.1rem;
  border: 1px solid var(--purple-600);
  border-radius: 4px;
  color: var(--purple-600);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}

.service-panel-link svg {
  transition: transform .2s;
}

.service-panel-link:hover {
  background: var(--purple-600);
  color: #fff;
}

.service-panel-link:hover svg {
  transform: translateX(4px);
}

.service-panel-link:focus-visible {
  outline: 2px solid var(--purple-600);
  outline-offset: 3px;
}

/* Services menu: text only, no icons */
#mega-services .mega-link,
#mega-services .mega-link:hover {
  grid-template-columns: minmax(0, 1fr);
}

/* ═══════════════════════════════════════════════════════════════
   Contact (ct-) and About (ab-) pages
   ═══════════════════════════════════════════════════════════════ */

/* ── Contact: hero holds the questionnaire ── */
.sv-hero.ct-hero {
  align-items: flex-start;
  min-height: 0;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem);
  scroll-margin-top: 80px;
}

.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.ct-intro {
  padding-top: 1rem;
}

.ct-next {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.ct-next ol {
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}

.ct-next li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: .5rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(20, 8, 48, .12);
}

.ct-next p {
  margin: 0;
  color: #2f2448;
  font-size: .95rem;
  line-height: 1.55;
}

.ct-next strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.ct-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 30px 70px -30px rgba(46, 19, 97, .35);
}

.ct-form [hidden] {
  display: none !important;
}

.ct-progress {
  height: 4px;
  background: var(--purple-100);
}

.ct-progress span {
  display: block;
  width: var(--ct-progress, 100%);
  height: 100%;
  background: var(--purple-600);
  transition: width .4s cubic-bezier(.16, 1, .3, 1);
}

.ct-stepcount {
  margin: .9rem 0 1.5rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ct-form:not(.is-stepped) .ct-progress,
.ct-form:not(.is-stepped) .ct-stepcount,
.ct-form:not(.is-stepped) [data-next],
.ct-form:not(.is-stepped) [data-back] {
  display: none;
}

.ct-form:not(.is-stepped) .ct-step + .ct-step {
  margin-top: 2.5rem;
}

.ct-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  animation: fn-reveal .35s ease;
}

.ct-step:focus {
  outline: none;
}

.ct-step legend {
  padding: 0;
  color: var(--ink);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.04em;
}

.ct-hint {
  margin: .4rem 0 0;
  color: var(--ink-soft);
  font-size: .88rem;
}

.ct-group {
  margin-top: 1.4rem;
}

.ct-group-label {
  margin: 0 0 .65rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ct-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ct-chips label {
  position: relative;
  cursor: pointer;
}

.ct-chips input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.ct-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: .5rem .95rem;
  border: 1px solid var(--purple-200);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 500;
  transition: background-color .2s, border-color .2s, color .2s;
}

.ct-chips label:hover span {
  border-color: var(--ink);
}

.ct-chips input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.ct-chips input:focus-visible + span {
  outline: 2px solid var(--purple-600);
  outline-offset: 2px;
}

.ct-error {
  margin: .75rem 0 0;
  color: var(--danger);
  font-size: .85rem;
  font-weight: 500;
}

.ct-error:empty {
  display: none;
}

.ct-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
  margin-top: 1.5rem;
}

.ct-field--full {
  grid-column: 1 / -1;
}

.ct-field label {
  display: block;
  margin-bottom: .45rem;
  color: var(--ink);
  font-size: .85rem;
  font-weight: 600;
}

.ct-field label span {
  color: var(--ink-soft);
  font-weight: 400;
}

.ct-field input,
.ct-field textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--purple-200);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}

.ct-field textarea {
  resize: vertical;
}

.ct-field input:focus,
.ct-field textarea:focus {
  border-color: var(--purple-600);
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 44, 212, .15);
}

.ct-field input[aria-invalid="true"] {
  border-color: var(--danger);
}

.ct-field .ct-error {
  margin-top: .4rem;
}

.ct-privacy {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: .8rem;
}

.ct-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fn-line);
}

.ct-nav .button {
  margin-left: auto;
  cursor: pointer;
}

.ct-back {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.ct-back:hover {
  color: var(--ink);
}

.ct-done {
  animation: fn-reveal .35s ease;
}

.ct-done:focus {
  outline: none;
}

.ct-done h2 {
  margin: 0 0 .75rem;
  color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -.05em;
}

.ct-done > p:not(.fx-eyebrow) {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

.ct-summary {
  margin: 1.75rem 0 0;
}

.ct-summary div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1rem;
  padding: .75rem 0;
  border-top: 1px solid var(--fn-line);
  font-size: .9rem;
}

.ct-summary dt {
  color: var(--ink-soft);
}

.ct-summary dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}

/* ── About ── */
.ab-statement {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 2rem clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}

.ab-quote {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--ink);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.6;
}

.sv-columns.ab-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ab-columns h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -.045em;
}

.ab-what {
  background: var(--fn-soft);
}

.ab-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
}

.ab-index ul {
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--purple-100);
}

.ab-index li {
  border-top: 1px solid var(--purple-100);
}

.ab-index a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 0;
  color: var(--ink);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  letter-spacing: -.03em;
  text-decoration: none;
  transition: color .2s;
}

.ab-index a::after {
  color: var(--ink-soft);
  content: "→";
  transition: transform .25s, color .2s;
}

.ab-index a:hover {
  color: var(--purple-600);
}

.ab-index a:hover::after {
  color: var(--purple-600);
  transform: translateX(6px);
}

.ab-creds {
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--fn-line);
}

.ab-creds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}

.ab-creds ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-creds li {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.ab-creds img {
  width: auto;
  height: 44px;
  object-fit: contain;
}

.ab-creds span {
  max-width: 14ch;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.35;
}

@media (max-width: 1024px) {
  .ct-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .ct-intro {
    display: contents;
  }

  .ct-card {
    order: 2;
    margin-top: 2rem;
  }

  .ct-next {
    order: 3;
  }
}

@media (max-width: 860px) {
  .ab-statement,
  .ab-index {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-columns.ab-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .ab-columns article {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .ct-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-card {
    padding: 1.25rem;
  }

  .ct-summary div {
    grid-template-columns: minmax(0, 1fr);
    gap: .2rem;
  }

  .ab-creds ul {
    gap: 1.25rem 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-step,
  .ct-done,
  .ct-progress span {
    animation: none;
    transition: none;
  }
}

/* Contact form: spam trap kept off-screen, sending state */
.ct-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ct-send-error {
  margin-top: 1.25rem;
}

.ct-form [data-submit][aria-busy="true"] {
  opacity: .7;
  cursor: progress;
}

/* About: Microsoft CSP badge (same artwork as the navbar) */
.ab-creds .ab-creds-csp img {
  height: 56px;
}

/* About: office map and details */
.ab-map {
  overflow: hidden;
  border: 1px solid var(--fn-line);
  border-radius: 10px;
  background: var(--fn-soft);
  box-shadow: var(--shadow-soft);
}

.ab-map iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 42vw, 480px);
  border: 0;
}

.ab-visit-details {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}

.ab-visit-details dt {
  margin-bottom: .6rem;
  color: var(--ink-soft);
  font-size: .9rem;
}

.ab-visit-details dd {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 500;
  line-height: 1.5;
}

.ab-visit-details a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--purple-300);
  text-underline-offset: 4px;
}

.ab-visit-details a:hover {
  color: var(--purple-600);
}

@media (max-width: 760px) {
  .ab-visit-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-visit-details div:first-child {
    grid-column: 1 / -1;
  }
}

/* Navbar type: 15px medium Montserrat with normal letter spacing, matched in the dropdown menus */
.site-nav .nav-link,
.site-nav .nav-trigger {
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
}

.site-nav .mega-name {
  font-weight: 500;
}

/* Coverage matrix: below 760px four lens columns don't fit, so show one lens at a time */
@media (max-width: 760px) {
  /* Matrix: one lens at a time, with its words visible */
  .sv-matrix-filter button[data-lens="all"] {
    display: none;
  }

  .sv-matrix [data-col]:not(.is-on) {
    display: none;
  }

  .sv-matrix thead th:first-child {
    width: auto;
  }

  .sv-matrix [data-col].is-on {
    background: none;
  }

  .sv-matrix td {
    width: 8.5rem;
    padding-left: .5rem;
    text-align: left;
  }

  .sv-matrix thead th[data-col] {
    text-align: left;
  }

  .sv-matrix td span {
    position: static;
    width: auto;
    height: auto;
    margin-left: .55rem;
    overflow: visible;
    clip: auto;
    color: var(--ink);
    font-size: .85rem;
    vertical-align: middle;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Blog posts (bp-): shared gradient hero, sticky contents list,
   readable article column, related posts
   ═══════════════════════════════════════════════════════════════ */
.sv-hero.bp-hero {
  min-height: clamp(460px, 64vh, 640px);
}

.bp-hero h1.sv-hero-title {
  max-width: 20ch;
  font-size: clamp(1.9rem, 1.2rem + 3.6vw, 4.5rem);
  line-height: 1.04;
}

.bp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 0;
  margin: 1.75rem 0 0;
  color: #2f2448;
  font-size: .9rem;
  font-weight: 500;
}

.bp-meta > span + span::before {
  margin: 0 .75rem;
  color: var(--purple-400);
  content: "·";
}

.bp-body {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.bp-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr) minmax(0, 1fr);
  gap: 2.5rem clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* Contents list */
.bp-toc {
  position: sticky;
  top: calc(var(--fn-header, 82px) + 2rem);
}

.bp-toc summary {
  margin-bottom: .9rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}

.bp-toc summary::-webkit-details-marker {
  display: none;
}

.bp-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--fn-line);
}

.bp-toc a {
  display: block;
  margin-left: -1px;
  padding: .5rem 0 .5rem 1rem;
  border-left: 2px solid transparent;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}

.bp-toc a:hover {
  border-left-color: var(--purple-600);
  color: var(--ink);
}

/* Article */
.bp-article {
  min-width: 0;
}

.bp-cover {
  margin: 0 0 2.5rem;
  overflow: hidden;
  border-radius: 10px;
  background: var(--fn-soft);
}

.bp-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.bp-takeaways {
  margin: 0 0 3rem;
  padding: 1.5rem 1.75rem;
  border-left: 2px solid var(--ink);
  background: var(--fn-soft);
}

.bp-takeaways ul {
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}

.bp-takeaways li {
  position: relative;
  padding: .45rem 0 .45rem 1.25rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}

.bp-takeaways li::before {
  position: absolute;
  top: 1em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--purple-600);
  content: "";
}

.bp-prose {
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 1.075rem;
  line-height: 1.8;
}

.bp-prose h2 {
  margin: 3rem 0 1rem;
  color: var(--ink);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  line-height: 1.15;
  scroll-margin-top: calc(var(--fn-header, 82px) + 1.5rem);
}

.bp-prose h2:first-child {
  margin-top: 0;
}

.bp-prose h3 {
  margin: 2rem 0 .6rem;
  color: var(--ink);
  font-size: 1.2rem;
}

.bp-prose p {
  margin: 0 0 1.25rem;
}

.bp-prose ul,
.bp-prose ol {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}

.bp-prose li {
  margin-bottom: .6rem;
  padding-left: .25rem;
}

.bp-prose li::marker {
  color: var(--purple-600);
}

.bp-prose strong {
  color: var(--ink);
  font-weight: 600;
}

.bp-prose a {
  color: var(--purple-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.bp-prose a:hover {
  color: var(--purple-700);
}

.bp-note {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--purple-200);
  border-radius: 4px;
  background: #fff;
}

.bp-note p {
  margin: 0;
  font-size: 1rem;
}

.bp-sources {
  max-width: 68ch;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fn-line);
}

.bp-sources ul {
  margin: .75rem 0 0;
  padding-left: 1.1rem;
}

.bp-sources li {
  margin-bottom: .4rem;
  font-size: .88rem;
  line-height: 1.5;
}

.bp-sources a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bp-sources a:hover {
  color: var(--purple-600);
}

/* Related posts */
.bp-related {
  background: var(--fn-soft);
}

.bp-related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.25rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-related-list a {
  display: grid;
  gap: .5rem;
  color: var(--ink);
  text-decoration: none;
}

.bp-related-list img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  margin-bottom: .75rem;
  border-radius: 8px;
  object-fit: cover;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.bp-related-list a:hover img {
  transform: translateY(-4px);
}

.bp-related-cat {
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bp-related-title {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.3;
  letter-spacing: -.02em;
  transition: color .2s;
}

.bp-related-list a:hover .bp-related-title {
  color: var(--purple-600);
}

.bp-related-meta {
  color: var(--ink-soft);
  font-size: .85rem;
}

@media (max-width: 1100px) {
  .bp-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  }
}

/* Tablet and phone: contents list becomes a collapsible box above the article */
@media (max-width: 860px) {
  .bp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .bp-toc {
    position: static;
    border: 1px solid var(--fn-line);
    border-radius: 4px;
  }

  .bp-toc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin: 0;
    padding: 0 1.1rem;
  }

  .bp-toc summary::after {
    font-size: 1rem;
    content: "+";
  }

  .bp-toc details[open] summary::after {
    content: "−";
  }

  .bp-toc ol {
    margin: 0 1.1rem 1rem;
  }

  /* Related posts become a list: small image left, text right */
  .bp-related-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .bp-related-list a {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 1.25rem;
    row-gap: .35rem;
    align-items: start;
  }

  .bp-related-list img {
    grid-row: 1 / span 3;
    margin: 0;
  }
}

@media (max-width: 560px) {
  .bp-takeaways {
    padding: 1.25rem;
  }

  .bp-prose {
    font-size: 1.02rem;
  }
}

/* Blog: bp-meta on small screens wraps, so drop the dot separators and space the items instead */
@media (max-width: 560px) {
  .bp-meta {
    gap: .35rem 1.25rem;
  }

  .bp-meta > span + span::before {
    content: none;
  }
}

/* Blog hero: the post's own photo under a brand-ink overlay, white text on top */
.sv-hero.bp-hero {
  background: var(--ink) var(--bp-hero-img) center / cover no-repeat;
  color: #fff;
}

.sv-hero.bp-hero::before {
  background:
    linear-gradient(90deg, rgba(20, 8, 48, .92) 0%, rgba(20, 8, 48, .8) 42%, rgba(20, 8, 48, .45) 100%),
    linear-gradient(0deg, rgba(20, 8, 48, .55) 0%, rgba(20, 8, 48, 0) 45%);
}

.fn-page .bp-hero h1.sv-hero-title {
  color: #fff;
}

.bp-hero .sv-hero-lead {
  color: var(--purple-100);
}

.bp-hero .sv-crumb,
.bp-hero .sv-crumb a {
  color: var(--purple-200);
}

.bp-hero .sv-crumb a:hover {
  color: #fff;
}

.bp-hero .sv-crumb span {
  color: var(--purple-400);
}

.bp-hero .bp-meta {
  color: var(--purple-100);
}

.bp-hero .bp-meta > span + span::before {
  color: var(--purple-300);
}

/* Phones: the text covers the full width, so darken the photo evenly */
@media (max-width: 640px) {
  .sv-hero.bp-hero {
    background-position: center;
  }

  .sv-hero.bp-hero::before {
    background: rgba(20, 8, 48, .8);
  }
}