:root {
      color-scheme: dark;
      --bg: #08111f;
      --bg-soft: #0b1626;
      --surface: #0f1b2d;
      --surface-elevated: #14243a;
      --surface-muted: #112033;
      --border: #26394f;
      --border-strong: #3a4f68;
      --text: #f4f7fb;
      --text-soft: #a9b7c8;
      --text-dim: #7f90a4;
      --brand: #80db66;
      --brand-strong: #9bea85;
      --brand-dark: #07120b;
      --blue: #64b5f6;
      --violet: #a78bfa;
      --amber: #f5c451;
      --coral: #ff7a7a;
      --teal: #5eead4;
      --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
      --radius-sm: 10px;
      --radius: 16px;
      --radius-lg: 24px;
      --container: 1280px;
      --header-height: 76px;
    }

    [data-theme="light"] {
      color-scheme: light;
      --bg: #f7f9fc;
      --bg-soft: #eef3f8;
      --surface: #ffffff;
      --surface-elevated: #ffffff;
      --surface-muted: #f0f5f9;
      --border: #d7e0ea;
      --border-strong: #bcc9d6;
      --text: #102033;
      --text-soft: #5e6d7d;
      --text-dim: #7c8998;
      --brand: #287a3a;
      --brand-strong: #216b32;
      --brand-dark: #ffffff;
      --shadow: 0 22px 60px rgba(23, 43, 77, 0.12);
    }

    *, *::before, *::after { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: "Inter", sans-serif;
      font-size: 17px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body.menu-open { overflow: hidden; }

    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
    img, svg { max-width: 100%; display: block; }

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

    .container {
      width: min(calc(100% - 64px), var(--container));
      margin-inline: auto;
    }

    .section {
      padding: 112px 0;
      position: relative;
    }

    .eyebrow {
      margin: 0 0 16px;
      color: var(--brand);
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .section-title {
      margin: 0;
      max-width: 840px;
      font-family: "Manrope", sans-serif;
      font-size: clamp(2.25rem, 4vw, 3.4rem);
      line-height: 1.08;
      letter-spacing: -0.04em;
    }

    .section-intro {
      max-width: 760px;
      margin: 24px 0 0;
      color: var(--text-soft);
      font-size: 1.08rem;
    }

    .site-header {
      position: fixed;
      inset: 0 0 auto;
      height: var(--header-height);
      z-index: 1000;
      border-bottom: 1px solid transparent;
      transition: background 180ms ease, border-color 180ms ease, backdrop-filter 180ms ease;
    }

    .site-header.scrolled {
      background: color-mix(in srgb, var(--bg) 84%, transparent);
      border-color: var(--border);
      backdrop-filter: blur(18px);
    }

    .header-inner {
      min-height: var(--header-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand {
      display: inline-flex;
      flex-direction: column;
      line-height: 1.15;
      min-width: max-content;
    }

    .brand-name {
      font-family: "Manrope", sans-serif;
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .brand-role {
      margin-top: 4px;
      color: var(--text-dim);
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.66rem;
      letter-spacing: 0.05em;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 28px;
      margin-left: auto;
    }

    .desktop-nav a {
      color: var(--text-soft);
      font-size: 0.92rem;
      font-weight: 600;
      transition: color 160ms ease;
    }

    .desktop-nav a:hover { color: var(--text); }

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

    .icon-button {
      width: 44px;
      height: 44px;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 12px;
      color: var(--text-soft);
      background: var(--surface);
      cursor: pointer;
      transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .icon-button:hover {
      border-color: var(--border-strong);
      color: var(--text);
      transform: translateY(-1px);
    }

    .button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 24px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      font-size: 0.92rem;
      font-weight: 700;
      line-height: 1;
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    }

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

    .button-primary {
      background: var(--brand);
      color: var(--brand-dark);
    }

    .button-primary:hover { background: var(--brand-strong); }

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

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

    .menu-toggle { display: none; }

    .mobile-menu {
      display: none;
      position: fixed;
      inset: var(--header-height) 0 0;
      z-index: 999;
      padding: 28px 32px;
      background: var(--bg);
      border-top: 1px solid var(--border);
    }

    .mobile-menu.open { display: block; }

    .mobile-menu nav {
      display: grid;
      gap: 10px;
    }

    .mobile-menu nav a {
      padding: 15px 0;
      border-bottom: 1px solid var(--border);
      font-family: "Manrope", sans-serif;
      font-size: 1.35rem;
      font-weight: 700;
    }

    .hero {
      position: relative;
      min-height: 780px;
      padding: calc(var(--header-height) + 92px) 0 96px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(color-mix(in srgb, var(--border) 28%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--border) 28%, transparent) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 86%);
      opacity: .45;
    }

    .hero::after {
      content: "";
      position: absolute;
      width: 620px;
      height: 620px;
      top: 90px;
      right: -180px;
      border-radius: 50%;
      background: radial-gradient(circle, color-mix(in srgb, var(--brand) 19%, transparent), transparent 66%);
      filter: blur(10px);
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
      align-items: center;
      gap: 72px;
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      color: var(--brand);
      font-family: "IBM Plex Mono", monospace;
      font-size: .79rem;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .hero-kicker::before {
      content: "";
      width: 34px;
      height: 1px;
      background: currentColor;
    }

    .hero h1 {
      margin: 0;
      max-width: 820px;
      font-family: "Manrope", sans-serif;
      font-size: clamp(3.25rem, 6vw, 5rem);
      line-height: .99;
      letter-spacing: -.055em;
    }

    .hero-copy {
      max-width: 720px;
      margin: 28px 0 0;
      color: var(--text-soft);
      font-size: clamp(1.05rem, 1.5vw, 1.25rem);
      line-height: 1.7;
    }

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

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 24px;
      margin-top: 30px;
      color: var(--text-dim);
      font-size: .88rem;
    }

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

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--brand);
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 13%, transparent);
    }

    .architecture-card {
      position: relative;
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .architecture-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(color-mix(in srgb, var(--border) 35%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--border) 35%, transparent) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: .28;
      pointer-events: none;
    }

    .architecture-header,
    .architecture-flow { position: relative; z-index: 1; }

    .architecture-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 28px;
    }

    .architecture-label {
      color: var(--text-dim);
      font-family: "IBM Plex Mono", monospace;
      font-size: .7rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .architecture-live {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 9px;
      border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--border));
      border-radius: 999px;
      color: var(--brand);
      background: color-mix(in srgb, var(--brand) 7%, transparent);
      font-family: "IBM Plex Mono", monospace;
      font-size: .65rem;
      text-transform: uppercase;
    }

    .architecture-flow {
      display: grid;
      gap: 16px;
    }

    .flow-node {
      position: relative;
      padding: 16px 18px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: color-mix(in srgb, var(--surface) 92%, transparent);
    }

    .flow-node::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -17px;
      width: 1px;
      height: 17px;
      background: var(--border-strong);
    }

    .flow-node:last-child::after { display: none; }

    .flow-node-label {
      display: block;
      margin-bottom: 4px;
      color: var(--text-dim);
      font-family: "IBM Plex Mono", monospace;
      font-size: .64rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .flow-node strong {
      font-family: "Manrope", sans-serif;
      font-size: .98rem;
    }

    .flow-node.external { border-color: color-mix(in srgb, var(--blue) 58%, var(--border)); }
    .flow-node.platform { border-color: color-mix(in srgb, var(--brand) 58%, var(--border)); }
    .flow-node.data { border-color: color-mix(in srgb, var(--violet) 58%, var(--border)); }

    .flow-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .flow-row .flow-node { min-height: 92px; }

    .metrics-strip {
      border-block: 1px solid var(--border);
      background: var(--bg-soft);
    }

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

    .metric {
      padding: 34px 30px;
      border-right: 1px solid var(--border);
    }

    .metric:last-child { border-right: 0; }

    .metric-value {
      display: block;
      margin-bottom: 5px;
      color: var(--text);
      font-family: "Manrope", sans-serif;
      font-size: 1.65rem;
      font-weight: 800;
      letter-spacing: -.04em;
    }

    .metric-copy {
      color: var(--text-soft);
      font-size: .9rem;
      line-height: 1.5;
    }

    .positioning {
      background: var(--bg);
    }

    .positioning-grid {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 80px;
      align-items: start;
    }

    .transformation-card {
      padding: 34px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
    }

    .transformation-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 24px;
      align-items: center;
    }

    .state-title {
      margin: 0 0 18px;
      color: var(--text-dim);
      font-family: "IBM Plex Mono", monospace;
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .state-list {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .state-list li {
      padding: 11px 13px;
      border: 1px solid var(--border);
      border-radius: 9px;
      color: var(--text-soft);
      background: var(--surface-muted);
      font-size: .88rem;
    }

    .state-list.after li {
      border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
      color: var(--text);
    }

    .transform-arrow {
      color: var(--brand);
      font-size: 1.5rem;
      font-weight: 800;
    }

    .flagship-section {
      background: var(--bg-soft);
    }

    .flagship-card {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 6fr) minmax(420px, 6fr);
      gap: 54px;
      margin-top: 48px;
      padding: 56px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface-elevated);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .flagship-card::after {
      content: "";
      position: absolute;
      width: 500px;
      height: 500px;
      right: -220px;
      bottom: -250px;
      border-radius: 50%;
      background: radial-gradient(circle, color-mix(in srgb, var(--brand) 13%, transparent), transparent 68%);
      pointer-events: none;
    }

    .flagship-content,
    .system-panel { position: relative; z-index: 1; }

    .project-category {
      margin-bottom: 16px;
      color: var(--brand);
      font-family: "IBM Plex Mono", monospace;
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .flagship-card h3 {
      margin: 0;
      font-family: "Manrope", sans-serif;
      font-size: clamp(2.1rem, 3.5vw, 3.25rem);
      line-height: 1.08;
      letter-spacing: -.045em;
    }

    .project-summary {
      margin: 24px 0 0;
      color: var(--text-soft);
      font-size: 1.03rem;
    }

    .project-facts {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 28px;
    }

    .fact-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 11px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text-soft);
      background: color-mix(in srgb, var(--surface) 70%, transparent);
      font-family: "IBM Plex Mono", monospace;
      font-size: .67rem;
    }

    .fact-chip.live {
      border-color: color-mix(in srgb, var(--brand) 38%, var(--border));
      color: var(--brand);
    }

    .project-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 34px;
      color: var(--text);
      font-weight: 700;
    }

    .project-link span {
      color: var(--brand);
      transition: transform 160ms ease;
    }

    .project-link:hover span { transform: translateX(4px); }

    .system-panel {
      align-self: stretch;
      padding: 26px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--surface) 94%, transparent);
    }

    .system-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 24px;
    }

    .system-panel-title {
      font-family: "IBM Plex Mono", monospace;
      font-size: .72rem;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    .system-panel-status {
      color: var(--brand);
      font-family: "IBM Plex Mono", monospace;
      font-size: .66rem;
    }

    .system-map {
      display: grid;
      gap: 11px;
    }

    .system-map-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .system-box {
      min-height: 76px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface-muted);
    }

    .system-box span {
      color: var(--text-dim);
      font-family: "IBM Plex Mono", monospace;
      font-size: .58rem;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .system-box strong {
      margin-top: 4px;
      font-size: .78rem;
      line-height: 1.3;
    }

    .system-box.shopify { border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
    .system-box.data { border-color: color-mix(in srgb, var(--violet) 45%, var(--border)); }
    .system-box.workflow { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
    .system-box.alert { border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); }
    .system-box.sync { border-color: color-mix(in srgb, var(--teal) 45%, var(--border)); }

    .system-connector {
      height: 14px;
      position: relative;
    }

    .system-connector::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 11%;
      right: 11%;
      height: 1px;
      background: var(--border-strong);
    }

    .system-connector::after {
      content: "↓";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 0 6px;
      color: var(--brand);
      background: var(--surface);
      font-family: "IBM Plex Mono", monospace;
      font-size: .72rem;
    }

    .coming-next {
      padding: 86px 0;
      background: var(--bg);
    }

    .next-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      padding: 32px 36px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
    }

    .next-card h2 {
      margin: 0;
      font-family: "Manrope", sans-serif;
      font-size: clamp(1.65rem, 3vw, 2.35rem);
      letter-spacing: -.035em;
    }

    .next-card p {
      margin: 8px 0 0;
      color: var(--text-soft);
    }

    .site-footer {
      padding: 34px 0;
      border-top: 1px solid var(--border);
      color: var(--text-dim);
      font-size: .86rem;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
    }

    .footer-links a:hover { color: var(--text); }

    @media (max-width: 1080px) {
      .desktop-nav { display: none; }
      .header-actions .button { display: none; }
      .menu-toggle { display: inline-grid; }
      .hero-grid,
      .positioning-grid,
      .flagship-card {
        grid-template-columns: 1fr;
      }
      .hero-grid { gap: 52px; }
      .architecture-card { max-width: 760px; }
      .positioning-grid { gap: 46px; }
      .flagship-card { padding: 44px; }
      .system-panel { max-width: 760px; }
    }

    @media (max-width: 820px) {
      .container { width: min(calc(100% - 40px), var(--container)); }
      .section { padding: 84px 0; }
      .hero { min-height: auto; padding-top: calc(var(--header-height) + 70px); }
      .metrics-grid { grid-template-columns: repeat(2, 1fr); }
      .metric:nth-child(2) { border-right: 0; }
      .metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
      .transformation-grid { grid-template-columns: 1fr; }
      .transform-arrow { transform: rotate(90deg); text-align: center; }
      .flagship-card { gap: 38px; }
      .next-card { align-items: flex-start; flex-direction: column; }
      .footer-inner { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 560px) {
      .container { width: min(calc(100% - 32px), var(--container)); }
      .brand-role { display: none; }
      .hero h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
      .hero-actions { flex-direction: column; }
      .hero-actions .button { width: 100%; }
      .hero-meta { display: grid; gap: 10px; }
      .architecture-card { padding: 20px; }
      .flow-row,
      .system-map-row { grid-template-columns: 1fr; }
      .metrics-grid { grid-template-columns: 1fr; }
      .metric { border-right: 0; border-bottom: 1px solid var(--border); }
      .metric:last-child { border-bottom: 0; }
      .metric:nth-child(2) { border-right: 0; }
      .flagship-card { padding: 30px 22px; }
      .system-panel { padding: 18px; }
      .project-facts { display: grid; grid-template-columns: 1fr 1fr; }
      .fact-chip { justify-content: center; }
      .mobile-menu { padding-inline: 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

/* Multi-page consultancy additions */
.brand-logo {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
}
.brand-logo img {
  width: auto;
  height: 46px;
  object-fit: contain;
}

.page-hero {
  padding: calc(var(--header-height) + 88px) 0 88px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 28%),
    linear-gradient(180deg, var(--bg-soft), var(--bg));
}
.page-hero.compact { padding-bottom: 68px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; color: var(--text-dim); font-size: .84rem; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs span[aria-hidden="true"] { color: var(--border-strong); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 72px; align-items: center; }
.page-title { margin: 0; max-width: 940px; font-family: "Manrope", sans-serif; font-size: clamp(3rem, 6.5vw, 5.8rem); line-height: .98; letter-spacing: -.06em; }
.page-title.small { font-size: clamp(2.8rem, 5vw, 4.7rem); }
.page-lead { max-width: 820px; margin: 26px 0 0; color: var(--text-soft); font-size: clamp(1.08rem, 1.8vw, 1.3rem); }
.hero-panel { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.hero-panel dl { display: grid; gap: 18px; margin: 0; }
.hero-panel dl div { display: grid; grid-template-columns: 104px 1fr; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.hero-panel dl div:last-child { padding-bottom: 0; border-bottom: 0; }
.hero-panel dt { color: var(--text-dim); font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-panel dd { margin: 0; color: var(--text); font-weight: 600; line-height: 1.45; }

.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.badge { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft); font-size: .78rem; font-weight: 650; }
.badge.live { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.badge.blue { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 35%, var(--border)); }
.badge.violet { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 35%, var(--border)); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; align-items: start; }
.prose { max-width: 820px; }
.prose h2, .prose h3 { font-family: "Manrope", sans-serif; letter-spacing: -.035em; line-height: 1.12; }
.prose h2 { margin: 76px 0 24px; font-size: clamp(2rem, 3.5vw, 3rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 42px 0 14px; font-size: 1.5rem; }
.prose p { margin: 0 0 22px; color: var(--text-soft); }
.prose strong { color: var(--text); }
.prose ul { margin: 20px 0 26px; padding: 0; list-style: none; }
.prose li { position: relative; margin: 11px 0; padding-left: 26px; color: var(--text-soft); }
.prose li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.prose blockquote { margin: 36px 0; padding: 28px 30px; border-left: 3px solid var(--brand); background: var(--surface); color: var(--text); font-family: "Manrope", sans-serif; font-size: 1.25rem; line-height: 1.55; }

.sticky-aside { position: sticky; top: calc(var(--header-height) + 28px); display: grid; gap: 18px; }
.aside-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.aside-card h2, .aside-card h3 { margin: 0 0 15px; font-family: "Manrope", sans-serif; font-size: 1.08rem; }
.aside-card ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.aside-card li, .aside-card a { color: var(--text-soft); font-size: .88rem; line-height: 1.45; }
.aside-card a:hover { color: var(--brand); }

.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.cards-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-card { display: flex; flex-direction: column; min-height: 100%; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: transform 160ms ease, border-color 160ms ease; }
.content-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.content-card .card-label { margin-bottom: 20px; color: var(--brand); font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.content-card h2, .content-card h3 { margin: 0; font-family: "Manrope", sans-serif; font-size: 1.45rem; line-height: 1.18; letter-spacing: -.035em; }
.content-card p { margin: 17px 0 24px; color: var(--text-soft); font-size: .94rem; }
.content-card .card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.content-card .card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; color: var(--text); font-weight: 700; }
.content-card .card-link:hover { color: var(--brand); }
.content-card.featured { grid-column: span 2; background: linear-gradient(135deg, var(--surface-elevated), var(--surface)); }

.services-grid, .principles-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; margin-top: 48px; }
.service-item, .principle-item { padding: 30px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.service-item h3, .principle-item h3 { margin: 0 0 13px; font-family: "Manrope", sans-serif; font-size: 1.35rem; letter-spacing: -.025em; }
.service-item p, .principle-item p { margin: 0; color: var(--text-soft); }
.service-index { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 20px; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: 10px; color: var(--brand); font-family: "IBM Plex Mono", monospace; font-size: .72rem; }

.case-section { padding: 104px 0; border-bottom: 1px solid var(--border); }
.case-section.alt { background: var(--bg-soft); }
.case-section:last-of-type { border-bottom: 0; }
.case-heading { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; margin-bottom: 44px; }
.case-heading .number { color: var(--brand); font-family: "IBM Plex Mono", monospace; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.case-heading h2 { margin: 0; max-width: 820px; font-family: "Manrope", sans-serif; font-size: clamp(2.25rem, 4vw, 3.8rem); line-height: 1.05; letter-spacing: -.05em; }
.case-copy { max-width: 820px; margin-left: 268px; }
.case-copy p { color: var(--text-soft); }

.workflow { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 44px; counter-reset: workflow; }
.workflow-step { position: relative; min-height: 160px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); counter-increment: workflow; }
.workflow-step::before { content: counter(workflow, decimal-leading-zero); display: block; margin-bottom: 24px; color: var(--brand); font-family: "IBM Plex Mono", monospace; font-size: .72rem; }
.workflow-step h3 { margin: 0 0 10px; font-family: "Manrope", sans-serif; font-size: 1.05rem; }
.workflow-step p { margin: 0; color: var(--text-soft); font-size: .84rem; line-height: 1.55; }

.architecture-large { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.arch-grid { display: grid; gap: 16px; }
.arch-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.arch-row.one { grid-template-columns: minmax(0,1fr); max-width: 520px; margin-inline: auto; }
.arch-row.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.arch-node { min-height: 92px; display: flex; flex-direction: column; justify-content: center; padding: 18px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-muted); text-align: center; }
.arch-node small { color: var(--text-dim); font-family: "IBM Plex Mono", monospace; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.arch-node strong { margin-top: 7px; font-size: .88rem; line-height: 1.35; }
.arch-node.external { border-color: color-mix(in srgb, var(--blue) 48%, var(--border)); }
.arch-node.data { border-color: color-mix(in srgb, var(--violet) 48%, var(--border)); }
.arch-node.internal { border-color: color-mix(in srgb, var(--brand) 48%, var(--border)); }
.arch-node.warning { border-color: color-mix(in srgb, var(--amber) 48%, var(--border)); }
.arch-node.complete { border-color: color-mix(in srgb, var(--teal) 48%, var(--border)); }
.arch-arrow { display: grid; place-items: center; min-height: 28px; color: var(--brand); font-family: "IBM Plex Mono", monospace; }
.arch-note { margin: 22px 0 0; color: var(--text-dim); font-size: .82rem; text-align: center; }

.decision-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 42px; }
.decision { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.decision .decision-label { display: block; margin-bottom: 14px; color: var(--brand); font-family: "IBM Plex Mono", monospace; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.decision h3 { margin: 0 0 12px; font-family: "Manrope", sans-serif; font-size: 1.25rem; }
.decision p { margin: 0; color: var(--text-soft); }

.impact-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 44px; }
.impact-card { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.impact-card strong { display: block; margin-bottom: 10px; color: var(--brand); font-family: "Manrope", sans-serif; font-size: 1.25rem; }
.impact-card p { margin: 0; color: var(--text-soft); font-size: .91rem; }

.tech-table { width: 100%; border-collapse: collapse; margin-top: 34px; border: 1px solid var(--border); background: var(--surface); }
.tech-table th, .tech-table td { padding: 18px 20px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tech-table tr:last-child th, .tech-table tr:last-child td { border-bottom: 0; }
.tech-table th { width: 180px; color: var(--text); font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.tech-table td { color: var(--text-soft); }

.cta-band { padding: 88px 0; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 13%, var(--surface)), var(--surface)); border-block: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border)); }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 42px; }
.cta-band h2 { margin: 0; max-width: 760px; font-family: "Manrope", sans-serif; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.08; letter-spacing: -.045em; }

.contact-form { display: grid; gap: 18px; padding: 34px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.form-field { display: grid; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { color: var(--text-soft); font-size: .84rem; font-weight: 650; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); color: var(--text); }
.form-field textarea { min-height: 170px; resize: vertical; }
.form-note { margin: 0; color: var(--text-dim); font-size: .79rem; }

.timeline-list { display: grid; gap: 0; margin: 40px 0 0; }
.timeline-entry { position: relative; display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 28px; padding: 0 0 32px 28px; border-left: 1px solid var(--border-strong); }
.timeline-entry::before { content: ""; position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px var(--bg); }
.timeline-entry:last-child { padding-bottom: 0; }
.timeline-entry .time { color: var(--text-dim); font-family: "IBM Plex Mono", monospace; font-size: .68rem; text-transform: uppercase; }
.timeline-entry h3 { margin: 0 0 8px; font-family: "Manrope", sans-serif; font-size: 1.1rem; }
.timeline-entry p { margin: 0; color: var(--text-soft); font-size: .9rem; }

@media (max-width: 1080px) {
  .page-hero-grid, .content-grid { grid-template-columns: 1fr; }
  .hero-panel { max-width: 720px; }
  .sticky-aside { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cards-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workflow { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .case-copy { margin-left: 0; }
}

@media (max-width: 820px) {
  .brand-logo img { height: 40px; }
  .cards-grid, .cards-grid.two, .services-grid, .principles-grid, .decision-grid, .impact-grid { grid-template-columns: 1fr; }
  .content-card.featured { grid-column: auto; }
  .case-heading { grid-template-columns: 1fr; gap: 12px; }
  .arch-row, .arch-row.four { grid-template-columns: 1fr; }
  .cta-band-inner { align-items: flex-start; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .timeline-entry { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 560px) {
  .page-hero { padding-top: calc(var(--header-height) + 54px); }
  .sticky-aside { grid-template-columns: 1fr; }
  .workflow { grid-template-columns: 1fr; }
  .hero-panel dl div { grid-template-columns: 1fr; gap: 6px; }
  .tech-table, .tech-table tbody, .tech-table tr, .tech-table th, .tech-table td { display: block; width: 100%; }
  .tech-table th { padding-bottom: 5px; border-bottom: 0; }
  .tech-table td { padding-top: 5px; }
}
.desktop-nav a[aria-current="page"], .mobile-menu a[aria-current="page"] { color: var(--text); }
.desktop-nav a[aria-current="page"]::after { content: ""; display: block; width: 18px; height: 2px; margin: 5px auto 0; border-radius: 2px; background: var(--brand); }
.brand-logo img { padding: 0; border-radius: 0; background: transparent; }
.logo-fallback { display: none; font-family: "Manrope", sans-serif; font-weight: 800; color: var(--text); }

/* Homepage hero portrait integrated with the architecture panel */
.architecture-card {
  padding-bottom: 170px;
}

.architect-profile {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 0;
  left: 18px;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface-elevated) 98%, transparent) 0 56%, transparent 78%),
    radial-gradient(circle at 82% 82%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 56%);
}

.architect-profile::before {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 14px;
  width: 178px;
  height: 118px;
  border: 1px solid color-mix(in srgb, var(--brand) 36%, var(--border));
  border-radius: 50% 50% 18px 18px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  box-shadow: 0 0 48px color-mix(in srgb, var(--brand) 10%, transparent);
}

.architect-profile-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 4px;
  max-width: 245px;
  padding: 24px 0 24px 8px;
}

.architect-profile-copy span,
.architect-profile-copy small {
  color: var(--text-dim);
  font-family: "IBM Plex Mono", monospace;
  font-size: .64rem;
  line-height: 1.55;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.architect-profile-copy strong {
  font-family: "Manrope", sans-serif;
  font-size: 1.1rem;
  line-height: 1.2;
}

.architect-profile img {
  position: absolute;
  z-index: 2;
  right: 2px;
  bottom: 0;
  width: min(47%, 210px);
  height: auto;
  max-height: 190px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .34));
}

@media (max-width: 1080px) {
  .architecture-card { max-width: 760px; }
  .architect-profile img { width: min(39%, 220px); }
}

@media (max-width: 560px) {
  .architecture-card { padding-bottom: 205px; }
  .architect-profile {
    min-height: 188px;
    align-items: flex-start;
  }
  .architect-profile-copy {
    max-width: 58%;
    padding: 20px 0 20px 2px;
  }
  .architect-profile-copy small {
    font-size: .57rem;
  }
  .architect-profile img {
    width: 48%;
    max-height: 180px;
  }
  .architect-profile::before {
    right: 2px;
    width: 48%;
    height: 128px;
  }
}


/* About page portrait */
.about-hero-panel {
  width: 100%;
  max-width: 480px;
  justify-self: end;
  padding: 16px;
  overflow: hidden;
}

.about-portrait {
  position: relative;
  min-height: 390px;
  margin: 0 0 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-lg) - 7px);
  background:
    radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 42%),
    var(--surface-muted);
}

.about-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 54%, rgba(4, 10, 18, .88) 100%);
  pointer-events: none;
}

.about-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  max-height: 470px;
  object-fit: cover;
  object-position: center top;
  transition: transform 360ms ease;
}

.about-portrait:hover img {
  transform: scale(1.015);
}

.about-portrait figcaption {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: 20px;
  left: 22px;
  display: grid;
  gap: 5px;
}

.about-portrait figcaption strong {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.25rem;
  line-height: 1.2;
}

.about-portrait figcaption span {
  color: rgba(255, 255, 255, .73);
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem;
  line-height: 1.55;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.about-hero-panel dl {
  padding: 4px 12px 8px;
}

@media (max-width: 1080px) {
  .about-hero-panel {
    max-width: 720px;
    justify-self: start;
  }
  .about-portrait {
    max-width: 480px;
  }
}

@media (max-width: 560px) {
  .about-hero-panel { padding: 10px; }
  .about-portrait,
  .about-portrait img {
    min-height: 350px;
  }
  .about-portrait figcaption {
    right: 18px;
    bottom: 17px;
    left: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-portrait img { transition: none; }
  .about-portrait:hover img { transform: none; }
}

/* About page refinement pass */
.about-page-hero {
  padding-top: calc(var(--header-height) + 58px);
}

.about-page-hero .page-hero-grid {
  grid-template-columns: minmax(0, 1.32fr) minmax(360px, .68fr);
  align-items: start;
  gap: 64px;
}

.about-hero-copy {
  padding-top: 10px;
}

.about-page-hero .page-title.small {
  max-width: 790px;
  font-size: clamp(2.75rem, 4.45vw, 4.25rem);
  line-height: 1.02;
}

.about-page-hero .page-lead {
  max-width: 780px;
  line-height: 1.7;
}

.about-hero-actions {
  margin-top: 32px;
}

.about-hero-panel {
  max-width: 450px;
}

.about-portrait {
  min-height: 360px;
  margin-bottom: 20px;
}

.about-portrait img {
  min-height: 360px;
  max-height: 430px;
}

.about-portrait figcaption span {
  font-size: .68rem;
  line-height: 1.6;
  letter-spacing: .055em;
  text-transform: none;
}

.about-hero-panel dl {
  gap: 15px;
}

.about-hero-panel dl div {
  grid-template-columns: 112px 1fr;
  gap: 16px;
  padding-bottom: 15px;
}

@media (max-width: 1080px) {
  .about-page-hero .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .about-hero-copy {
    padding-top: 0;
  }

  .about-hero-panel {
    max-width: 620px;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .about-page-hero {
    padding-top: calc(var(--header-height) + 38px);
  }

  .about-page-hero .page-title.small {
    font-size: clamp(2.55rem, 12vw, 3.5rem);
  }

  .about-hero-actions {
    flex-direction: column;
  }

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

  .about-hero-panel dl div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Horizontal overflow safeguards and responsive header refinement */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

.site-header,
main,
.hero,
.site-footer {
  max-width: 100%;
}

.header-inner > *,
.hero-grid > *,
.positioning-grid > *,
.flagship-card > *,
.flow-row > *,
.system-map-row > *,
.arch-row > *,
.cta-band-inner > * {
  min-width: 0;
}

.architecture-header {
  flex-wrap: wrap;
}

.architecture-label,
.architecture-live,
.flow-node strong,
.system-box strong,
.arch-node strong {
  overflow-wrap: anywhere;
}

/* Collapse the full desktop navigation before it can exceed the container. */
@media (max-width: 1220px) {
  .desktop-nav { display: none; }
  .header-actions .button { display: none; }
  .menu-toggle { display: inline-grid; }
}


/* Brand lockup: full logo + consultancy descriptor (no duplicated name) */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  min-width: 0;
}

.brand-lockup .brand-role {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.70rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.045em;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .brand-lockup { gap: 12px; }
  .brand-lockup .brand-role {
    padding-left: 12px;
    font-size: 0.66rem;
  }
}

@media (max-width: 680px) {
  .brand-lockup .brand-role { display: none; }
}

/* Homepage flagship architecture preview v2 */
@media (min-width: 1081px) {
  .flagship-card {
    grid-template-columns: minmax(0, 5fr) minmax(560px, 7fr);
    gap: 46px;
  }
}

.system-map-v2 {
  gap: 10px;
}

.system-map-v2 .system-box {
  min-height: 72px;
  padding: 13px 14px;
}

.system-map-v2 .system-box strong {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-size: .77rem;
  line-height: 1.28;
}

.system-map-v2 .system-box small {
  display: block;
  margin-top: 5px;
  color: var(--text-dim);
  font-size: .64rem;
  line-height: 1.35;
}

.system-box-wide {
  width: 100%;
  min-height: 66px !important;
  text-align: center;
}

.pipeline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
}

.pipeline-arrow {
  display: grid;
  place-items: center;
  color: var(--brand);
  font-family: "IBM Plex Mono", monospace;
  font-size: .9rem;
}

.operations-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 10px;
}

.operations-box {
  min-height: 96px !important;
}

@media (max-width: 680px) {
  .pipeline-row,
  .operations-row {
    grid-template-columns: 1fr;
  }
  .pipeline-arrow {
    min-height: 12px;
    transform: rotate(90deg);
  }
  .system-map-v2 .system-map-row {
    grid-template-columns: 1fr;
  }
}


/* About page language credentials */
.profile-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 2px 12px 10px;
}

.profile-credentials span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .025em;
}

.language-section {
  border-top: 1px solid var(--border);
}

.language-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 22px;
  margin-top: 44px;
}

.language-card {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.language-card.featured {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 38%),
    var(--surface);
}

.language-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.language-code {
  color: var(--brand);
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
}

.language-card h3 {
  margin: 0 0 8px;
  font-family: "Manrope", sans-serif;
  font-size: 1.45rem;
}

.language-card > p,
.language-note {
  margin: 0;
  color: var(--text-soft);
  font-size: .93rem;
  line-height: 1.65;
}

.language-highlight {
  margin: 18px 0 12px;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: .95;
}

.language-scores {
  display: grid;
  gap: 0;
  margin: 22px 0 0;
}

.language-scores div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.language-scores dt {
  color: var(--text-soft);
  font-size: .83rem;
}

.language-scores dd {
  margin: 0;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: .82rem;
  text-align: right;
}

.language-scores small {
  display: block;
  margin-top: 5px;
  color: var(--brand);
  font-family: "Inter", sans-serif;
  font-size: .68rem;
  line-height: 1.35;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem;
}

.status-badge.success {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  color: var(--brand);
}

@media (max-width: 980px) {
  .language-grid {
    grid-template-columns: 1fr 1fr;
  }
  .language-card.featured {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .language-grid {
    grid-template-columns: 1fr;
  }
  .language-card.featured {
    grid-column: auto;
  }
  .language-scores div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .language-scores dd {
    text-align: left;
  }
  .profile-credentials {
    padding-inline: 4px;
  }
}

/* Homepage business-first capability spectrum */
.business-first-section .positioning-grid {
  align-items: center;
}
.solution-spectrum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.solution-tile {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.solution-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  background: color-mix(in srgb, var(--surface-muted) 88%, var(--brand) 12%);
}
.solution-kicker {
  display: block;
  margin-bottom: 11px;
  color: var(--brand);
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.solution-tile strong {
  display: block;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 1.03rem;
  line-height: 1.35;
  letter-spacing: -.018em;
}
.solution-tile strong span {
  padding-inline: 3px;
  color: var(--brand);
}
.solution-tile p {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: .84rem;
  line-height: 1.55;
}
.transform-example {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 44px;
  align-items: center;
  margin-top: 62px;
  padding-top: 58px;
  border-top: 1px solid var(--border);
}
.transform-example-heading h3 {
  margin: 10px 0 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.04em;
}
.transform-example .transformation-card { padding: 28px; }

@media (max-width: 1080px) {
  .transform-example { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .solution-spectrum { grid-template-columns: 1fr; padding: 16px; }
  .solution-tile { padding: 20px; }
}


/* =========================================================
   Flagship case study template v12
   ========================================================= */
.case-study-hero { padding-bottom: 92px; }
.case-study-hero .breadcrumbs { margin-bottom: 34px; }
.case-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(330px, .58fr);
  gap: 72px;
  align-items: start;
}
.case-hero-copy { min-width: 0; }
.case-hero-lead {
  max-width: 900px;
  margin: 28px 0 0;
  color: var(--text-soft);
  font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  line-height: 1.72;
}
.case-hero-badges { margin-top: 30px; }
.case-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.case-snapshot {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--surface-elevated), var(--surface));
  box-shadow: var(--shadow);
}
.snapshot-label {
  margin-bottom: 20px;
  color: var(--brand);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.snapshot-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.snapshot-metrics div {
  min-width: 0;
  padding: 16px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
}
.snapshot-metrics strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 1.25rem;
  line-height: 1;
}
.snapshot-metrics span { color: var(--text-dim); font-size: .68rem; line-height: 1.35; }
.case-snapshot dl { display: grid; gap: 0; margin: 0; }
.case-snapshot dl div { padding: 17px 0; border-top: 1px solid var(--border); }
.case-snapshot dt {
  margin-bottom: 7px;
  color: var(--text-dim);
  font-family: "IBM Plex Mono", monospace;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-snapshot dd { margin: 0; color: var(--text-soft); font-size: .89rem; line-height: 1.55; }
.overview-copy { margin-bottom: 42px; }
.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-top: 42px;
}
.overview-grid article {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.overview-grid article > span {
  display: block;
  margin-bottom: 15px;
  color: var(--brand);
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.overview-grid h3 { margin: 0 0 12px; font-family: "Manrope", sans-serif; font-size: 1.18rem; line-height: 1.25; }
.overview-grid p { margin: 0; color: var(--text-soft); font-size: .89rem; line-height: 1.62; }
.case-quote {
  max-width: 980px;
  margin: 34px 0 0 268px;
  padding: 24px 28px;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  font-weight: 600;
  line-height: 1.55;
}
.case-architecture {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface-elevated), var(--surface));
  box-shadow: var(--shadow);
}
.architecture-stage {
  display: grid;
  grid-template-columns: 145px minmax(0,1fr);
  gap: 24px;
  align-items: stretch;
}
.stage-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 16px;
  border-right: 1px solid var(--border);
}
.stage-label span {
  color: var(--brand);
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.stage-label strong { margin-top: 7px; font-size: .84rem; line-height: 1.35; }
.stage-content { min-width: 0; }
.stores-stage { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.data-stage { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr; gap: 8px; align-items: center; }
.operations-stage { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.arch-card {
  min-width: 0;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-muted);
}
.arch-card small {
  display: block;
  color: var(--text-dim);
  font-family: "IBM Plex Mono", monospace;
  font-size: .57rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.arch-card strong { display: block; margin-top: 8px; color: var(--text); font-size: .91rem; line-height: 1.4; }
.arch-card p { margin: 9px 0 0; color: var(--text-dim); font-size: .74rem; line-height: 1.5; }
.arch-card.external { border-color: color-mix(in srgb, var(--blue) 50%, var(--border)); }
.arch-card.data { border-color: color-mix(in srgb, var(--violet) 50%, var(--border)); }
.arch-card.internal { border-color: color-mix(in srgb, var(--brand) 48%, var(--border)); }
.arch-card.process { border-color: color-mix(in srgb, var(--amber) 48%, var(--border)); }
.arch-card.warning { border-color: color-mix(in srgb, var(--amber) 48%, var(--border)); }
.arch-card.complete { border-color: color-mix(in srgb, var(--teal) 48%, var(--border)); }
.arch-card.wide { text-align: center; }
.arch-flow-arrow { display: grid; place-items: center; color: var(--brand); font-family: "IBM Plex Mono", monospace; font-size: 1rem; }
.architecture-connector {
  display: grid;
  grid-template-columns: 145px minmax(0,1fr);
  gap: 24px;
  min-height: 52px;
  align-items: center;
}
.architecture-connector::before { content: ""; }
.architecture-connector span { grid-column: 2; justify-self: center; color: var(--text-dim); font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.architecture-connector b { grid-column: 2; justify-self: center; margin-top: -12px; color: var(--brand); font-weight: 500; }
.architecture-connector.sync b { color: var(--teal); }
.final-stage .stage-content { display: grid; }
.architecture-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.architecture-insights div { padding: 18px; border-radius: 12px; background: var(--surface-muted); }
.architecture-insights span { display: block; margin-bottom: 8px; color: var(--text); font-weight: 700; font-size: .86rem; }
.architecture-insights p { margin: 0; color: var(--text-dim); font-size: .76rem; line-height: 1.55; }

@media (max-width: 1120px) {
  .case-hero-grid { grid-template-columns: 1fr; }
  .case-snapshot { max-width: 820px; }
  .case-quote { margin-left: 0; }
  .architecture-stage, .architecture-connector { grid-template-columns: 1fr; gap: 12px; }
  .stage-label { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 12px; }
  .architecture-connector::before { display: none; }
  .architecture-connector span, .architecture-connector b { grid-column: 1; }
  .data-stage { grid-template-columns: 1fr; }
  .arch-flow-arrow { transform: rotate(90deg); min-height: 18px; }
  .operations-stage { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .case-study-hero { padding-bottom: 64px; }
  .case-hero-actions { flex-direction: column; }
  .case-hero-actions .button { width: 100%; }
  .snapshot-metrics, .overview-grid, .stores-stage, .operations-stage, .architecture-insights { grid-template-columns: 1fr; }
  .case-architecture { padding: 20px; }
  .case-quote { padding: 20px; }
}

/* Product Experience — Shopify Returns case study */
.product-intro { max-width: 900px; }
.privacy-note {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text-dim) !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem !important;
  line-height: 1.55;
}
.product-gallery {
  display: grid;
  gap: 32px;
  margin-top: 52px;
}
.product-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.product-shot > a {
  display: block;
  overflow: hidden;
  background: #eef2f7;
  border-bottom: 1px solid var(--border);
}
.product-shot img {
  width: 100%;
  height: auto;
  transition: transform .35s ease;
}
.product-shot > a:hover img { transform: scale(1.008); }
.product-shot figcaption {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: 18px;
  padding: 24px 26px 27px;
}
.shot-index {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--border));
  border-radius: 10px;
  color: var(--brand);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
}
.product-shot h3 {
  margin: 0 0 9px;
  font-family: "Manrope", sans-serif;
  font-size: 1.24rem;
  letter-spacing: -.02em;
}
.product-shot p {
  margin: 0;
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.62;
}
.shot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.shot-tags span {
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  background: var(--bg-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: .62rem;
}
.product-shot-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
  align-items: start;
}
.product-shot-pair .product-shot > a {
  aspect-ratio: 1.12 / 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.product-shot-pair .product-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.detail-shot > a { background: #fff; }

@media (max-width: 900px) {
  .product-shot-pair { grid-template-columns: 1fr; }
  .product-shot-pair .product-shot > a { aspect-ratio: auto; }
  .product-shot-pair .product-shot img { height: auto; object-fit: contain; }
}
@media (max-width: 600px) {
  .product-gallery { gap: 22px; margin-top: 38px; }
  .product-shot figcaption { grid-template-columns: 1fr; padding: 20px; }
  .shot-index { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-shot img { transition: none; }
  .product-shot > a:hover img { transform: none; }
}


/* RMA processing showcase */
.rma-ops-showcase .section-heading {
  max-width: 820px;
  margin-bottom: 34px;
}
.product-shot--wide {
  overflow: hidden;
  border: 1px solid var(--border, #26394f);
  border-radius: 22px;
  background: var(--surface, #0f1b2d);
}
.product-shot--wide img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
.product-shot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border, #26394f);
}
.product-shot__header > div {
  display: flex;
  align-items: center;
  gap: 14px;
}
.shot-index,
.callout-no {
  font-family: "IBM Plex Mono", monospace;
  color: var(--brand, #80db66);
  letter-spacing: .08em;
}
.shot-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--secondary-text, #a9b7c8);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.product-shot__caption {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border, #26394f);
}
.product-shot__caption > div {
  padding: 22px;
  min-width: 0;
}
.product-shot__caption > div + div {
  border-left: 1px solid var(--border, #26394f);
}
.product-shot__caption strong {
  display: block;
  margin: 8px 0 7px;
}
.product-shot__caption p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--secondary-text, #a9b7c8);
}
@media (max-width: 900px) {
  .product-shot__caption {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-shot__caption > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--border, #26394f);
  }
  .product-shot__caption > div:nth-child(4) {
    border-top: 1px solid var(--border, #26394f);
  }
}
@media (max-width: 560px) {
  .product-shot__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-shot__caption {
    grid-template-columns: 1fr;
  }
  .product-shot__caption > div + div,
  .product-shot__caption > div:nth-child(3),
  .product-shot__caption > div:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--border, #26394f);
  }
}


/* Shopify migration case study */
.migration-journey {
  display: grid;
  grid-template-columns: repeat(11, auto);
  align-items: stretch;
  gap: 10px;
  margin-top: 40px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.migration-journey article {
  min-width: 170px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.migration-journey article span { color: var(--brand); font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .08em; }
.migration-journey article h3 { margin: 10px 0 8px; font-family: "Manrope", sans-serif; font-size: 1.05rem; }
.migration-journey article p { margin: 0; color: var(--text-soft); font-size: .82rem; line-height: 1.55; }
.migration-journey > b { align-self: center; color: var(--brand); font-size: 1.25rem; font-weight: 500; }
.migration-architecture {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.18fr) minmax(0, .94fr);
  gap: 20px;
  align-items: stretch;
}
.migration-arch-column, .migration-arch-middle { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.arch-kicker { color: var(--text-dim); font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.migration-node { padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-muted); min-width: 0; }
.migration-node small { display: block; margin-bottom: 8px; color: var(--text-dim); font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; }
.migration-node strong { display: block; color: var(--text); font-family: "Manrope", sans-serif; font-size: 1.05rem; line-height: 1.25; }
.migration-node p { margin: 8px 0 0; color: var(--text-soft); font-size: .8rem; line-height: 1.55; }
.migration-node.danger { border-color: color-mix(in srgb, var(--coral) 44%, var(--border)); }
.migration-node.data { border-color: color-mix(in srgb, var(--violet) 48%, var(--border)); }
.migration-node.process { border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); }
.migration-node.success { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.migration-line, .migration-arrow { color: var(--brand); text-align: center; font-family: "IBM Plex Mono", monospace; font-size: .72rem; }
.migration-arrow { font-size: 1.35rem; }
.data-migration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 40px; }
.data-migration-grid article { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.data-migration-grid article span { color: var(--brand); font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.data-migration-grid h3 { margin: 10px 0; font-family: "Manrope", sans-serif; font-size: 1.35rem; }
.data-migration-grid p { margin: 0; color: var(--text-soft); font-size: .9rem; }
.sync-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto minmax(0,1.25fr); gap: 14px; align-items: stretch; margin-top: 38px; }
.sync-strip > div { padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.sync-strip small { display: block; margin-bottom: 7px; color: var(--text-dim); font-family: "IBM Plex Mono", monospace; font-size: .65rem; text-transform: uppercase; }
.sync-strip strong { font-family: "Manrope", sans-serif; }
.sync-strip > b { align-self: center; color: var(--brand); font-size: 1.3rem; font-weight: 500; }
.sync-strip .sync-target { border-color: color-mix(in srgb, var(--brand) 46%, var(--border)); }
.migration-evidence-placeholder { margin-top: 34px; padding: 34px; border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--border)); border-radius: var(--radius-lg); background: var(--surface); }
.migration-evidence-placeholder span { display: block; margin-bottom: 10px; color: var(--brand); font-family: "IBM Plex Mono", monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.migration-evidence-placeholder strong { display: block; margin-bottom: 10px; font-family: "Manrope", sans-serif; font-size: 1.25rem; }
.migration-evidence-placeholder p { margin: 0; color: var(--text-soft); }
@media (max-width: 980px) {
  .migration-architecture { grid-template-columns: 1fr; }
  .migration-arrow { transform: rotate(90deg); }
  .data-migration-grid, .sync-strip { grid-template-columns: 1fr; }
  .sync-strip > b { text-align: center; transform: rotate(90deg); }
}
@media (max-width: 700px) {
  .migration-journey { grid-template-columns: 1fr; overflow: visible; }
  .migration-journey article { min-width: 0; }
  .migration-journey > b { text-align: center; transform: rotate(90deg); }
}


/* Dual-brand Shopify modernization case study */
.store-compare-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:38px; }
.store-compare-card { padding:30px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.store-compare-card.lead { border-color:color-mix(in srgb,var(--brand) 48%,var(--border)); background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 7%,var(--surface)),var(--surface)); }
.store-compare-card > span { color:var(--brand); font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.store-compare-card h3 { margin:10px 0 22px; font-family:"Manrope",sans-serif; font-size:1.55rem; }
.store-compare-card dl { margin:0; }
.store-compare-card dl div { display:grid; grid-template-columns:130px 1fr; gap:16px; padding:11px 0; border-top:1px solid var(--border); }
.store-compare-card dt { color:var(--text-dim); font-size:.78rem; }
.store-compare-card dd { margin:0; color:var(--text-soft); font-size:.88rem; line-height:1.5; }
.challenge-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:38px; }
.challenge-grid article { padding:24px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.challenge-grid strong { display:block; margin-bottom:8px; font-family:"Manrope",sans-serif; }
.challenge-grid p { margin:0; color:var(--text-soft); font-size:.86rem; line-height:1.6; }
.dual-migration-architecture { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr) auto minmax(0,1fr); gap:18px; align-items:center; margin-top:42px; }
.legacy-stack,.modernization-stack,.target-stack { display:flex; flex-direction:column; gap:14px; min-width:0; }
.architecture-flow-arrow { color:var(--brand); font-size:1.8rem; }
.catalog-flow,.seo-transition-flow,.repeatable-pattern { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap:12px; align-items:center; margin-top:38px; }
.catalog-flow>div,.seo-transition-flow>div,.repeatable-pattern>div { padding:20px; border:1px solid var(--border); border-radius:14px; background:var(--surface); min-width:0; }
.catalog-flow small,.seo-transition-flow small { display:block; margin-bottom:7px; color:var(--brand); font-family:"IBM Plex Mono",monospace; font-size:.65rem; }
.catalog-flow strong,.seo-transition-flow strong,.repeatable-pattern strong { display:block; font-family:"Manrope",sans-serif; font-size:.92rem; }
.catalog-flow b,.seo-transition-flow b,.repeatable-pattern b { color:var(--brand); font-weight:500; }
.seo-transition-flow { grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; }
.seo-transition-flow p { margin:7px 0 0; color:var(--text-soft); font-size:.77rem; line-height:1.5; }
.commerce-scenarios { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:36px; }
.commerce-scenarios article { padding:28px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.commerce-scenarios article.featured { border-color:color-mix(in srgb,var(--brand) 48%,var(--border)); }
.commerce-scenarios span { color:var(--brand); font-family:"IBM Plex Mono",monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; }
.commerce-scenarios h3 { margin:10px 0 9px; font-family:"Manrope",sans-serif; }
.commerce-scenarios p { margin:0; color:var(--text-soft); font-size:.87rem; line-height:1.6; }
.growth-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:36px; }
.growth-grid article { padding:27px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.growth-grid span { color:var(--brand); font-family:"IBM Plex Mono",monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; }
.growth-grid h3 { margin:10px 0 8px; font-family:"Manrope",sans-serif; }
.growth-grid p { margin:0; color:var(--text-soft); font-size:.87rem; line-height:1.6; }
.stakeholder-strip { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.stakeholder-strip span { padding:11px 15px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-soft); font-size:.82rem; }
.repeatable-pattern { grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; }
.repeatable-pattern span { display:block; margin-top:7px; color:var(--text-soft); font-size:.76rem; line-height:1.45; }
@media (max-width:1050px){
  .dual-migration-architecture { grid-template-columns:1fr; }
  .architecture-flow-arrow { text-align:center; transform:rotate(90deg); }
  .catalog-flow,.repeatable-pattern { grid-template-columns:1fr; }
  .catalog-flow>b,.repeatable-pattern>b { text-align:center; transform:rotate(90deg); }
  .seo-transition-flow { grid-template-columns:1fr; }
  .seo-transition-flow>b { text-align:center; transform:rotate(90deg); }
}
@media (max-width:820px){ .store-compare-grid,.challenge-grid,.commerce-scenarios,.growth-grid { grid-template-columns:1fr; } }
@media (max-width:560px){ .store-compare-card dl div { grid-template-columns:1fr; gap:4px; } }


/* Shopify migration execution workstreams */
.migration-execution .case-copy {
  max-width: 900px;
  margin-bottom: 30px;
}
.migration-workstream-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.migration-workstream-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border, #26394f);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(128,219,102,.045), transparent 45%),
    var(--surface, #0f1b2d);
}
.workstream-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border, #26394f);
}
.workstream-head > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(128,219,102,.10);
  border: 1px solid rgba(128,219,102,.25);
  color: var(--brand, #80db66);
  font: 500 13px/1 "IBM Plex Mono", monospace;
}
.workstream-head small {
  display: block;
  margin-bottom: 5px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.workstream-head h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.35;
}
.workstream-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.workstream-list li {
  position: relative;
  min-width: 0;
  padding-left: 18px;
  color: var(--secondary-text, #a9b7c8);
  font-size: 14px;
  line-height: 1.5;
}
.workstream-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand, #80db66);
  font-weight: 700;
}
@media (max-width: 900px) {
  .migration-workstream-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .migration-workstream-card { padding: 20px; }
  .workstream-list { grid-template-columns: 1fr; }
}


/* Shopify migration production evidence */
.production-evidence .case-copy {
  max-width: 900px;
  margin-bottom: 30px;
}
.brand-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.brand-evidence-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border, #26394f);
  border-radius: 22px;
  background: var(--surface, #0f1b2d);
}
.brand-evidence-card--lead {
  box-shadow: inset 0 1px 0 rgba(128,219,102,.16);
}
.brand-evidence-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #26394f);
}
.brand-evidence-topline span,
.brand-evidence-topline small {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brand-evidence-topline span {
  color: var(--brand, #80db66);
}
.brand-evidence-topline small {
  color: var(--secondary-text, #a9b7c8);
}
.brand-logo-panel {
  display: grid;
  place-items: center;
  min-height: 185px;
  padding: 34px;
  background: #fff;
  border-bottom: 1px solid var(--border, #26394f);
}
.brand-logo-panel img {
  display: block;
  width: auto;
  max-width: min(100%, 500px);
  max-height: 92px;
  object-fit: contain;
}
.brand-evidence-content {
  padding: 24px;
}
.brand-evidence-content h3 {
  margin: 0 0 6px;
  font-size: 25px;
}
.brand-evidence-content > p:first-of-type {
  margin: 0 0 18px;
  color: var(--brand, #80db66);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
}
.brand-proof-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.brand-proof-tags span {
  padding: 7px 10px;
  border: 1px solid var(--border, #26394f);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: var(--secondary-text, #a9b7c8);
  font-size: 12px;
}
.brand-proof-summary {
  margin: 0 0 22px;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.7;
}
.brand-live-link {
  display: inline-flex;
}
.live-site-note {
  max-width: 920px;
  margin: 22px 0 0;
  color: var(--secondary-text, #a9b7c8);
  font-size: 13px;
  line-height: 1.65;
}
.live-site-note strong {
  color: var(--primary-text, #f4f7fb);
}
@media (max-width: 850px) {
  .brand-evidence-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .brand-evidence-topline {
    align-items: flex-start;
    flex-direction: column;
  }
  .brand-logo-panel {
    min-height: 145px;
    padding: 26px 20px;
  }
  .brand-evidence-content {
    padding: 20px;
  }
}


/* Case Study 03 — AI supply-chain analytics */
.supply-chain-hero .case-hero-lead { max-width: 790px; }

.supply-architecture {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: 18px;
  align-items: center;
  margin: 34px 0 28px;
}
.supply-arch-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.supply-arch-column .migration-node {
  min-height: 138px;
}
.insight-node {
  border-color: rgba(128,219,102,.32) !important;
  background: linear-gradient(180deg, rgba(128,219,102,.09), rgba(128,219,102,.025)) !important;
}
.lifecycle-flow,
.note-intelligence-flow {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.note-intelligence-flow {
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
}
.lifecycle-flow > div,
.note-intelligence-flow > div {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background: var(--surface, #0f1b2d);
}
.lifecycle-flow small,
.note-intelligence-flow small,
.ceo-insight-flow article > span,
.analytics-lens-grid article > span {
  display: block;
  margin-bottom: 8px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lifecycle-flow strong,
.note-intelligence-flow strong {
  display: block;
  margin-bottom: 6px;
}
.lifecycle-flow span,
.note-intelligence-flow p {
  color: var(--secondary-text, #a9b7c8);
  font-size: 13px;
}
.lifecycle-flow b,
.note-intelligence-flow b {
  color: var(--secondary-text, #a9b7c8);
  font-weight: 400;
}

.analytics-lens-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-top: 28px;
}
.analytics-lens-grid article {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background: var(--surface, #0f1b2d);
}
.analytics-lens-grid h3 {
  margin: 0 0 8px;
}
.analytics-lens-grid p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.65;
}

.ceo-insight-flow {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: 18px;
  align-items: center;
  margin: 30px 0;
}
.ceo-insight-flow article {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border, #26394f);
  border-radius: 20px;
  background: var(--surface, #0f1b2d);
}
.ceo-insight-flow article.featured {
  border-color: rgba(128,219,102,.36);
  background: linear-gradient(180deg, rgba(128,219,102,.08), rgba(128,219,102,.02));
}
.ceo-insight-flow h3 {
  margin: 0 0 8px;
}
.ceo-insight-flow p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.65;
}
.ceo-insights-section .case-quote {
  margin-top: 28px;
}

@media (max-width: 1000px) {
  .supply-architecture {
    grid-template-columns: 1fr;
  }
  .supply-architecture > .architecture-flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .lifecycle-flow {
    grid-template-columns: 1fr;
  }
  .lifecycle-flow > b,
  .note-intelligence-flow > b,
  .ceo-insight-flow > .architecture-flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .note-intelligence-flow,
  .ceo-insight-flow {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .analytics-lens-grid {
    grid-template-columns: 1fr;
  }
}


/* Case Study 03 hero refinement */
.supply-chain-hero .case-hero-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
}
.supply-chain-hero .case-hero-copy {
  padding-right: 8px;
}
.supply-chain-hero .case-snapshot {
  margin-top: 2px;
}
.supply-chain-hero .snapshot-metrics strong {
  font-size: 1.08rem;
}
.supply-chain-hero .snapshot-metrics span {
  font-size: .65rem;
}
@media (max-width: 1120px) {
  .supply-chain-hero .case-hero-grid {
    grid-template-columns: 1fr;
  }
  .supply-chain-hero .case-snapshot {
    max-width: 820px;
  }
}


/* Supply-chain product evidence */
.analytics-evidence .evidence-note {
  margin-top: 18px;
  max-width: 900px;
}


/* Case Study 04 — Inventory & warehouse optimization */
.inventory-hero .case-hero-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr);
}
.warehouse-architecture {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: 18px;
  align-items: center;
  margin: 34px 0 28px;
}
.warehouse-arch-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.warehouse-arch-column .migration-node {
  min-height: 138px;
}
.reconciliation-flow {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: 10px;
  align-items: center;
  margin-top: 30px;
}
.reconciliation-flow > div {
  min-width: 0;
  padding: 19px;
  border: 1px solid var(--border, #26394f);
  border-radius: 17px;
  background: var(--surface, #0f1b2d);
}
.reconciliation-flow small,
.verification-grid article > span,
.velocity-decision article > span,
.velocity-center small,
.inventory-value-chain small {
  display: block;
  margin-bottom: 8px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.reconciliation-flow strong {
  display: block;
  margin-bottom: 6px;
}
.reconciliation-flow span {
  color: var(--secondary-text, #a9b7c8);
  font-size: 13px;
  line-height: 1.5;
}
.reconciliation-flow > b,
.barcode-flow > b,
.inventory-value-chain > b {
  color: var(--secondary-text, #a9b7c8);
  font-weight: 400;
}
.verification-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-top: 28px;
}
.verification-grid article {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background: var(--surface, #0f1b2d);
}
.verification-grid h3 {
  margin: 0 0 8px;
}
.verification-grid p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.65;
}
.barcode-flow,
.inventory-value-chain {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: 12px;
  align-items: center;
  margin-top: 28px;
}
.inventory-value-chain {
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
}
.barcode-flow > div,
.inventory-value-chain > div {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background: var(--surface, #0f1b2d);
}
.barcode-flow small {
  display: block;
  margin-bottom: 7px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.barcode-flow strong,
.inventory-value-chain strong {
  display: block;
}
.inventory-value-chain p {
  margin: 8px 0 0;
  color: var(--secondary-text, #a9b7c8);
  font-size: 13px;
  line-height: 1.6;
}
.velocity-decision {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(210px,.7fr) minmax(0,1fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 30px;
}
.velocity-decision article,
.velocity-center {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border, #26394f);
  border-radius: 20px;
  background: var(--surface, #0f1b2d);
}
.velocity-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-color: rgba(128,219,102,.32);
  background: linear-gradient(180deg, rgba(128,219,102,.08), rgba(128,219,102,.02));
}
.velocity-center strong {
  font-size: 22px;
}
.velocity-center span,
.velocity-decision article p {
  margin-top: 8px;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.65;
}
.velocity-decision h3 {
  margin: 0;
}
@media (max-width: 1120px) {
  .inventory-hero .case-hero-grid,
  .warehouse-architecture {
    grid-template-columns: 1fr;
  }
  .warehouse-architecture > .architecture-flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .inventory-hero .case-snapshot {
    max-width: 820px;
  }
  .reconciliation-flow,
  .barcode-flow,
  .inventory-value-chain {
    grid-template-columns: 1fr;
  }
  .reconciliation-flow > b,
  .barcode-flow > b,
  .inventory-value-chain > b {
    transform: rotate(90deg);
    justify-self: center;
  }
}
@media (max-width: 760px) {
  .verification-grid,
  .velocity-decision {
    grid-template-columns: 1fr;
  }
}


/* Inventory case study — disposition & traceability refinements */
.warehouse-architecture--decision .migration-node {
  min-height: 150px;
}
.disposition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.disposition-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border, #26394f);
  border-radius: 20px;
  background: var(--surface, #0f1b2d);
}
.disposition-card.featured {
  border-color: rgba(128,219,102,.34);
  background: linear-gradient(180deg, rgba(128,219,102,.075), rgba(128,219,102,.02));
}
.disposition-card > span,
.disposition-rule-flow small {
  display: block;
  margin-bottom: 8px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.disposition-card h3 {
  margin: 0 0 9px;
}
.disposition-card p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.68;
}
.disposition-rule-flow {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.2fr);
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}
.disposition-rule-flow > div {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background: var(--surface, #0f1b2d);
}
.disposition-rule-flow > div.featured {
  border-color: rgba(128,219,102,.34);
}
.disposition-rule-flow strong {
  display: block;
}
.disposition-rule-flow span {
  display: block;
  margin-top: 6px;
  color: var(--secondary-text, #a9b7c8);
  font-size: 13px;
}
.disposition-rule-flow > b {
  color: var(--secondary-text, #a9b7c8);
  font-weight: 400;
}

/* Six-step reconciliation flow needs slightly tighter cards */
.reconciliation-flow > div {
  padding: 17px;
}
@media (max-width: 1000px) {
  .disposition-grid {
    grid-template-columns: 1fr;
  }
  .disposition-rule-flow {
    grid-template-columns: 1fr;
  }
  .disposition-rule-flow > b {
    transform: rotate(90deg);
    justify-self: center;
  }
}


/* Inventory reconciliation workflow — corrected six-step layout */
.reconciliation-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.reconciliation-step {
  position: relative;
  min-width: 0;
  min-height: 188px;
  padding: 20px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(128,219,102,.035), transparent 50%),
    var(--surface, #0f1b2d);
}
.reconciliation-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -15px;
  width: 15px;
  height: 1px;
  background: var(--border, #26394f);
}
.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 24px;
}
.step-top small {
  color: var(--brand, #80db66);
  font: 500 12px/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
}
.step-top span {
  padding: 5px 8px;
  border: 1px solid var(--border, #26394f);
  border-radius: 999px;
  color: var(--secondary-text, #a9b7c8);
  font: 500 10px/1 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.reconciliation-step strong {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
}
.reconciliation-step p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  font-size: 14px;
  line-height: 1.65;
}
.reconciliation-step:nth-child(5) {
  border-color: rgba(128,219,102,.30);
}
.reconciliation-step:nth-child(6) {
  background:
    linear-gradient(180deg, rgba(100,181,246,.055), transparent 50%),
    var(--surface, #0f1b2d);
}

.warehouse-product-shot {
  margin-top: 30px;
}
.warehouse-product-note {
  max-width: 900px;
  margin-top: 18px;
}

/* Prevent the legacy flow styles from affecting the corrected section */
.reconciliation-steps + .reconciliation-flow {
  display: none;
}

@media (max-width: 1180px) {
  .reconciliation-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .reconciliation-step {
    min-height: 170px;
  }
  .reconciliation-step::after {
    display: none;
  }
}
@media (max-width: 720px) {
  .reconciliation-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .reconciliation-steps {
    grid-template-columns: 1fr;
  }
  .reconciliation-step {
    min-height: 0;
  }
}


/* Inventory traceability chain — corrected layout */
.traceability-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}
.traceability-step {
  min-width: 0;
  min-height: 190px;
  padding: 20px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(100,181,246,.028), transparent 52%),
    var(--surface, #0f1b2d);
}
.traceability-step .step-top {
  margin-bottom: 22px;
}
.traceability-step strong {
  display: block;
  margin-bottom: 10px;
  font-size: 19px;
  line-height: 1.35;
}
.traceability-step p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  font-size: 14px;
  line-height: 1.65;
}
.traceability-step--final {
  border-color: rgba(128,219,102,.34);
  background:
    linear-gradient(180deg, rgba(128,219,102,.08), transparent 55%),
    var(--surface, #0f1b2d);
}

@media (max-width: 1120px) {
  .traceability-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .traceability-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .traceability-steps {
    grid-template-columns: 1fr;
  }
  .traceability-step {
    min-height: 0;
  }
}


/* Case Study 05 — Payment & security modernization */
.payment-security-hero .case-hero-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr);
}
.payment-architecture {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: 18px;
  align-items: center;
  margin: 34px 0 28px;
}
.payment-arch-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.payment-arch-column .migration-node {
  min-height: 142px;
}
.payment-security-core .migration-node {
  border-color: rgba(245,196,81,.25);
}
.security-hardening-grid,
.payment-test-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.security-hardening-grid article,
.payment-test-grid article,
.risk-rule-grid article,
.data-protection-grid article {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background: var(--surface, #0f1b2d);
}
.security-hardening-grid article > span,
.payment-test-grid article > span,
.risk-rule-grid article > span,
.data-protection-grid article > span {
  display: block;
  margin-bottom: 8px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.security-hardening-grid h3,
.payment-test-grid h3,
.risk-rule-grid h3,
.data-protection-grid h3 {
  margin: 0 0 8px;
}
.security-hardening-grid p,
.payment-test-grid p,
.risk-rule-grid p,
.data-protection-grid p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.65;
}
.pci-loop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 30px;
}
.pci-loop > div {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(245,196,81,.045), transparent 55%),
    var(--surface, #0f1b2d);
}
.pci-loop small {
  display: block;
  margin-bottom: 18px;
  color: #f5c451;
  font: 500 12px/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
}
.pci-loop strong {
  display: block;
  margin-bottom: 8px;
  font-size: 19px;
}
.pci-loop span {
  color: var(--secondary-text, #a9b7c8);
  font-size: 13px;
  line-height: 1.55;
}
.payment-flow {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: 12px;
  align-items: center;
  margin-top: 30px;
}
.payment-flow > div {
  min-width: 0;
  padding: 21px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background: var(--surface, #0f1b2d);
}
.payment-flow > div.featured {
  border-color: rgba(128,219,102,.36);
  background: linear-gradient(180deg, rgba(128,219,102,.08), rgba(128,219,102,.02));
}
.payment-flow small {
  display: block;
  margin-bottom: 8px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.payment-flow strong {
  display: block;
}
.payment-flow p {
  margin: 8px 0 0;
  color: var(--secondary-text, #a9b7c8);
  font-size: 13px;
  line-height: 1.6;
}
.payment-flow > b {
  color: var(--secondary-text, #a9b7c8);
  font-weight: 400;
}
.risk-rule-grid,
.data-protection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-top: 28px;
}
.payment-evidence .case-copy {
  max-width: 900px;
}

@media (max-width: 1120px) {
  .payment-security-hero .case-hero-grid,
  .payment-architecture {
    grid-template-columns: 1fr;
  }
  .payment-security-hero .case-snapshot {
    max-width: 820px;
  }
  .payment-architecture > .architecture-flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .security-hardening-grid,
  .payment-test-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .payment-flow {
    grid-template-columns: 1fr;
  }
  .payment-flow > b {
    transform: rotate(90deg);
    justify-self: center;
  }
}
@media (max-width: 760px) {
  .pci-loop,
  .risk-rule-grid,
  .data-protection-grid,
  .security-hardening-grid,
  .payment-test-grid {
    grid-template-columns: 1fr;
  }
}


/* Case Study 05 — dual technical/admin ownership */
.dual-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.dual-role-panel {
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--border, #26394f);
  border-radius: 22px;
  background: var(--surface, #0f1b2d);
}
.dual-role-panel--admin {
  border-color: rgba(245,196,81,.30);
  background:
    linear-gradient(180deg, rgba(245,196,81,.045), transparent 45%),
    var(--surface, #0f1b2d);
}
.dual-role-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dual-role-panel--admin .dual-role-kicker {
  color: #f5c451;
}
.dual-role-panel > h3 {
  margin: 0 0 22px;
  font-size: 25px;
}
.responsibility-grid--nested {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.responsibility-grid--nested article {
  padding: 17px;
}
.responsibility-grid--nested h4 {
  margin: 5px 0 8px;
  font-size: 15px;
}
.responsibility-grid--nested p {
  font-size: 13px;
}

.payment-system-map {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1.1fr) auto minmax(0,1fr);
  gap: 18px;
  align-items: center;
  margin: 34px 0 28px;
}
.payment-system-source,
.payment-system-core,
.payment-system-gateways {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.payment-system-map .migration-node {
  min-height: 138px;
}

.pci-compliance-streams {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-top: 28px;
}
.pci-compliance-streams article,
.payment-admin-grid article,
.compliance-evidence-grid article {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background: var(--surface, #0f1b2d);
}
.pci-compliance-streams span,
.payment-admin-grid span,
.compliance-evidence-grid span {
  display: block;
  margin-bottom: 8px;
  color: #f5c451;
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pci-compliance-streams h3,
.payment-admin-grid h3 {
  margin: 0 0 8px;
}
.pci-compliance-streams p,
.payment-admin-grid p,
.compliance-evidence-grid p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.65;
}

.pci-evidence-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}
.pci-evidence-strip > div {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(245,196,81,.22);
  border-radius: 15px;
  background: rgba(245,196,81,.03);
}
.pci-evidence-strip small {
  display: block;
  margin-bottom: 7px;
  color: var(--secondary-text, #a9b7c8);
  font-size: 11px;
}
.pci-evidence-strip strong {
  font-size: 14px;
}

.payment-path-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 28px;
}
.payment-path-steps article {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background: var(--surface, #0f1b2d);
}
.payment-path-steps span {
  display: block;
  margin-bottom: 9px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.payment-path-steps h3 {
  margin: 0 0 8px;
}
.payment-path-steps p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.65;
}

.backend-payment-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-top: 30px;
}
.backend-payment-actions article {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border, #26394f);
  border-radius: 20px;
  background: var(--surface, #0f1b2d);
}
.backend-payment-actions article > span {
  display: block;
  margin-bottom: 8px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.backend-payment-actions h3 {
  margin: 0 0 18px;
}
.mini-process {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.mini-process b {
  padding: 8px 10px;
  border: 1px solid var(--border, #26394f);
  border-radius: 999px;
  color: var(--secondary-text, #a9b7c8);
  font-size: 12px;
  font-weight: 500;
}
.mini-process i {
  color: var(--brand, #80db66);
  font-style: normal;
}

.payment-admin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-top: 28px;
}
.compliance-evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-top: 28px;
}
.compliance-evidence-grid strong {
  display: block;
  margin-bottom: 8px;
}
.security-evidence-note {
  width: 100%;
  max-width: none;
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(245,196,81,.25);
  border-radius: 14px;
  background: rgba(245,196,81,.035);
  color: var(--secondary-text, #a9b7c8);
  font-size: 13px;
  line-height: 1.6;
}
.security-evidence-note strong {
  color: #f5c451;
}

@media (max-width: 1120px) {
  .dual-role-grid,
  .payment-system-map {
    grid-template-columns: 1fr;
  }
  .payment-system-map > .architecture-flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .pci-compliance-streams,
  .pci-evidence-strip,
  .payment-path-steps,
  .payment-admin-grid,
  .compliance-evidence-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 720px) {
  .responsibility-grid--nested,
  .backend-payment-actions,
  .pci-compliance-streams,
  .pci-evidence-strip,
  .payment-path-steps,
  .payment-admin-grid,
  .compliance-evidence-grid {
    grid-template-columns: 1fr;
  }
}


/* Case Study 05 — real PCI evidence */
.pci-proof-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin-top: 18px;
}
.pci-proof-summary article {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(128,219,102,.24);
  border-radius: 18px;
  background: rgba(128,219,102,.025);
}
.pci-proof-summary span {
  display: block;
  margin-bottom: 7px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pci-proof-summary strong {
  display: block;
  margin-bottom: 7px;
  font-size: 20px;
}
.pci-proof-summary p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.65;
}

.compliance-proof-stack {
  display: grid;
  gap: 28px;
  margin-top: 30px;
}
.compliance-proof-item {
  min-width: 0;
}
.compliance-caption {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

@media (max-width: 900px) {
  .pci-proof-summary {
    grid-template-columns: 1fr;
  }
  .compliance-caption {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 560px) {
  .compliance-caption {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Global density & text-width refinement — v35
   Makes long-form pages more compact and reduces unnecessary
   heading/copy wrapping across the entire site.
   ========================================================= */

/* Tighter vertical rhythm */
.section {
  padding: 78px 0;
}
.case-section {
  padding: 74px 0;
}
.case-heading {
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 34px;
  margin-bottom: 30px;
}

/* Let headings use the available container width */
.section-title,
.page-title,
.page-title.small,
.case-heading h2 {
  max-width: none;
}

/* Supporting copy gets a wider reading measure without becoming edge-to-edge */
.section-intro {
  max-width: 1040px;
  margin-top: 18px;
}
.page-lead,
.page-hero .page-lead,
.about-page-hero .page-lead {
  max-width: 1080px;
  margin-top: 20px;
}

/* Case-study body copy now aligns under the content column and uses its full width */
.case-section .case-copy {
  max-width: none;
  margin-left: 224px;
}

/* Remove older page-specific title constraints */
.page-hero .page-title,
.about-page-hero .page-title.small {
  max-width: none;
}

/* Slightly calmer large-heading scale now that more horizontal width is available */
.case-heading h2 {
  font-size: clamp(2.05rem, 3.35vw, 3.3rem);
  line-height: 1.08;
}
.section-title {
  font-size: clamp(2.1rem, 3.5vw, 3.25rem);
}
.page-title {
  font-size: clamp(2.8rem, 5.5vw, 5.2rem);
}
.page-title.small {
  font-size: clamp(2.55rem, 4.3vw, 4.15rem);
}

/* Reduce large gaps commonly following intro copy */
.case-copy + .challenge-grid,
.case-copy + .responsibility-grid,
.case-copy + .decision-grid,
.case-copy + .impact-grid,
.case-copy + .verification-grid,
.case-copy + .risk-rule-grid,
.case-copy + .data-protection-grid,
.case-copy + .payment-path-steps,
.case-copy + .backend-payment-actions,
.case-copy + .pci-compliance-streams,
.case-copy + .payment-admin-grid,
.case-copy + .product-shot,
.case-copy + .compliance-proof-stack {
  margin-top: 24px;
}

/* Keep flagship hero spacing polished but less oversized */
.case-study-hero {
  padding-bottom: 70px;
}
.case-study-hero .breadcrumbs {
  margin-bottom: 26px;
}
.case-hero-lead {
  margin-top: 20px;
}
.case-hero-badges,
.case-hero-actions {
  margin-top: 22px;
}

@media (max-width: 1080px) {
  .case-section .case-copy {
    margin-left: 0;
  }
}

@media (max-width: 820px) {
  .section {
    padding: 60px 0;
  }
  .case-section {
    padding: 58px 0;
  }
  .case-heading {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-bottom: 24px;
  }
  .case-heading h2 {
    font-size: clamp(1.9rem, 7vw, 2.75rem);
  }
  .section-intro,
  .page-lead,
  .page-hero .page-lead,
  .about-page-hero .page-lead {
    max-width: none;
  }
  .case-study-hero {
    padding-bottom: 54px;
  }
}

@media (max-width: 560px) {
  .section {
    padding: 48px 0;
  }
  .case-section {
    padding: 46px 0;
  }
  .section-intro {
    margin-top: 14px;
  }
  .page-lead {
    margin-top: 16px;
  }
}

/* Compact secondary page heroes to match the denser site rhythm */
.page-hero {
  padding-top: calc(var(--header-height) + 66px);
  padding-bottom: 64px;
}
.page-hero.compact {
  padding-bottom: 52px;
}
.page-hero-grid {
  gap: 52px;
}
.about-page-hero {
  padding-top: calc(var(--header-height) + 66px);
}
@media (max-width: 820px) {
  .page-hero,
  .about-page-hero {
    padding-top: calc(var(--header-height) + 46px);
    padding-bottom: 50px;
  }
  .page-hero-grid {
    gap: 38px;
  }
}


/* Case Study 06 — RingCentral real-time CSR integration */
.ringcentral-architecture{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center;margin-top:28px}.ringcentral-arch-stage{display:grid;gap:12px;min-width:0}.ringcentral-architecture .migration-node{min-height:142px}
.integration-detail-grid,.production-validation-grid,.evidence-shot-plan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}.integration-detail-grid article,.production-validation-grid article,.evidence-shot-plan article,.telephony-lifecycle article,.caller-lookup-flow article,.realtime-flow article,.manual-outbound-grid article{min-width:0;padding:20px;border:1px solid var(--border,#26394f);border-radius:18px;background:var(--surface,#0f1b2d)}
.integration-detail-grid span,.production-validation-grid span,.evidence-shot-plan span,.telephony-lifecycle span,.caller-lookup-flow span,.realtime-flow span,.manual-outbound-grid span,.csr-state-grid>article>span,.context-decision article>span{display:block;margin-bottom:8px;color:var(--brand,#80db66);font:500 11px/1.4 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.integration-detail-grid h3,.caller-lookup-flow h3,.manual-outbound-grid h3,.csr-state-grid h3{margin:0 0 8px}.integration-detail-grid p,.production-validation-grid p,.evidence-shot-plan p,.telephony-lifecycle p,.caller-lookup-flow p,.realtime-flow p,.manual-outbound-grid p,.csr-state-grid p,.context-decision p{margin:0;color:var(--secondary-text,#a9b7c8);line-height:1.62}
.telephony-lifecycle,.caller-lookup-flow,.realtime-flow{display:grid;gap:16px;margin-top:24px}.telephony-lifecycle{grid-template-columns:repeat(3,minmax(0,1fr))}.caller-lookup-flow,.realtime-flow{grid-template-columns:repeat(4,minmax(0,1fr))}.normalized-event{margin-top:18px;padding:22px;border:1px solid rgba(128,219,102,.26);border-radius:18px;background:linear-gradient(180deg,rgba(128,219,102,.05),transparent 60%),var(--surface,#0f1b2d)}.normalized-event code{display:block;overflow-x:auto;padding:16px 0 8px;white-space:pre;color:var(--primary-text,#f4f7fb);font:500 13px/1.6 "IBM Plex Mono",monospace}.normalized-event p{margin:4px 0 0;color:var(--secondary-text,#a9b7c8)}
.csr-state-grid,.manual-outbound-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}.csr-state-grid>article{min-width:0;padding:24px;border:1px solid var(--border,#26394f);border-radius:20px;background:var(--surface,#0f1b2d)}.state-card{margin-top:18px;padding:18px;border:1px solid var(--border,#26394f);border-radius:15px;background:var(--bg,#08111f)}.state-card small{display:block;margin-bottom:6px;color:var(--secondary-text,#a9b7c8)}.state-card strong{display:block;margin-bottom:5px}.state-card--active{border-color:rgba(128,219,102,.32);background:rgba(128,219,102,.035)}
.context-decision{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center;margin-top:24px}.context-decision article{min-width:0;padding:24px;border:1px solid var(--border,#26394f);border-radius:20px;background:var(--surface,#0f1b2d)}.context-decision article strong{display:block;margin-bottom:8px}.context-decision--preserve{border-color:rgba(128,219,102,.30)!important}
@media(max-width:1120px){.ringcentral-architecture{grid-template-columns:1fr}.ringcentral-architecture>.architecture-flow-arrow{transform:rotate(90deg);justify-self:center}.integration-detail-grid,.production-validation-grid,.evidence-shot-plan,.caller-lookup-flow,.realtime-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.telephony-lifecycle,.csr-state-grid,.manual-outbound-grid,.context-decision,.integration-detail-grid,.production-validation-grid,.evidence-shot-plan,.caller-lookup-flow,.realtime-flow{grid-template-columns:1fr}.context-decision>.architecture-flow-arrow{transform:rotate(90deg);justify-self:center}}


/* Case Study 06 — inbound/outbound RingCentral workflow */
.ringcentral-direction-map {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 16px;
  align-items: center;
  margin-top: 18px;
}
.ringcentral-direction-map article {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background: var(--surface, #0f1b2d);
}
.ringcentral-direction-map article span,
.widget-label,
.manual-fallback-note > span {
  display: block;
  margin-bottom: 8px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ringcentral-direction-map article strong {
  display: block;
  margin-bottom: 7px;
}
.ringcentral-direction-map article p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.6;
}
.ringcentral-direction-center {
  padding: 10px 12px;
  border: 1px solid rgba(128,219,102,.25);
  border-radius: 999px;
  color: var(--secondary-text, #a9b7c8);
  font: 500 11px/1.3 "IBM Plex Mono", monospace;
  text-align: center;
  white-space: nowrap;
}
.outbound-widget-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-top: 24px;
}
.outbound-widget-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border, #26394f);
  border-radius: 20px;
  background: var(--surface, #0f1b2d);
}
.outbound-widget-card--featured {
  border-color: rgba(128,219,102,.32);
  background:
    linear-gradient(180deg, rgba(128,219,102,.055), transparent 58%),
    var(--surface, #0f1b2d);
}
.outbound-widget-card h3 {
  margin: 0 0 8px;
}
.outbound-widget-card p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.65;
}
.widget-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.widget-flow b {
  padding: 8px 10px;
  border: 1px solid var(--border, #26394f);
  border-radius: 999px;
  color: var(--secondary-text, #a9b7c8);
  font-size: 12px;
  font-weight: 500;
}
.widget-flow i {
  color: var(--brand, #80db66);
  font-style: normal;
}
.manual-fallback-note {
  width: 100%;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border, #26394f);
  border-radius: 16px;
  background: rgba(255,255,255,.015);
}
.manual-fallback-note strong {
  display: block;
  margin-bottom: 6px;
}
.manual-fallback-note p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
}
@media (max-width: 760px) {
  .ringcentral-direction-map,
  .outbound-widget-layout {
    grid-template-columns: 1fr;
  }
  .ringcentral-direction-center {
    justify-self: center;
    white-space: normal;
  }
}

/* Case Study 06 — product evidence & visual storytelling */
.ringcentral-workflow-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:24px 0}.ringcentral-workflow-strip>div{min-width:0;min-height:94px;padding:14px;border:1px solid var(--border,#26394f);border-radius:15px;background:var(--surface,#0f1b2d)}.ringcentral-workflow-strip span{display:block;margin-bottom:10px;color:var(--brand,#80db66);font:500 10px/1 "IBM Plex Mono",monospace}.ringcentral-workflow-strip strong{font-size:13px;line-height:1.35}.ringcentral-product-shots{display:grid;gap:26px}.shot-business-caption{margin:12px 0 0;color:var(--secondary-text,#a9b7c8);font-size:13px;font-style:italic}.before-after-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}.before-after-card{min-width:0;padding:22px;border:1px solid var(--border,#26394f);border-radius:18px;background:var(--surface,#0f1b2d)}.before-after-card--after{border-color:rgba(128,219,102,.3);background:linear-gradient(180deg,rgba(128,219,102,.05),transparent 60%),var(--surface,#0f1b2d)}.before-after-label{display:block;margin-bottom:16px;color:var(--brand,#80db66);font:500 11px/1.4 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.vertical-workflow{display:grid;gap:8px}.vertical-workflow strong{padding:10px 12px;border:1px solid var(--border,#26394f);border-radius:12px;font-size:13px}.vertical-workflow i{justify-self:center;color:var(--brand,#80db66);font-style:normal}.csr-gains-heading{margin-top:34px}.csr-gains-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}.csr-gains-grid article{min-width:0;padding:20px;border:1px solid var(--border,#26394f);border-radius:18px;background:var(--surface,#0f1b2d)}.csr-gains-grid span{display:block;margin-bottom:8px;color:var(--brand,#80db66);font:500 11px/1.4 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.csr-gains-grid h3{margin:0 0 8px}.csr-gains-grid p{margin:0;color:var(--secondary-text,#a9b7c8);line-height:1.6}.compact-case-section{padding-top:56px;padding-bottom:56px}.deployment-lesson{width:100%;margin-top:14px!important;padding:14px 16px;border:1px solid rgba(128,219,102,.24);border-radius:14px;background:rgba(128,219,102,.03)}.technical-evidence-details{margin-top:22px;border:1px solid var(--border,#26394f);border-radius:18px;background:var(--surface,#0f1b2d);overflow:hidden}.technical-evidence-details summary{cursor:pointer;padding:18px 20px;font-weight:700}.technical-evidence-details[open] summary{border-bottom:1px solid var(--border,#26394f)}.technical-evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:20px}.technical-evidence-grid article{min-width:0}.technical-evidence-grid code{display:block;overflow-x:auto;padding:14px 0;white-space:pre;font:500 13px/1.6 "IBM Plex Mono",monospace}.technical-evidence-grid p{margin:0;color:var(--secondary-text,#a9b7c8)}.lifecycle-inline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0}.lifecycle-inline strong{padding:9px 11px;border:1px solid var(--border,#26394f);border-radius:999px}.lifecycle-inline i{color:var(--brand,#80db66);font-style:normal}.ringcentral-closing{border-top:1px solid rgba(255,255,255,.035)}
@media(max-width:1180px){.ringcentral-workflow-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:900px){.csr-gains-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.technical-evidence-grid{grid-template-columns:1fr}}@media(max-width:720px){.ringcentral-workflow-strip,.before-after-grid,.csr-gains-grid{grid-template-columns:1fr}.ringcentral-workflow-strip>div{min-height:0}}


/* Case Study 06 — outbound RingCentral production proof */
.outbound-product-proof {
  margin-top: 24px;
}
.outbound-product-proof .product-shot {
  max-width: none;
}
.outbound-product-proof .product-shot img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.outbound-proof-caption {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

@media (max-width: 900px) {
  .outbound-proof-caption {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 560px) {
  .outbound-proof-caption {
    grid-template-columns: 1fr;
  }
}


/* Case Study 07 — multi-carrier shipping tracking */
.shipping-architecture {
  display: grid;
  grid-template-columns: minmax(0,.9fr) auto minmax(0,1.35fr) auto minmax(0,.95fr);
  gap: 18px;
  align-items: center;
  margin-top: 26px;
}
.shipping-arch-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.carrier-branch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.carrier-branch-grid .migration-node {
  min-height: 132px;
}
.carrier-strategy-grid,
.reusable-email-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-top: 22px;
}
.carrier-strategy-grid article,
.reusable-email-grid article,
.communication-details-grid article {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background: var(--surface, #0f1b2d);
}
.carrier-strategy-grid span,
.reusable-email-grid article > span,
.communication-details-grid span,
.shipping-principle-note > span {
  display: block;
  margin-bottom: 8px;
  color: var(--brand, #80db66);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.carrier-strategy-grid h3,
.reusable-email-grid h3 {
  margin: 0 0 8px;
}
.carrier-strategy-grid p,
.reusable-email-grid p,
.communication-details-grid p,
.shipping-principle-note p {
  margin: 0;
  color: var(--secondary-text, #a9b7c8);
  line-height: 1.62;
}
.shipping-principle-note {
  width: 100%;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(128,219,102,.28);
  border-radius: 16px;
  background: rgba(128,219,102,.03);
}
.shipping-principle-note strong {
  display: block;
  margin-bottom: 6px;
}
.shipment-timeline-concept,
.tracking-email-flow,
.order-tracking-flow {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.shipment-timeline-concept {
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.tracking-email-flow,
.order-tracking-flow {
  grid-template-columns: repeat(5, minmax(0,1fr));
}
.shipment-timeline-concept article,
.tracking-email-flow article,
.order-tracking-flow article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border, #26394f);
  border-radius: 16px;
  background: var(--surface, #0f1b2d);
}
.shipment-timeline-concept span,
.tracking-email-flow span,
.order-tracking-flow span {
  display: block;
  margin-bottom: 8px;
  color: var(--brand, #80db66);
  font: 500 10px/1 "IBM Plex Mono", monospace;
}
.shipment-timeline-concept p,
.tracking-email-flow p {
  margin: 7px 0 0;
  color: var(--secondary-text, #a9b7c8);
  font-size: 13px;
  line-height: 1.55;
}
.reusable-email-core {
  border-color: rgba(128,219,102,.30) !important;
  background:
    linear-gradient(180deg, rgba(128,219,102,.05), transparent 60%),
    var(--surface, #0f1b2d) !important;
}
.reusable-email-core > strong {
  display: block;
  margin: 10px 0 8px;
  font-size: 22px;
}
.communication-details-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
}
.communication-details-grid strong {
  display: block;
  margin-bottom: 7px;
}
.shipping-workflow-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 10px;
  margin: 24px 0;
}
.shipping-workflow-strip > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border, #26394f);
  border-radius: 14px;
  background: var(--surface, #0f1b2d);
}
.shipping-workflow-strip span {
  display: block;
  margin-bottom: 8px;
  color: var(--brand, #80db66);
  font: 500 10px/1 "IBM Plex Mono", monospace;
}
.shipping-workflow-strip strong {
  font-size: 13px;
  line-height: 1.35;
}
.screenshot-placeholder-stack {
  display: grid;
  gap: 18px;
}
.screenshot-placeholder {
  min-width: 0;
  padding: 24px;
  border: 1px dashed rgba(169,183,200,.38);
  border-radius: 18px;
  background: rgba(255,255,255,.012);
}
.screenshot-placeholder--hero {
  border-color: rgba(128,219,102,.34);
  background: rgba(128,219,102,.02);
}
.screenshot-placeholder > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.screenshot-placeholder p {
  margin: 10px 0;
  color: var(--secondary-text, #a9b7c8);
}
.screenshot-placeholder code {
  color: var(--secondary-text, #a9b7c8);
  font: 500 12px/1.4 "IBM Plex Mono", monospace;
}
.shipping-tech-evidence {
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.shipping-tech-evidence article {
  padding: 20px;
  border: 1px solid var(--border, #26394f);
  border-radius: 18px;
  background: var(--surface, #0f1b2d);
}
.shipping-tech-evidence strong {
  display: block;
  margin: 8px 0;
}
@media (max-width: 1180px) {
  .shipping-architecture {
    grid-template-columns: 1fr;
  }
  .shipping-architecture > .architecture-flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .shipping-workflow-strip {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
  .shipment-timeline-concept,
  .tracking-email-flow,
  .order-tracking-flow,
  .communication-details-grid,
  .shipping-tech-evidence {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 800px) {
  .carrier-branch-grid,
  .carrier-strategy-grid,
  .reusable-email-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .shipping-workflow-strip,
  .shipment-timeline-concept,
  .tracking-email-flow,
  .order-tracking-flow,
  .communication-details-grid,
  .shipping-tech-evidence {
    grid-template-columns: 1fr;
  }
}


/* Case Study 07 — real product evidence */
.tracking-product-shots {
  display: grid;
  gap: 26px;
}
.tracking-product-shots .product-shot {
  max-width: none;
}
.tracking-product-shots .product-shot img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.tracking-hero-shot {
  border-color: rgba(128,219,102,.34);
  background:
    linear-gradient(180deg, rgba(128,219,102,.035), transparent 28%),
    var(--surface, #0f1b2d);
}
.tracking-hero-shot .product-shot__header {
  border-bottom-color: rgba(128,219,102,.20);
}


/* Supporting-project treatment */
.content-card.supporting-project {
  border-style: dashed;
  background:
    linear-gradient(180deg, rgba(169,183,200,.018), transparent 55%),
    var(--surface, #0f1b2d);
}
.content-card.supporting-project .card-label {
  color: var(--secondary-text, #a9b7c8);
}


/* Services page — evidence-led consulting positioning */
.services-hero .page-lead {
  max-width: 1080px;
}
.services-proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 28px;
}
.services-proof-strip > div {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.015);
}
.services-proof-strip strong {
  display: block;
  margin-bottom: 5px;
  font: 700 14px/1.3 "Manrope", sans-serif;
}
.services-proof-strip span {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}
.services-intro-section {
  padding-top: 68px;
}
.services-section-heading {
  margin-bottom: 28px;
}
.services-modern-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.service-modern-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.service-modern-card--wide {
  grid-column: 1 / -1;
}
.service-modern-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.service-modern-top .service-index {
  flex: 0 0 auto;
  margin: 0;
}
.service-category {
  color: var(--text-soft);
  font: 500 11px/1.3 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.service-modern-card h3 {
  margin: 0 0 10px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.35rem, 1.7vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: -.03em;
}
.service-summary {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.68;
}
.service-detail,
.service-proof {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}
.service-detail > span,
.service-proof > span {
  display: block;
  margin-bottom: 8px;
  color: var(--brand);
  font: 500 10px/1.3 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.service-detail p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.6;
}
.service-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
}
.service-proof > span {
  width: 100%;
  margin-bottom: 1px;
}
.service-proof a {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.service-proof a::after {
  content: " ↗";
  color: var(--brand);
}
.service-proof a:hover {
  color: var(--brand);
}
.service-wide-content {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  gap: 24px;
}
.service-wide-content .service-detail,
.service-wide-content .service-proof {
  margin-top: 18px;
}
.services-architecture-section {
  padding-top: 64px;
  padding-bottom: 64px;
}
.architecture-service-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.architecture-service-strip > div {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
}
.architecture-service-strip span {
  display: block;
  margin-bottom: 12px;
  color: var(--brand);
  font: 500 10px/1 "IBM Plex Mono", monospace;
}
.architecture-service-strip strong {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
}
.architecture-service-strip p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.58;
}
.services-architecture-link {
  display: inline-block;
  margin-top: 20px;
}
.services-engagement-section {
  padding-top: 64px;
  padding-bottom: 64px;
}
.engagement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
.engagement-grid article {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.engagement-grid article > span {
  display: block;
  margin-bottom: 9px;
  color: var(--brand);
  font: 500 10px/1.3 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.engagement-grid h3 {
  margin: 0 0 8px;
}
.engagement-grid p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.62;
}
.engagement-grid small {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.55;
}
.services-fit-section {
  padding-top: 60px;
  padding-bottom: 60px;
}
.services-fit-grid {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 50px;
  align-items: start;
}
.fit-points {
  display: grid;
  gap: 10px;
}
.fit-points p {
  position: relative;
  margin: 0;
  padding: 13px 14px 13px 38px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-soft);
  line-height: 1.55;
}
.fit-points p::before {
  content: "→";
  position: absolute;
  left: 14px;
  top: 13px;
  color: var(--brand);
}
.services-fit-section .section-title {
  margin-bottom: 0;
}
.services-hero + .services-intro-section {
  border-top: 1px solid rgba(255,255,255,.025);
}

@media (max-width: 1080px) {
  .services-proof-strip,
  .architecture-service-strip {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .services-fit-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 820px) {
  .services-modern-grid,
  .engagement-grid {
    grid-template-columns: 1fr;
  }
  .service-modern-card--wide {
    grid-column: auto;
  }
  .service-wide-content {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
@media (max-width: 560px) {
  .services-proof-strip,
  .architecture-service-strip {
    grid-template-columns: 1fr;
  }
  .service-modern-card,
  .engagement-grid article,
  .architecture-service-strip > div {
    padding: 18px;
  }
}


/* Architecture page — workflow-first solution architecture */
.architecture-hero .page-lead {
  max-width: 1080px;
}
.architecture-proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 28px;
}
.architecture-proof-strip > div {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.015);
}
.architecture-proof-strip strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}
.architecture-proof-strip span {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}
.architecture-process-section {
  padding-top: 68px;
}
.architecture-section-heading {
  margin-bottom: 26px;
}
.architecture-decision-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
}
.architecture-decision-flow article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
}
.architecture-decision-flow span,
.pattern-index,
.extend-replace-grid article > span,
.data-architecture-grid article > span,
.security-architecture-grid article > span {
  display: block;
  margin-bottom: 10px;
  color: var(--brand);
  font: 500 10px/1.3 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.architecture-decision-flow strong {
  display: block;
  margin-bottom: 7px;
}
.architecture-decision-flow p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.55;
}
.architecture-pattern-stack {
  display: grid;
  gap: 18px;
}
.architecture-pattern {
  display: grid;
  grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
  gap: 28px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 21px;
  background: var(--surface);
}
.architecture-pattern:nth-child(even) .architecture-pattern-copy {
  order: 2;
}
.architecture-pattern:nth-child(even) .architecture-pattern-diagram {
  order: 1;
}
.architecture-pattern-copy h3 {
  margin: 0 0 10px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.03em;
}
.architecture-pattern-copy p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.66;
}
.architecture-pattern-copy a {
  display: inline-block;
  margin-top: 14px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.architecture-pattern-copy a:hover {
  color: var(--brand);
}
.architecture-pattern-diagram {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg);
}
.mini-arch-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.mini-arch-row.two {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.mini-arch-row.three {
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.mini-arch-row > div,
.architecture-pattern-diagram.horizontal > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  text-align: center;
}
.mini-arch-row > div.accent,
.architecture-pattern-diagram.horizontal > div.accent {
  border-color: rgba(128,219,102,.32);
  background: rgba(128,219,102,.035);
}
.mini-arch-row small,
.architecture-pattern-diagram.horizontal small {
  display: block;
  margin-bottom: 5px;
  color: var(--text-soft);
  font: 500 9px/1 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.mini-arch-row strong,
.architecture-pattern-diagram.horizontal strong {
  font-size: 12px;
  line-height: 1.35;
}
.architecture-pattern-diagram > i {
  display: block;
  margin: 8px 0;
  color: var(--brand);
  font-style: normal;
  text-align: center;
}
.architecture-pattern-diagram.horizontal {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: 8px;
  align-items: center;
}
.architecture-pattern-diagram.horizontal > i {
  margin: 0;
}
.extend-replace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.extend-replace-grid article,
.data-architecture-grid article,
.security-architecture-grid article {
  min-width: 0;
  padding: 21px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.extend-replace-grid h3,
.data-architecture-grid h3,
.security-architecture-grid h3 {
  margin: 0 0 8px;
}
.extend-replace-grid p,
.data-architecture-grid p,
.security-architecture-grid p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.62;
}
.extend-replace-grid small {
  display: block;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.5;
}
.data-architecture-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 15px;
}
.architecture-proof-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 18px;
}
.architecture-proof-links a {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.architecture-proof-links a::after {
  content: " ↗";
  color: var(--brand);
}
.security-architecture-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 15px;
}
.architecture-principles-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.architecture-case-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.architecture-case-links a {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 4px 12px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.architecture-case-links a:hover {
  border-color: rgba(128,219,102,.32);
}
.architecture-case-links span {
  grid-row: 1 / 3;
  color: var(--brand);
  font: 500 10px/1.4 "IBM Plex Mono", monospace;
}
.architecture-case-links strong {
  font-size: 14px;
}
.architecture-case-links small {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}
.architecture-patterns-section,
.architecture-data-section,
.architecture-principles-section {
  padding-top: 64px;
  padding-bottom: 64px;
}
.architecture-modernization-section,
.architecture-security-section,
.architecture-case-links-section {
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (max-width: 1120px) {
  .architecture-decision-flow {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .data-architecture-grid,
  .architecture-principles-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 900px) {
  .architecture-pattern {
    grid-template-columns: 1fr;
  }
  .architecture-pattern:nth-child(even) .architecture-pattern-copy,
  .architecture-pattern:nth-child(even) .architecture-pattern-diagram {
    order: initial;
  }
  .architecture-proof-strip,
  .extend-replace-grid,
  .security-architecture-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 720px) {
  .architecture-decision-flow,
  .architecture-proof-strip,
  .extend-replace-grid,
  .data-architecture-grid,
  .security-architecture-grid,
  .architecture-principles-grid,
  .architecture-case-links {
    grid-template-columns: 1fr;
  }
  .mini-arch-row.two,
  .mini-arch-row.three {
    grid-template-columns: 1fr;
  }
  .architecture-pattern-diagram.horizontal {
    grid-template-columns: 1fr;
  }
  .architecture-pattern-diagram.horizontal > i {
    transform: rotate(90deg);
    justify-self: center;
  }
}


/* Homepage v46 — career-led, evidence-supported positioning */
.homepage-hero .hero-copy { max-width: 760px; }
.homepage-experience-strip .metric-value { font-size: clamp(1rem, 1.4vw, 1.25rem); }
.homepage-two-column-heading {
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 28px;
}
.homepage-two-column-heading .section-title,
.homepage-two-column-heading .section-intro { margin-bottom: 0; }
.homepage-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
.homepage-capability-grid article {
  min-width: 0;
  padding: 23px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.homepage-capability-grid article > span,
.experience-domain-grid article > span,
.homepage-problem-grid a > span {
  display: block;
  margin-bottom: 9px;
  color: var(--brand);
  font: 500 10px/1.3 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.homepage-capability-grid h3 { margin: 0 0 8px; }
.homepage-capability-grid p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.62;
}
.homepage-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.homepage-problem-grid a {
  min-width: 0;
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.homepage-problem-grid a:hover { border-color: rgba(128,219,102,.32); }
.homepage-problem-grid strong {
  display: block;
  font-size: 14px;
  line-height: 1.48;
}
.homepage-section-action { margin-top: 24px; }
.experience-domain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.experience-domain-grid article {
  min-width: 0;
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.experience-domain-grid strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}
.experience-domain-grid p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.58;
}
.homepage-architecture-model {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: 9px;
  align-items: center;
  padding: 21px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--bg);
}
.homepage-architecture-model > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.homepage-architecture-model > div.accent {
  border-color: rgba(128,219,102,.34);
  background: rgba(128,219,102,.035);
}
.homepage-architecture-model span {
  display: block;
  margin-bottom: 6px;
  color: var(--brand);
  font: 500 9px/1 "IBM Plex Mono", monospace;
}
.homepage-architecture-model strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}
.homepage-architecture-model small {
  display: block;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.4;
}
.homepage-architecture-model > i {
  color: var(--brand);
  font-style: normal;
}
.homepage-proof-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.homepage-selected-proof .content-card h3 { font-size: 1.2rem; }
.homepage-breadth-section,
.homepage-selected-proof { padding-top: 68px; padding-bottom: 68px; }
.homepage-career-section { padding-top: 64px; padding-bottom: 64px; }

@media (max-width: 1100px) {
  .experience-domain-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .homepage-problem-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .homepage-architecture-model { grid-template-columns: 1fr; }
  .homepage-architecture-model > i {
    transform: rotate(90deg);
    justify-self: center;
  }
}
@media (max-width: 900px) {
  .homepage-two-column-heading {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }
  .homepage-proof-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .homepage-capability-grid,
  .homepage-problem-grid,
  .experience-domain-grid { grid-template-columns: 1fr; }
}


/* Homepage v47 — desktop composition fixes */
.homepage-problems-section .homepage-two-column-heading {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 64px;
  align-items: start;
}
.homepage-problems-section .section-title {
  font-size: clamp(2.2rem, 3.05vw, 3rem);
  line-height: 1.08;
  max-width: 780px;
}
.homepage-problems-section .section-intro {
  max-width: 760px;
  margin-top: 34px;
  font-size: 1.02rem;
  line-height: 1.7;
}

.homepage-architecture-section .positioning-grid {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}
.homepage-architecture-section .section-title {
  font-size: clamp(2.2rem, 3vw, 2.95rem);
  line-height: 1.08;
  max-width: 760px;
}
.homepage-architecture-section .section-intro {
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.68;
}
.homepage-architecture-section .homepage-architecture-model {
  align-self: center;
}

.homepage-career-section .positioning-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 64px;
  align-items: center;
}
.homepage-career-section .section-title {
  font-size: clamp(2.2rem, 3vw, 2.95rem);
  line-height: 1.08;
  max-width: 800px;
}
.homepage-career-section .section-intro {
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.68;
}
.homepage-career-section .testimonial-quote {
  margin: 0;
  padding: 28px 30px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(128,219,102,.025), transparent 65%),
    var(--surface);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.62;
  align-self: center;
}
.homepage-career-section .testimonial-quote::before {
  content: "CLIENT PERSPECTIVE";
  display: block;
  margin-bottom: 15px;
  color: var(--brand);
  font: 500 10px/1.3 "IBM Plex Mono", monospace;
  letter-spacing: .1em;
}

@media (min-width: 1450px) {
  .homepage-problems-section .homepage-two-column-heading {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  }
  .homepage-architecture-section .positioning-grid,
  .homepage-career-section .positioning-grid {
    gap: 72px;
  }
}

@media (max-width: 1100px) {
  .homepage-problems-section .homepage-two-column-heading,
  .homepage-architecture-section .positioning-grid,
  .homepage-career-section .positioning-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }
  .homepage-problems-section .section-intro {
    margin-top: 0;
  }
  .homepage-architecture-section .homepage-architecture-model {
    width: 100%;
  }
  .homepage-career-section .testimonial-quote {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .homepage-problems-section .section-title,
  .homepage-architecture-section .section-title,
  .homepage-career-section .section-title {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }
  .homepage-career-section .testimonial-quote {
    padding: 22px;
  }
}


/* Homepage v48 — vertical architecture decision flow */
.homepage-architecture-section .positioning-grid {
  grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr);
  gap: 64px;
  align-items: center;
}

.homepage-architecture-model {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  justify-self: end;
  padding: 22px;
}

.homepage-architecture-model > div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
  min-height: 92px;
  padding: 18px 20px;
}

.homepage-architecture-model > div span {
  grid-column: 1;
  grid-row: 1 / 3;
  margin: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(128,219,102,.34);
  border-radius: 10px;
  background: rgba(128,219,102,.035);
  font-size: 10px;
}

.homepage-architecture-model > div strong {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.homepage-architecture-model > div small {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  line-height: 1.45;
}

.homepage-architecture-model > i {
  justify-self: center;
  margin: -2px 0;
  transform: rotate(90deg);
  font-size: 17px;
  line-height: 1;
}

@media (max-width: 1100px) {
  .homepage-architecture-section .positioning-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .homepage-architecture-model {
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 560px) {
  .homepage-architecture-model {
    padding: 16px;
  }
  .homepage-architecture-model > div {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 84px;
    padding: 15px 16px;
  }
  .homepage-architecture-model > div span {
    width: 34px;
    height: 34px;
  }
}


/* Homepage v49 — breadth section alignment */
.homepage-breadth-section .homepage-two-column-heading {
  align-items: start;
}

.homepage-breadth-section .homepage-two-column-heading .section-intro {
  align-self: start;
  margin-top: 56px;
  max-width: 820px;
}

@media (max-width: 900px) {
  .homepage-breadth-section .homepage-two-column-heading .section-intro {
    margin-top: 0;
  }
}


/* About page v50 — career-led, human, consultancy positioning */
.about-v50-hero .page-lead {
  max-width: 880px;
}
.about-story-section {
  padding-top: 68px;
  padding-bottom: 68px;
}
.about-story-grid {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: 56px;
  align-items: start;
}
.about-story-copy {
  max-width: 860px;
}
.about-story-copy p {
  margin: 0 0 18px;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.75;
}
.about-value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 30px;
}
.about-value-grid article {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
}
.about-value-grid article > span,
.about-domain-grid article > span,
.credential-list article > span {
  display: block;
  margin-bottom: 9px;
  color: var(--brand);
  font: 500 10px/1.3 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.about-value-grid h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.4;
}
.about-value-grid p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.6;
}
.about-section-heading {
  margin-bottom: 26px;
}
.about-journey-section,
.about-breadth-section,
.about-credentials-section,
.about-human-section {
  padding-top: 64px;
  padding-bottom: 64px;
}
.career-stage-list {
  display: grid;
  gap: 12px;
}
.career-stage-list article {
  display: grid;
  grid-template-columns: 50px minmax(230px,.65fr) minmax(0,1.35fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.career-stage-no {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(128,219,102,.34);
  border-radius: 10px;
  color: var(--brand);
  font: 500 10px/1 "IBM Plex Mono", monospace;
}
.career-stage-list small {
  display: block;
  margin-bottom: 5px;
  color: var(--brand);
  font: 500 9px/1.3 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.career-stage-list h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}
.career-stage-list p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.62;
}
.about-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.about-domain-grid article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
}
.about-domain-grid strong {
  font-size: 13px;
  line-height: 1.55;
}
.about-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.about-credentials-layout {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 48px;
  align-items: start;
}
.credential-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.credential-list article {
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.credential-list article > span {
  margin-bottom: 5px;
}
.credential-list strong {
  font-size: 13px;
}
.language-summary-panel {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.language-summary-featured {
  padding: 18px;
  border: 1px solid rgba(128,219,102,.26);
  border-radius: 15px;
  background: rgba(128,219,102,.025);
}
.language-summary-featured > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.language-summary-featured h3 {
  margin: 12px 0 5px;
}
.language-summary-featured > p {
  margin: 0 0 14px;
  color: var(--text-soft);
  font-size: 12px;
}
.language-summary-featured dl {
  margin: 0;
}
.language-summary-featured dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.language-summary-featured dt {
  color: var(--text-soft);
  font-size: 12px;
}
.language-summary-featured dd {
  margin: 0;
  font-weight: 700;
  font-size: 12px;
}
.language-summary-small {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}
.language-summary-small article {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
}
.language-summary-small strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.language-summary-small p {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
}
.about-human-grid {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 52px;
  align-items: center;
}
.about-testimonial {
  margin: 0;
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background:
    linear-gradient(180deg, rgba(128,219,102,.025), transparent 65%),
    var(--surface);
  font-size: clamp(1rem,1.35vw,1.2rem);
  line-height: 1.65;
}
.about-testimonial::before {
  content: "PROFESSIONAL TESTIMONIAL";
  display: block;
  margin-bottom: 14px;
  color: var(--brand);
  font: 500 10px/1.3 "IBM Plex Mono", monospace;
  letter-spacing: .09em;
}

@media (max-width: 1100px) {
  .about-value-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .about-domain-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .career-stage-list article {
    grid-template-columns: 46px minmax(210px,.75fr) minmax(0,1.25fr);
  }
}
@media (max-width: 900px) {
  .about-story-grid,
  .about-credentials-layout,
  .about-human-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .career-stage-list article {
    grid-template-columns: 46px minmax(0,1fr);
    align-items: start;
  }
  .career-stage-list article > p {
    grid-column: 2;
  }
}
@media (max-width: 650px) {
  .about-value-grid,
  .about-domain-grid,
  .language-summary-small {
    grid-template-columns: 1fr;
  }
  .career-stage-list article {
    grid-template-columns: 40px minmax(0,1fr);
    padding: 16px;
  }
}


/* About v51 — technology & platform experience */
.about-technology-heading {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 52px;
  align-items: start;
  margin-bottom: 28px;
}
.about-technology-heading .section-title,
.about-technology-heading .section-intro {
  margin-bottom: 0;
}
.about-technology-heading .section-intro {
  max-width: 820px;
  padding-top: 40px;
}

.technology-platform-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.technology-platform-grid article {
  min-width: 0;
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.technology-platform-grid article > span,
.technology-positioning-note > span {
  display: block;
  margin-bottom: 9px;
  color: var(--brand);
  font: 500 10px/1.3 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.technology-platform-grid h3 {
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1.42;
}
.technology-platform-grid p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.62;
}

.technology-positioning-note {
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(128,219,102,.28);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(128,219,102,.035), transparent 70%),
    var(--surface);
}
.technology-positioning-note strong {
  display: block;
  margin-bottom: 7px;
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}
.technology-positioning-note p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 1100px) {
  .technology-platform-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 900px) {
  .about-technology-heading {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .about-technology-heading .section-intro {
    padding-top: 0;
  }
}

@media (max-width: 650px) {
  .technology-platform-grid {
    grid-template-columns: 1fr;
  }
}


/* v53 — distributed professional testimonials */
.testimonial-band-section {
  padding-top: 58px;
  padding-bottom: 58px;
}
.testimonial-band-grid {
  display: grid;
  grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
  gap: 48px;
  align-items: center;
}
.testimonial-band-grid .section-title {
  margin-bottom: 0;
}
.site-testimonial-card {
  margin: 0;
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background:
    linear-gradient(180deg, rgba(128,219,102,.025), transparent 65%),
    var(--surface);
  color: var(--text);
  font-size: clamp(1rem,1.3vw,1.18rem);
  line-height: 1.7;
}
.site-testimonial-card::before {
  content: "PROFESSIONAL TESTIMONIAL";
  display: block;
  margin-bottom: 14px;
  color: var(--brand);
  font: 500 10px/1.3 "IBM Plex Mono", monospace;
  letter-spacing: .09em;
}

@media (max-width: 900px) {
  .testimonial-band-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* v54 — production contact form */
.field-optional {
  color: var(--text-soft);
  font-size: .82em;
  font-weight: 400;
}
.contact-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}
.contact-form button[disabled] {
  opacity: .65;
  cursor: wait;
}
.form-status {
  min-height: 1.5em;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.form-status.success {
  color: var(--brand);
}
.form-status.error {
  color: #ff9f9f;
}


/* v55 — contact enquiry guidance */
.contact-enquiry-guide {
  margin: 0 0 22px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(128,219,102,.025), transparent 65%),
    var(--surface);
}
.contact-enquiry-guide__intro {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: 10px 28px;
  align-items: start;
  margin-bottom: 16px;
}
.contact-enquiry-guide__intro .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.contact-enquiry-guide__intro strong {
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}
.contact-enquiry-guide__intro p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.6;
}
.contact-enquiry-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.contact-enquiry-guide__grid > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
}
.contact-enquiry-guide__grid span {
  display: block;
  margin-bottom: 6px;
  color: var(--brand);
  font: 500 9px/1 "IBM Plex Mono", monospace;
}
.contact-enquiry-guide__grid strong {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
}
.contact-enquiry-guide__grid p {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 850px) {
  .contact-enquiry-guide__intro {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .contact-enquiry-guide__grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 560px) {
  .contact-enquiry-guide {
    padding: 16px;
  }
  .contact-enquiry-guide__grid {
    grid-template-columns: 1fr;
  }
}


/* v57 — final contact enquiry composition */
.contact-enquiry-section {
  padding-top: 64px;
  padding-bottom: 64px;
}

.contact-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(540px, 1.18fr);
  gap: 56px;
  align-items: start;
}

.contact-primary-copy {
  min-width: 0;
  padding-top: 8px;
}

.contact-primary-copy > div {
  width: 100%;
}

.contact-primary-copy .section-title {
  max-width: none;
  font-size: clamp(2.15rem, 3vw, 3rem);
  line-height: 1.08;
}

.contact-primary-copy .section-intro {
  max-width: 620px;
}

.contact-form-panel {
  min-width: 0;
  padding: 25px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(128,219,102,.025), transparent 62%),
    var(--surface);
}

.contact-form-panel .contact-form {
  margin: 0;
}

.contact-form-panel .form-grid {
  margin-top: 0;
}

.contact-enquiry-section .contact-enquiry-guide {
  width: 100%;
  margin: 30px 0 0;
}

.contact-enquiry-section .contact-enquiry-guide__intro {
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  align-items: start;
}

@media (max-width: 1080px) {
  .contact-primary-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-primary-copy .section-intro {
    max-width: 760px;
  }
}

@media (max-width: 650px) {
  .contact-enquiry-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .contact-form-panel {
    padding: 18px;
  }

  .contact-primary-copy .section-title {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
}


/* Production QA — final composition corrections */
.services-testimonial-section .testimonial-band-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.services-testimonial-section .section-title {
  font-size: clamp(2rem, 2.55vw, 2.6rem);
  line-height: 1.1;
}

@media (max-width: 900px) {
  .services-testimonial-section .testimonial-band-grid {
    grid-template-columns: 1fr;
  }
}


/* Production Ready v3 — upcoming case studies */
.upcoming-case-studies-section {
  padding-top: 76px;
  padding-bottom: 76px;
}
.upcoming-case-studies-heading {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 44px;
  align-items: end;
  margin-bottom: 28px;
}
.upcoming-case-studies-heading .section-title {
  margin-bottom: 0;
}
.upcoming-case-studies-heading .section-intro {
  margin: 0;
  max-width: none;
}
.upcoming-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.upcoming-case-card {
  min-width: 0;
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: rgba(15, 27, 45, .55);
}
.upcoming-case-card:last-child {
  grid-column: 1 / -1;
}
.upcoming-case-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  font: 500 10px/1 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-soft);
}
.upcoming-case-status {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--brand);
  background: rgba(128, 219, 102, .035);
}
.upcoming-case-card h3 {
  margin: 0 0 9px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.05rem, 1.55vw, 1.25rem);
  line-height: 1.3;
  color: var(--text);
}
.upcoming-case-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}
.upcoming-case-studies-footnote {
  margin: 18px 0 0;
  color: var(--text-soft);
  font-size: 12px;
}
@media (max-width: 900px) {
  .upcoming-case-studies-heading {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }
}
@media (max-width: 680px) {
  .upcoming-case-studies-section {
    padding-top: 58px;
    padding-bottom: 58px;
  }
  .upcoming-case-grid {
    grid-template-columns: 1fr;
  }
  .upcoming-case-card:last-child {
    grid-column: auto;
  }
}