@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-latin-variable-20260730.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
}

@font-face {
  font-family: "DM Mono";
  src: url("/fonts/dm-mono-latin-400-20260730.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 500;
  font-display: optional;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-latin-400-20260730.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: optional;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-latin-italic-20260730.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: optional;
}

@font-face {
  font-family: "Carattere";
  src: url("/fonts/carattere-latin-20260730.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-400-20260730.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-600-20260730.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Playpen Sans Arabic";
  src: url("/fonts/playpen-sans-arabic-variable-20260730.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --navy: #0a1a31;
  --navy-deep: #071426;
  --navy-soft: #0e223c;
  --navy-raised: #132b46;
  --white: #f8f7f3;
  --text: #e7edf3;
  --muted: #a4b4c3;
  --quiet: #7b90a4;
  --blue: #82aef7;
  --cyan: #4d82d8;
  --cyan: #58d9e1;
  --success: #65e6a7;
  --amber: #f7b45a;
  --silver-shine: linear-gradient(108deg, #69727d 0%, #b8c0c8 17%, #f7f9fb 31%, #8b959f 44%, #ffffff 53%, #aeb6bf 66%, #747e89 82%, #d9dee3 100%);
  --interactive-gradient: linear-gradient(100deg,#67f7ff 0%,#22d3ee 20%,#0a1a31 46%,#0891b2 70%,#0a1a31 86%,#67f7ff 100%);
  --line: rgba(194, 214, 232, 0.16);
  --line-strong: rgba(194, 214, 232, 0.28);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
  --serif: "Instrument Serif", serif;
  --script: "Carattere", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: clip;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link {
  position: fixed; left: 1rem; top: -5rem; z-index: 1000;
  background: var(--white); color: var(--navy); padding: .8rem 1rem;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.cursor-glow {
  position: fixed; left: -10rem; top: -10rem; z-index: -1;
  width: 30rem; height: 30rem; border-radius: 50%;
  background: rgba(88, 217, 225, .05); filter: blur(70px);
  transform: translate(-50%, -50%); pointer-events: none;
}

.site-header {
  height: 84px; padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid var(--line); background: rgba(10,26,49,.9);
  backdrop-filter: blur(18px); position: fixed; inset: 0 0 auto; z-index: 100;
}
.brand { display: flex; align-items: center; gap: .85rem; justify-self: start; }
.brand-logo {
  position: relative; display: block; width: 82px; height: 44px;
  overflow: hidden; background: transparent;
}
.brand-logo img {
  position: absolute; width: 148px; height: 148px; max-width: none;
  left: -33px; top: -51px;
  opacity: 1;
  transition: opacity .34s cubic-bezier(.4,0,.2,1);
}
.brand-logo::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background-image: var(--silver-shine);
  background-size: 260% 100%;
  -webkit-mask-image: url("/logo-dark-512.webp");
  mask-image: url("/logo-dark-512.webp");
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 148px 148px;
  mask-size: 148px 148px;
  -webkit-mask-position: -33px -51px;
  mask-position: -33px -51px;
  filter: drop-shadow(0 0 0 rgba(242,246,250,0));
  animation: none;
  transition:
    opacity .34s cubic-bezier(.4,0,.2,1),
    filter .34s cubic-bezier(.4,0,.2,1);
}
.brand:is(:hover, :focus, :active) .brand-logo img { opacity: 0; }
.brand:is(:hover, :focus, :active) .brand-logo::after {
  opacity: 1;
  animation: silver-shine-sweep 1.8s cubic-bezier(.4,0,.2,1) 1 both;
  filter: drop-shadow(0 0 5px rgba(242,246,250,.32));
}
.brand:focus-visible {
  outline: 1px solid rgba(99,244,255,.7);
  outline-offset: 5px;
}
.brand-meta { font: .68rem/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
.site-header nav { display: flex; gap: 2rem; font-family: var(--mono); color: var(--muted); font-size: .76rem; text-transform: uppercase; }
.site-header nav a {
  position: relative;
  padding: .42rem .06rem;
  transition: color .24s ease, filter .24s ease;
}
.site-header nav a::after {
  content: "";
  position: absolute;
  right: -.08rem;
  bottom: .08rem;
  left: -.08rem;
  height: 1px;
  border-radius: 999px;
  background: rgba(88,217,225,.96);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  filter: drop-shadow(0 0 4px rgba(88,217,225,.28));
  opacity: 0;
  transform: scaleX(.18);
  transform-origin: center;
  transition: opacity .22s ease, transform .36s cubic-bezier(.22,1,.36,1);
}
.site-header nav a:is(.is-active, [aria-current="location"]) {
  color: var(--white);
  background-image: none;
  -webkit-text-fill-color: currentColor;
}
.site-header nav a:is(.is-active, [aria-current="location"])::after {
  opacity: 0;
  transform: scaleX(.18);
}
.site-header nav a:not(.is-active):not([aria-current="location"]):is(:hover, :focus-visible) {
  color: transparent;
  background-image: var(--interactive-gradient);
  background-size: 240% 100%;
  background-position: 100% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: galaxy-text-shift 2.8s linear infinite;
}
.site-header nav a:not(.is-active):not([aria-current="location"]):is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: scaleX(1);
}
.site-header nav a:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 7px rgba(99,244,255,.34));
}
.header-cta {
  justify-self: end; font-size: .8rem; display: flex; gap: .8rem;
  align-items: center; color: var(--white);
  padding: .62rem .78rem;
  border: 0;
  background-color: transparent;
  background-size: 240% 100%; position: relative;
  isolation: isolate;
  transition:
    filter .22s cubic-bezier(.4,0,.2,1);
}
.header-cta::before {
  content: "";
  position: absolute;
  left: .78rem;
  right: .78rem;
  bottom: .48rem;
  height: 1.5px;
  border-radius: 999px;
  background: rgba(88,217,225,.96);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.18) 9%,
    rgba(0,0,0,.72) 25%,
    #000 39%,
    #000 61%,
    rgba(0,0,0,.72) 75%,
    rgba(0,0,0,.18) 91%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.18) 9%,
    rgba(0,0,0,.72) 25%,
    #000 39%,
    #000 61%,
    rgba(0,0,0,.72) 75%,
    rgba(0,0,0,.18) 91%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0;
  transform: scaleX(.16);
  transform-origin: center;
  transition:
    opacity .2s cubic-bezier(.4,0,.2,1),
    transform .34s cubic-bezier(.22,1,.36,1);
}
.header-cta::after {
  content: "";
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .39rem;
  height: 5px;
  border-radius: 999px;
  background: rgba(88,217,225,.42);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.28) 18%,
    #000 40%,
    #000 60%,
    rgba(0,0,0,.28) 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.28) 18%,
    #000 40%,
    #000 60%,
    rgba(0,0,0,.28) 82%,
    transparent 100%
  );
  filter: blur(4px);
  pointer-events: none;
  opacity: 0;
  transform: scaleX(.36);
  transform-origin: center;
  transition:
    opacity .24s cubic-bezier(.4,0,.2,1),
    transform .42s cubic-bezier(.22,1,.36,1);
}
.header-cta:is(:hover, :focus, :active) {
  color: transparent;
  background-color: transparent;
  background-image: var(--interactive-gradient);
  background-position: 100% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: galaxy-text-shift 2.8s linear infinite;
  outline: none;
}
.header-cta:is(:hover, :focus, :focus-visible)::before {
  opacity: 1;
  transform: scaleX(1);
}
.header-cta:is(:hover, :focus, :focus-visible)::after {
  opacity: 1;
  transform: scaleX(1);
}
.header-cta:focus-visible {
  filter: drop-shadow(0 0 9px rgba(99,244,255,.45));
}
.header-cta:active { transform: translateY(1px); }
.header-cta > span:not(.header-cta-tooltip) {
  color: var(--cyan); font-size: 1.1rem;
  -webkit-text-fill-color: var(--cyan);
}
.header-cta-tooltip {
  position: absolute;
  top: calc(100% + 20px);
  right: -.7rem;
  width: min(286px, calc(100vw - 2rem));
  padding: 1rem 1.1rem 1.05rem;
  display: grid;
  gap: .42rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid rgba(88,217,225,.6);
  box-shadow: 0 18px 46px rgba(2,11,23,.28), 0 0 0 1px rgba(255,255,255,.04);
  text-align: left;
  white-space: normal;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-7px) scale(.98);
  transform-origin: top right;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  z-index: 4;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: initial;
  animation: none;
}
.header-cta-tooltip::before {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: -7px;
  width: 12px;
  height: 12px;
  background: var(--white);
  border-top: 1px solid rgba(88,217,225,.6);
  border-left: 1px solid rgba(88,217,225,.6);
  transform: rotate(45deg);
}
.header-cta-tooltip b {
  color: var(--navy);
  font: 650 .9rem/1.25 var(--sans);
  letter-spacing: -.025em;
  -webkit-text-fill-color: var(--navy);
}
.header-cta-tooltip small {
  color: #4f6478;
  font: 500 .55rem/1.6 var(--mono);
  letter-spacing: .02em;
  -webkit-text-fill-color: #4f6478;
}
.header-cta:is(:hover, :focus, :focus-visible) .header-cta-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: .1s;
}
@keyframes galaxy-text-shift {
  to { background-position: -140% 50%; }
}
@keyframes silver-shine-sweep {
  from { background-position: 135% 50%; }
  to { background-position: -115% 50%; }
}

.hero {
  min-height: 100svh; padding: 10rem clamp(1.25rem, 5vw, 5.5rem) 4rem;
  display: grid; grid-template-columns: minmax(0,1.02fr) minmax(420px,.98fr);
  gap: clamp(2rem, 4vw, 5rem); align-items: center; position: relative;
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.hero-grid {
  position: absolute; inset: 84px 0 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 6.25vw 6.25vw;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
  opacity: .45;
}
.hero-copy { z-index: 2; max-width: 880px; min-width: 0; }
.hero-mobile-break { display: none; }
.eyebrow {
  display: flex; gap: 1.3rem; align-items: center;
  font: 400 .65rem var(--mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--quiet);
}
.eyebrow span:first-child { color: var(--cyan); }
h1 {
  margin: 1.7rem 0 2rem;
  font-size: clamp(3.5rem, 5.8vw, 6.75rem);
  line-height: .86; letter-spacing: -.075em; font-weight: 600;
}
h1 em, h2 em {
  font-family: var(--script); font-style: normal; font-weight: 400;
  font-size: 1.14em; letter-spacing: -.012em;
}
h1 em { color: var(--cyan); }
h2 em { color: var(--cyan); }
.ink-accessible-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.ink-phrase-shell {
  display: inline;
  white-space: normal;
  overflow: visible;
}
.ink-word-shell {
  --ink-block-pad-start: .18em;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding-block: var(--ink-block-pad-start) .24em;
  margin-block: -.18em -.24em;
  vertical-align: baseline;
  overflow: visible;
}
.ink-phrase-final {
  position: relative;
  z-index: 1;
  display: inline-block;
  /* Match the measured Carattere outline bleed used by the SVG renderer. */
  padding-inline: .386em;
  margin-inline: -.386em;
  will-change: opacity;
  overflow: visible;
}
.ink-stroke-host {
  position: absolute !important;
  z-index: 2;
  top: calc(var(--ink-block-pad-start) + var(--ink-host-top, 0em));
  right: auto;
  bottom: auto;
  left: var(--ink-host-left, 0);
  display: block;
  width: var(--ink-host-width, 100%) !important;
  max-width: none !important;
  height: var(--ink-host-height, 1em) !important;
  color: currentColor;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: opacity;
}
.ink-stroke-host[hidden] { display: none !important; }
.ink-stroke-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: currentColor;
  filter:
    drop-shadow(0 .012em .012em rgba(3,13,25,.2))
    drop-shadow(0 0 .04em rgba(88,217,225,.14));
}
.ink-native-text {
  paint-order: stroke fill;
  stroke: currentColor;
  stroke-width: .18;
  stroke-linejoin: round;
}
.hero-copy h1 em {
  display: inline-block;
  position: relative;
  isolation: isolate;
  font-size: clamp(2.7rem, 5vw, 5.8rem);
  color: var(--cyan);
  -webkit-text-fill-color: var(--cyan);
}

.hero-copy h1 em:hover {
  color: var(--cyan);
  background-image: none;
  -webkit-text-fill-color: var(--cyan);
  animation: none;
  filter: none;
}

.hero-copy h1 em[data-handwriting-ready] .ink-phrase-final::after {
  content: none;
  position: absolute;
  z-index: 2;
  top: -.22em;
  left: 0;
  width: 100%;
  padding: .22em 0 .3em;
  color: transparent;
  white-space: nowrap;
  background-image:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 38%,
      rgba(255,255,255,.05) 43%,
      rgba(255,255,255,.72) 49%,
      rgba(255,255,255,.12) 55%,
      transparent 62%,
      transparent 100%
    ),
    linear-gradient(var(--cyan), var(--cyan));
  background-size: 260% 100%, 100% 100%;
  background-position: 140% 50%, 0 0;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  pointer-events: none;
  filter: none;
}
.hero-copy h1 em[data-handwriting-ready]:hover .ink-phrase-final {
  color: var(--cyan);
  background-image: none;
  -webkit-text-fill-color: var(--cyan);
  animation: none;
}
.hero-copy h1 em[data-handwriting-ready]:hover .ink-phrase-final::after {
  opacity: 0;
  animation: none;
}

@keyframes transparent-text-shine {
  from { background-position: 140% 50%, 0 0; }
  to { background-position: -120% 50%, 0 0; }
}
.hero-intro {
  max-width: 660px; font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.7; color: var(--muted);
}
.hero-actions { margin-top: 2.3rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.button {
  min-height: 52px; padding: 0 1.25rem; display: inline-flex;
  align-items: center; justify-content: center; font-size: .77rem;
}
.button-primary { background: var(--white); color: var(--navy); font-weight: 700; }
.button-primary > span { background-size: 240% 100%; }
.button-primary:is(:hover, :focus, :active) {
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(99,244,255,.45), 0 10px 35px rgba(10,26,49,.22);
  outline: none;
}
.button-primary:is(:hover, :focus, :active) > span {
  color: transparent;
  background-image: var(--interactive-gradient);
  background-position: 100% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: galaxy-text-shift 2.8s linear infinite;
}
.button-primary:focus-visible {
  box-shadow: 0 0 0 2px rgba(99,244,255,.75), 0 10px 35px rgba(10,26,49,.22);
}
.button-primary:active { transform: translateY(1px); }
.text-link { font: .72rem var(--mono); color: var(--muted); }
.text-link span { color: var(--cyan); margin-left: .5rem; }
.hero-index { position: absolute; bottom: 1.5rem; right: 2rem; font: .55rem var(--mono); color: var(--quiet); }

/* Hero: a real business operation rather than an abstract 3D object */
.hero-operation {
  position: relative; z-index: 2; min-width: 0; min-height: min(650px, 72vh);
  border: 1px solid var(--line-strong);
  background: rgba(7,20,38,.86);
  box-shadow: 0 40px 120px rgba(0,0,0,.24);
  overflow: hidden;
}
.operation-bar {
  height: 44px; padding: 0 .85rem; display: flex; justify-content: space-between;
  align-items: center; border-bottom: 1px solid var(--line);
  font: .58rem var(--mono); letter-spacing: .07em; color: var(--quiet);
}
.operation-bar span:first-child { display: flex; align-items: center; gap: .5rem; }
.operation-bar b { font: inherit; font-weight: 400; }
.operation-bar i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 13px var(--cyan);
}
.hero-operation[data-flow-state="executing"] .operation-bar i {
  background: var(--white); box-shadow: 0 0 16px var(--white);
}
.hero-scenario-tabs {
  position: absolute; z-index: 6; inset: 44px 0 auto;
  height: 36px; padding: 0 .65rem; display: flex; align-items: center;
  gap: .25rem; border-bottom: 1px solid var(--line);
  background: rgba(7,20,38,.92);
}
.hero-scenario-tabs button {
  min-height: 25px; padding: 0 .55rem; border: 0;
  background: transparent; color: var(--quiet); cursor: pointer;
  font: .55rem var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.hero-scenario-tabs button:hover,
.hero-scenario-tabs button[aria-pressed="true"] {
  background: var(--cyan); color: var(--navy-deep);
}
.operation-surface { position: absolute; inset: 80px 0 0; overflow: hidden; }
.operation-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(194,214,232,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194,214,232,.075) 1px, transparent 1px);
  background-size: 54px 54px;
}
.operation-grid::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,20,38,.2), transparent 35%, transparent 65%, rgba(7,20,38,.2));
}
.hero-flow-routes {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; overflow: visible; pointer-events: none;
}
.hero-route-path {
  fill: none; stroke: var(--line-strong); stroke-width: 1.2;
  marker-end: url(#hero-flow-arrow); vector-effect: non-scaling-stroke;
}
.hero-flow-routes marker path {
  stroke: var(--blue); stroke-width: 1.25; vector-effect: non-scaling-stroke;
}
.hero-route-packet {
  fill: var(--cyan); opacity: 0;
  filter: drop-shadow(0 0 5px rgba(88,217,225,.9));
}
.intent-card, .outcome-card, .operator-kernel, .business-node {
  border: 1px solid var(--line-strong);
  background: rgba(10,26,49,.92);
  transition: transform .2s;
}
.hero-operation.is-flow-sequenced .flow-stage .animated-number,
.hero-operation.is-flow-sequenced .operator-kernel > .operator-logo,
.hero-operation.is-flow-sequenced .business-node > i {
  opacity: 0;
  transform: scale(.72);
  transition: opacity .18s ease, transform .18s ease;
}
.hero-operation.is-flow-sequenced .flow-stage.is-flow-revealed .animated-number,
.hero-operation.is-flow-sequenced .operator-kernel.is-flow-revealed > .operator-logo,
.hero-operation.is-flow-sequenced .business-node.is-flow-revealed > i {
  opacity: 1;
  transform: scale(1);
}
.flow-stage.is-flow-active {
  border-color: var(--cyan);
  background: rgba(88,217,225,.07);
  box-shadow: 0 0 28px rgba(88,217,225,.08);
}
.intent-card {
  position: absolute; left: 5%; top: 18%; width: 32%;
  min-height: 120px; padding: 1rem; display: flex; flex-direction: column;
  z-index: 2;
}
.intent-card span, .outcome-card span, .operator-kernel > b {
  font: .55rem var(--mono); color: var(--cyan); letter-spacing: .07em;
}
.intent-card b { margin: auto 0 .8rem; font-size: clamp(.85rem,1.4vw,1.1rem); line-height: 1.45; font-weight: 500; }
.animated-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
}
.intent-card b .animated-number {
  margin-right: .1em;
  color: var(--cyan);
  font-size: 1.35em;
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: .8;
  vertical-align: -.05em;
}
.intent-card small, .outcome-card small, .operator-kernel small {
  color: var(--quiet); font: .56rem var(--mono);
}
.operator-kernel {
  position: absolute; left: 41%; top: 28%; width: 22%; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 2; background: transparent; box-shadow: 0 0 65px rgba(88,217,225,.07);
}
.operator-kernel.flow-stage.is-flow-active {
  background: transparent;
}
.operator-logo {
  display: block; position: relative; width: 74px; height: 39px;
  overflow: hidden; background: none !important;
  box-shadow: none !important;
}
.workflow-logo {
  display: block; position: relative; width: 74px; height: 39px;
  overflow: hidden; background: none !important;
  box-shadow: none !important;
}
.operator-logo img, .workflow-logo img {
  position: absolute; width: 134px; height: 134px; max-width: none;
  left: -30px; top: -47px; background: transparent !important;
}
.operator-kernel > b { margin-top: .65rem; color: var(--white); }
.operator-kernel small { margin-top: .3rem; color: var(--cyan); }
.business-systems {
  position: absolute; right: 5%; top: 12%; width: 27%;
  display: grid; gap: .4rem; z-index: 2;
}
.business-node {
  min-height: 47px; padding: .55rem .7rem;
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .55rem;
  align-items: center;
}
.business-node i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); grid-row: span 2;
}
.business-node span { font: .6rem var(--mono); color: var(--text); }
.business-node b { font: 400 .56rem var(--mono); color: var(--quiet); }
.business-node b .animated-number {
  margin-right: .12em;
  color: var(--cyan);
  font-size: .78rem;
  font-weight: 650;
  line-height: .8;
  vertical-align: -.06em;
}
.outcome-card {
  position: absolute; left: 10%; right: 9%; bottom: 15%;
  min-height: 92px; padding: 1rem; display: grid;
  grid-template-columns: .28fr 1fr; gap: .35rem 1rem; align-items: center;
  z-index: 2;
}
.outcome-card > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--white);
  font-size: clamp(.9rem,1.35vw,1.15rem);
  font-weight: 500;
  line-height: 1.2;
}
.outcome-card > p > span {
  display: inline-block;
  margin-right: .13em;
  color: var(--cyan);
  font-size: clamp(2.45rem,4.6vw,4.25rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.065em;
  line-height: .78;
  vertical-align: -.08em;
}
.outcome-card small { color: var(--muted); }
.operation-legend {
  position: absolute; left: 1rem; right: 1rem; top: .75rem;
  display: flex; justify-content: flex-end; gap: 1.1rem;
  font: .56rem var(--mono); color: var(--quiet);
}
.operation-legend span { display: flex; gap: .35rem; align-items: center; }
.operation-legend i { width: 5px; height: 5px; border-radius: 50%; }
.legend-live { background: var(--blue); }
.legend-action { background: var(--cyan); }
.legend-check { background: var(--white); }
.operation-journey {
  position: absolute; z-index: 4; right: 5%; bottom: 1.25rem; left: 5%;
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line);
}
.operation-journey li {
  position: relative; min-width: 0; padding: .52rem .62rem .4rem 1.45rem;
  isolation: isolate;
  opacity: .58; transition: opacity .24s ease;
}
.operation-journey li + li { border-left: 1px solid var(--line); }
.operation-journey li::before {
  content: ""; position: absolute; z-index: 2; top: -1px; right: 0; left: 0; height: 1px;
  background: var(--cyan); transform: scaleX(0); transform-origin: left;
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.operation-journey li::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgba(88,217,225,.055);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.operation-journey li.is-active,
.operation-journey li.is-complete { opacity: 1; }
.operation-journey li.is-active::after { opacity: 1; }
.operation-journey li.is-active::before,
.operation-journey li.is-complete::before { transform: scaleX(1); }
.operation-journey span {
  position: absolute; z-index: 1; left: .55rem; top: .55rem;
  color: var(--cyan); font: .56rem var(--mono);
}
.operation-journey b,
.operation-journey small { position: relative; z-index: 1; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-journey b { color: var(--text); font: 500 .56rem var(--mono); }
.operation-journey small { margin-top: .18rem; color: var(--quiet); font: .56rem var(--mono); }

@media (min-width: 601px) {
  .hero-operation[data-flow-layout="finance"] .intent-card {
    left: 5%; top: 10%; width: 32%;
  }
  .hero-operation[data-flow-layout="finance"] .business-systems {
    left: 5%; right: auto; top: 38%; width: 34%;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .hero-operation[data-flow-layout="finance"] .operator-kernel {
    left: 55%; top: 18%; width: 22%;
  }
  .hero-operation[data-flow-layout="finance"] .outcome-card {
    left: 48%; right: 5%;
  }
  .hero-operation[data-flow-layout="resilience"] .intent-card {
    left: 5%; top: 12%; width: 27%;
  }
  .hero-operation[data-flow-layout="resilience"] .operator-kernel {
    left: 39%; top: 24%; width: 22%;
  }
  .hero-operation[data-flow-layout="resilience"] .business-systems {
    right: 5%; top: 9%; width: 27%;
  }
  .hero-operation[data-flow-layout="resilience"] .outcome-card {
    left: 18%; right: 18%;
  }
  .hero-operation[data-flow-layout="field"] .intent-card {
    left: 4%; top: 18%; width: 27%;
  }
  .hero-operation[data-flow-layout="field"] .business-systems {
    left: 37%; right: auto; top: 8%; width: 26%;
  }
  .hero-operation[data-flow-layout="field"] .operator-kernel {
    left: 70%; top: 25%; width: 22%;
  }
  .hero-operation[data-flow-layout="field"] .outcome-card {
    left: 36%; right: 5%;
  }
}

.console-section, .platforms, .capabilities, .contact {
  padding: clamp(6rem,11vw,10rem) clamp(1.25rem,5vw,5.5rem);
}
.section-heading {
  display: grid; grid-template-columns: .45fr 1fr;
  gap: 3rem; margin-bottom: 4rem;
}
.kicker {
  margin: 0; font: .68rem var(--mono); text-transform: uppercase;
  letter-spacing: .15em; color: var(--cyan);
}
.section-heading h2, .proof h2, .contact h2 {
  margin: 0; font-size: clamp(2.8rem,5.8vw,6.2rem);
  line-height: .98; letter-spacing: -.06em; font-weight: 500;
}
.section-heading h2 {
  letter-spacing: -.045em;
  word-spacing: .06em;
}
.operator-console {
  border: 1px solid var(--line-strong); background: var(--navy-deep);
  box-shadow: 0 40px 100px rgba(0,0,0,.25);
}
.console-bar, .story-topline {
  display: flex; justify-content: space-between; padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--line); color: var(--quiet);
  font: .55rem var(--mono); letter-spacing: .1em;
}
.console-bar span:first-child { display: flex; align-items: center; gap: .6rem; }
.console-bar i, .live-dot::before {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
}
.console-body { padding: clamp(1.5rem,4vw,3.5rem); }
.console-body label {
  display: block; color: var(--white);
  font-size: clamp(1.25rem,2vw,1.9rem); margin-bottom: 1rem;
}
.intent-row {
  display: grid; grid-template-columns: 1fr auto;
  border-bottom: 1px solid var(--line-strong);
}
.intent-row input {
  border: 0; outline: 0; background: transparent; color: var(--white);
  padding: 1.1rem 0; min-width: 0;
  font: 400 clamp(1rem,2vw,1.45rem) var(--mono);
}
.run-intent {
  border: 0; background: var(--white); color: var(--navy);
  padding: 0 1.4rem; font-weight: 700; cursor: pointer;
}
.run-intent:hover { background: var(--cyan); color: var(--white); }
.intent-row input[readonly] { cursor: default; user-select: none; }
.run-intent.is-running span { display: inline-block; animation: run-arrow .5s infinite alternate; }
@keyframes run-arrow { to { transform: translateX(5px); } }
.console-body > p { font: .61rem var(--mono); color: var(--quiet); }
.prompt-list { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.prompt-list button {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  padding: .68rem .85rem; cursor: pointer; font: .62rem var(--mono);
}
.prompt-list button:hover, .prompt-list .is-selected {
  border-color: var(--cyan); color: var(--white);
  background: rgba(77,130,216,.16);
}
.execution {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.25rem; display: grid; grid-template-columns: repeat(4,1fr);
  position: relative;
}
.execution-step {
  display: flex; gap: .8rem; padding: 1rem;
  opacity: 1; position: relative; z-index: 1;
}
.execution-step + .execution-step { border-left: 1px solid var(--line); }
.execution-step > span { font: .58rem var(--mono); color: var(--blue); }
.execution-step b { display: block; margin-bottom: .35rem; font-size: .84rem; color: var(--white); }
.execution-step small { color: var(--muted); font: .55rem/1.5 var(--mono); }
.execution-step.is-active, .execution-step.is-complete { opacity: 1; }
.execution-step.is-active { background: rgba(88,217,225,.07); }
.execution-step.is-active > span { color: var(--cyan); }
.execution-step.is-complete > span { color: var(--white); }
.console-result {
  padding: 1.5rem; display: grid; grid-template-columns: .25fr 1fr auto;
  gap: 1.5rem; align-items: center;
}
.console-result[hidden] { display: none; }
.console-result p, .console-result span { font: .56rem var(--mono); color: var(--quiet); }
.console-result strong { font-size: .85rem; font-weight: 500; line-height: 1.45; color: var(--text); }
.console-result span { color: var(--cyan); }
.console-result strong .animated-number {
  margin: 0 .1em;
  color: var(--cyan);
  font: 650 clamp(1.65rem,3vw,2.7rem)/.75 var(--sans);
  vertical-align: -.13em;
}
.console-result > span {
  min-width: 4.5rem;
  text-align: right;
  white-space: nowrap;
}
.console-result > span .animated-number {
  margin-right: .08em;
  font: 650 clamp(.525rem,.9vw,.725rem)/1 var(--sans);
  vertical-align: -.08em;
}

/* Scroll story: an operating workflow with business semantics */
.system-story {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.story-visual {
  position: sticky; top: 84px; height: calc(100vh - 84px);
  border-right: 1px solid var(--line); background: var(--navy-deep);
}
.story-mobile-panel { display: none; }
.system-diagram {
  height: calc(100% - 39px); position: relative;
  overflow: hidden; transition: background .5s;
}
.workflow-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(194,214,232,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194,214,232,.07) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, black, transparent);
}
.workflow-routes {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; overflow: visible; pointer-events: none;
}
.workflow-route-path {
  fill: none; stroke: var(--line-strong); stroke-width: 1.15;
  marker-end: url(#workflow-arrow); vector-effect: non-scaling-stroke;
}
.workflow-routes marker path {
  stroke: var(--blue); stroke-width: 1.25; vector-effect: non-scaling-stroke;
}
.workflow-route-packet {
  fill: var(--cyan); opacity: 0;
  filter: drop-shadow(0 0 5px rgba(88,217,225,.9));
}
.workflow-module {
  position: absolute; z-index: 1; border: 1px solid var(--line-strong);
  background: rgba(10,26,49,.94); padding: .9rem;
  transition: border-color .4s, background-color .4s, box-shadow .4s;
  will-change: transform, opacity;
}
.workflow-module.is-workflow-active {
  border-color: var(--cyan);
  background: rgba(88,217,225,.085);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}
.workflow-module.is-workflow-support {
  border-color: rgba(77,130,216,.48);
  background: rgba(18,43,75,.72);
}
.workflow-module > span:first-child:not(.workflow-logo) {
  font: .55rem var(--mono); letter-spacing: .07em; color: var(--quiet);
}
.workflow-intent { left: 6%; top: 14%; width: 35%; min-height: 105px; }
.workflow-intent b { display: block; margin: 1rem 0 .55rem; font-size: .9rem; color: var(--white); }
.workflow-intent small, .workflow-outcome small { font: .56rem var(--mono); color: var(--quiet); }
.workflow-context { right: 5%; top: 10%; width: 34%; }
.workflow-context ul { list-style: none; padding: 0; margin: .7rem 0 0; }
.workflow-context li {
  display: flex; align-items: center; gap: .5rem;
  padding: .36rem 0; border-top: 1px solid var(--line);
  font: .57rem var(--mono); color: var(--muted);
}
.workflow-context li i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}
.workflow-signals { left: 6%; bottom: 31%; width: 28%; }
.workflow-signal-list { display: grid; gap: .42rem; margin-top: .65rem; }
.workflow-signal-list > span {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .42rem;
  padding-top: .38rem; border-top: 1px solid var(--line);
  font: .56rem var(--mono); color: var(--muted);
}
.workflow-signal-list i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}
.workflow-signal-list b { color: var(--quiet); font-weight: 500; }
.workflow-signals.is-workflow-active .workflow-signal-list i {
  background: var(--cyan); box-shadow: 0 0 9px rgba(88,217,225,.82);
  animation: workflow-signal-pulse 1.15s ease-in-out infinite alternate;
}
.workflow-signals.is-workflow-active .workflow-signal-list > span:nth-child(2) i { animation-delay: .16s; }
.workflow-signals.is-workflow-active .workflow-signal-list > span:nth-child(3) i { animation-delay: .32s; }
.workflow-operator {
  left: 38%; top: 39%; width: 28%; min-height: 125px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  background: transparent;
}
.workflow-operator > b { margin-top: .55rem; font: .64rem var(--mono); color: var(--white); }
.workflow-operator small { margin-top: .3rem; font: .56rem var(--mono); color: var(--cyan); }
.workflow-operator.is-workflow-active {
  background: transparent;
  box-shadow: 0 0 80px rgba(88,217,225,.14);
}
.workflow-operator.is-workflow-support { background: transparent; }
.workflow-policy { right: 5%; top: 40%; width: 30%; min-height: 92px; }
.workflow-policy > b,
.workflow-audit > b {
  display: block; margin: .68rem 0 .34rem; color: var(--white);
  font: 600 .66rem/1.25 var(--sans);
}
.workflow-policy > small,
.workflow-audit > small { color: var(--quiet); font: .56rem/1.45 var(--mono); }
.workflow-policy.is-workflow-active::after,
.workflow-audit.is-workflow-active::after {
  content: ""; position: absolute; top: .82rem; right: .82rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 10px rgba(101,230,167,.7);
}
.workflow-tools { left: 6%; top: 14%; width: 30%; min-height: 92px; }
.workflow-tools > div { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .72rem; }
.workflow-tools > div b {
  padding: .36rem .48rem; border: 1px solid var(--line-strong);
  color: var(--muted); font: 500 .56rem var(--mono);
}
.workflow-tools.is-workflow-active > div b {
  color: var(--white); border-color: rgba(88,217,225,.66);
  animation: workflow-tool-ready .44s cubic-bezier(.22,1,.36,1) both;
}
.workflow-tools.is-workflow-active > div b:nth-child(2) { animation-delay: .08s; }
.workflow-tools.is-workflow-active > div b:nth-child(3) { animation-delay: .16s; }
.workflow-actions { left: 6%; bottom: 4%; width: 44%; }
.workflow-actions ol { list-style: none; padding: 0; margin: .6rem 0 0; }
.workflow-actions li {
  position: relative;
  overflow: hidden;
  min-height: 34px; display: grid; grid-template-columns: auto 1fr auto;
  gap: .55rem; align-items: center; border-top: 1px solid var(--line);
  font: .56rem var(--mono); color: var(--muted);
}
.workflow-actions li::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-115%);
  background: linear-gradient(90deg, transparent, rgba(101,230,167,.14), transparent);
}
.workflow-actions li.is-terminal-running::after {
  opacity: 1;
  animation: terminal-test-scan .34s cubic-bezier(.22,.8,.22,1) 1 both;
}
.workflow-actions li.is-terminal-passed {
  color: var(--text);
  border-top-color: rgba(101,230,167,.22);
}
.workflow-actions li > b { font-weight: 400; color: var(--blue); }
.workflow-actions li > i {
  font-style: normal;
  color: var(--cyan);
  font-weight: 600;
  letter-spacing: .06em;
}
.workflow-actions li > i[data-terminal-status="done"] {
  color: var(--success);
  text-shadow: 0 0 12px rgba(101,230,167,.22);
}
.workflow-actions li > i[data-terminal-status="done"]::before {
  content: "✓";
  margin-right: .32rem;
}
.workflow-outcome { right: 5%; bottom: 12%; width: 38%; min-height: 105px; }
.workflow-outcome > b {
  display: block; margin: 1rem 0 .5rem;
  font-size: 1.2rem; color: var(--white);
}
.workflow-outcome > b,
.workflow-outcome > small {
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22,.8,.22,1);
}
.workflow-outcome[data-result-visible="true"] > b,
.workflow-outcome[data-result-visible="true"] > small {
  opacity: 1;
  transform: translateY(0);
}
.workflow-outcome > b [data-count-target] {
  margin-right: .1em;
  color: var(--cyan);
  font-size: clamp(2rem,3.6vw,3.5rem);
  font-weight: 650;
  line-height: .75;
  vertical-align: -.1em;
}
.workflow-outcome small [data-count-target] {
  color: var(--cyan);
  font-size: .78rem;
  font-weight: 600;
}
.workflow-audit { left: 6%; top: 14%; width: 34%; min-height: 96px; }
.workflow-audit.is-workflow-active {
  border-color: var(--success);
  background: rgba(101,230,167,.07);
}
.system-diagram[data-phase="act"] .workflow-actions li > i:not([data-terminal-status="done"]) { color: var(--white); }
.system-diagram[data-phase="evolve"] .workflow-outcome > b { color: var(--cyan); }
.diagram-status {
  position: absolute; bottom: 1rem; left: 1rem;
  font: .56rem var(--mono); color: var(--quiet);
  display: flex; gap: .5rem; align-items: center;
}
.diagram-status i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 9px var(--cyan);
}
@keyframes terminal-test-scan {
  0% { transform: translateX(-115%); }
  100% { transform: translateX(115%); }
}
@keyframes workflow-signal-pulse {
  from { opacity: .45; transform: scale(.72); }
  to { opacity: 1; transform: scale(1.18); }
}
@keyframes workflow-tool-ready {
  from { opacity: .2; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.story-copy { padding: 0 clamp(1.5rem,5vw,5rem); }
.story-step {
  min-height: 82vh; display: flex; flex-direction: column;
  justify-content: center; opacity: .82; transition: opacity .4s;
}
.story-step.is-current { opacity: 1; }
.story-step > span { font: .59rem var(--mono); color: var(--cyan); }
.story-step h2 {
  font-size: clamp(2rem,4vw,4.4rem); line-height: 1;
  letter-spacing: -.055em; margin: 1rem 0 1.5rem;
  font-weight: 500; color: var(--white);
}
.story-step p { max-width: 540px; color: var(--muted); line-height: 1.8; }

.platform-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 1rem; }
.platform-card {
  min-height: 500px; padding: 1.4rem; border: 1px solid var(--line);
  display: flex; flex-direction: column; position: relative;
  overflow: hidden; background: var(--navy-soft);
}
.platform-card:nth-child(1) { grid-column: span 4; }
.platform-card:nth-child(2) { grid-column: span 5; }
.platform-card:nth-child(3) { grid-column: span 3; }
.card-top {
  display: flex; justify-content: space-between;
  font: .56rem var(--mono); color: var(--quiet);
}
.live-dot { display: flex; gap: .4rem; align-items: center; }
.live-dot::before { content: ""; display: inline-block; }
.platform-card h3 {
  margin: auto 0 1rem; font-size: clamp(2.5rem,4.5vw,5rem);
  letter-spacing: -.06em; color: var(--white);
}
.platform-card p {
  color: var(--muted); line-height: 1.65;
  min-height: 105px; font-size: .87rem;
}
.platform-card a {
  border-top: 1px solid var(--line); padding-top: 1rem;
  display: flex; justify-content: space-between; font: .62rem var(--mono);
}
.platform-card a span { color: var(--cyan); }
.mini-chart {
  position: absolute; inset: 4.5rem 1.5rem auto; height: 150px;
  display: flex; align-items: end; gap: 6px; opacity: .64;
}
.mini-chart i { flex: 1; background: linear-gradient(var(--blue), var(--cyan)); height: 20%; }
.mini-chart i:nth-child(2) { height: 37%; }
.mini-chart i:nth-child(3) { height: 28%; }
.mini-chart i:nth-child(4) { height: 69%; }
.mini-chart i:nth-child(5) { height: 54%; }
.mini-chart i:nth-child(6) { height: 82%; }
.mini-chart i:nth-child(7) { height: 94%; }
.operator-thread {
  position: absolute; top: 5.2rem; left: 1.4rem; right: 1.4rem;
  font: .62rem var(--mono);
}
.operator-thread span {
  display: block; padding: .9rem; border: 1px solid var(--line); margin-bottom: .5rem;
}
.operator-thread span:last-child {
  margin-left: 14%; color: var(--cyan); background: rgba(88,217,225,.06);
}
.operator-thread span:last-child .animated-number {
  margin-right: .12em;
  font: 650 1.35rem/.8 var(--sans);
  vertical-align: -.1em;
}
.order-flow {
  position: absolute; top: 6rem; left: 1.4rem; right: 1.4rem;
  display: flex; gap: .4rem; align-items: center;
  font: .56rem var(--mono); color: var(--blue);
}
.order-flow i { height: 1px; background: var(--line-strong); flex: 1; }

.client-proof-strip {
  display: grid;
  grid-template-columns: minmax(210px,.3fr) minmax(0,.7fr);
  gap: 2rem;
  align-items: center;
  padding: 1.15rem clamp(1.25rem,5vw,5.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #0d203a;
}
.client-proof-strip p {
  margin: 0;
  color: var(--muted);
  font: .57rem/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.client-proof-strip div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  overflow: hidden;
}
.client-proof-strip span {
  position: relative;
  flex: 0 0 auto;
  color: rgba(232,240,249,.74);
  font-size: .72rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.client-proof-strip span + span::before {
  content: "";
  position: absolute;
  inset-inline-start: -.8rem;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cyan);
}

.product-section-heading,
.partner-heading {
  align-items: start;
}
.product-section-heading > p,
.partner-heading > p {
  margin: .2rem 0 0;
  max-width: 620px;
  color: var(--muted);
  line-height: 1.75;
}
.product-feature {
  display: grid;
  grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr);
  min-height: 660px;
  margin-top: 5rem;
  border: 1px solid var(--line-strong);
  background: #08172b;
  overflow: hidden;
}
.product-feature-copy,
.product-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.product-feature-copy {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem,3.5vw,3.5rem);
  border-inline-end: 1px solid var(--line);
  background: linear-gradient(150deg,rgba(10,26,49,.98),rgba(12,34,59,.9));
}
.product-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--quiet);
  font: .56rem/1.5 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.product-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--cyan);
}
.product-status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.product-feature h3,
.product-story h3 {
  margin: auto 0 1rem;
  color: var(--white);
  font-weight: 500;
  letter-spacing: -.06em;
}
.product-feature h3 { font-size: clamp(4.2rem,7.4vw,8.6rem); }
.product-story h3 { font-size: clamp(3.1rem,5.4vw,6.4rem); }
.product-statement {
  margin: 0 0 1.1rem;
  color: var(--white);
  font-size: clamp(1.25rem,2.1vw,2.2rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.product-description,
.product-copy > p:not(.product-statement) {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.75;
}
.product-feature a,
.product-story a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--white);
  font: .59rem var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.product-feature a span,
.product-story a span { color: var(--cyan); }
.operium-art {
  position: relative;
  min-height: 660px;
  background: #061222;
  overflow: hidden;
}
.operium-art::after {
  content: "ORIGINAL ART / OPERIUM BETA";
  position: absolute;
  inset-inline-end: 1rem;
  bottom: 1rem;
  z-index: 3;
  padding: .45rem .6rem;
  border: 1px solid rgba(215,236,247,.26);
  background: rgba(5,18,34,.72);
  color: rgba(232,240,249,.68);
  font: .5rem var(--mono);
  letter-spacing: .08em;
}
.operium-art figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(215,236,247,.18);
  box-shadow: 0 28px 70px rgba(0,0,0,.32);
}
.operium-art figure:first-child {
  inset: 5% 13% 24% 5%;
  transform: rotate(-1.4deg);
}
.operium-art figure:last-child {
  inset: 42% 4% 5% 30%;
  transform: rotate(1.7deg);
}
.operium-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-chapters {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
}
.product-story {
  display: grid;
  grid-template-columns: minmax(300px,.76fr) minmax(0,1.24fr);
  min-height: 500px;
  border-inline-start: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--navy-soft);
  overflow: hidden;
}
.product-story:nth-child(even) { grid-template-columns: minmax(0,1.24fr) minmax(300px,.76fr); }
.product-story:nth-child(even) .product-copy { order: 2; border-inline-start: 1px solid var(--line); }
.product-story:nth-child(even) .product-visual { order: 1; }
.product-copy {
  padding: clamp(1.5rem,3vw,3rem);
  border-inline-end: 1px solid var(--line);
}
.product-visual {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  background-color: #0b1e37;
  background-image:
    linear-gradient(rgba(99,159,216,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,159,216,.08) 1px,transparent 1px);
  background-size: 42px 42px;
}
.droosy-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem,2vw,1.8rem);
  padding: 2rem;
}
.droosy-visual span {
  position: relative;
  z-index: 2;
  width: clamp(88px,11vw,150px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(10,26,49,.92);
  color: var(--white);
  font: .55rem var(--mono);
}
.droosy-visual span:nth-of-type(2) { border-color: var(--cyan); box-shadow: 0 0 42px rgba(88,217,225,.15); }
.droosy-visual i { width: clamp(24px,6vw,100px); height: 1px; background: linear-gradient(90deg,var(--blue),var(--cyan)); }
.venae-visual { display: grid; place-items: center; }
.venae-visual::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--cyan),transparent);
}
.venae-visual b {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(96px,12vw,170px);
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(10,26,49,.95);
  color: var(--white);
  font: .56rem var(--mono);
}
.venae-visual b:nth-child(1) { left: 10%; top: 18%; }
.venae-visual b:nth-child(2) { left: 40%; top: 38%; border-color: var(--cyan); }
.venae-visual b:nth-child(3) { right: 9%; bottom: 16%; }
.venae-visual span {
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(88,217,225,.2);
  box-shadow: inset 0 0 80px rgba(77,130,216,.08);
}
.rivaq-visual::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 21%;
  height: 57%;
  border: 1px solid var(--cyan);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(8deg);
}
.rivaq-visual i {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  background: var(--navy);
}
.rivaq-visual i:nth-of-type(1) { left: 17%; top: 66%; }
.rivaq-visual i:nth-of-type(2) { left: 48%; top: 22%; }
.rivaq-visual i:nth-of-type(3) { right: 14%; top: 53%; }
.rivaq-visual b {
  position: absolute;
  right: 9%;
  bottom: 12%;
  color: var(--white);
  font: .56rem var(--mono);
}
.ahd-visual { display: grid; place-items: center; }
.ahd-visual i {
  width: min(48%,270px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 80px rgba(88,217,225,.12), inset 0 0 60px rgba(77,130,216,.1);
}
.ahd-visual span {
  position: absolute;
  z-index: 2;
  padding: .7rem .9rem;
  border: 1px solid var(--line-strong);
  background: rgba(10,26,49,.94);
  color: var(--white);
  font: .55rem var(--mono);
}
.ahd-visual span:nth-child(1) { top: 14%; left: 16%; }
.ahd-visual span:nth-child(2) { top: 45%; right: 10%; }
.ahd-visual span:nth-child(3) { bottom: 13%; left: 23%; }
.sayr-visual::before,
.sayr-visual::after {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  height: 1px;
  background: rgba(99,159,216,.45);
  transform: rotate(-12deg);
}
.sayr-visual::before { top: 42%; }
.sayr-visual::after { top: 58%; }
.sayr-visual i {
  position: absolute;
  left: 43%;
  top: 43%;
  width: 76px;
  height: 34px;
  border: 1px solid var(--cyan);
  border-radius: 18px 24px 8px 8px;
  box-shadow: 0 0 32px rgba(88,217,225,.18);
}
.sayr-visual span {
  position: absolute;
  color: var(--quiet);
  font: .52rem var(--mono);
}
.sayr-visual span:nth-of-type(1) { left: 9%; top: 62%; }
.sayr-visual span:nth-of-type(2) { left: 44%; top: 66%; color: var(--cyan); }
.sayr-visual span:nth-of-type(3) { right: 8%; top: 36%; }
.scoplix-visual {
  display: grid;
  grid-template-columns: repeat(2,minmax(100px,1fr));
  gap: 1rem;
  padding: clamp(2rem,6vw,6rem);
}
.scoplix-visual span {
  display: grid;
  place-items: center;
  min-height: 110px;
  border: 1px solid var(--line-strong);
  background: rgba(10,26,49,.88);
  color: var(--cyan);
  font: .58rem var(--mono);
}
.scoplix-visual b {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%,-50%);
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--cyan);
  background: var(--navy);
  color: var(--white);
  font: .56rem var(--mono);
}

.proof {
  background: var(--white); color: var(--navy);
  padding: clamp(6rem,11vw,10rem) clamp(1.25rem,5vw,5.5rem);
  min-width: 0;
  contain: inline-size;
}
.proof > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.proof .kicker { color: #285d99; }
.proof-meta {
  display: flex; justify-content: space-between;
  font: .72rem/1.4 var(--mono); text-transform: uppercase;
}
.proof-meta > span { color: #536a80; }
.proof-headline {
  display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr);
  gap: clamp(2.5rem,5vw,5rem); align-items: center;
  margin: clamp(3.5rem,7vw,5.5rem) 0;
}
.proof-headline > * { min-width: 0; }
.proof h2 {
  min-height: 1.9em;
  font-size: clamp(2.8rem,5.15vw,5.6rem);
  line-height: .94;
}
.proof h2 > span { display: inline-block; }
.proof h2 em { color: #087986; }
.proof-headline p {
  max-width: 600px; min-height: 5.4em; margin: 0;
  color: #536b7f; font-size: clamp(.95rem,1.18vw,1.08rem); line-height: 1.72;
}
.proof-scenarios {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  border: 1px solid rgba(10,26,49,.2); border-bottom: 0;
}
.proof-scenarios button {
  position: relative; overflow: hidden;
  min-height: 56px; padding: .9rem 1rem; border: 0;
  background: transparent; color: #536a80; cursor: pointer;
  text-align: left; font: .8rem/1.35 var(--mono); letter-spacing: .035em;
}
.proof-tab-progress {
  position: absolute; right: 0; bottom: 0; left: 0; height: 2px;
  background: var(--cyan); transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}
.proof-scenarios button + button { border-left: 1px solid rgba(10,26,49,.15); }
.proof-scenarios button:hover {
  background: rgba(10,26,49,.08); color: var(--navy);
}
.proof-scenarios button:active,
.proof-scenarios button[aria-selected="true"] {
  background: var(--navy); color: var(--white);
}
.proof-network {
  --proof-accent: #087986;
  --proof-accent-soft: rgba(8,121,134,.07);
  --proof-alert: #95520d;
  display: grid;
  grid-template-columns:
    minmax(0,.23fr)
    minmax(0,.49fr)
    minmax(0,.28fr);
  align-items: stretch; gap: 0; min-height: 430px; padding: 0;
  border: 1px solid rgba(10,26,49,.2); font: .75rem/1.4 var(--mono);
  position: relative; isolation: isolate; overflow: hidden;
}
.proof-network::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb,var(--proof-accent) 7%,transparent) 0, transparent 38%),
    linear-gradient(90deg,transparent,rgba(10,26,49,.018),transparent);
  opacity: .9; pointer-events: none;
  transition: opacity .35s ease;
}
.proof-network[data-proof-state="retail"] {
  --proof-accent: #285d99;
  --proof-accent-soft: rgba(40,93,153,.07);
}
.proof-network[data-proof-state="finance"] {
  --proof-accent: #176f87;
  --proof-accent-soft: rgba(23,111,135,.07);
}
.proof-stage-bar {
  grid-column: 1 / -1;
  min-height: 50px; padding: .8rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid rgba(10,26,49,.14);
  color: #536a80; background: rgba(255,255,255,.42);
  font: .78rem/1.35 var(--mono); letter-spacing: .055em;
}
.proof-stage-bar > span { display: inline-flex; align-items: center; gap: .55rem; }
.proof-stage-bar > span i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--proof-accent); box-shadow: 0 0 0 5px var(--proof-accent-soft);
}
.proof-stage-bar b {
  color: var(--proof-accent); font-weight: 500; text-align: end;
}
.proof-column-heading {
  min-width: 0; min-height: 34px; display: grid;
  grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .55rem;
  padding-bottom: .72rem; border-bottom: 1px solid rgba(10,26,49,.13);
  color: #63798d; font: .75rem/1.3 var(--mono); letter-spacing: .045em;
}
.proof-column-heading > span { color: var(--proof-accent); }
.proof-column-heading > small {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: inherit; color: #536a80;
}
.proof-column-heading > b {
  color: var(--proof-accent); font-weight: 500; white-space: nowrap;
}
.proof-column-heading > b::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-inline-end: .38rem;
  border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--proof-accent-soft);
  vertical-align: .02em;
}
.proof-object-label {
  display: block; margin-bottom: .8rem;
  color: #63798d; font: .7rem/1.45 var(--mono); letter-spacing: .045em;
}
.network-city {
  display: flex; flex-direction: column; gap: .42rem;
  align-self: stretch; min-width: 0; min-height: 250px;
  margin: 1.25rem; padding: 1rem 1rem 1.05rem 1.15rem;
  border: 1px solid rgba(10,26,49,.12); border-left: 2px solid var(--proof-accent);
  background: linear-gradient(145deg,var(--proof-accent-soft),rgba(255,255,255,.42));
  position: relative; overflow: hidden;
}
.network-city::after {
  content: ""; position: absolute; inset: auto -30% 0;
  height: 1px; background: linear-gradient(90deg,transparent,var(--proof-accent),transparent);
  opacity: .52; transform: translate3d(-35%,0,0);
  animation: proof-source-scan 2.8s cubic-bezier(.4,0,.2,1) infinite;
}
.proof-source-copy {
  display: flex; flex-direction: column; gap: .42rem; margin-top: .9rem;
}
.network-city .proof-object-label { margin-bottom: .35rem; }
.proof-source-copy > span { color: var(--navy); font-size: .9rem; font-weight: 650; }
.proof-source-copy > b { color: var(--proof-accent); }
.proof-source-visual {
  height: 82px; min-height: 82px; margin-top: auto; position: relative;
}
.proof-network[data-proof-state="warehouse"] .proof-source-visual {
  display: grid; grid-template-columns: repeat(4,1fr); align-items: center;
}
.proof-network[data-proof-state="warehouse"] .proof-source-visual::before {
  content: ""; position: absolute; right: 8%; left: 8%; top: 50%;
  height: 1px; background: color-mix(in srgb,var(--proof-accent) 38%,transparent);
}
.proof-network[data-proof-state="warehouse"] .proof-source-visual i {
  z-index: 1; justify-self: center; width: 8px; height: 8px;
  border: 2px solid var(--white); border-radius: 50%;
  background: var(--proof-accent); box-shadow: 0 0 0 5px var(--proof-accent-soft);
  animation: proof-source-node 2.25s ease-in-out infinite;
}
.proof-network[data-proof-state="warehouse"] .proof-source-visual i:nth-child(2) { animation-delay: .18s; }
.proof-network[data-proof-state="warehouse"] .proof-source-visual i:nth-child(3) { animation-delay: .36s; }
.proof-network[data-proof-state="warehouse"] .proof-source-visual i:nth-child(4) { animation-delay: .54s; }
.proof-network[data-proof-state="retail"] .proof-source-visual {
  display: flex; align-items: end; gap: 7px; padding-inline: .25rem;
  border-bottom: 1px solid rgba(10,26,49,.18);
}
.proof-network[data-proof-state="retail"] .proof-source-visual i {
  flex: 1; height: 38%; background: var(--proof-accent); opacity: .48;
  transform-origin: center bottom; animation: proof-bar-live 2.2s ease-in-out infinite alternate;
}
.proof-network[data-proof-state="retail"] .proof-source-visual i:nth-child(2) { height: 72%; opacity: .7; animation-delay: -.5s; }
.proof-network[data-proof-state="retail"] .proof-source-visual i:nth-child(3) { height: 54%; opacity: .58; animation-delay: -1s; }
.proof-network[data-proof-state="retail"] .proof-source-visual i:nth-child(4) { height: 92%; opacity: .92; animation-delay: -1.5s; }
.proof-network[data-proof-state="finance"] .proof-source-visual {
  display: grid; align-content: center; gap: 10px;
}
.proof-network[data-proof-state="finance"] .proof-source-visual i {
  height: 1px; width: 100%; background: rgba(10,26,49,.2); position: relative;
}
.proof-network[data-proof-state="finance"] .proof-source-visual i::after {
  content: ""; position: absolute; inset: -2px auto -2px 0;
  width: 42%; background: var(--proof-accent); opacity: .72;
  transform-origin: left center; animation: proof-ledger-live 2.4s ease-in-out infinite alternate;
}
.proof-network[data-proof-state="finance"] .proof-source-visual i:nth-child(2)::after { width: 68%; animation-delay: -.45s; }
.proof-network[data-proof-state="finance"] .proof-source-visual i:nth-child(3)::after {
  width: 28%; background: #d58b32; animation-delay: -.9s;
}
.proof-network[data-proof-state="finance"] .proof-source-visual i:nth-child(4)::after { width: 82%; animation-delay: -1.35s; }
@keyframes proof-source-scan {
  0% { transform: translate3d(-35%,0,0); opacity: 0; }
  18%,82% { opacity: .52; }
  100% { transform: translate3d(35%,0,0); opacity: 0; }
}
@keyframes proof-source-node {
  0%,100% { transform: scale(.82); opacity: .55; }
  50% { transform: scale(1); opacity: 1; }
}
@keyframes proof-bar-live {
  from { transform: scaleY(.72); }
  to { transform: scaleY(1); }
}
@keyframes proof-ledger-live {
  from { transform: scaleX(.68); opacity: .45; }
  to { transform: scaleX(1); opacity: .82; }
}
.proof-process {
  min-width: 0; padding: 1.25rem 1.4rem;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid rgba(10,26,49,.12);
  border-left: 1px solid rgba(10,26,49,.12);
}
.network-line {
  display: flex; align-items: center; height: 1px; margin-top: 1.5rem;
  background: rgba(10,26,49,.22); justify-content: space-around;
  position: relative; transform-origin: left center;
}
.proof-flow-trace {
  position: absolute; inset: 0; z-index: 0;
  background: var(--proof-accent); transform: scaleX(0); transform-origin: left center;
}
.network-line i {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid color-mix(in srgb,var(--proof-accent) 52%,white);
  background: var(--white); box-shadow: 0 0 0 5px var(--proof-accent-soft);
  position: relative; z-index: 1;
}
.network-line i.is-complete,
.network-line i.is-active { background: var(--proof-accent); }
.network-line i::after {
  content: ""; position: absolute; inset: -4px;
  border: 1px solid var(--proof-accent); border-radius: inherit;
  opacity: 0; transform: scale(.65);
  animation: none;
}
.network-line i.is-active::after { animation: proof-node-pulse 1.15s ease-out infinite; }
.network-packet {
  position: absolute; left: calc(12.5% - 5px); top: -5px; width: 10px; height: 10px;
  z-index: 2; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 6px var(--proof-accent-soft), 0 0 22px color-mix(in srgb,var(--proof-accent) 45%,transparent);
}
@keyframes proof-node-pulse {
  0%,22% { opacity: 0; transform: scale(.65); }
  38% { opacity: .42; }
  72%,100% { opacity: 0; transform: scale(1.6); }
}
.proof-process ol {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .55rem; margin: 1rem 0 0; padding: 0; list-style: none;
}
.proof-process li {
  position: relative; min-width: 0; min-height: 126px; padding: .8rem .72rem;
  border: 1px solid rgba(10,26,49,.1); border-top-color: rgba(10,26,49,.2);
  background: rgba(255,255,255,.28);
  opacity: .48;
  transition: opacity .22s ease, border-color .22s ease, background-color .22s ease, transform .22s ease;
}
.proof-process li.is-active,
.proof-process li.is-complete { opacity: 1; }
.proof-process li.is-active {
  border-color: color-mix(in srgb,var(--proof-accent) 58%,transparent);
  background: var(--proof-accent-soft); transform: translateY(-3px);
  box-shadow: 0 12px 26px color-mix(in srgb,var(--proof-accent) 8%,transparent);
}
.proof-process li.is-complete::after {
  content: ""; position: absolute; right: .45rem; top: .52rem;
  width: 4px; height: 4px; border-radius: 50%; background: var(--proof-accent);
}
.proof-process li > span,
.proof-process li > em,
.proof-process li > b,
.proof-process li > small { display: block; }
.proof-process li > span { color: var(--proof-accent); font-size: .72rem; }
.proof-process li > em {
  position: absolute; top: .78rem; right: .6rem;
  color: #718699; font: 400 .72rem/1 var(--mono); letter-spacing: .045em; font-style: normal;
}
.proof-process li > b {
  margin-top: 1.15rem; color: var(--navy); font: 650 .9rem/1.35 var(--sans);
  white-space: normal; overflow: visible; text-overflow: clip;
}
.proof-process li > small {
  margin-top: .45rem; color: #536a80; font: .72rem/1.5 var(--mono);
}
.proof-output {
  align-self: stretch; min-width: 0; min-height: 250px;
  margin: 1.25rem; padding: 1rem;
  display: flex; flex-direction: column;
  border: 1px solid rgba(10,26,49,.14);
  background: rgba(255,255,255,.58);
}
.proof-output .proof-object-label { margin-bottom: .55rem; }
.proof-output-summary {
  display: block; margin: 1.15rem 0 .9rem; padding-bottom: .9rem;
  border-bottom: 1px solid rgba(10,26,49,.12);
  color: var(--navy); font: 650 clamp(.88rem,1.05vw,1.05rem)/1.3 var(--sans);
}
.proof-output [data-proof-verification] { color: #7b8c9c; transition: color .25s ease; }
.proof-output [data-proof-verification].is-verified { color: #14734d; }
.proof-output [data-proof-verification].is-verified::before {
  box-shadow: 0 0 0 4px rgba(20,115,77,.1), 0 0 16px rgba(20,115,77,.2);
}
.proof-output-summary .animated-number {
  margin-inline-end: .12em; color: var(--proof-accent);
  font-size: 1.45em; line-height: .8; vertical-align: -.08em;
}
.branch-grid { display: grid; gap: .54rem; margin-top: auto; }
.branch-grid > span {
  display: grid; grid-template-columns: auto 1fr auto; gap: .6rem;
  padding: .32rem .4rem; margin: -.32rem -.4rem;
  transition: background-color .22s ease, transform .22s ease;
}
.branch-grid > span.is-process-active {
  background: var(--proof-accent-soft); transform: translateX(4px);
  box-shadow: inset 2px 0 0 var(--proof-accent);
}
.branch-grid > span > i {
  width: 5px; height: 5px; margin-top: .25rem;
  border-radius: 50%; background: var(--proof-accent);
  position: relative;
}
.branch-grid > span > i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(54,142,155,.34);
  transform: scale(1);
  opacity: 1;
  animation: branch-pulse 1.9s ease-out infinite;
  will-change: transform, opacity;
}
.branch-grid > span:nth-child(2) > i::after { animation-delay: .25s; }
.branch-grid > span:nth-child(3) > i::after { animation-delay: .5s; }
.branch-grid > span:nth-child(4) > i::after { animation-delay: .75s; }
.branch-grid > span.is-warning > i { background: #d58b32; }
.branch-grid > span > b { font-weight: 400; color: #536a80; }
.branch-grid > span > b .animated-number {
  margin-right: .1em;
  color: inherit;
  font-size: 1.5em;
  font-weight: 650;
  line-height: .8;
  vertical-align: -.06em;
}
.branch-grid > span.is-warning > b { color: var(--proof-alert); }
.proof-caption {
  grid-column: 1 / -1; margin: 0 1.5rem 1.35rem; padding-top: 1rem;
  border-top: 1px solid rgba(10,26,49,.14);
  color: #536a80; font: 600 .84rem/1.55 var(--sans);
}
@keyframes branch-pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(4.2); opacity: 0; }
}

.portfolio {
  padding: clamp(6rem,11vw,10rem) clamp(1.25rem,5vw,5.5rem);
  background: var(--navy-deep); border-bottom: 1px solid var(--line);
}
.featured-case {
  min-height: 660px; display: grid; grid-template-columns: .8fr 1.2fr;
  border: 1px solid var(--line-strong); background: var(--navy);
  overflow: hidden; transition: border-color .3s, transform .3s;
}
.featured-case:hover { border-color: var(--cyan); transform: translateY(-4px); }
.case-copy {
  padding: clamp(1.5rem,3.5vw,3.5rem); display: flex;
  flex-direction: column; border-right: 1px solid var(--line);
}
.case-index {
  display: flex; justify-content: space-between;
  color: var(--quiet); font: .56rem var(--mono);
}
.case-copy h3 {
  margin: auto 0 1rem; color: var(--white);
  font-size: clamp(4rem,8vw,9rem); line-height: .85; letter-spacing: -.08em;
}
.featured-case[data-case-project="zoomin"] .case-copy h3 {
  font-size: clamp(3rem,5vw,6rem); line-height: .9;
}
.featured-case:is(
  [data-case-project="ahmed"],
  [data-case-project="lotus"],
  [data-case-project="goldwing"],
  [data-case-project="galaxy"],
  [data-case-project="hamdy"]
) .case-copy h3 {
  max-width: 720px; font-size: clamp(2.7rem,4.6vw,5.7rem);
  line-height: .92; letter-spacing: -.065em;
}
.case-copy p { max-width: 520px; color: var(--muted); line-height: 1.75; }
.case-link {
  margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; font: .58rem var(--mono);
}
.case-link b { color: var(--cyan); }
.case-system { position: relative; min-height: 500px; overflow: hidden; }
.case-system-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size: 62px 62px; opacity: .6;
}
.case-core, .case-node {
  position: absolute; z-index: 2; display: flex; flex-direction: column;
  gap: .45rem; border: 1px solid var(--line-strong);
  background: rgba(10,26,49,.95); padding: 1rem; font: .56rem var(--mono);
}
.case-core { left: 35%; top: 37%; width: 30%; min-height: 120px; align-items: center; justify-content: center; }
.case-core i, .case-node i { font-style: normal; color: var(--cyan); font-size: .58rem; }
.case-node { width: 25%; }
.case-node-one { left: 7%; top: 14%; }
.case-node-two { right: 7%; top: 17%; }
.case-node-three { right: 12%; bottom: 13%; }
.case-routes {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.case-route-path {
  fill: none; stroke: var(--cyan); stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.case-route-endpoint {
  fill: var(--navy); stroke: var(--cyan); stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.case-route-packet {
  fill: var(--cyan); filter: drop-shadow(0 0 5px rgba(81,226,231,.9));
}
.portfolio-register {
  display: grid; grid-template-columns: repeat(3,1fr);
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.portfolio-register article {
  position: relative;
  min-width: 0;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transition: background-color .25s ease;
}
.portfolio-register article:nth-child(3n) { border-right: 0; }
.portfolio-register article:last-child { grid-column: span 2; }
.portfolio-register button {
  width: 100%; min-height: 112px; padding: 1rem 4rem 1rem 1rem; display: grid;
  grid-template-columns: auto 1fr; gap: .5rem 1rem; align-content: center;
  border: 0;
  background: transparent; text-align: left; cursor: pointer;
}
.portfolio-register article:hover,
.portfolio-register article:has(button[aria-pressed="true"]) { background: rgba(77,130,216,.13); }
.portfolio-register article > a {
  position: absolute; right: 1rem; bottom: 1rem;
  color: var(--quiet); font: .56rem var(--mono); text-transform: uppercase;
}
.portfolio-register article > a:hover,
.portfolio-register article > a:focus-visible { color: var(--cyan); }
.portfolio-register span { grid-row: span 2; color: var(--cyan); font: .56rem var(--mono); }
.portfolio-register b { color: var(--white); font-size: .82rem; }
.portfolio-register small { color: var(--quiet); font: .56rem var(--mono); }

.journal {
  padding: clamp(6rem,11vw,10rem) clamp(1.25rem,5vw,5.5rem);
  background: #e8eef6; color: var(--navy);
}
.journal-heading {
  display: grid; grid-template-columns: .4fr .6fr; gap: 3rem;
  margin-bottom: 4rem; align-items: start;
}
.journal-heading .kicker { color: #06717d; }
.journal-heading > p:last-child { margin: 0; max-width: 600px; color: #536b7f; line-height: 1.7; }
.journal-feature {
  display: block; padding: clamp(1.5rem,4vw,4rem);
  border: 1px solid rgba(10,26,49,.22); background: var(--white);
  transition: transform .3s, border-color .3s;
}
.journal-feature:hover { transform: translateY(-4px); border-color: var(--cyan); }
.journal-meta { display: flex; justify-content: space-between; color: #536a80; font: .56rem var(--mono); }
.journal-feature h2 {
  margin: clamp(4rem,8vw,8rem) 0 2rem;
  font-size: clamp(3rem,5.2vw,5.8rem); line-height: .92; letter-spacing: -.055em;
}
.journal-feature h2 em { color: #087986; }
.journal-feature > p { max-width: 680px; color: #536b7f; line-height: 1.75; }
.journal-link {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid rgba(10,26,49,.18);
  display: flex; justify-content: space-between; font: .6rem var(--mono);
}
.journal-link b { color: var(--cyan); }
.journal-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  margin-top: 1rem; border-top: 1px solid rgba(10,26,49,.2);
  border-left: 1px solid rgba(10,26,49,.2);
}
.journal-card {
  min-height: 430px; padding: clamp(1.5rem,2.8vw,2.8rem);
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(10,26,49,.2);
  border-bottom: 1px solid rgba(10,26,49,.2);
  background: rgba(255,255,255,.35);
  transition: background .3s, transform .3s;
}
.journal-card:hover { background: var(--white); transform: translateY(-4px); }
.journal-card-meta {
  display: flex; justify-content: space-between; gap: 1rem;
  color: #536a80; font: .56rem var(--mono);
}
.journal-card h3 {
  margin: auto 0 1.5rem; font-size: clamp(1.9rem,2.65vw,2.9rem);
  line-height: .98; letter-spacing: -.045em;
}
.journal-card p { margin: 0 0 2rem; color: #536b7f; line-height: 1.65; }
.journal-card > span {
  padding-top: 1rem; display: flex; justify-content: space-between;
  border-top: 1px solid rgba(10,26,49,.18); font: .58rem var(--mono);
}
.journal-card > span b { color: var(--cyan); }

.faq-section {
  padding: clamp(6rem,11vw,10rem) clamp(1.25rem,5vw,5.5rem);
  display: grid; grid-template-columns: minmax(320px,.82fr) minmax(0,1.18fr);
  gap: clamp(3rem,6vw,7rem); background: var(--navy); border-bottom: 1px solid var(--line);
}
.faq-intro { align-self: start; position: sticky; top: 130px; }
.faq-intro h2 {
  margin: 1rem 0 2rem; font-size: clamp(3rem,4.3vw,4.9rem);
  line-height: .92; letter-spacing: -.055em;
}
.faq-intro h2 em { color: var(--cyan); }
.faq-intro > p:not(.kicker) {
  max-width: 480px; color: var(--muted); line-height: 1.75;
}
.faq-intro > a {
  margin-top: 2.5rem; padding: 1rem 0; display: flex; justify-content: space-between;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--white); font: .6rem var(--mono);
}
.faq-intro > a span { color: var(--cyan); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-list details { border-bottom: 1px solid var(--line-strong); }
.faq-list summary {
  min-height: 98px; padding: 1.5rem 0; display: grid;
  grid-template-columns: 42px 1fr 26px; gap: 1.25rem; align-items: center;
  list-style: none; cursor: pointer; color: var(--white);
  font-size: clamp(1.1rem,1.6vw,1.55rem); letter-spacing: -.02em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--cyan); font: .56rem var(--mono); }
.faq-list summary i {
  position: relative; width: 18px; height: 18px; justify-self: end;
}
.faq-list summary i::before,
.faq-list summary i::after {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 18px; height: 1px; background: var(--cyan); transition: transform .3s;
}
.faq-list summary i::after { transform: rotate(90deg); }
.faq-list details[open] summary i::after { transform: rotate(0); }
.faq-list details > p {
  margin: 0; max-width: 760px; padding: 0 44px 2rem 64px;
  color: var(--muted); line-height: 1.75;
  animation: faq-answer-in .32s ease both;
}
@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.capability-list { margin-top: 4rem; border-top: 1px solid var(--line); }
.capability-list article {
  display: grid; grid-template-columns: .15fr .4fr .45fr;
  gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line);
  align-items: center;
}
.capabilities-heading {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; margin-bottom: 2rem;
}
.capabilities-heading > a {
  color: var(--muted); font: .58rem var(--mono); letter-spacing: .08em;
  text-transform: uppercase;
}
.capabilities-heading > a:hover { color: var(--cyan); }
.capabilities-heading > a span { color: var(--cyan); margin-left: .5rem; }
.capability-list span { font: .57rem var(--mono); color: var(--cyan); }
.capability-list h3 {
  margin: 0; font-size: clamp(1.3rem,2.5vw,2.4rem);
  font-weight: 500; letter-spacing: -.04em; color: var(--white);
}
.capability-list p { margin: 0; color: var(--muted); line-height: 1.6; }

.contact {
  min-height: 85vh; background: #dfe9f5; color: var(--navy);
  display: grid; align-content: space-between; gap: 5rem;
}
.contact .kicker { color: #285d99; margin-bottom: 1rem; }
.contact-details { display: grid; gap: clamp(2rem,4vw,4rem); }
.contact a {
  position: relative;
  isolation: isolate;
  font-size: clamp(1.5rem,3.5vw,3.8rem);
  border-bottom: 0; padding-bottom: .7rem;
  display: flex; justify-content: space-between;
}
.contact a::before,
.contact a::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  pointer-events: none;
  transform-origin: center;
}
.contact a::before {
  bottom: 0;
  height: 2px;
  background: var(--navy);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.contact a::after {
  bottom: -.16rem;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
  filter: blur(4px);
  opacity: 0;
  transform: scaleX(.18);
  transition: opacity .2s ease, transform .42s cubic-bezier(.22,1,.36,1);
}
.contact-email-label {
  color: var(--navy);
  background-image:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 37%,
      rgba(255,255,255,.14) 43%,
      rgba(255,255,255,.96) 49%,
      rgba(123,210,225,.36) 54%,
      transparent 62%,
      transparent 100%
    ),
    linear-gradient(var(--navy), var(--navy));
  background-size: 260% 100%, 100% 100%;
  background-position: 140% 50%, 0 0;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact a:is(:hover, :focus-visible) .contact-email-label {
  animation: contact-email-shine 1.65s cubic-bezier(.4,0,.2,1) 1 both;
}
.contact a:is(:hover, :focus-visible)::before {
  background:
    linear-gradient(90deg, transparent 0%, rgba(10,26,49,.45) 18%, rgba(255,255,255,.92) 50%, rgba(10,26,49,.45) 82%, transparent 100%),
    var(--navy);
  background-size: 220% 100%, 100% 100%;
  animation: contact-underline-shine 1.65s cubic-bezier(.4,0,.2,1) 1 both;
}
.contact a:is(:hover, :focus-visible)::after {
  opacity: .72;
  transform: scaleX(1);
}
.contact a > span:last-child { color: #285d99; -webkit-text-fill-color: #285d99; }
@keyframes contact-email-shine {
  from { background-position: 140% 50%, 0 0; }
  to { background-position: -120% 50%, 0 0; }
}
@keyframes contact-underline-shine {
  from { background-position: 140% 50%, 0 0; }
  to { background-position: -120% 50%, 0 0; }
}
.contact-locations {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(1.5rem,4vw,5rem);
}
.contact-locations article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem,2vw,2rem);
  padding-top: 1rem;
  border-top: 1px solid rgba(7,28,53,.25);
}
.contact-locations span {
  color: #285d99;
  font: .56rem var(--mono);
  letter-spacing: .08em;
}
.contact-locations p {
  margin: 0;
  color: var(--navy);
  font-size: clamp(.9rem,1.2vw,1.1rem);
  line-height: 1.55;
}
.contact footer {
  display: flex; justify-content: space-between; align-items: flex-end;
  font: .8rem/1.45 var(--mono);
}
.footer-signature { display: grid; justify-items: start; gap: .65rem; }
.footer-signature-light { justify-items: end; }
.footer-signature-logo {
  position: relative; display: block; width: 58px; height: 32px;
  overflow: hidden;
}
.footer-signature-logo img {
  position: absolute; width: 105px; height: 105px; max-width: none;
  left: -23.5px; top: -36.5px;
}
.footer-signature-light .footer-signature-logo img { mix-blend-mode: multiply; }

/* Standalone case study and engineering journal pages */
.detail-page { background: var(--navy); }
.subpage-main { padding-top: 84px; }
.page-hero {
  min-height: 88vh; padding: clamp(6rem,10vw,10rem) clamp(1.25rem,7vw,8rem) 5rem;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; min-width: 0;
  border-bottom: 1px solid var(--line); position: relative; overflow: hidden;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size: 7vw 7vw;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,transparent 55%,rgba(77,130,216,.08));
}
.page-breadcrumb {
  position: absolute; top: 2rem; left: clamp(1.25rem,7vw,8rem);
  color: var(--muted); font: .72rem var(--mono);
}
.page-breadcrumb:hover { color: var(--cyan); }
.page-kicker {
  margin: 0 0 1.2rem; color: var(--cyan);
  font: .76rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.page-hero h1 {
  max-width: 1180px; margin: 0 0 2rem;
  min-width: 0;
  font-size: clamp(3.2rem,5.3vw,6.2rem); line-height: .92;
}
.page-hero h1 em {
  color: var(--cyan);
  font-size: clamp(2rem,7vw,6rem);
  line-height: 1.06;
}
.page-lead {
  max-width: 790px; margin: 0; color: var(--muted);
  min-width: 0;
  font-size: clamp(1.05rem,1.7vw,1.4rem); line-height: 1.7;
}
.case-page-hero[data-content-layer="executive"] .page-lead {
  max-width: 720px;
  color: var(--text);
}
.page-facts, .article-byline {
  margin-top: 4rem; display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.page-facts span, .article-byline span {
  min-height: 92px; padding: 1rem; display: flex; flex-direction: column;
  justify-content: center; color: var(--white); font-size: .84rem;
}
.page-facts span + span, .article-byline span + span { border-left: 1px solid var(--line); }
.page-facts small, .article-byline small {
  margin-bottom: .55rem; color: var(--quiet); font: .68rem var(--mono);
}
.case-live-link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.4rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line-strong);
  color: var(--white);
  font: .7rem var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: border-color .25s ease, background-color .25s ease;
}
.case-live-link:hover,
.case-live-link:focus-visible {
  border-color: var(--cyan);
  background: rgba(88,217,225,.07);
}
.case-live-link span { color: var(--cyan); }
.case-architecture-stage {
  min-height: 620px; margin: clamp(3rem,6vw,6rem);
  position: relative; display: grid; grid-template-columns: 1fr .4fr 1fr;
  gap: 2rem; align-items: center; border: 1px solid var(--line-strong);
  background: var(--navy-deep); padding: clamp(1.5rem,4vw,4rem); overflow: hidden;
}
.architecture-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size: 56px 56px; opacity: .45;
}
.architecture-local, .architecture-cloud, .architecture-sync { position: relative; z-index: 1; }
.architecture-local, .architecture-cloud {
  border: 1px solid var(--line-strong); background: rgba(10,26,49,.94); padding: 1.2rem;
}
.architecture-local p, .architecture-cloud p {
  margin: 0 0 1rem; color: var(--cyan); font: .57rem var(--mono);
}
.architecture-local span, .architecture-cloud span {
  min-height: 52px; padding: .75rem 0; display: flex; align-items: center;
  justify-content: space-between; border-top: 1px solid var(--line);
  color: var(--text); font: .57rem var(--mono);
}
.architecture-local b, .architecture-cloud b { color: var(--cyan); font-weight: 400; }
.architecture-sync {
  min-height: 135px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--cyan); background: rgba(77,130,216,.08);
}
.architecture-sync i {
  width: 11px; height: 11px; margin-bottom: .8rem; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 0 8px rgba(88,217,225,.1);
  animation: branch-pulse 1.8s infinite;
}
.architecture-sync strong { color: var(--white); font: .58rem var(--mono); }
.architecture-sync small { margin-top: .45rem; color: var(--quiet); font: .56rem var(--mono); }
.page-section {
  padding: clamp(6rem,10vw,10rem) clamp(1.25rem,7vw,8rem);
  display: grid; grid-template-columns: .28fr .72fr; gap: 4rem;
  border-top: 1px solid var(--line);
}
.page-section h2, .scope-heading h2, .page-cta h2 {
  margin: 0 0 2.5rem; color: var(--white);
  font-size: clamp(2.5rem,4.2vw,4.5rem); line-height: .98; letter-spacing: -.05em;
}
.page-section > div > p {
  max-width: 760px; color: var(--muted); line-height: 1.85;
  font-size: clamp(1rem,1.35vw,1.18rem);
}
.case-narrative[data-content-layer="executive"] > div {
  padding-left: clamp(1.25rem,3vw,3rem);
  border-left: 1px solid rgba(88,217,225,.42);
}
.case-narrative[data-content-layer="executive"] > div > p:first-of-type {
  color: var(--text);
  font-size: clamp(1.08rem,1.55vw,1.3rem);
}
.scope-section { padding: clamp(6rem,10vw,10rem) clamp(1.25rem,7vw,8rem); background: var(--navy-deep); }
.scope-heading { display: grid; grid-template-columns: .28fr .72fr; gap: 4rem; margin-bottom: 4rem; }
.scope-grid { display: grid; grid-template-columns: repeat(2,1fr); border: 1px solid var(--line); }
.scope-grid article { min-height: 300px; padding: 1.5rem; }
.scope-grid article:nth-child(even) { border-left: 1px solid var(--line); }
.scope-grid article:nth-child(n+3) { border-top: 1px solid var(--line); }
.scope-grid span, .case-principles span { color: var(--cyan); font: .56rem var(--mono); }
.scope-grid h3, .case-principles h3 { margin: 5rem 0 1rem; color: var(--white); font-size: 1.5rem; }
.scope-grid p, .case-principles p { color: var(--muted); line-height: 1.7; }
.continuity-steps { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.continuity-steps li {
  padding: 1.4rem 0; display: grid; grid-template-columns: .12fr .88fr;
  border-bottom: 1px solid var(--line);
}
.continuity-steps li > b { color: var(--cyan); font: 400 .55rem var(--mono); }
.continuity-steps strong { display: block; margin-bottom: .4rem; color: var(--white); font-size: 1.05rem; }
.continuity-steps span { color: var(--muted); line-height: 1.65; }
.case-principles { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.case-principles article { min-height: 380px; padding: clamp(1.5rem,3vw,3rem); }
.case-principles article + article { border-left: 1px solid var(--line); }
.case-evidence {
  padding: clamp(5rem,9vw,8rem) clamp(1.25rem,7vw,8rem);
  border-top: 1px solid var(--line);
  background: var(--navy-soft);
}
.case-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  margin-top: 2.5rem;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.case-evidence-grid article {
  min-height: 190px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.case-evidence-grid strong {
  margin: auto 0 .7rem;
  color: var(--white);
  font-size: clamp(2rem,4vw,4rem);
  line-height: 1;
}
.case-evidence-grid span { color: var(--text); font-size: .9rem; }
.case-evidence-grid small {
  margin-top: .8rem;
  color: var(--quiet);
  font: .56rem/1.5 var(--mono);
}
.page-cta {
  min-height: 75vh; padding: clamp(6rem,10vw,10rem) clamp(1.25rem,7vw,8rem);
  display: flex; flex-direction: column; justify-content: center;
  background: #e8eef6; color: var(--navy);
}
.page-cta .page-kicker { color: #06717d; }
.page-cta h2 { max-width: 1000px; color: var(--navy); }
.page-cta a {
  margin-top: 2rem; padding-bottom: .6rem; border-bottom: 2px solid var(--navy);
  display: flex; justify-content: space-between;
  font-size: clamp(1.4rem,3vw,3rem);
}
.page-cta a span { color: #06717d; }
.page-footer {
  min-height: 90px; padding: 0 clamp(1.25rem,4vw,4rem);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--navy-deep); color: var(--quiet); font: .8rem/1.45 var(--mono);
}
.page-footer a:hover { color: var(--white); }

.article-hero { min-height: 92vh; }
.article-hero h1 { max-width: 1250px; }
.article-byline { grid-template-columns: repeat(3,1fr); max-width: 850px; }
.article-layout {
  display: grid; grid-template-columns: minmax(200px,.28fr) minmax(0,.72fr);
  gap: clamp(2rem,7vw,8rem); padding: clamp(5rem,9vw,9rem) clamp(1.25rem,7vw,8rem);
  width: 100%; min-width: 0; align-items: start;
}
.article-layout > * { min-width: 0; }
.article-toc {
  position: sticky; top: 120px; display: flex; flex-direction: column;
  padding-top: 1rem; border-top: 1px solid var(--line);
  isolation: isolate;
}
.article-toc span { margin-bottom: 1rem; color: var(--cyan); font: .58rem var(--mono); }
.article-toc a {
  position: relative; padding: .62rem 0 .62rem 1.15rem;
  color: var(--muted); font-size: .74rem; opacity: 1;
  transition: color .25s ease, opacity .25s ease;
}
.article-toc a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: .65rem; height: 1px;
  background: var(--cyan); transform: scaleX(0) translateY(-50%);
  transform-origin: left center; transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.article-toc a:hover, .article-toc a:focus-visible { color: var(--white); opacity: 1; }
.article-toc a.is-active, .article-toc a[aria-current="location"] {
  color: var(--white); opacity: 1;
}
.article-toc a.is-active::before, .article-toc a[aria-current="location"]::before {
  transform: scaleX(1) translateY(-50%);
}
.article-body { width: 100%; max-width: 850px; min-width: 0; }
.article-body section[id] { scroll-margin-top: 132px; }
.article-body section {
  width: 100%; max-width: 100%; min-width: 0;
  padding: 3.5rem 0; border-top: 1px solid var(--line); scroll-margin-top: 110px;
}
.article-body section:first-child { padding-top: 2rem; }
.article-body h2 {
  margin: 0 0 1.7rem; color: var(--white);
  max-width: 100%; overflow-wrap: break-word;
  font-size: clamp(2rem,3.2vw,3.5rem); line-height: 1.04; letter-spacing: -.045em;
}
.article-body h3 { margin: 0 0 .6rem; color: var(--white); font-size: 1.15rem; }
.article-body p {
  max-width: 100%; color: var(--muted);
  overflow-wrap: break-word; line-height: 1.9; font-size: 1.02rem;
}
.article-body p em { color: var(--white); }
.answer-block {
  padding: clamp(1.5rem,3vw,3rem) !important; margin-bottom: 3rem;
  border: 1px solid var(--cyan) !important; background: rgba(77,130,216,.08);
}
.answer-block p { margin-top: 0; color: var(--cyan); font: .56rem var(--mono); }
.answer-block strong {
  display: block; max-width: 100%; color: var(--white);
  overflow-wrap: break-word; font-size: clamp(1.25rem,2vw,1.8rem); line-height: 1.55;
}
.comparison-table {
  width: 100%; max-width: 100%; min-width: 0;
  margin: 2.2rem 0; border: 1px solid var(--line);
}
.comparison-table > div {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  min-width: 0;
}
.comparison-table > div + div { border-top: 1px solid var(--line); }
.comparison-table b, .comparison-table span {
  min-width: 0; padding: 1rem; overflow-wrap: anywhere;
}
.comparison-table b { color: var(--white); font-size: .75rem; }
.comparison-table span { color: var(--muted); font-size: .8rem; }
.comparison-table b + b, .comparison-table span + span { border-left: 1px solid var(--line); }
.article-framework { list-style: none; padding: 0; margin: 2rem 0 0; }
.article-framework li {
  padding: 1.5rem 0; display: grid; grid-template-columns: .12fr .88fr;
  border-top: 1px solid var(--line);
}
.article-framework li > b { color: var(--cyan); font: 400 .58rem var(--mono); }
.article-framework p { margin: 0; }
.article-body blockquote {
  margin: 2.5rem 0; padding: 2rem; border-left: 3px solid var(--cyan);
  background: var(--navy-deep); color: var(--white);
  font-family: var(--serif); font-size: clamp(1.5rem,3vw,2.6rem); line-height: 1.35;
}
.evaluation-list { list-style: none; padding: 0; margin: 2rem 0; border-top: 1px solid var(--line); }
.evaluation-list li {
  padding: 1rem 0; display: grid; grid-template-columns: .3fr .7fr;
  gap: 1rem; border-bottom: 1px solid var(--line);
}
.evaluation-list b { color: var(--white); }
.evaluation-list span { color: var(--muted); line-height: 1.6; }
.article-faq details { border-top: 1px solid var(--line); }
.article-faq details:last-child { border-bottom: 1px solid var(--line); }
.article-faq summary {
  padding: 1.3rem 2rem 1.3rem 0; cursor: pointer; color: var(--white);
  font-size: 1rem;
}
.article-faq details p { padding: 0 0 1.3rem; margin: 0; }
.article-conclusion a {
  margin-top: 2rem; padding: 1rem 0; display: flex; justify-content: space-between;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--white); font: .64rem var(--mono);
}
.article-conclusion a span { color: var(--cyan); }
.related-links {
  margin-top: 5rem; display: grid;
  border-top: 1px solid var(--line);
}
.related-links > span {
  padding: 1rem 0; color: var(--cyan);
  font: .56rem var(--mono); letter-spacing: .12em;
}
.related-links a {
  padding: 1.15rem 0; display: flex; justify-content: space-between;
  gap: 1rem; border-top: 1px solid var(--line);
  color: var(--white); font-size: .9rem;
}
.related-links a:hover { color: var(--cyan); }
.related-links b { color: var(--cyan); font-weight: 400; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; padding-top: 9rem; }
  .hero-operation { width: min(100%, 720px); min-height: 620px; margin: 1rem auto 0; }
}

/* Keep the operating story legible in narrow desktop panels, browser zoom, and mobile. */
@media (max-width: 1100px), (max-width: 1400px) and (max-height: 720px) {
  .system-diagram {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(2,minmax(0,1fr));
    gap: .65rem;
    padding: 1rem 1rem 2.15rem;
    isolation: isolate;
  }
  .workflow-grid,
  .workflow-routes,
  .diagram-status { position: absolute; }
  .workflow-grid { z-index: -1; }
  .workflow-grid::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8%;
    left: 8%;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(88,217,225,.48),transparent);
    opacity: .42;
    transform: translate3d(-12%,0,0);
    animation: compact-workflow-scan 3.2s cubic-bezier(.4,0,.2,1) infinite;
  }
  .workflow-routes {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .workflow-module {
    position: relative;
    inset: auto !important;
    width: auto !important;
    min-width: 0;
    min-height: 0 !important;
    height: auto;
    padding: .72rem;
    overflow: hidden;
  }
  .workflow-module:not(.is-workflow-active):not(.is-workflow-support) { display: none; }
  .workflow-operator {
    grid-area: 2 / 2;
    align-self: stretch;
    min-height: 0;
  }
  .system-diagram[data-phase="understand"] .workflow-intent { grid-area: 1 / 1; }
  .system-diagram[data-phase="understand"] .workflow-context { grid-area: 1 / 2; }
  .system-diagram[data-phase="understand"] .workflow-signals { grid-area: 2 / 1; }
  .system-diagram[data-phase="decide"] .workflow-context { grid-area: 1 / 1; }
  .system-diagram[data-phase="decide"] .workflow-signals { grid-area: 1 / 2; }
  .system-diagram[data-phase="decide"] .workflow-policy { grid-area: 2 / 1; }
  .system-diagram[data-phase="act"] .workflow-tools { grid-area: 1 / 1; }
  .system-diagram[data-phase="act"] .workflow-policy { grid-area: 1 / 2; }
  .system-diagram[data-phase="act"] .workflow-actions { grid-area: 2 / 1; }
  .system-diagram[data-phase="evolve"] .workflow-actions { grid-area: 1 / 1; }
  .system-diagram[data-phase="evolve"] .workflow-audit { grid-area: 1 / 2; }
  .system-diagram[data-phase="evolve"] .workflow-outcome { grid-area: 2 / 1; }
  .workflow-intent b { margin: .62rem 0 .4rem; font-size: .8rem; }
  .workflow-context ul { margin-top: .42rem; }
  .workflow-context li { padding: .25rem 0; }
  .workflow-signal-list { gap: .25rem; margin-top: .42rem; }
  .workflow-signal-list > span { padding-top: .27rem; }
  .workflow-policy > b,
  .workflow-audit > b { margin: .48rem 0 .28rem; }
  .workflow-tools > div { margin-top: .5rem; }
  .workflow-actions ol { margin-top: .4rem; }
  .workflow-actions li { min-height: 25px; }
  .workflow-outcome > b { margin-top: .5rem; }
  .diagram-status { right: .85rem; bottom: .55rem; left: .85rem; }
}

@keyframes compact-workflow-scan {
  0%,100% { opacity: .18; transform: translate3d(-12%,0,0); }
  50% { opacity: .52; transform: translate3d(12%,0,0); }
}

@media (min-width: 601px) and (max-width: 1050px) {
  .hero-operation:is(
    [data-flow-layout="finance"],
    [data-flow-layout="resilience"],
    [data-flow-layout="field"]
  ) .intent-card { left: 4%; top: 10%; width: 34%; }
  .hero-operation:is(
    [data-flow-layout="finance"],
    [data-flow-layout="resilience"],
    [data-flow-layout="field"]
  ) .operator-kernel { left: 42%; top: 18%; width: 21%; }
  .hero-operation:is(
    [data-flow-layout="finance"],
    [data-flow-layout="resilience"],
    [data-flow-layout="field"]
  ) .business-systems {
    right: 4%; left: auto; top: 8%; width: 29%;
    grid-template-columns: 1fr;
  }
  .hero-operation:is(
    [data-flow-layout="finance"],
    [data-flow-layout="resilience"],
    [data-flow-layout="field"]
  ) .outcome-card { right: 10%; bottom: 16%; left: 10%; }
}

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .section-heading, .proof-headline { grid-template-columns: 1fr; gap: 1.5rem; }
  .system-story { grid-template-columns: 1fr; }
  .story-visual {
    position: sticky; top: 84px; height: calc(100svh - 84px); min-height: 610px;
    border-right: 0; border-bottom: 1px solid var(--line); z-index: 1;
  }
  .story-copy {
    position: relative; z-index: 2;
    display: grid;
    gap: clamp(1rem,2.5vw,1.75rem);
    padding: clamp(1.25rem,4vw,3rem);
  }
  .story-step {
    min-height: clamp(250px,28svh,300px);
    justify-content: flex-start;
    padding: clamp(1.5rem,3vw,2.15rem);
    opacity: 1;
    border: 1px solid rgba(194,214,232,.22);
    background: rgba(10,26,49,.08);
    backdrop-filter: none;
    transform: scale(.992);
    transform-origin: center;
    transition:
      opacity .42s ease,
      transform .42s ease,
      border-color .42s ease,
      background-color .42s ease,
      box-shadow .42s ease;
  }
  .story-step.is-current {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(88,217,225,.34);
    background: rgba(8,26,48,.72);
    backdrop-filter: blur(2px) saturate(112%);
    -webkit-backdrop-filter: blur(2px) saturate(112%);
    box-shadow: 0 20px 55px rgba(0,0,0,.18);
  }
  .story-step h2 {
    max-width: 680px;
    margin: .8rem 0 1.1rem;
    font-size: clamp(1.8rem,3.8vw,2.5rem);
    line-height: 1.04;
  }
  .story-step p {
    max-width: 580px;
    font-size: .94rem;
    line-height: 1.65;
  }
  .system-story.has-mobile-story-panel .system-diagram {
    height: calc(100% - 178px);
  }
  .story-mobile-panel {
    position: absolute;
    right: clamp(1rem,4vw,2rem);
    bottom: 1rem;
    left: clamp(1rem,4vw,2rem);
    z-index: 4;
    min-height: 122px;
    display: grid;
    grid-template-columns: 2rem minmax(0,1fr);
    align-content: center;
    gap: .35rem .8rem;
    padding: clamp(1rem,2.5vw,1.45rem);
    border: 1px solid rgba(88,217,225,.38);
    background: rgba(7,20,38,.96);
    box-shadow: 0 22px 58px rgba(0,0,0,.28);
  }
  .story-mobile-panel > span {
    grid-row: 1 / span 2;
    color: var(--cyan);
    font: .58rem var(--mono);
  }
  .story-mobile-panel h2 {
    margin: 0;
    color: var(--white);
    font-size: clamp(1.45rem,4vw,2rem);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.05;
  }
  .story-mobile-panel p {
    margin: .25rem 0 0;
    color: var(--muted);
    font-size: clamp(.78rem,1.8vw,.9rem);
    line-height: 1.5;
  }
  .system-story.has-mobile-story-panel .story-copy {
    z-index: 0;
    display: block;
    padding: 0;
    pointer-events: none;
  }
  .system-story.has-mobile-story-panel .story-step,
  .system-story.has-mobile-story-panel .story-step.is-current {
    min-height: 72svh;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .platform-card:nth-child(n) { grid-column: span 12; min-height: 460px; }
  .proof-network { grid-template-columns: 1fr; gap: 0; }
  .proof-stage-bar { grid-column: 1; }
  .network-city {
    width: auto; min-height: 220px; margin: 1.5rem;
  }
  .proof-process {
    padding: 1.5rem;
    border-right: 0; border-left: 0;
    border-top: 1px solid rgba(10,26,49,.12);
    border-bottom: 1px solid rgba(10,26,49,.12);
  }
  .proof-output { height: auto; min-height: 250px; margin: 1.5rem; }
  .proof-caption { margin-inline: 1.5rem; }
  .proof-process .network-line {
    width: 100%; height: 1px; margin: 1.4rem 0 0; flex-direction: row;
  }
  .proof-process .network-packet {
    top: -5px;
  }
  .featured-case { grid-template-columns: 1fr; }
  .case-copy { min-height: 480px; border-right: 0; border-bottom: 1px solid var(--line); }
  .portfolio-register { grid-template-columns: repeat(2,1fr); }
  .portfolio-register article:nth-child(3n) { border-right: 1px solid var(--line); }
  .portfolio-register article:nth-child(2n) { border-right: 0; }
  .journal-heading { grid-template-columns: 1fr; gap: 1.25rem; }
  .journal-grid { grid-template-columns: 1fr; }
  .journal-card { min-height: 360px; }
  .faq-section { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
  .page-section, .scope-heading {
    grid-template-columns: minmax(0,1fr);
    gap: 1.5rem;
  }
  .page-section > *, .scope-heading > * { min-width: 0; }
  .case-architecture-stage { grid-template-columns: 1fr; }
  .architecture-sync { min-height: 110px; }
  .case-principles { grid-template-columns: 1fr; }
  .case-principles article + article { border-left: 0; border-top: 1px solid var(--line); }
  .article-layout { grid-template-columns: 1fr; }
  .article-toc {
    position: sticky; top: 70px; z-index: 12; display: flex; flex-direction: row;
    width: calc(100% + 2rem); max-width: none; margin: 0 -1rem;
    padding: .55rem 1rem; overflow-x: auto; overscroll-behavior-inline: contain;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: rgba(10,26,49,.96); box-shadow: 0 12px 28px rgba(2,12,25,.28);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .article-toc::-webkit-scrollbar { display: none; }
  .article-toc > span { display: none; }
  .article-toc a {
    flex: 0 0 auto; padding: .7rem .85rem; white-space: nowrap;
    font-size: .68rem; opacity: 1;
  }
  .article-toc a::before {
    left: 50%; top: auto; bottom: .28rem; width: 1.6rem;
    transform: translateX(-50%) scaleX(0); transform-origin: center;
  }
  .article-toc a.is-active::before, .article-toc a[aria-current="location"]::before {
    transform: translateX(-50%) scaleX(1);
  }
  .article-body section[id] { scroll-margin-top: 134px; }
}
@media (max-width: 600px) {
  .cursor-glow { display: none; }
  .site-header { height: 70px; padding: 0 1rem; }
  .brand-logo { width: 70px; height: 38px; }
  .brand-logo img { width: 127px; height: 127px; left: -29px; top: -44px; }
  .brand-logo::after {
    -webkit-mask-size: 127px 127px;
    mask-size: 127px 127px;
    -webkit-mask-position: -29px -44px;
    mask-position: -29px -44px;
  }
  .brand-meta { display: none; }
  .header-cta { font-size: .68rem; }
  .hero { padding: 8rem 1.1rem 4rem; }
  h1 {
    font-size: clamp(2.65rem,11.5vw,3.5rem);
    line-height: .9;
    letter-spacing: -.065em;
  }
  .hero-fit-word {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    font-size: .9em;
    letter-spacing: -.08em;
  }
  .hero-opening {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }
  html[dir="rtl"] .hero-opening > span:last-child { margin-inline-start: 0; }
  .hero-mobile-break { display: block; }
  .hero-operation { width: 100%; max-width: 100%; min-height: 730px; margin-top: 2rem; }
  .operation-bar { font-size: .58rem; }
  .operation-bar span:first-child { min-width: 0; }
  .operation-bar span:first-child b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .operation-bar span:last-child { flex: none; margin-left: .7rem; }
  .hero-scenario-tabs { overflow-x: auto; }
  .hero-scenario-tabs button { flex: 1 0 auto; }
  .hero-scenario-tabs button { font-size: .56rem; }
  .intent-card span,
  .outcome-card span,
  .operator-kernel > b,
  .intent-card small,
  .outcome-card small,
  .operator-kernel small,
  .business-node b { font-size: .55rem; }
  .operation-legend { font-size: .55rem; }
  .operation-journey span,
  .operation-journey b { font-size: .56rem; }
  .operation-journey small { font-size: .56rem; }
  .intent-card { left: 4%; top: 7%; width: 46%; min-height: 112px; }
  .operator-kernel { left: 58%; top: 21%; width: 34%; }
  .business-systems {
    left: 4%; right: auto; top: 42%; width: 92%;
    grid-template-columns: repeat(2,1fr);
  }
  .business-node { min-height: 44px; }
  .outcome-card {
    left: 4%; right: 4%; bottom: 17%; min-height: 96px; padding: .75rem;
    grid-template-columns: 1fr; gap: .25rem;
  }
  .outcome-card span { grid-row: auto; }
  .outcome-card > p { grid-column: auto; grid-row: auto; }
  .outcome-card > p > span { font-size: clamp(2.25rem,13vw,3.5rem); }
  .operation-legend { top: .55rem; bottom: auto; justify-content: flex-end; flex-wrap: wrap; gap: .55rem; }
  .operation-journey {
    right: 4%; bottom: .9rem; left: 4%;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .operation-journey li { min-height: 50px; }
  .operation-journey li:nth-child(3) { border-left: 0; }
  .operation-journey li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .intent-row { grid-template-columns: 1fr; }
  .run-intent { min-height: 48px; }
  .execution { grid-template-columns: 1fr 1fr; }
  .execution-step:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .execution-step:nth-child(4) { border-top: 1px solid var(--line); }
  .console-result { grid-template-columns: 1fr; }
  .console-result > span { min-width: 0; text-align: left; }
  .story-visual { top: 70px; height: calc(100svh - 70px); min-height: 580px; }
  .story-topline { font-size: .56rem; }
  .story-copy {
    gap: .9rem;
    padding: 1rem;
  }
  .story-step {
    min-height: clamp(240px,30svh,280px);
    padding: 1.3rem 1.15rem;
  }
  .story-step > span { font-size: .56rem; }
  .story-step h2 {
    margin: .65rem 0 .9rem;
    font-size: clamp(1.65rem,7.7vw,2.25rem);
    line-height: 1.05;
  }
  .story-step p {
    font-size: .88rem;
    line-height: 1.55;
  }
  .system-story.has-mobile-story-panel .story-step,
  .system-story.has-mobile-story-panel .story-step.is-current { min-height: 66svh; }
  .story-mobile-panel {
    right: .75rem;
    bottom: .75rem;
    left: .75rem;
    grid-template-columns: 1.5rem minmax(0,1fr);
    padding: .9rem;
  }
  .story-mobile-panel h2 { font-size: clamp(1.28rem,6vw,1.7rem); }
  .story-mobile-panel p { font-size: .76rem; line-height: 1.42; }
  .workflow-intent { left: 4%; top: 6%; width: 45%; }
  .workflow-context { right: 4%; top: 6%; width: 43%; }
  .workflow-signals { left: 4%; bottom: 28%; width: 36%; }
  .workflow-operator { left: 36%; top: 43%; width: 27%; min-height: 98px; }
  .workflow-policy { right: 4%; top: 43%; width: 36%; min-height: 86px; }
  .workflow-tools { left: 4%; top: 6%; width: 42%; min-height: 86px; }
  .workflow-actions { left: 4%; bottom: 4%; width: 51%; }
  .workflow-outcome { right: 4%; bottom: 8%; width: 40%; }
  .workflow-audit { left: 4%; top: 6%; width: 45%; min-height: 88px; }
  .workflow-actions li { min-height: 29px; font-size: .56rem; }
  .workflow-context li { font-size: .56rem; }
  .workflow-signal-list > span { font-size: .56rem; }
  .workflow-policy > b, .workflow-audit > b { font-size: .56rem; }
  .workflow-policy > small, .workflow-audit > small { font-size: .56rem; }
  .workflow-outcome > b { font-size: .9rem; }
  .workflow-outcome > b [data-count-target] { font-size: 1.7rem; }
  .diagram-status { font-size: .56rem; }
  .proof-meta, .contact footer { flex-direction: column; gap: .6rem; }
  .contact footer { align-items: flex-start; }
  .footer-signature-light { justify-items: start; }
  .contact-locations { grid-template-columns: 1fr; gap: 1.5rem; }
  .proof { padding-inline: 1rem; }
  .proof-headline { margin: 3rem 0; gap: 1.2rem; }
  .proof h2 {
    min-height: 1.9em;
    font-size: clamp(2.55rem,11.2vw,3.35rem);
    line-height: .96;
  }
  .proof-headline p { min-height: 6.6em; font-size: .94rem; line-height: 1.65; }
  .proof-scenarios {
    display: flex; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .proof-scenarios::-webkit-scrollbar { display: none; }
  .proof-scenarios button {
    flex: 0 0 82%; min-height: 52px; text-align: start;
    scroll-snap-align: center;
  }
  .proof-scenarios button + button { border-left: 1px solid rgba(10,26,49,.15); border-top: 0; }
  .proof-network { min-height: 0; padding: 0; }
  .proof-stage-bar { min-height: 48px; padding: .75rem .85rem; font-size: .7rem; }
  .network-city { margin: 1.1rem; }
  .proof-process { padding: 1.25rem 1.1rem; }
  .proof-process ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .proof-process ol { grid-template-columns: 1fr; gap: .45rem; }
  .proof-process li { min-height: 76px; padding: .68rem .72rem; }
  .proof-process li.is-active { transform: none; }
  .proof-process li > b { margin-top: .75rem; }
  .proof-process li > small { margin-top: .28rem; }
  .proof-output { height: auto; min-height: 230px; margin: 1.1rem; padding: 1rem; }
  .proof-column-heading { font-size: .7rem; }
  .proof-caption { margin: 0 1.1rem 1.1rem; }
  .branch-grid > span { grid-template-columns: auto 1fr; }
  .branch-grid > span.is-process-active { transform: none; }
  .branch-grid > span > b { grid-column: 2; }
  .case-system { min-height: 480px; }
  .case-node { width: 34%; }
  .case-core { left: 29%; width: 42%; }
  .portfolio-register { grid-template-columns: 1fr; }
  .portfolio-register article:nth-child(n) { border-right: 0; }
  .journal-feature h2 { margin-top: 3rem; }
  .journal-feature h2 em,
  .faq-intro h2 em {
    font-size: clamp(2rem,8.7vw,2.65rem);
    line-height: 1.08;
  }
  .journal-meta { flex-direction: column; gap: .5rem; }
  .faq-section { padding-inline: 1rem; }
  .faq-intro, .faq-list, .faq-list details { min-width: 0; }
  .faq-list summary { grid-template-columns: 32px 1fr 22px; gap: .75rem; }
  .faq-list details > p { padding: 0 0 1.6rem 32px; }
  .subpage-main { padding-top: 70px; }
  .page-hero { min-height: auto; padding-top: 7rem; background-size: 64px 64px; }
  .page-breadcrumb { top: 1.4rem; }
  .page-hero h1 {
    font-size: clamp(2.7rem,11.2vw,4.2rem);
    overflow-wrap: normal;
  }
  .page-hero h1 em {
    font-size: clamp(2rem,8.7vw,2.65rem);
    letter-spacing: -.012em;
  }
  .page-section h2,
  .scope-heading h2,
  .page-cta h2 {
    font-size: clamp(2.1rem,9.5vw,3.2rem);
    overflow-wrap: break-word;
  }
  .page-facts, .article-byline { grid-template-columns: 1fr 1fr; }
  .page-facts span:nth-child(3), .page-facts span:nth-child(4) { border-top: 1px solid var(--line); }
  .page-facts span:nth-child(3) { border-left: 0; }
  .article-byline { grid-template-columns: 1fr; }
  .article-byline span + span { border-left: 0; border-top: 1px solid var(--line); }
  .case-architecture-stage { margin: 1rem; padding: 1rem; min-height: 680px; }
  .scope-grid { grid-template-columns: 1fr; }
  .scope-grid article:nth-child(even) { border-left: 0; }
  .scope-grid article:nth-child(n+2) { border-top: 1px solid var(--line); }
  .continuity-steps li, .article-framework li { grid-template-columns: 2rem minmax(0,1fr); }
  .article-layout { padding: 3.5rem 1rem 5rem; }
  .article-body section { padding: 2.7rem 0; }
  .article-body h2 {
    font-size: clamp(2rem,10.5vw,3rem);
    line-height: 1.04;
  }
  .article-body p { font-size: .96rem; line-height: 1.78; }
  .answer-block { padding: 1.25rem !important; }
  .answer-block strong { font-size: 1.08rem; line-height: 1.6; }
  .comparison-table { overflow: hidden; }
  .comparison-table > div { min-width: 0; }
  .comparison-table b,
  .comparison-table span {
    padding: .85rem .7rem;
    font-size: .72rem;
    line-height: 1.45;
  }
  .evaluation-list li { grid-template-columns: 1fr; gap: .4rem; }
  .page-footer { flex-direction: column; align-items: flex-start; justify-content: center; gap: .6rem; }
  .capability-list article { grid-template-columns: .12fr 1fr; }
  .capability-list p { grid-column: 2; }
  .capabilities-heading { align-items: flex-start; flex-direction: column; }
}

/* Arabic edition */
html[lang="ar"] {
  --sans: "IBM Plex Sans Arabic", "Manrope", sans-serif;
  --mono: "IBM Plex Sans Arabic", "DM Mono", monospace;
  --script: "Playpen Sans Arabic", "IBM Plex Sans Arabic", sans-serif;
}
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  font-family: var(--sans);
  font-synthesis: none;
}
html[dir="rtl"] :where(h1,h2,h3,strong,b) {
  font-weight: 600;
}
html[dir="rtl"] .site-header {
  direction: ltr;
}
html[dir="rtl"] .site-header nav,
html[dir="rtl"] .header-actions {
  direction: ltr;
}
html[dir="rtl"] .site-header nav a,
html[dir="rtl"] .header-cta,
html[dir="rtl"] .brand-meta {
  direction: rtl;
}
html[dir="rtl"] :where(h1,h2,h3,p,a,button,summary,small,span,strong,li) {
  letter-spacing: 0;
}
html[dir="rtl"] h1 {
  line-height: 1.08;
  letter-spacing: -.035em;
}
html[dir="rtl"] .hero-copy h1 {
  font-size: clamp(3.5rem,4.9vw,5.5rem);
}
html[dir="rtl"] .hero-copy h1 em {
  font-size: clamp(2.5rem,4.8vw,5.4rem);
}
html[dir="rtl"] .hero-opening > span { display: inline-block; }
html[dir="rtl"] .hero-opening > span:last-child { margin-inline-start: .05em; }
html[dir="rtl"] h1 em,
html[dir="rtl"] h2 em,
html[dir="rtl"] [data-ar-handwriting] {
  font-family: var(--script);
  line-height: 1.34;
  letter-spacing: 0;
  overflow: visible;
}
html[dir="rtl"] .proof h2 {
  line-height: 1.04;
  letter-spacing: -.025em;
}
html[dir="rtl"] .journal-feature h2 {
  line-height: 1.03;
  letter-spacing: -.035em;
}
html[dir="rtl"] .journal-card h3 {
  line-height: 1.12;
  letter-spacing: -.025em;
}
html[dir="rtl"] .faq-intro h2 {
  font-size: clamp(2.9rem,4.1vw,4.6rem);
  line-height: 1.04;
  letter-spacing: -.03em;
}
html[dir="rtl"] [data-ar-handwriting] {
  display: inline-block;
  padding-block: .18em .26em;
  margin-block: -.18em -.26em;
  white-space: normal;
}
.arabic-ink-word {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  overflow: visible;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
html[dir="rtl"] .site-header nav,
html[dir="rtl"] .page-kicker,
html[dir="rtl"] .kicker,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .brand-meta,
html[dir="rtl"] .article-toc span {
  letter-spacing: 0;
  text-transform: none;
}
html[dir="rtl"] .skip-link { left: auto; right: 1rem; }
html[dir="rtl"] .header-cta-tooltip {
  right: -.7rem;
  left: auto;
  text-align: right;
  transform-origin: top right;
}
html[dir="rtl"] .header-cta-tooltip::before {
  right: 1.2rem;
  left: auto;
}
html[dir="rtl"] .text-link span { margin-left: 0; margin-right: .5rem; }
html[dir="rtl"] .hero-index { right: auto; left: 2rem; }
html[dir="rtl"] .operation-bar span:last-child {
  margin-left: 0;
  margin-right: .7rem;
}
html[dir="rtl"] .operation-journey {
  direction: rtl;
}
html[dir="rtl"] .operation-journey li {
  padding-right: 1.45rem;
  padding-left: .62rem;
}
html[dir="rtl"] .operation-journey li + li {
  border-left: 0;
  border-right: 1px solid var(--line);
}
html[dir="rtl"] .operation-journey li::before {
  transform-origin: right;
}
html[dir="rtl"] .operation-journey span {
  right: .55rem;
  left: auto;
}
html[dir="rtl"] .operation-journey b,
html[dir="rtl"] .operation-journey small,
html[dir="rtl"] .proof-process li > b,
html[dir="rtl"] .proof-process li > small {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.45;
}
html[dir="rtl"] .proof-process,
html[dir="rtl"] .proof-caption,
html[dir="rtl"] .network-city,
html[dir="rtl"] .proof-output,
html[dir="rtl"] .branch-grid,
html[dir="rtl"] .proof-stage-bar {
  direction: rtl;
  text-align: right;
}
/* Arabic proof labels need the same visual weight as the surrounding UI.
   Keep the mono geometry, but give Arabic glyphs enough size and leading to
   remain legible inside the dense operational diagram. */
html[dir="rtl"] .proof-scenarios button {
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}
html[dir="rtl"] .proof-stage-bar {
  font-family: var(--sans);
  font-size: .86rem;
  line-height: 1.5;
  letter-spacing: 0;
}
html[dir="rtl"] .proof-column-heading,
html[dir="rtl"] .proof-object-label,
html[dir="rtl"] .proof-process li > span,
html[dir="rtl"] .proof-process li > em,
html[dir="rtl"] .proof-process li > small {
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.55;
  letter-spacing: 0;
}
html[dir="rtl"] .proof-column-heading > b,
html[dir="rtl"] .proof-process li > b {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0;
}
html[dir="rtl"] .network-city {
  padding-right: 1.15rem;
  padding-left: 1rem;
  border-right: 2px solid var(--proof-accent);
  border-left: 0;
}
html[dir="rtl"] .proof-process li.is-complete::after {
  right: auto;
  left: .45rem;
}
html[dir="rtl"] .proof-process li > em {
  right: auto;
  left: .6rem;
}
html[dir="rtl"] .branch-grid > span.is-process-active {
  transform: translateX(-4px);
}
html[dir="rtl"] .article-toc a {
  padding-left: 0;
  padding-right: 1.15rem;
}
html[dir="rtl"] .article-toc a::before {
  left: auto;
  right: 0;
  transform-origin: right center;
}
html[dir="rtl"] .page-facts span + span,
html[dir="rtl"] .article-byline span + span {
  border-left: 0;
  border-right: 1px solid var(--line);
}
html[dir="rtl"] .article-framework li,
html[dir="rtl"] .continuity-steps li {
  direction: rtl;
}
html[dir="rtl"] .language-switch {
  direction: ltr;
  font-family: "DM Mono", monospace;
}

@media (max-width: 600px) {
  html[dir="rtl"] .hero-copy h1 {
    font-size: clamp(2.6rem,10.8vw,3.35rem);
  }
  html[dir="rtl"] .proof h2 {
    font-size: clamp(2.45rem,10.8vw,3.2rem);
    line-height: 1.08;
  }
  html[dir="rtl"] .journal-feature h2 {
    font-size: clamp(2.65rem,11.4vw,3.35rem);
  }
  html[dir="rtl"] .faq-intro h2 {
    font-size: clamp(2.5rem,10.5vw,3.2rem);
  }
  html[dir="rtl"] .operation-journey li:nth-child(3) {
    border-right: 0;
  }
  html[dir="rtl"] .operation-journey li {
    min-height: 58px;
  }
  html[dir="rtl"] .proof-process li {
    min-height: 78px;
  }
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(.42rem,1vw,.85rem);
}
.header-actions .header-cta { justify-self: auto; }
.language-switch {
  position: relative;
  padding: .42rem .18rem;
  color: var(--quiet);
  font: .58rem/1 var(--mono);
  letter-spacing: .08em;
  transition: color .25s ease;
}
.language-switch::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .14rem;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan) 28%, var(--cyan) 72%, transparent);
  filter: blur(.12px);
  opacity: 0;
  transform: scaleX(.25);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.language-switch:hover,
.language-switch:focus-visible { color: var(--white); }
.language-switch:hover::after,
.language-switch:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

@media (max-width: 760px) {
  .header-actions { gap: .55rem; }
  .language-switch { font-size: .58rem; }
  html[dir="rtl"] .article-toc a {
    padding: .7rem .85rem;
  }
  html[dir="rtl"] .article-toc a::before {
    left: 50%;
    right: auto;
    transform-origin: center;
  }
  html[dir="rtl"] .page-facts span:nth-child(3) {
    border-right: 0;
  }
  html[dir="rtl"] .page-hero h1 {
    font-size: clamp(2.65rem,10.8vw,4rem);
    line-height: 1.12;
  }
  html[dir="rtl"] .page-hero h1 em {
    font-size: clamp(2.25rem,10vw,3.1rem);
    line-height: 1.36;
  }
}

@media (max-width: 980px) {
  .client-proof-strip {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .client-proof-strip div {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: none;
  }
  .client-proof-strip div::-webkit-scrollbar { display: none; }
  .product-feature,
  .product-story,
  .product-story:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .product-feature-copy,
  .product-copy,
  .product-story:nth-child(even) .product-copy {
    order: 1;
    min-height: 450px;
    border-inline: 0;
    border-bottom: 1px solid var(--line);
  }
  .operium-art,
  .product-visual,
  .product-story:nth-child(even) .product-visual {
    order: 2;
    min-height: 500px;
  }
}

@media (max-width: 600px) {
  .client-proof-strip { padding-block: 1rem; }
  .product-section-heading > p,
  .partner-heading > p { font-size: .85rem; }
  .product-feature { margin-top: 3rem; }
  .product-feature-copy,
  .product-copy,
  .product-story:nth-child(even) .product-copy {
    min-height: 410px;
  }
  .product-meta {
    flex-direction: column;
    gap: .3rem;
  }
  .product-feature h3 { font-size: clamp(3.5rem,19vw,5.2rem); }
  .product-story h3 { font-size: clamp(3rem,17vw,4.6rem); }
  .operium-art { min-height: 430px; }
  .operium-art figure:first-child { inset: 4% 8% 26% 3%; }
  .operium-art figure:last-child { inset: 48% 2% 4% 22%; }
  .operium-art::after { font-size: .43rem; }
  .product-visual,
  .product-story:nth-child(even) .product-visual { min-height: 350px; }
  .droosy-visual { gap: .45rem; padding: 1rem; }
  .droosy-visual span { width: 84px; font-size: .45rem; }
  .venae-visual b { width: 100px; font-size: .47rem; }
  .venae-visual b:nth-child(1) { left: 5%; }
  .venae-visual b:nth-child(3) { right: 4%; }
  .scoplix-visual { padding: 2rem; }
  .scoplix-visual span { min-height: 90px; }
  .portfolio-register article:last-child { grid-column: auto; }
}

html[dir="rtl"] .product-meta,
html[dir="rtl"] .product-feature a,
html[dir="rtl"] .product-story a,
html[dir="rtl"] .client-proof-strip,
html[dir="rtl"] .partner-heading,
html[dir="rtl"] .product-section-heading {
  text-align: right;
}
html[dir="rtl"] .client-proof-strip div { direction: rtl; }
html[dir="rtl"] .operium-art::after {
  content: "عمل فني أصلي / Operium التجريبي";
  direction: rtl;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .cursor-glow { display: none; }
  .flow-stage { opacity: 1 !important; transform: none !important; }
  .workflow-actions li,
  .workflow-actions li > i {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-route-packet, .workflow-route-packet { display: none; }
  .case-route-packet { display: none; }
  .arabic-ink-word {
    clip-path: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* Final optical corrections */
.portfolio-page { overflow-x: clip; }
.portfolio-cover-mark b {
  font-weight: 300;
  transform: scaleX(.96);
  transform-origin: right center;
  opacity: .94;
}
html[dir="rtl"] .portfolio-cover-mark b { transform-origin: left center; }

/* Product and partner visual re-engineering */
@font-face {
  font-family: "Alexandria";
  src: url("/fonts/alexandria-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alexandria";
  src: url("/fonts/alexandria-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Alexandria";
  src: url("/fonts/alexandria-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.product-exhibition,
.work-exhibition {
  font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
}

.product-exhibition {
  --product-ink: #17211d;
  --product-muted: #61706a;
  background: #efede6;
  color: var(--product-ink);
  padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 5vw, 6rem);
  overflow: hidden;
}

.product-exhibition .product-section-heading {
  max-width: 92rem;
  margin: 0 auto clamp(3rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(15rem, .8fr);
  align-items: end;
  gap: clamp(2rem, 8vw, 10rem);
  border-bottom: 1px solid rgba(23, 33, 29, .18);
  padding-bottom: clamp(1.5rem, 3vw, 2.8rem);
}

.product-exhibition .product-section-heading h2 {
  max-width: 14ch;
  margin-top: .9rem;
  font-family: "Alexandria", sans-serif;
  font-size: clamp(2.25rem, 5.4vw, 6.5rem);
  line-height: .99;
  letter-spacing: -.055em;
  font-weight: 700;
}

.product-exhibition .product-section-heading > p {
  max-width: 32rem;
  color: var(--product-muted);
  font-size: clamp(.88rem, 1.2vw, 1.08rem);
  line-height: 1.8;
}

.product-feature--operator {
  max-width: 92rem;
  margin: 0 auto clamp(4rem, 8vw, 8rem);
  display: grid;
  grid-template-columns: minmax(16rem, .78fr) minmax(0, 1.22fr);
  min-height: min(48rem, 70vw);
  background: #14241f;
  color: #f0eee7;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 2rem 6rem rgba(19, 32, 27, .15);
}

.product-feature--operator .product-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 5vw, 5.4rem);
  position: relative;
  z-index: 1;
}

.product-feature--operator .product-meta,
.product-exhibit .product-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(240, 238, 231, .65);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-feature--operator h3 {
  margin: auto 0 .9rem;
  font-family: "Alexandria", sans-serif;
  font-size: clamp(3.3rem, 8vw, 9rem);
  letter-spacing: -.075em;
  line-height: .86;
  font-weight: 700;
}

.product-feature--operator .product-statement {
  max-width: 17ch;
  margin-bottom: 1.2rem;
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  line-height: 1.45;
}

.product-feature--operator .product-description {
  max-width: 35rem;
  color: rgba(240, 238, 231, .72);
  line-height: 1.8;
}

.product-feature--operator a,
.product-exhibit-cta,
.featured-work-card .case-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  width: fit-content;
  margin-top: 1.8rem;
  color: inherit;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
}

.product-feature--operator a span,
.product-exhibit-cta b,
.featured-work-card .case-link b {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: transform .35s ease, background-color .35s ease, color .35s ease;
}

.product-feature--operator a:hover span,
.product-feature--operator a:focus-visible span,
.product-exhibit-link:hover .product-exhibit-cta b,
.product-exhibit-link:focus-visible .product-exhibit-cta b,
.featured-work-card:hover .case-link b,
.featured-work-card:focus-visible .case-link b {
  transform: translateX(.22rem);
  background: currentColor;
  color: #14241f;
}

.operium-art {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 3rem);
  background: radial-gradient(circle at 76% 30%, rgba(122, 218, 177, .22), transparent 38%), #0c1713;
}

.operium-art figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 1rem;
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .26);
}

.operium-art figure:first-child { transform: translateY(-1.8rem) rotate(-1.4deg); }
.operium-art figure:last-child { transform: translateY(1.8rem) rotate(1.4deg); }
.operium-art img { display: block; width: 100%; height: auto; }

.product-exhibition-grid {
  max-width: 92rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 2.6rem);
}

.product-exhibit {
  grid-column: span 6;
  min-height: 32rem;
  border-radius: 1.35rem;
  overflow: hidden;
  color: #1b2721;
  background: #f7f3ea;
  box-shadow: 0 .8rem 2.6rem rgba(27, 39, 33, .08);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}

.product-exhibit:nth-child(3) { grid-column: 2 / span 5; }
.product-exhibit:nth-child(4) { grid-column: 7 / span 5; }
.product-exhibit:nth-child(5) { grid-column: span 5; }
.product-exhibit:nth-child(6) { grid-column: 6 / span 7; }
.product-exhibit:nth-child(6) .product-exhibit-media { aspect-ratio: 16 / 9; }
.product-exhibit:nth-child(6) .product-exhibit-copy { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; align-items: end; }
.product-exhibit:nth-child(6) .product-exhibit-copy p { margin: 0; }

.product-exhibit:hover,
.product-exhibit:focus-within { transform: translateY(-.5rem); box-shadow: 0 1.5rem 4rem rgba(27, 39, 33, .16); }
.product-exhibit-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.product-exhibit-media { aspect-ratio: 1.52 / 1; overflow: hidden; }
.product-exhibit-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.product-exhibit-link:hover .product-exhibit-media img,
.product-exhibit-link:focus-visible .product-exhibit-media img { transform: scale(1.035); }
.product-exhibit-copy { display: flex; flex: 1; flex-direction: column; padding: clamp(1.4rem, 3vw, 2.7rem); }
.product-exhibit-copy .product-meta { color: rgba(27, 39, 33, .58); }
.product-exhibit-copy h3 { margin: auto 0 .5rem; font-family: "Alexandria", sans-serif; font-size: clamp(2.2rem, 4vw, 4.6rem); line-height: .96; letter-spacing: -.06em; font-weight: 700; }
.product-exhibit-copy p { max-width: 28rem; min-height: 3.2em; margin: 0; color: rgba(27, 39, 33, .68); line-height: 1.65; }
.product-exhibit-cta { margin-top: 1.3rem; }

.product-exhibit--clinical { background: #0d3c35; color: #f2efe6; }
.product-exhibit--clinical .product-meta { color: rgba(242, 239, 230, .68); }
.product-exhibit--clinical .product-exhibit-copy p { color: rgba(242, 239, 230, .72); }
.product-exhibit--clinical .product-exhibit-media { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.product-exhibit--ecosystem { background: #222523; color: #f5f1e9; }
.product-exhibit--ecosystem .product-meta { color: rgba(245, 241, 233, .58); }
.product-exhibit--ecosystem .product-exhibit-copy p { color: rgba(245, 241, 233, .7); }
.product-exhibit--ecosystem .product-exhibit-media { aspect-ratio: 1.65 / 1; }
.product-exhibit--learning { background: #e5dfcf; }
.product-exhibit--relationship { background: #151a18; color: #f4f0e6; }
.product-exhibit--relationship .product-meta { color: rgba(244, 240, 230, .58); }
.product-exhibit--relationship .product-exhibit-copy p { color: rgba(244, 240, 230, .68); }
.product-exhibit--journey { background: #cfc2ad; }
.product-exhibit--mobility { background: #111416; color: #f3f1ec; }
.product-exhibit--mobility .product-meta { color: rgba(243, 241, 236, .58); }
.product-exhibit--mobility .product-exhibit-copy p { color: rgba(243, 241, 236, .7); }

.work-exhibition {
  background: #111b21;
  color: #eff0ec;
  padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 5vw, 6rem);
  overflow: hidden;
}
.work-exhibition .partner-heading { max-width: 92rem; margin: 0 auto clamp(3rem, 6vw, 5rem); }
.work-exhibition .partner-heading h2 { max-width: 13ch; font-family: "Alexandria", sans-serif; font-size: clamp(2.25rem, 5vw, 6.2rem); letter-spacing: -.06em; line-height: 1; font-weight: 700; }
.work-exhibition .partner-heading > p { max-width: 34rem; color: rgba(239, 240, 236, .62); line-height: 1.8; }
.featured-work-grid { max-width: 92rem; margin: 0 auto clamp(5rem, 10vw, 10rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.featured-work-card { position: relative; display: flex; min-height: 28rem; grid-column: span 4; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid rgba(239, 240, 236, .16); border-radius: 1.35rem; color: inherit; text-decoration: none; background: #19262d; transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .5s ease; }
.featured-work-card:first-child { grid-column: span 5; grid-row: span 2; min-height: 44rem; }
.featured-work-card:hover, .featured-work-card:focus-visible { transform: translateY(-.5rem); border-color: rgba(239, 240, 236, .45); }
.featured-work-media { position: absolute; inset: 0; overflow: hidden; }
.featured-work-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 17, 19, .05) 20%, rgba(13, 17, 19, .86) 88%); }
.featured-work-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.featured-work-card:hover .featured-work-media img, .featured-work-card:focus-visible .featured-work-media img { transform: scale(1.045); }
.featured-work-copy { position: relative; z-index: 1; margin-top: auto; padding: clamp(1.4rem, 3vw, 2.8rem); }
.featured-work-copy .work-index, .work-card > div > span { display: block; color: rgba(239, 240, 236, .68); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.featured-work-copy h3 { margin: .8rem 0 .55rem; font-family: "Alexandria", sans-serif; font-size: clamp(2rem, 4vw, 4.5rem); line-height: .95; letter-spacing: -.06em; font-weight: 700; }
.featured-work-copy p { max-width: 29rem; color: rgba(239, 240, 236, .72); line-height: 1.7; }
.featured-work-proof { position: relative; display: flex; height: 100%; min-height: 24rem; flex-direction: column; justify-content: center; gap: .75rem; padding: clamp(1.8rem, 4vw, 4rem); background: radial-gradient(circle at 80% 20%, rgba(220, 163, 97, .24), transparent 35%), linear-gradient(145deg, #152b31, #1f3e48); }
.featured-work-proof span { font-size: clamp(2.2rem, 5vw, 5.2rem); font-weight: 700; letter-spacing: -.08em; }
.featured-work-proof i, .featured-work-proof em { color: #e0b881; font-size: .67rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.featured-work-proof b { margin-top: 2rem; font-size: clamp(4rem, 8vw, 8rem); line-height: .75; font-weight: 400; letter-spacing: -.08em; }
.featured-work-proof small { color: rgba(239, 240, 236, .62); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.featured-work-card--vio, .featured-work-card--optics { min-height: 33rem; }
.work-explorer { max-width: 92rem; margin: 0 auto; border-top: 1px solid rgba(239, 240, 236, .2); padding-top: clamp(2rem, 4vw, 4rem); }
.work-explorer-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.work-explorer-heading h3 { margin-top: .75rem; font-family: "Alexandria", sans-serif; font-size: clamp(1.8rem, 3vw, 3.8rem); line-height: 1; letter-spacing: -.06em; }
.work-explorer-heading > p { max-width: 20rem; color: rgba(239, 240, 236, .58); line-height: 1.65; }
.work-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.work-filters button { border: 1px solid rgba(239, 240, 236, .24); border-radius: 0; padding: .75rem 1rem; background: transparent; color: rgba(239, 240, 236, .72); font: inherit; font-size: .8rem; cursor: pointer; transition: color .25s ease, background-color .25s ease, border-color .25s ease; }
.work-filters button:hover, .work-filters button:focus-visible, .work-filters button[aria-pressed="true"] { border-color: #e0b881; background: #e0b881; color: #111b21; }
.work-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(239, 240, 236, .16); border: 1px solid rgba(239, 240, 236, .16); }
.work-card { display: flex; min-height: 20rem; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.3rem; background: #111b21; color: inherit; text-decoration: none; transition: background-color .35s ease, transform .35s ease; }
.work-card:hover, .work-card:focus-visible { position: relative; z-index: 1; background: #1c2a32; transform: translateY(-.22rem); }
.work-card-media { aspect-ratio: 1.35 / 1; overflow: hidden; background: #223139; }
.work-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.work-card:hover .work-card-media img, .work-card:focus-visible .work-card-media img { transform: scale(1.04); }
.work-card h4 { margin: .65rem 0 .5rem; font-family: "Alexandria", sans-serif; font-size: 1.12rem; line-height: 1.2; letter-spacing: -.04em; }
.work-card p { color: rgba(239, 240, 236, .62); font-size: .8rem; line-height: 1.65; }
.work-card--quiet { min-height: 14rem; background: #17232a; }
.work-card--quiet > div:last-child { margin-top: auto; }
.work-card-mark { display: flex; min-height: 5.5rem; align-items: flex-start; color: #e0b881; font-size: .72rem; letter-spacing: .12em; }
.work-card.is-filtered-out { display: none; }

html[dir="rtl"] .product-exhibition,
html[dir="rtl"] .work-exhibition { font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; }
html[dir="rtl"] .product-feature--operator a:hover span,
html[dir="rtl"] .product-feature--operator a:focus-visible span,
html[dir="rtl"] .product-exhibit-link:hover .product-exhibit-cta b,
html[dir="rtl"] .product-exhibit-link:focus-visible .product-exhibit-cta b,
html[dir="rtl"] .featured-work-card:hover .case-link b,
html[dir="rtl"] .featured-work-card:focus-visible .case-link b { transform: translateX(-.22rem); }

@media (max-width: 900px) {
  .product-exhibition .product-section-heading { grid-template-columns: 1fr; gap: 1.2rem; }
  .product-feature--operator { grid-template-columns: 1fr; }
  .product-feature--operator .product-feature-copy { min-height: 30rem; }
  .operium-art { min-height: 28rem; }
  .product-exhibit, .product-exhibit:nth-child(3), .product-exhibit:nth-child(4), .product-exhibit:nth-child(5), .product-exhibit:nth-child(6) { grid-column: span 6; }
  .product-exhibit:nth-child(6) .product-exhibit-copy { display: flex; }
  .featured-work-card, .featured-work-card:first-child { grid-column: span 6; grid-row: auto; min-height: 31rem; }
  .work-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .product-exhibition, .work-exhibition { padding-right: 1rem; padding-left: 1rem; }
  .product-feature--operator { border-radius: 1rem; }
  .product-feature--operator .product-feature-copy { min-height: 27rem; padding: 1.5rem; }
  .product-feature--operator h3 { font-size: clamp(3.6rem, 18vw, 5.8rem); }
  .operium-art { grid-template-columns: 1fr; min-height: 27rem; padding: .75rem; }
  .operium-art figure:first-child, .operium-art figure:last-child { transform: none; }
  .product-exhibit, .product-exhibit:nth-child(3), .product-exhibit:nth-child(4), .product-exhibit:nth-child(5), .product-exhibit:nth-child(6) { grid-column: 1 / -1; min-height: 27rem; }
  .product-exhibit-media, .product-exhibit--ecosystem .product-exhibit-media { aspect-ratio: 1.45 / 1; }
  .featured-work-grid { display: flex; flex-direction: column; }
  .featured-work-card, .featured-work-card:first-child { min-height: 30rem; }
  .featured-work-proof { min-height: 21rem; }
  .work-explorer-heading { display: block; }
  .work-explorer-heading > p { margin-top: 1rem; }
  .work-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
  .work-filters::-webkit-scrollbar { display: none; }
  .work-filters button { flex: 0 0 auto; }
  .work-card-grid { grid-template-columns: 1fr; }
}

/* Product marks, selected work, and the horizontal portfolio */
.product-logo-showcase { background: var(--navy); }
.product-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: none;
  border-top: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}
.product-logo-card {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  min-height: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
  overflow: hidden;
  padding: clamp(1.1rem, 2.6vw, 2.2rem);
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--navy-soft);
  color: var(--text);
  transition: background-color .35s ease, color .35s ease;
}
.product-logo-card:hover,
.product-logo-card:focus-visible { background: var(--cyan); color: var(--navy); }
.product-logo-number {
  color: var(--quiet);
  font: .7rem/1 var(--mono);
  letter-spacing: .12em;
}
.product-logo-mark {
  display: block;
  max-width: 100%;
  font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
  font-size: clamp(1.15rem, 2.7vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.07em;
  font-weight: 500;
  overflow-wrap: anywhere;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.product-logo-card--operium .product-logo-mark { font-size: clamp(1.05rem, 2.4vw, 2.35rem); }
.product-logo-card:hover .product-logo-mark,
.product-logo-card:focus-visible .product-logo-mark,
.product-logo-card:focus-within .product-logo-mark { opacity: 0; transform: translateY(-.6rem); }
.product-logo-detail {
  position: absolute;
  inset: auto clamp(1.1rem, 2.6vw, 2.2rem) clamp(1.1rem, 2.6vw, 2.2rem);
  display: grid;
  gap: .48rem;
  max-width: 20rem;
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.product-logo-card:hover .product-logo-detail,
.product-logo-card:focus-visible .product-logo-detail,
.product-logo-card:focus-within .product-logo-detail { opacity: 1; transform: none; pointer-events: auto; }
.product-logo-detail strong { font-size: clamp(.9rem, 1.2vw, 1.12rem); line-height: 1.25; font-weight: 600; }
.product-logo-detail > span { font-size: .78rem; line-height: 1.5; opacity: .78; }
.product-logo-detail b,
.product-logo-detail b i {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: max-content;
  margin-top: .3rem;
  font: .7rem/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-style: normal;
}
.product-logo-detail b i { width: 1.35rem; height: 1.35rem; justify-content: center; margin: 0; border: 1px solid currentColor; transition: transform .3s ease; }
.product-logo-card:hover .product-logo-detail b i,
.product-logo-card:focus-visible .product-logo-detail b i { transform: translateX(.2rem); }
.selected-work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  max-width: none;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.selected-work-card {
  position: relative;
  display: block;
  grid-column: span 3;
  aspect-ratio: 3 / 4;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-soft);
  color: var(--text);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
.selected-work-card:hover,
.selected-work-card:focus-visible { z-index: 1; background: var(--navy-raised); transform: translateY(-.35rem); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .2); }
.selected-work-art { position: absolute; inset: 0; z-index: 0; min-width: 0; overflow: hidden; border: 0; background: var(--navy-deep); }
.selected-work-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 20, 38, .04) 18%, rgba(7, 20, 38, .18) 48%, rgba(7, 20, 38, .78) 100%); }
.selected-work-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s ease; }
.selected-work-art:not(.selected-work-art--egco) { background: linear-gradient(145deg, #132b46, #071426); }
.selected-work-art:not(.selected-work-art--egco) img { border: 0; box-shadow: inset 0 0 0 1px rgba(194, 214, 232, .2); }
.selected-work-card:hover .selected-work-art img,
.selected-work-card:focus-visible .selected-work-art img { transform: scale(1.04); filter: saturate(1.08); }
.selected-work-art--egco { background: radial-gradient(circle at 70% 20%, rgba(88, 217, 225, .18), transparent 42%), var(--navy-raised); }
.selected-work-art-overlay { position: absolute; inset: 1rem 1rem auto; z-index: 1; display: grid; gap: .45rem; text-shadow: 0 .14rem .7rem rgba(0, 0, 0, .68); transition: opacity .25s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
.selected-work-art-overlay span { color: rgba(248, 247, 243, .78); font: .56rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.selected-work-art-overlay strong { max-width: 12ch; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(1.25rem, 2vw, 2rem); line-height: .95; letter-spacing: -.07em; font-weight: 500; }
.selected-work-card:hover .selected-work-art-overlay,
.selected-work-card:focus-visible .selected-work-art-overlay,
.selected-work-card:focus-within .selected-work-art-overlay { opacity: 0; transform: translateY(-.35rem); }
.selected-work-card:hover .selected-work-art-overlay,
.selected-work-card:focus-visible .selected-work-art-overlay,
.selected-work-card:focus-within .selected-work-art-overlay { visibility: hidden; transition: none; }
.selected-work-card:hover .selected-work-art-overlay,
.selected-work-card:focus-visible .selected-work-art-overlay,
.selected-work-card:focus-within .selected-work-art-overlay { transition-duration: .1s; }
.selected-work-art--egco > b { position: absolute; inset-inline-end: 1rem; bottom: 1rem; z-index: 1; color: var(--cyan); font: .58rem/1 var(--mono); letter-spacing: .09em; text-shadow: 0 .14rem .7rem rgba(0, 0, 0, .56); transition: opacity .25s ease; }
.selected-work-card:hover .selected-work-art--egco > b,
.selected-work-card:focus-visible .selected-work-art--egco > b,
.selected-work-card:focus-within .selected-work-art--egco > b { opacity: 0; }
.selected-work-art--egco i { position: absolute; right: 17%; bottom: 22%; width: 4rem; height: 4rem; border: 1px solid rgba(88, 217, 225, .7); border-radius: 50%; box-shadow: 0 0 0 1rem rgba(88, 217, 225, .05), 0 0 0 2rem rgba(88, 217, 225, .03); }
.selected-work-copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: end; gap: .45rem; min-height: 0; padding: clamp(.85rem, 1.4vw, 1.25rem); background: linear-gradient(180deg, rgba(7, 20, 38, .88) 0%, rgba(7, 20, 38, .97) 46%, rgba(7, 20, 38, .995) 100%); clip-path: inset(100% 0 0 0); opacity: 0; pointer-events: none; transition: clip-path .58s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; }
.selected-work-card:hover .selected-work-copy,
.selected-work-card:focus-visible .selected-work-copy,
.selected-work-card:focus-within .selected-work-copy { clip-path: inset(0); opacity: 1; pointer-events: auto; }
.selected-work-copy > span { color: var(--quiet); font: .54rem/1.3 var(--mono); letter-spacing: .06em; }
.selected-work-copy h3 { margin: 0; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(1.15rem, 1.8vw, 1.8rem); line-height: .98; letter-spacing: -.06em; font-weight: 500; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.selected-work-card:hover .selected-work-copy h3,
.selected-work-card:focus-visible .selected-work-copy h3 { transform: translateX(.18rem); }
.selected-work-copy p { max-width: 29rem; margin: 0; color: var(--muted); font-size: clamp(.66rem, .82vw, .78rem); line-height: 1.42; }
.selected-work-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: .15rem; border-top: 1px solid var(--line); padding-top: .55rem; color: var(--white); font: .58rem/1 var(--mono); letter-spacing: .035em; text-transform: uppercase; }
.selected-work-link i { display: grid; width: 1.4rem; height: 1.4rem; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); font-style: normal; transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.selected-work-card:hover .selected-work-link i,
.selected-work-card:focus-visible .selected-work-link i { background: var(--cyan); color: var(--navy); transform: translateX(.2rem); }
.section-inline-action { display: inline-flex; align-items: center; gap: .7rem; margin-top: 2.5rem; color: var(--white); font: .74rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.section-inline-action span { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.section-inline-action:hover span,
.section-inline-action:focus-visible span { background: var(--cyan); color: var(--navy); transform: translateX(.2rem); }
.work-exhibition .work-explorer { display: none; }

/* Product handoff pages */
.product-redirect-page { background: var(--navy); color: var(--text); }
.product-redirect-page .product-page-header { background: rgba(10, 26, 49, .92); }
.product-redirect-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: calc(100vh - 84px); padding: 8rem clamp(1.25rem, 5vw, 6rem) 5rem; gap: clamp(2rem, 7vw, 8rem); align-items: center; border-bottom: 1px solid var(--line); }
.product-redirect-copy { max-width: 42rem; }
.product-redirect-copy .product-page-back { color: var(--muted); }
.product-redirect-copy .product-page-kicker { margin-top: 5rem; color: var(--cyan); }
.product-redirect-copy h1 { margin: .8rem 0 0; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(4rem, 9vw, 9.5rem); line-height: .9; letter-spacing: -.09em; font-weight: 500; }
.product-redirect-lede { max-width: 18ch; margin: 1.8rem 0 0; color: var(--white); font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.25; }
.product-redirect-intro { max-width: 34rem; margin: 1.5rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.product-redirect-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }
.product-redirect-actions .product-page-cta { color: var(--white); }
.product-redirect-link { color: var(--cyan); font: .74rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.product-redirect-visual { min-height: min(39rem, 62vw); display: grid; align-content: center; gap: 1.4rem; }
.product-redirect-status { display: flex; align-items: center; gap: .6rem; color: var(--muted); font: .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.product-redirect-status i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 .35rem rgba(101, 230, 167, .1); }
.product-redirect-art { position: relative; display: flex; min-height: min(28rem, 43vw); align-items: end; justify-content: space-between; overflow: hidden; padding: clamp(1.4rem, 4vw, 3.8rem); border: 1px solid var(--line-strong); background: radial-gradient(circle at 70% 28%, rgba(77, 130, 216, .35), transparent 32%), var(--navy-deep); }
.product-redirect-art::before { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(88, 217, 225, .24); transform: rotate(-7deg); }
.product-redirect-art span { position: relative; z-index: 1; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(2rem, 5vw, 5.3rem); letter-spacing: -.09em; }
.product-redirect-art b { position: relative; z-index: 1; color: var(--cyan); font: .75rem/1 var(--mono); letter-spacing: .12em; }
.product-redirect-art i { position: absolute; right: 17%; top: 25%; width: clamp(4rem, 12vw, 10rem); height: clamp(4rem, 12vw, 10rem); border: 1px solid rgba(88, 217, 225, .6); border-radius: 50%; box-shadow: 0 0 0 1.5rem rgba(88, 217, 225, .06), 0 0 0 3rem rgba(88, 217, 225, .03); }
.product-redirect-art--operium { background: radial-gradient(circle at 63% 30%, rgba(88, 217, 225, .4), transparent 34%), linear-gradient(140deg, #071426, #123253); }
.product-redirect-caption { margin: 0; color: var(--quiet); font: .68rem/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.product-redirect-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.product-redirect-details > div { display: grid; align-content: start; gap: .8rem; min-height: 10rem; padding: 2rem clamp(1.25rem, 4vw, 4rem); border-inline-end: 1px solid var(--line); }
.product-redirect-details span { color: var(--quiet); font: .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.product-redirect-details strong { max-width: 25ch; color: var(--white); font-size: 1rem; line-height: 1.55; font-weight: 500; }
.product-redirect-close { max-width: 92rem; margin: 0 auto; padding: clamp(6rem, 12vw, 12rem) clamp(1.25rem, 5vw, 6rem); }
.product-redirect-close h2 { max-width: 16ch; margin: 1rem 0 2rem; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(2.6rem, 5.8vw, 6.2rem); line-height: .98; letter-spacing: -.07em; font-weight: 500; }

/* Museum-like horizontal case study portfolio in the LIX language */
.portfolio-page { background: var(--navy); color: var(--text); }
.portfolio-cover { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, .45fr); min-height: calc(100vh - 84px); align-items: end; overflow: hidden; padding: 9rem clamp(1.25rem, 5vw, 6rem) 5rem; border-bottom: 1px solid var(--line); }
.portfolio-cover-grid { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: clamp(3rem, 8vw, 8rem) clamp(3rem, 8vw, 8rem); mask-image: linear-gradient(90deg, #000 0%, transparent 78%); }
.portfolio-cover-copy { position: relative; z-index: 1; max-width: 62rem; }
.portfolio-back-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font: .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.portfolio-back-link span { color: var(--cyan); }
.portfolio-kicker { margin: 3.2rem 0 0; color: var(--cyan); font: .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.portfolio-cover h1 { max-width: 11ch; margin: 1rem 0 0; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(3.6rem, 8.5vw, 9.5rem); line-height: .9; letter-spacing: -.09em; font-weight: 500; }
.portfolio-cover-copy > p:not(.portfolio-kicker) { max-width: 34rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.75; }
.portfolio-cover-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.3rem; }
.portfolio-primary-action { display: inline-flex; align-items: center; gap: .65rem; color: var(--white); font: .74rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.portfolio-primary-action span { display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); }
.portfolio-cover-actions > span { color: var(--quiet); font: .68rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.portfolio-cover-mark { position: relative; z-index: 1; display: grid; align-content: end; justify-items: end; gap: .4rem; color: var(--quiet); font: .68rem/1 var(--mono); letter-spacing: .13em; text-align: end; }
.portfolio-cover-mark b { color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(2.2rem, 5vw, 5.5rem); letter-spacing: -.1em; font-weight: 400; }
.portfolio-cover-mark i { display: block; width: 5rem; height: 1px; margin-top: 1rem; background: var(--cyan); }
.portfolio-gallery { position: relative; height: 100vh; background: var(--navy-deep); }
.portfolio-sticky { --portfolio-gutter: clamp(1.25rem, 5vw, 6rem); position: sticky; top: 0; height: 100vh; overflow: hidden; padding: clamp(6.5rem, 10vw, 9rem) var(--portfolio-gutter) 2rem; }
.portfolio-enhanced .portfolio-sticky { cursor: grab; }
.portfolio-enhanced .portfolio-sticky.is-dragging { cursor: grabbing; user-select: none; }
.portfolio-gallery-top { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.portfolio-gallery-top h2 { max-width: 13ch; margin: .8rem 0 0; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(2.1rem, 4.5vw, 5rem); line-height: .95; letter-spacing: -.07em; font-weight: 500; }
.portfolio-controls { display: flex; align-items: center; gap: .8rem; color: var(--muted); font: .68rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.portfolio-controls button { border: 0; border-bottom: 1px solid var(--line-strong); padding: .5rem .15rem; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.portfolio-controls button:hover, .portfolio-controls button:focus-visible { color: var(--cyan); border-color: var(--cyan); }
.portfolio-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2.2rem; }
.portfolio-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.4rem; }
.portfolio-toolbar .portfolio-filters { margin-top: 0; }
.portfolio-filters button { border: 1px solid var(--line-strong); border-radius: 0; padding: .58rem .85rem; background: transparent; color: var(--muted); font: .68rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: color .25s ease, background-color .25s ease, border-color .25s ease; }
.portfolio-filters button:hover, .portfolio-filters button:focus-visible, .portfolio-filters button[aria-pressed="true"] { border-color: var(--cyan); background: var(--cyan); color: var(--navy); }
.portfolio-track-wrap { width: calc(100% + (var(--portfolio-gutter) * 2)); margin-top: clamp(1.5rem, 3vw, 2.5rem); margin-inline: calc(var(--portfolio-gutter) * -1); overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scroll-padding-inline: 0; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; -webkit-overflow-scrolling: touch; touch-action: none; direction: ltr; cursor: grab; }
.portfolio-track-wrap.is-dragging { cursor: grabbing; user-select: none; }
.portfolio-track { display: flex; align-items: stretch; gap: 0; width: max-content; padding: 0 0 1.5rem; direction: ltr; will-change: transform; }
.portfolio-panel + .portfolio-panel { margin-inline-start: -1px; }
.portfolio-panel { position: relative; display: block; width: clamp(27rem, 34vw, 34rem); aspect-ratio: 4 / 3; min-height: 0; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line-strong); background: var(--navy-soft); box-shadow: 0 1.6rem 3.5rem rgba(0, 0, 0, .14); direction: ltr; }
.portfolio-panel[hidden] { display: none; }
.portfolio-panel-art { position: absolute; inset: 0; z-index: 0; min-width: 0; min-height: 0; overflow: hidden; border: 0; background: var(--navy-deep); }
.portfolio-panel-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 20, 38, .02) 20%, rgba(7, 20, 38, .42) 100%); }
.portfolio-panel-art--image { background: linear-gradient(145deg, #132b46, #071426); }
.portfolio-panel-art--image img { border: 1px solid rgba(194, 214, 232, .2); box-shadow: inset 0 0 0 1rem rgba(7, 20, 38, .16); }
.portfolio-panel-art--image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .8s ease; }
.portfolio-panel:hover .portfolio-panel-art--image img,
.portfolio-panel:focus-within .portfolio-panel-art--image img { transform: scale(1.04); filter: saturate(1); }
.portfolio-panel-art--signal { background: radial-gradient(circle at 66% 32%, rgba(88, 217, 225, .18), transparent 34%), var(--navy-raised); }
.portfolio-art-overlay { position: absolute; inset: 1.2rem 1.2rem auto; z-index: 1; display: grid; gap: .5rem; text-shadow: 0 .14rem .7rem rgba(0, 0, 0, .56); }
.portfolio-art-overlay span { color: rgba(248, 247, 243, .72); font: .62rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.portfolio-art-overlay strong { color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(1.7rem, 3vw, 3.5rem); line-height: .9; letter-spacing: -.08em; font-weight: 500; }
.portfolio-panel-art--signal > b { position: absolute; right: 1.2rem; bottom: 1.2rem; z-index: 1; color: var(--cyan); font: .64rem/1 var(--mono); letter-spacing: .12em; text-shadow: 0 .14rem .7rem rgba(0, 0, 0, .56); }
.portfolio-panel-art--signal i { position: absolute; right: 18%; top: 31%; width: clamp(5rem, 13vw, 10rem); height: clamp(5rem, 13vw, 10rem); border: 1px solid rgba(88, 217, 225, .5); border-radius: 50%; box-shadow: 0 0 0 1.5rem rgba(88, 217, 225, .06), 0 0 0 3rem rgba(88, 217, 225, .03); }
.portfolio-panel-art--legal-intelligence { background: radial-gradient(circle at 70% 35%, rgba(247, 180, 90, .19), transparent 30%), var(--navy-raised); }
.portfolio-panel-art--lotus-flower-salon { background: radial-gradient(circle at 50% 35%, rgba(101, 230, 167, .15), transparent 34%), var(--navy-raised); }
.portfolio-panel-copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: end; gap: 1rem; min-width: 0; padding: clamp(1.2rem, 3vw, 2.2rem); background: linear-gradient(180deg, rgba(7, 20, 38, .9) 0%, rgba(7, 20, 38, .975) 55%, rgba(7, 20, 38, .995) 100%); opacity: 0; transform: translateY(1.2rem); pointer-events: none; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); direction: ltr; }
.portfolio-panel:hover .portfolio-panel-copy,
.portfolio-panel:focus-within .portfolio-panel-copy,
.portfolio-panel.is-peeking .portfolio-panel-copy { opacity: 1; transform: none; pointer-events: auto; }
.portfolio-panel:hover .portfolio-art-overlay,
.portfolio-panel:focus-within .portfolio-art-overlay,
.portfolio-panel.is-peeking .portfolio-art-overlay,
.portfolio-panel:hover .portfolio-panel-art--signal > b,
.portfolio-panel:focus-within .portfolio-panel-art--signal > b,
.portfolio-panel.is-peeking .portfolio-panel-art--signal > b { opacity: 0; transform: translateY(-.35rem); }
.portfolio-panel:hover .portfolio-art-overlay,
.portfolio-panel:focus-within .portfolio-art-overlay,
.portfolio-panel.is-peeking .portfolio-art-overlay,
.portfolio-panel:hover .portfolio-panel-art--signal > b,
.portfolio-panel:focus-within .portfolio-panel-art--signal > b,
.portfolio-panel.is-peeking .portfolio-panel-art--signal > b { visibility: hidden; transition: none; }
.portfolio-panel:hover .portfolio-art-overlay,
.portfolio-panel:focus-within .portfolio-art-overlay,
.portfolio-panel.is-peeking .portfolio-art-overlay,
.portfolio-panel:hover .portfolio-panel-art--signal > b,
.portfolio-panel:focus-within .portfolio-panel-art--signal > b,
.portfolio-panel.is-peeking .portfolio-panel-art--signal > b { transition-duration: .1s; }
.portfolio-panel-copy::before { content: ""; position: absolute; inset: 1rem; border: 1px solid rgba(194, 214, 232, .08); pointer-events: none; }
.portfolio-panel-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--quiet); font: .68rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.portfolio-panel-copy h2 { position: relative; z-index: 1; max-width: 11ch; margin: 0; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(1.9rem, 3.6vw, 3.8rem); line-height: .92; letter-spacing: -.08em; font-weight: 500; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.portfolio-panel:hover .portfolio-panel-copy h2,
.portfolio-panel:focus-within .portfolio-panel-copy h2 { transform: translateX(.18rem); }
.portfolio-panel-copy > p { max-width: 31rem; margin: 0; color: var(--muted); font-size: clamp(.78rem, 1vw, .95rem); line-height: 1.55; }
.portfolio-panel-footer { display: flex; align-items: end; justify-content: space-between; gap: .8rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.portfolio-panel-footer > span { max-width: 18rem; color: var(--quiet); font: .66rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.portfolio-panel-footer a { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; color: var(--white); font: .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.portfolio-panel-footer a i { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); font-style: normal; transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.portfolio-panel-footer a:hover i, .portfolio-panel-footer a:focus-visible i { background: var(--cyan); color: var(--navy); transform: translateX(.2rem); }
.portfolio-panel--closure { background: linear-gradient(140deg, var(--navy-soft), #112d3e); }
.portfolio-closure-art { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(1.5rem, 4vw, 3.6rem); border: 0; background: radial-gradient(circle at 42% 40%, rgba(88, 217, 225, .3), transparent 30%), var(--navy-raised); }
.portfolio-closure-art span { color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(3rem, 8vw, 8rem); letter-spacing: -.12em; }
.portfolio-closure-art b { color: var(--cyan); font: .7rem/1 var(--mono); letter-spacing: .12em; }
.portfolio-closure-art i { position: absolute; left: 30%; top: 38%; width: 9rem; height: 9rem; border: 1px solid rgba(88, 217, 225, .6); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(88, 217, 225, .08), 0 0 0 4rem rgba(88, 217, 225, .03); }
.portfolio-method { display: grid; grid-template-columns: .7fr 1fr; align-items: center; gap: 3rem; max-width: 92rem; margin: 0 auto; padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 5vw, 6rem); border-top: 1px solid var(--line); }
.portfolio-method h2 { max-width: 14ch; margin: .8rem 0 0; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(2rem, 4vw, 4.6rem); line-height: .96; letter-spacing: -.07em; font-weight: 500; }
.portfolio-method > p:last-child { max-width: 42rem; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.3rem); line-height: 1.75; }
.portfolio-scroll-hint { display: flex; align-items: center; justify-content: end; gap: .75rem; margin-top: .3rem; color: var(--quiet); font: .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.portfolio-scroll-hint i { display: block; width: 5rem; height: 1px; background: var(--cyan); }
.portfolio-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem clamp(1.25rem, 5vw, 6rem) 2.5rem; border-top: 1px solid var(--line); color: var(--quiet); font: .8rem/1.45 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.portfolio-footer a:hover, .portfolio-footer a:focus-visible { color: var(--cyan); }
html[dir="rtl"] .portfolio-panel,
html[dir="rtl"] .portfolio-panel-copy { direction: rtl; }
html[dir="rtl"] .portfolio-track-wrap,
html[dir="rtl"] .portfolio-track { direction: rtl; }
html[dir="rtl"] .portfolio-panel-art,
html[dir="rtl"] .portfolio-closure-art { border-inline-end: 0; border-inline-start: 1px solid var(--line); }
html[dir="rtl"] .portfolio-panel-footer a:hover i,
html[dir="rtl"] .portfolio-panel-footer a:focus-visible i,
html[dir="rtl"] .portfolio-panel:hover .portfolio-panel-copy h2,
html[dir="rtl"] .portfolio-panel:focus-within .portfolio-panel-copy h2,
html[dir="rtl"] .product-logo-card:hover .product-logo-detail b i,
html[dir="rtl"] .product-logo-card:focus-visible .product-logo-detail b i,
html[dir="rtl"] .selected-work-card:hover .selected-work-link i,
html[dir="rtl"] .selected-work-card:focus-visible .selected-work-link i,
html[dir="rtl"] .selected-work-card:hover .selected-work-copy h3,
html[dir="rtl"] .selected-work-card:focus-visible .selected-work-copy h3 { transform: translateX(-.18rem); }
@media (max-width: 900px) {
  .product-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-logo-card { aspect-ratio: 1 / 1; min-height: 0; }
  .selected-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selected-work-card:nth-child(1),
  .selected-work-card:nth-child(2),
  .selected-work-card:nth-child(3),
  .selected-work-card:nth-child(4) { grid-column: span 6; }
  .selected-work-card { aspect-ratio: 3 / 4; min-height: 0; }
  .product-redirect-hero { grid-template-columns: 1fr; align-items: start; padding-top: 7rem; }
  .product-redirect-copy .product-page-kicker { margin-top: 3rem; }
  .product-redirect-visual { min-height: 26rem; }
  .portfolio-cover { grid-template-columns: 1fr; min-height: 82vh; }
  .portfolio-cover-mark { display: none; }
  .portfolio-gallery-top { align-items: start; }
  .portfolio-toolbar { align-items: start; flex-direction: column; gap: 1rem; }
  .portfolio-gallery { height: auto; }
  .portfolio-sticky { position: relative; height: auto; min-height: 100vh; overflow: visible; }
  .portfolio-track-wrap { overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scroll-padding-inline: 0; scroll-snap-type: x mandatory; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; -webkit-overflow-scrolling: touch; touch-action: none; }
  .portfolio-track { transform: none !important; }
  .portfolio-panel { width: 84vw; min-height: 0; height: auto; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  .portfolio-method { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (max-width: 560px) {
  .product-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-logo-card { aspect-ratio: 1 / 1; min-height: 0; gap: .8rem; padding: .85rem; }
  .product-logo-number { font-size: .58rem; }
  .product-logo-mark,
  .product-logo-card--operium .product-logo-mark { font-size: clamp(.82rem, 3.7vw, 1.25rem); letter-spacing: -.08em; }
  .product-logo-card:hover .product-logo-mark,
  .product-logo-card:focus-visible .product-logo-mark,
  .product-logo-card:focus-within .product-logo-mark { opacity: 1; transform: none; }
  .product-logo-detail { position: static; inset: auto; display: grid; gap: .35rem; opacity: 1; transform: none; pointer-events: auto; }
  .product-logo-detail strong { font-size: .68rem; line-height: 1.3; }
  .product-logo-detail > span { display: none; }
  .product-logo-detail b { font-size: .58rem; gap: .3rem; letter-spacing: .02em; }
  .product-logo-detail b i { width: 1rem; height: 1rem; }
  .selected-work-grid { grid-template-columns: 1fr; }
  .selected-work-card:nth-child(1),
  .selected-work-card:nth-child(2),
  .selected-work-card:nth-child(3),
  .selected-work-card:nth-child(4) { grid-column: 1 / -1; }
  .selected-work-card { aspect-ratio: 3 / 4; min-height: 0; }
  .selected-work-copy { padding: 1rem; }
  .section-inline-action { margin-top: 2rem; }
  .product-redirect-hero { padding: 6rem 1.25rem 3rem; }
  .product-redirect-copy h1 { font-size: clamp(3.5rem, 18vw, 6.5rem); }
  .product-redirect-visual { min-height: 19rem; }
  .product-redirect-art { min-height: 17rem; padding: 1.2rem; }
  .product-redirect-details { grid-template-columns: 1fr; }
  .product-redirect-details > div { min-height: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .product-redirect-close { padding: 5rem 1.25rem; }
  .portfolio-page .site-header nav { display: none; }
  .portfolio-cover { min-height: 82vh; padding: 7rem 1.25rem 3rem; }
  .portfolio-cover h1 { font-size: clamp(3.5rem, 16vw, 6.5rem); }
  .portfolio-cover-actions { align-items: start; flex-direction: column; }
  .portfolio-sticky { --portfolio-gutter: 1rem; padding: 6rem var(--portfolio-gutter) 1rem; }
  .portfolio-gallery-top { display: block; }
  .portfolio-controls { width: 100%; justify-content: space-between; margin-top: 0; }
  .portfolio-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .35rem; scrollbar-width: none; }
  .portfolio-filters::-webkit-scrollbar { display: none; }
  .portfolio-filters button { flex: 0 0 auto; }
  .portfolio-track { gap: 0; }
  .portfolio-panel { width: 82vw; min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  html[dir="rtl"] .portfolio-panel-art,
  html[dir="rtl"] .portfolio-closure-art { border-inline-start: 0; }
  .portfolio-panel-copy { min-height: 0; padding: 1.3rem; gap: 1.1rem; }
  .portfolio-panel-copy h2 { max-width: 12ch; font-size: clamp(2rem, 10vw, 3.5rem); }
  .portfolio-panel-copy > p { font-size: .88rem; }
  .portfolio-panel-footer { align-items: start; flex-direction: column; }
  .portfolio-closure-art { min-height: 15rem; }
  .portfolio-method { padding: 5rem 1.25rem; }
.portfolio-footer { flex-direction: column; padding-right: 1.25rem; padding-left: 1.25rem; }
}
@media (hover: none), (max-width: 900px), (any-pointer: coarse) {
  .portfolio-panel-copy { opacity: 0; transform: translateY(1.2rem); pointer-events: none; }
  .portfolio-panel.is-peeking .portfolio-panel-copy { opacity: 1; transform: none; pointer-events: auto; }
  .portfolio-panel.is-peeking .portfolio-art-overlay,
  .portfolio-panel.is-peeking .portfolio-panel-art--signal > b { opacity: 0; }
  .selected-work-copy { clip-path: inset(0); opacity: 1; pointer-events: auto; }
  .selected-work-art-overlay,
  .selected-work-art--egco > b { opacity: 0; }
}
@media (min-width: 901px) and (max-height: 900px) {
  .portfolio-sticky { padding-top: 5.25rem; padding-bottom: 1rem; }
  .portfolio-gallery-top h2 { margin-top: .55rem; font-size: clamp(2rem, 3.4vw, 3.25rem); }
  .portfolio-filters { margin-top: .8rem; }
  .portfolio-track-wrap { margin-top: .8rem; }
  .portfolio-panel { width: min(clamp(27rem, 34vw, 34rem), calc((100vh - 19.5rem) * 1.3333)); min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .portfolio-panel-copy { gap: 1rem; padding: clamp(1.2rem, 3vw, 2.5rem); }
  .portfolio-panel-copy h2 { font-size: clamp(2.2rem, 4.3vw, 4.6rem); }
}
@media (any-pointer: coarse) {
  .portfolio-gallery { height: auto; }
  .portfolio-sticky { position: relative; height: auto; min-height: 100vh; overflow: visible; }
  .portfolio-track-wrap { overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; -webkit-overflow-scrolling: touch; touch-action: none; }
  .portfolio-track { transform: none !important; }
  .portfolio-panel { width: min(78vw, 34rem); height: auto; aspect-ratio: 4 / 3; scroll-snap-align: start; }
}
@media (any-pointer: coarse) and (max-width: 560px) {
  .portfolio-panel { width: 82vw; }
}
@media (prefers-reduced-motion: reduce) {
  .product-logo-detail,
  .product-logo-card,
  .selected-work-art img,
  .portfolio-panel-art--image img,
  .portfolio-panel-footer a i { transition: none; }
}

@keyframes lix-card-action-bounce {
  0%, 100% { transform: translateX(0) scale(1); }
  35% { transform: translateX(.28rem) scale(1.08); }
  65% { transform: translateX(.1rem) scale(.98); }
}

/* Persistent chrome and gentle route transitions. The main container is the
   only surface Barba swaps; the header and bottom bar stay mounted. */
[data-barba="wrapper"] { position: relative; }
[data-barba="container"] { min-height: calc(100vh - 5.25rem); }
body.is-transitioning { overflow: hidden; }
body.is-transitioning [data-barba="container"] { position: absolute; inset: 0 auto auto 0; width: 100%; }
.site-bottom-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.5rem; min-height: 4.5rem; padding: 1.2rem clamp(1.25rem, 5vw, 6rem); border-top: 1px solid var(--line); background: var(--navy); color: var(--quiet); font: .78rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.site-bottom-bar-brand { min-width: 0; }
.site-bottom-bar-founded { display: flex; align-items: center; justify-self: center; gap: .7rem; white-space: nowrap; }
.site-bottom-bar-founded .footer-signature-logo { width: 48px; height: 27px; }
.site-bottom-bar-founded .footer-signature-logo img { width: 88px; height: 88px; left: -20px; top: -30px; mix-blend-mode: normal; }
.site-bottom-bar > a { justify-self: end; color: var(--text); }
.site-bottom-bar a:hover, .site-bottom-bar a:focus-visible { color: var(--cyan); }
body > .page-footer[hidden], body > .portfolio-footer[hidden], body > .product-page-footer[hidden], .site-bottom-bar[hidden] { display: none !important; }
.portfolio-art-overlay, .portfolio-panel-art--signal > b { transition: opacity .28s ease, transform .42s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 560px) {
  .site-bottom-bar { display: flex; align-items: flex-start; flex-direction: column; gap: .55rem; padding: 1rem 1.25rem 1.3rem; }
  .site-bottom-bar-founded { justify-self: start; }
  .site-bottom-bar > a { justify-self: start; }
}
.selected-work-card:hover .selected-work-link i,
.selected-work-card:focus-visible .selected-work-link i,
.portfolio-panel:hover .portfolio-panel-footer a i,
.portfolio-panel:focus-within .portfolio-panel-footer a i { animation: lix-card-action-bounce .72s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .selected-work-card:hover .selected-work-link i,
  .selected-work-card:focus-visible .selected-work-link i,
  .portfolio-panel:hover .portfolio-panel-footer a i,
  .portfolio-panel:focus-within .portfolio-panel-footer a i { animation: none; }
}

/* Partner handoff pages */
.visit-page { min-height: 100vh; background: var(--navy); color: var(--text); }
.visit-header { position: fixed; color: var(--text); background: rgba(10, 26, 49, .92); }
.visit-header nav { display: flex; gap: 1.8rem; color: var(--muted); font: .76rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.visit-header nav a:hover, .visit-header nav a:focus-visible { color: var(--cyan); }
.visit-main { min-height: calc(100vh - 84px); padding-top: 84px; }
.visit-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: calc(100vh - 84px); align-items: center; gap: clamp(2rem, 7vw, 8rem); padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 5vw, 6rem); border-bottom: 1px solid var(--line); }
.visit-copy { max-width: 42rem; }
.visit-back { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font: .73rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.visit-back span { color: var(--cyan); }
.visit-kicker { margin: 4.5rem 0 0; color: var(--cyan); font: .72rem/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.visit-hero h1 { max-width: 10ch; margin: .9rem 0 0; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(3.3rem, 7.6vw, 8.5rem); line-height: .9; letter-spacing: -.09em; font-weight: 500; }
.visit-name { margin: 1.4rem 0 0; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(1.4rem, 2.3vw, 2.15rem); line-height: 1.15; }
.visit-body { max-width: 36rem; margin: 1.5rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.visit-action { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2.2rem; color: var(--white); font: .74rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.visit-action span { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.visit-action:hover span, .visit-action:focus-visible span { background: var(--cyan); color: var(--navy); transform: translateX(.2rem); }
.visit-visual { position: relative; display: flex; min-height: min(36rem, 58vw); flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(1.5rem, 4vw, 3.8rem); border: 1px solid var(--line-strong); background: radial-gradient(circle at 62% 35%, rgba(88, 217, 225, .2), transparent 32%), linear-gradient(140deg, var(--navy-deep), var(--navy-raised)); }
.visit-visual::before { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(88, 217, 225, .2); transform: rotate(-7deg); }
.visit-visual span { position: relative; z-index: 1; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(3.3rem, 8vw, 8rem); line-height: .85; letter-spacing: -.12em; }
.visit-visual b { position: relative; z-index: 1; color: var(--cyan); font: .7rem/1 var(--mono); letter-spacing: .13em; }
.visit-visual i { position: absolute; right: 19%; top: 31%; width: clamp(5rem, 14vw, 11rem); height: clamp(5rem, 14vw, 11rem); border: 1px solid rgba(88, 217, 225, .56); border-radius: 50%; box-shadow: 0 0 0 1.7rem rgba(88, 217, 225, .06), 0 0 0 3.4rem rgba(88, 217, 225, .03); }
.visit-context { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.visit-context > div { display: grid; gap: .75rem; min-height: 10rem; align-content: start; padding: 2rem clamp(1.25rem, 4vw, 4rem); border-inline-end: 1px solid var(--line); }
.visit-context span { color: var(--quiet); font: .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.visit-context strong { max-width: 24ch; color: var(--white); font-size: 1rem; line-height: 1.55; font-weight: 500; }
.visit-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem clamp(1.25rem, 5vw, 6rem) 2.5rem; border-top: 1px solid var(--line); color: var(--quiet); font: .8rem/1.45 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.visit-footer a:hover, .visit-footer a:focus-visible { color: var(--cyan); }
html[dir="rtl"] .visit-header nav { font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; letter-spacing: 0; text-transform: none; }
@media (max-width: 900px) {
  .visit-hero { grid-template-columns: 1fr; align-items: start; }
  .visit-kicker { margin-top: 3rem; }
  .visit-visual { min-height: 25rem; }
}
@media (max-width: 560px) {
  .visit-header nav { display: none; }
  .visit-hero { min-height: auto; padding: 6rem 1.25rem 3rem; }
  .visit-hero h1 { font-size: clamp(3.1rem, 15vw, 5.5rem); }
  .visit-visual { min-height: 18rem; }
  .visit-context { grid-template-columns: 1fr; }
  .visit-context > div { min-height: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .visit-footer { flex-direction: column; padding-right: 1.25rem; padding-left: 1.25rem; }
}

/* Product detail routes */
.product-page {
  --page-ink: #17211d;
  --page-muted: #67716b;
  --page-paper: #efede6;
  min-height: 100vh;
  background: var(--page-paper);
  color: var(--page-ink);
  font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
}
.product-page .site-header { position: relative; color: var(--page-ink); background: rgba(239, 237, 230, .92); }
.product-page .site-header nav { color: var(--page-muted); font-family: "Alexandria", sans-serif; font-size: .78rem; letter-spacing: .01em; text-transform: none; }
.product-page .site-header nav a { color: inherit; }
.product-page .header-cta { border-color: rgba(23, 33, 29, .28); color: var(--page-ink); }
.product-page .brand-meta { color: var(--page-muted); }
.product-page-hero { display: grid; grid-template-columns: minmax(18rem, .78fr) minmax(0, 1.22fr); min-height: min(62rem, 82vh); background: #e1ddd2; }
.product-page-hero-copy { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(2rem, 6vw, 7rem); padding-top: 5rem; }
.product-page-back { align-self: flex-start; margin-bottom: auto; color: var(--page-muted); font-size: .72rem; text-decoration: none; }
.product-page-back span, .product-page-cta span, .product-page-footer a span { display: inline-grid; width: 1.65rem; height: 1.65rem; margin-inline-start: .45rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.product-page-kicker { color: var(--page-muted); font-size: .74rem; letter-spacing: .06em; line-height: 1.5; text-transform: uppercase; }
.product-page-hero h1 { margin: 1rem 0 1.2rem; font-family: "Alexandria", sans-serif; font-size: clamp(4rem, 11vw, 12rem); line-height: .82; letter-spacing: -.1em; font-weight: 700; }
.product-page-lede { max-width: 21ch; font-size: clamp(1.18rem, 2vw, 1.9rem); line-height: 1.42; }
.product-page-description { max-width: 36rem; margin-top: 1.2rem; color: var(--page-muted); line-height: 1.8; }
.product-page-cta { display: inline-flex; align-items: center; width: fit-content; margin-top: 1.8rem; color: var(--page-ink); font-size: .84rem; font-weight: 600; text-decoration: none; }
.product-page-hero-art { min-height: 42rem; overflow: hidden; background: #1c2925; }
.product-page-hero-art img { display: block; width: 100%; height: 100%; min-height: 42rem; object-fit: cover; }
.product-page-context { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 92rem; margin: 0 auto; border-bottom: 1px solid rgba(23, 33, 29, .18); }
.product-page-context > div { display: flex; min-height: 11rem; flex-direction: column; justify-content: space-between; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.8rem); border-inline-start: 1px solid rgba(23, 33, 29, .15); }
.product-page-context > div:first-child { border-inline-start: 0; }
.product-page-context span { color: var(--page-muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.product-page-context strong { max-width: 20ch; font-size: .9rem; line-height: 1.6; font-weight: 600; }
.product-page-journey { display: grid; grid-template-columns: minmax(14rem, .7fr) minmax(0, 1.3fr); max-width: 92rem; margin: 0 auto; padding: clamp(6rem, 12vw, 12rem) clamp(1.25rem, 5vw, 6rem); gap: clamp(2rem, 9vw, 10rem); }
.product-page-section-intro h2, .product-page-proof-copy h2, .product-page-close h2 { max-width: 12ch; margin-top: .9rem; font-family: "Alexandria", sans-serif; font-size: clamp(2.1rem, 4.2vw, 5rem); line-height: .98; letter-spacing: -.06em; font-weight: 700; }
.product-page-journey ol { margin: 0; padding: 0; list-style: none; }
.product-page-journey li { display: grid; grid-template-columns: 3.3rem minmax(0, 1fr) 1rem; align-items: center; min-height: 6rem; gap: 1.2rem; border-top: 1px solid rgba(23, 33, 29, .2); }
.product-page-journey li:last-child { border-bottom: 1px solid rgba(23, 33, 29, .2); }
.product-page-journey li span { color: var(--page-muted); font-size: .7rem; }
.product-page-journey li strong { font-size: clamp(1rem, 1.65vw, 1.35rem); font-weight: 600; }
.product-page-journey li i { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.product-page-proof { display: grid; grid-template-columns: minmax(14rem, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(2rem, 8vw, 8rem); padding: clamp(2rem, 6vw, 6rem) clamp(1.25rem, 5vw, 6rem); background: #1b2924; color: #efede6; }
.product-page-proof-copy { max-width: 34rem; margin-inline-start: auto; }
.product-page-proof-copy .product-page-kicker { color: rgba(239, 237, 230, .62); }
.product-page-proof-copy h2 { max-width: 11ch; }
.product-page-proof-copy > p:not(.product-page-kicker) { margin-top: 1.3rem; color: rgba(239, 237, 230, .72); line-height: 1.8; }
.product-page-proof-copy small { display: block; margin-top: 2rem; color: rgba(239, 237, 230, .45); font-size: .68rem; line-height: 1.6; }
.product-page-proof figure { max-width: 60rem; margin: 0; }
.product-page-proof figure img { display: block; width: 100%; height: auto; border: 1px solid rgba(239, 237, 230, .18); border-radius: 1.1rem; box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, .24); }
.product-page-proof figcaption { margin-top: .75rem; color: rgba(239, 237, 230, .46); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.product-page-close { max-width: 92rem; margin: 0 auto; padding: clamp(6rem, 12vw, 12rem) clamp(1.25rem, 5vw, 6rem); }
.product-page-close h2 { max-width: 14ch; }
.product-page-footer { display: flex; justify-content: space-between; gap: 1rem; max-width: 92rem; margin: 0 auto; padding: 1.5rem clamp(1.25rem, 5vw, 6rem) 2.5rem; border-top: 1px solid rgba(23, 33, 29, .18); color: var(--page-muted); font-size: .8rem; line-height: 1.45; letter-spacing: .07em; text-transform: uppercase; }
.product-page-footer a { color: inherit; text-decoration: none; }
.product-page--clinical { --page-paper: #e1e7e0; --page-ink: #123b35; --page-muted: #58736a; }
.product-page--clinical .product-page-hero { background: #cdd9d1; }
.product-page--clinical .product-page-proof { background: #0d3c35; }
.product-page--ecosystem { --page-paper: #e6e3dd; --page-ink: #222523; --page-muted: #646962; }
.product-page--ecosystem .product-page-hero { background: #d1cec6; }
.product-page--ecosystem .product-page-proof { background: #222523; }
.product-page--relationship { --page-paper: #e8e4da; --page-ink: #191d1b; --page-muted: #6b716b; }
.product-page--relationship .product-page-hero { background: #d5d0c4; }
.product-page--relationship .product-page-proof { background: #151a18; }
.product-page--journey { --page-paper: #e6dfd2; --page-ink: #4b3a2e; --page-muted: #827264; }
.product-page--journey .product-page-hero { background: #d4c6b3; }
.product-page--journey .product-page-proof { background: #4b3a2e; }
.product-page--mobility { --page-paper: #e3e2de; --page-ink: #20272a; --page-muted: #6b7476; }
.product-page--mobility .product-page-hero { background: #c8ccca; }
.product-page--mobility .product-page-proof { background: #111416; }
.product-page--operations { --page-paper: #e8e6df; --page-ink: #17211d; --page-muted: #68726c; }
.product-page--operations .product-page-hero { background: #d7ddd7; }
.product-page--operations .product-page-proof { background: #14241f; }
.product-page-reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.product-page-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .product-page-reveal { opacity: 1; transform: none; transition: none; } }
@media (max-width: 900px) {
  .product-page-hero { grid-template-columns: 1fr; }
  .product-page-hero-copy { min-height: 39rem; }
  .product-page-hero-art, .product-page-hero-art img { min-height: 30rem; }
  .product-page-context { grid-template-columns: 1fr; }
  .product-page-context > div, .product-page-context > div:first-child { min-height: 8rem; border-inline-start: 0; border-top: 1px solid rgba(23, 33, 29, .15); }
  .product-page-journey, .product-page-proof { grid-template-columns: 1fr; }
  .product-page-proof-copy { margin-inline-start: 0; }
}
@media (max-width: 560px) {
  .product-page .site-header nav { display: none; }
  .product-page-hero-copy { min-height: 36rem; padding: 1.5rem; }
  .product-page-hero h1 { font-size: clamp(4rem, 22vw, 6.8rem); }
  .product-page-journey { padding: 5rem 1.5rem; }
  .product-page-proof { padding: 4rem 1.5rem; }
  .product-page-close { padding: 5rem 1.5rem; }
  .product-page-footer { flex-direction: column; padding-right: 1.5rem; padding-left: 1.5rem; }
}

/* Final LIX alignment pass for the home exhibitions */
.product-exhibition,
.work-exhibition {
  background: var(--navy);
  color: var(--text);
  border-top: 1px solid var(--line);
  padding: clamp(6rem, 11vw, 10rem) clamp(1.25rem, 5vw, 5.5rem);
}

.product-exhibition .product-section-heading,
.work-exhibition .partner-heading {
  max-width: none;
  margin: 0 auto clamp(3.5rem, 7vw, 6rem);
  grid-template-columns: .45fr 1fr;
  gap: 3rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.product-exhibition .product-section-heading h2,
.work-exhibition .partner-heading h2 {
  max-width: 17ch;
  margin: 0;
  color: var(--white);
  font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
  font-size: clamp(2.35rem, 4.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.06em;
  font-weight: 500;
}

.product-exhibition .product-section-heading > p,
.work-exhibition .partner-heading > p {
  max-width: 38rem;
  margin: 0;
  align-self: end;
  color: var(--muted);
  font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
  font-size: .96rem;
  line-height: 1.8;
}

.product-exhibition .kicker,
.work-exhibition .kicker {
  color: var(--cyan);
  font-family: var(--mono);
}

.product-feature--operator {
  max-width: none;
  min-height: min(48rem, 70vw);
  margin: 0 0 clamp(4rem, 8vw, 8rem);
  grid-template-columns: minmax(16rem, .78fr) minmax(0, 1.22fr);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--navy-deep);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .25);
}

.product-feature--operator .product-feature-copy {
  min-width: 0;
  padding: clamp(2rem, 5vw, 5.4rem);
  border-inline-end: 1px solid var(--line);
}

.product-feature--operator .product-meta,
.product-exhibit .product-meta {
  color: var(--quiet);
  font-family: var(--mono);
  font-weight: 400;
  font-size: .72rem;
}

.product-feature--operator h3 {
  color: var(--white);
  font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
  font-size: clamp(3.4rem, 7vw, 8rem);
  font-weight: 500;
}

.product-feature--operator .product-statement {
  color: var(--white);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.product-feature--operator .product-description { color: var(--muted); }

.product-feature--operator a,
.product-exhibit-cta,
.featured-work-card .case-link {
  color: var(--white);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.product-feature--operator a span,
.product-exhibit-cta b,
.featured-work-card .case-link b {
  width: 1.55rem;
  height: 1.55rem;
  border-color: var(--cyan);
  color: var(--cyan);
  border-radius: 0;
}

.product-feature--operator a:hover span,
.product-feature--operator a:focus-visible span,
.product-exhibit-link:hover .product-exhibit-cta b,
.product-exhibit-link:focus-visible .product-exhibit-cta b,
.featured-work-card:hover .case-link b,
.featured-work-card:focus-visible .case-link b {
  background: var(--cyan);
  color: var(--navy);
}

.operium-art {
  min-width: 0;
  background: var(--navy-deep);
  background-image: radial-gradient(circle at 76% 30%, rgba(88, 217, 225, .12), transparent 38%);
}

.operium-art figure {
  border-color: var(--line-strong);
  border-radius: 0;
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .26);
}

.product-exhibition-grid {
  max-width: none;
  gap: 0;
  border-top: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}

.product-exhibit,
.product-exhibit:nth-child(3),
.product-exhibit:nth-child(4),
.product-exhibit:nth-child(5),
.product-exhibit:nth-child(6) {
  min-height: 32rem;
  border: 0;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  background: var(--navy-soft);
  box-shadow: none;
  transform: none;
}

.product-exhibit:nth-child(1) { grid-column: span 7; }
.product-exhibit:nth-child(2) { grid-column: span 5; }
.product-exhibit:nth-child(3) { grid-column: span 5; }
.product-exhibit:nth-child(4) { grid-column: span 7; }
.product-exhibit:nth-child(5) { grid-column: span 7; }
.product-exhibit:nth-child(6) { grid-column: span 5; }

.product-exhibit:hover,
.product-exhibit:focus-within {
  background: var(--navy-raised);
  box-shadow: none;
  transform: none;
}

.product-exhibit--clinical,
.product-exhibit--ecosystem,
.product-exhibit--learning,
.product-exhibit--relationship,
.product-exhibit--journey,
.product-exhibit--mobility {
  background: var(--navy-soft);
  color: var(--text);
}

.product-exhibit--clinical:hover,
.product-exhibit--ecosystem:hover,
.product-exhibit--learning:hover,
.product-exhibit--relationship:hover,
.product-exhibit--journey:hover,
.product-exhibit--mobility:hover {
  background: var(--navy-raised);
}

.product-exhibit-media {
  aspect-ratio: 1.62 / 1;
  border-bottom: 1px solid var(--line);
  background: var(--navy-deep);
}

.product-exhibit-copy {
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 2.7rem);
}

.product-exhibit-copy .product-meta,
.product-exhibit--clinical .product-meta,
.product-exhibit--ecosystem .product-meta,
.product-exhibit--relationship .product-meta,
.product-exhibit--mobility .product-meta {
  color: var(--quiet);
}

.product-exhibit-copy h3 {
  margin: auto 0 .7rem;
  color: var(--white);
  font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
  font-size: clamp(2.3rem, 4.2vw, 4.8rem);
  font-weight: 500;
}

.product-exhibit-copy p,
.product-exhibit--clinical .product-exhibit-copy p,
.product-exhibit--ecosystem .product-exhibit-copy p,
.product-exhibit--relationship .product-exhibit-copy p,
.product-exhibit--mobility .product-exhibit-copy p {
  color: var(--muted);
}

.work-exhibition { background: var(--navy-deep); }

.featured-work-grid {
  max-width: none;
  gap: 0;
  border-top: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}

.featured-work-card,
.featured-work-card:first-child {
  min-height: 36rem;
  border: 0;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--navy-soft);
  box-shadow: none;
  transform: none;
}

.featured-work-card:first-child { grid-column: span 5; grid-row: span 2; min-height: 48rem; }
.featured-work-card--ninebars { grid-column: span 4; }
.featured-work-card--optics { grid-column: span 3; }
.featured-work-card:hover,
.featured-work-card:focus-visible {
  border-color: var(--line-strong);
  background: var(--navy-raised);
  transform: none;
}

.featured-work-media {
  position: relative;
  aspect-ratio: 1.6 / 1;
  border-bottom: 1px solid var(--line);
}

.featured-work-media::after { display: none; }
.featured-work-media img { height: 100%; object-fit: cover; }
.featured-work-copy { position: relative; padding: clamp(1.4rem, 3vw, 2.8rem); }
.featured-work-copy .work-index,
.work-card > div > span { color: var(--quiet); font-family: var(--mono); }
.featured-work-copy h3 {
  color: var(--white);
  font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  font-weight: 500;
}
.featured-work-copy p { color: var(--muted); }

.featured-work-proof {
  min-height: 28rem;
  justify-content: space-between;
  padding: clamp(1.8rem, 4vw, 4rem);
  background: var(--navy-raised);
  border-bottom: 1px solid var(--line);
}
.featured-work-proof span { color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-weight: 500; }
.featured-work-proof i,
.featured-work-proof em { color: var(--cyan); font-family: var(--mono); }
.featured-work-proof b { color: var(--white); }
.featured-work-proof small { color: var(--muted); font-family: var(--mono); }

.work-explorer {
  border-top-color: var(--line-strong);
}
.work-explorer-heading h3 {
  color: var(--white);
  font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
}
.work-explorer-heading > p { color: var(--muted); }
.work-filters button {
  border-radius: 0;
  border-color: var(--line-strong);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
}
.work-filters button:hover,
.work-filters button:focus-visible,
.work-filters button[aria-pressed="true"] {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--navy);
}

.work-card-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
}
.work-card {
  grid-column: span 4;
  min-height: 24rem;
  padding: 1.3rem;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--navy-soft);
}
.work-card:nth-child(4),
.work-card:nth-child(5) { grid-column: span 3; }
.work-card:nth-child(6),
.work-card:nth-child(7) { grid-column: span 6; }
.work-card:hover,
.work-card:focus-visible { background: var(--navy-raised); transform: none; }
.work-card-media { aspect-ratio: 1.6 / 1; background: var(--navy-deep); }
.work-card h4 { color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-weight: 500; }
.work-card p { color: var(--muted); }
.work-card--quiet { min-height: 16rem; background: var(--navy-soft); }
.work-card-mark { color: var(--cyan); font-family: var(--mono); }

@media (max-width: 900px) {
  .product-exhibition .product-section-heading,
  .work-exhibition .partner-heading { grid-template-columns: 1fr; gap: 1.2rem; }
  .product-exhibit,
  .product-exhibit:nth-child(1),
  .product-exhibit:nth-child(2),
  .product-exhibit:nth-child(3),
  .product-exhibit:nth-child(4),
  .product-exhibit:nth-child(5),
  .product-exhibit:nth-child(6),
  .featured-work-card,
  .featured-work-card:first-child,
  .featured-work-card--ninebars,
  .featured-work-card--optics { grid-column: span 6; grid-row: auto; min-height: 32rem; }
  .work-card,
  .work-card:nth-child(4),
  .work-card:nth-child(5),
  .work-card:nth-child(6),
  .work-card:nth-child(7) { grid-column: span 6; }
}

@media (max-width: 560px) {
  .product-exhibition,
  .work-exhibition { padding-right: 1rem; padding-left: 1rem; }
  .product-feature--operator { border-radius: 0; }
  .product-feature--operator .product-feature-copy { min-height: 27rem; padding: 1.5rem; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .product-exhibit,
  .product-exhibit:nth-child(1),
  .product-exhibit:nth-child(2),
  .product-exhibit:nth-child(3),
  .product-exhibit:nth-child(4),
  .product-exhibit:nth-child(5),
  .product-exhibit:nth-child(6),
  .featured-work-card,
  .featured-work-card:first-child,
  .featured-work-card--ninebars,
  .featured-work-card--optics,
  .work-card,
  .work-card:nth-child(4),
  .work-card:nth-child(5),
  .work-card:nth-child(6),
  .work-card:nth-child(7) { grid-column: 1 / -1; min-height: 27rem; }
  .featured-work-proof { min-height: 22rem; }
  .work-card--quiet { min-height: 16rem; }
}

/* Editorial heading proportions */
@media (min-width: 901px) {
  .product-exhibition .product-section-heading,
  .work-exhibition .partner-heading {
    grid-template-columns: minmax(8rem, .28fr) minmax(0, 1fr);
  }
  .product-heading-copy,
  .partner-heading-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, .55fr);
    align-items: end;
    gap: clamp(2rem, 6vw, 7rem);
  }
  .product-heading-copy h2,
  .partner-heading-copy h2 {
    max-width: 17ch;
    font-size: clamp(2.2rem, 3.05vw, 3.7rem);
    line-height: 1.02;
  }
  .product-heading-copy > p,
  .partner-heading-copy > p {
    max-width: 34rem;
    margin: 0;
  }
}

.product-exhibition .product-section-heading > .kicker,
.work-exhibition .partner-heading > .kicker {
  align-self: start;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.product-heading-copy > p,
.partner-heading-copy > p {
  color: var(--muted);
  font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
  font-size: .96rem;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .product-heading-copy,
  .partner-heading-copy { display: block; }
  .product-heading-copy > p,
  .partner-heading-copy > p { margin-top: 1.5rem; }
}

/* Final handoff-page overrides */
.product-redirect-page { background: var(--navy); color: var(--text); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; }
.product-redirect-page .site-header { position: fixed; color: var(--text); background: rgba(10, 26, 49, .92); }
.product-redirect-page .site-header nav { color: var(--muted); font-family: var(--mono); font-size: .76rem; text-transform: uppercase; }
.product-redirect-page .site-header nav a { color: inherit; }
.product-redirect-page .header-cta { border-color: var(--line-strong); color: var(--white); }
.product-redirect-page .brand-meta { color: var(--quiet); }
.product-redirect-page .product-page-footer { border-top-color: var(--line); color: var(--quiet); }
.product-redirect-page .product-page-back span,
.product-redirect-page .product-page-cta span,
.product-redirect-page .product-page-footer a span { border-radius: 0; }
.product-redirect-actions .product-page-cta { margin-top: 0; }
.product-page-contact { color: var(--cyan) !important; }
.product-page-visit { padding: .85rem 1rem; background: var(--white); color: var(--navy) !important; }
.product-visit-dialog {
  width: min(40rem, calc(100vw - 2rem));
  max-width: none;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  padding: clamp(1.4rem, 4vw, 3rem);
  background: var(--navy-deep);
  color: var(--white);
  box-shadow: 0 2.5rem 8rem rgba(0, 0, 0, .56);
}
.product-visit-dialog::backdrop { background: rgba(3, 12, 24, .82); backdrop-filter: blur(10px); }
.product-visit-dialog-grid { position: absolute; inset: 0; opacity: .42; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: linear-gradient(135deg, #000, transparent 76%); }
.product-visit-dialog > *:not(.product-visit-dialog-grid) { position: relative; z-index: 1; }
.product-visit-dialog-close { position: absolute !important; inset: 1rem 1rem auto auto; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--line-strong); border-radius: 0; background: var(--navy); color: var(--muted); font: 1rem/1 var(--mono); cursor: pointer; }
.product-visit-dialog-close:hover,
.product-visit-dialog-close:focus-visible { border-color: var(--cyan); color: var(--cyan); }
.product-visit-dialog-mark { display: flex; align-items: center; gap: .55rem; min-height: 4.2rem; margin-bottom: 2.2rem; color: var(--cyan); font: .68rem/1 var(--mono); letter-spacing: .1em; }
.product-visit-dialog-mark span { margin-inline-end: auto; color: var(--white); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: 2.2rem; letter-spacing: -.1em; }
.product-visit-dialog-mark i { width: .55rem; height: .55rem; border: 1px solid currentColor; animation: product-handoff-signal 1.1s ease-in-out infinite alternate; }
.product-visit-dialog-mark i:nth-of-type(2) { animation-delay: .16s; }
.product-visit-dialog-mark i:nth-of-type(3) { animation-delay: .32s; }
.product-visit-dialog .product-page-kicker { margin: 0 0 .9rem; color: var(--cyan); }
.product-visit-dialog h2 { max-width: 13ch; margin: 0; font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; font-size: clamp(2rem, 5vw, 3.7rem); line-height: .98; letter-spacing: -.07em; font-weight: 500; }
.product-visit-dialog > p:not(.product-page-kicker) { max-width: 34rem; margin: 1rem 0 0; color: var(--muted); line-height: 1.7; }
.product-visit-destination { display: grid; gap: .5rem; margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.product-visit-destination span,
.product-visit-status { color: var(--quiet); font: .65rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.product-visit-destination strong { overflow: hidden; color: var(--white); font: .8rem/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.product-visit-progress { height: 2px; margin-top: 1.2rem; overflow: hidden; background: var(--line); }
.product-visit-progress i { display: block; width: 100%; height: 100%; background: var(--cyan); transform: scaleX(var(--product-redirect-progress, 0)); transform-origin: left center; transition: transform 1.35s cubic-bezier(.2, .8, .2, 1); }
html[dir="rtl"] .product-visit-progress i { transform-origin: right center; }
.product-visit-status { display: block; margin-top: .75rem; color: var(--cyan); }
@keyframes product-handoff-signal { from { opacity: .28; transform: translateY(.18rem); } to { opacity: 1; transform: none; background: var(--cyan); } }
@media (max-width: 900px) {
  .product-redirect-page .site-header { position: fixed; }
}

/* LIX art-direction system: hierarchy, component identity, and restrained motion */
:root {
  --motion-instant: 180ms;
  --motion-interface: 260ms;
  --motion-component: 480ms;
  --motion-narrative: 900ms;
  --ease-lix: cubic-bezier(.2, .8, .2, 1);
}

.site-header nav a,
.header-cta,
.site-header .brand {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.site-header nav a:hover,
.site-header nav a:focus-visible,
.header-cta:hover,
.header-cta:focus-visible {
  animation-iteration-count: 1;
  animation-duration: var(--motion-narrative);
}

.console-section,
.platforms,
.capabilities,
.contact,
.portfolio,
.journal,
.faq-section {
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.story-step { min-height: 64vh; }
.section-heading { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.product-exhibition,
.work-exhibition { padding-block: clamp(4.75rem, 8vw, 7.5rem); }
.product-exhibition .product-section-heading,
.work-exhibition .partner-heading { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.journal-feature h2 { margin-top: clamp(2.75rem, 5vw, 5rem); }

/* Products: a deliberate 3 + 4 exhibition, not an accidental orphan row. */
.product-logo-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.product-logo-card,
.product-logo-card:nth-child(n) {
  grid-column: span 3;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--motion-interface) ease,
    background-color var(--motion-interface) ease,
    border-color var(--motion-interface) ease,
    transform var(--motion-component) var(--ease-lix);
}
.product-logo-card:nth-child(-n + 3) { grid-column: span 4; }
.product-logo-card::before,
.product-logo-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: .36;
  transition: opacity var(--motion-interface) ease,
    transform var(--motion-component) var(--ease-lix);
}
.product-logo-card::before {
  inset: 18% 14%;
  border: 1px solid rgba(88, 217, 225, .12);
  transform: rotate(-6deg) scale(.94);
}
.product-logo-card::after {
  width: 42%;
  aspect-ratio: 1;
  inset: auto 8% 8% auto;
  background: linear-gradient(135deg, transparent 49%, rgba(88, 217, 225, .1) 50% 51%, transparent 52%);
}
.product-logo-card:hover::before,
.product-logo-card:focus-visible::before {
  opacity: .72;
  transform: rotate(0) scale(1);
}
.product-logo-card:hover::after,
.product-logo-card:focus-visible::after { opacity: .82; transform: translate(-8%, -8%); }
.product-logo-card--clinical::before { inset: 16% 24%; border-radius: 50% 50% 0 0; }
.product-logo-card--ecosystem::before { inset: 20%; box-shadow: 1.1rem 1.1rem 0 rgba(88,217,225,.04), -1.1rem -1.1rem 0 rgba(88,217,225,.025); }
.product-logo-card--learning::before { inset: 21% 16%; transform: skewY(-7deg) scale(.94); }
.product-logo-card--relationship::before { inset: 23%; border-radius: 50%; box-shadow: 0 0 0 1.5rem rgba(88,217,225,.025); }
.product-logo-card--journey::before { inset: 17% 22%; border-radius: 50% 50% 0 0; border-bottom: 0; }
.product-logo-card--mobility::before { inset: 17%; transform: skewX(-14deg) rotate(-6deg) scale(.94); }
.product-logo-mark,
.product-logo-detail,
.product-logo-card > span { position: relative; z-index: 2; }

/* Partner cards: one identity layer, details revealed without duplicating titles. */
.selected-work-copy {
  justify-content: flex-start;
  clip-path: none;
  opacity: 1;
  pointer-events: auto;
  isolation: isolate;
  background: transparent;
  transition: none;
}
.selected-work-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(180deg, rgba(5, 16, 31, .44), rgba(5, 16, 31, .9) 58%, rgba(5, 16, 31, .985));
  transition: opacity var(--motion-interface) ease;
}
.selected-work-copy > span,
.selected-work-copy h3 {
  text-shadow: 0 .12rem .8rem rgba(2, 8, 17, .78);
}
.selected-work-copy h3 { max-width: 12ch; }
.selected-work-copy p {
  margin-top: auto;
  opacity: 0;
  transform: translateY(.65rem);
  transition: opacity var(--motion-interface) ease,
    transform var(--motion-component) var(--ease-lix);
}
.selected-work-link {
  opacity: 0;
  transform: translateY(.55rem);
  transition: opacity var(--motion-interface) ease var(--motion-instant),
    transform var(--motion-component) var(--ease-lix) var(--motion-instant);
}
.selected-work-card:hover .selected-work-copy::before,
.selected-work-card:focus-visible .selected-work-copy::before,
.selected-work-card:focus-within .selected-work-copy::before { opacity: 1; }
.selected-work-card:hover .selected-work-copy p,
.selected-work-card:focus-visible .selected-work-copy p,
.selected-work-card:focus-within .selected-work-copy p,
.selected-work-card:hover .selected-work-link,
.selected-work-card:focus-visible .selected-work-link,
.selected-work-card:focus-within .selected-work-link {
  opacity: 1;
  transform: none;
}
.selected-work-card:hover .selected-work-copy h3,
.selected-work-card:focus-visible .selected-work-copy h3,
html[dir="rtl"] .selected-work-card:hover .selected-work-copy h3,
html[dir="rtl"] .selected-work-card:focus-visible .selected-work-copy h3 { transform: none; }

/* Full portfolio: identity is always readable; the brief is the interaction. */
.portfolio-controls button,
.portfolio-filters button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.portfolio-filters button { padding: .7rem .95rem; }
.portfolio-panel-copy {
  justify-content: flex-start;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  isolation: isolate;
  background: transparent;
  transition: none;
}
.portfolio-panel-copy::before {
  inset: 0;
  z-index: -1;
  border: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(5, 16, 31, .38), rgba(5, 16, 31, .91) 58%, rgba(5, 16, 31, .99));
  transition: opacity var(--motion-interface) ease;
}
.portfolio-panel-meta,
.portfolio-panel-copy h2 { text-shadow: 0 .14rem .9rem rgba(2, 8, 17, .82); }
.portfolio-panel-copy h2 { max-width: 13ch; }
.portfolio-panel-copy > p {
  margin-top: auto;
  opacity: 0;
  transform: translateY(.7rem);
  transition: opacity var(--motion-interface) ease,
    transform var(--motion-component) var(--ease-lix);
}
.portfolio-panel-footer {
  opacity: 0;
  transform: translateY(.55rem);
  transition: opacity var(--motion-interface) ease var(--motion-instant),
    transform var(--motion-component) var(--ease-lix) var(--motion-instant);
}
.portfolio-panel:hover .portfolio-panel-copy::before,
.portfolio-panel:focus-within .portfolio-panel-copy::before,
.portfolio-panel.is-peeking .portfolio-panel-copy::before { opacity: 1; }
.portfolio-panel:hover .portfolio-panel-copy > p,
.portfolio-panel:focus-within .portfolio-panel-copy > p,
.portfolio-panel.is-peeking .portfolio-panel-copy > p,
.portfolio-panel:hover .portfolio-panel-footer,
.portfolio-panel:focus-within .portfolio-panel-footer,
.portfolio-panel.is-peeking .portfolio-panel-footer {
  opacity: 1;
  transform: none;
}
.portfolio-panel:hover .portfolio-panel-copy h2,
.portfolio-panel:focus-within .portfolio-panel-copy h2,
html[dir="rtl"] .portfolio-panel:hover .portfolio-panel-copy h2,
html[dir="rtl"] .portfolio-panel:focus-within .portfolio-panel-copy h2 { transform: none; }

/* Product pages: a shared frame with a specific visual grammar for every product. */
.product-page--operations { --product-accent: #58d9e1; --product-wash: rgba(25, 111, 149, .38); }
.product-page--clinical { --product-accent: #76a8ff; --product-wash: rgba(69, 93, 176, .4); }
.product-page--ecosystem { --product-accent: #66d2b4; --product-wash: rgba(23, 112, 91, .36); }
.product-page--learning { --product-accent: #d7b4ff; --product-wash: rgba(108, 62, 152, .38); }
.product-page--relationship { --product-accent: #ff9b83; --product-wash: rgba(142, 63, 52, .36); }
.product-page--journey { --product-accent: #e7c26d; --product-wash: rgba(133, 100, 36, .37); }
.product-page--mobility { --product-accent: #7fcfff; --product-wash: rgba(34, 101, 143, .38); }
.product-redirect-art {
  isolation: isolate;
  background: radial-gradient(circle at 68% 26%, var(--product-wash, rgba(88,217,225,.28)), transparent 38%), var(--navy-deep);
}
.product-redirect-art::before {
  inset: 9%;
  z-index: 2;
  border-color: color-mix(in srgb, var(--product-accent, var(--cyan)) 45%, transparent);
}
.product-redirect-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 18, 34, .08), rgba(6, 18, 34, .78));
  pointer-events: none;
}
.product-redirect-art-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  filter: saturate(.72) contrast(1.08);
  transform: scale(1.025);
  transition: transform 1.1s var(--ease-lix), opacity var(--motion-component) ease;
}
.product-redirect-visual:hover .product-redirect-art-image { opacity: .52; transform: scale(1.055); }
.product-redirect-art-name,
.product-redirect-art-code { z-index: 4 !important; }
.product-redirect-art-code { color: var(--product-accent, var(--cyan)) !important; }
.product-redirect-motif {
  position: absolute !important;
  inset: 20% 15% auto auto;
  z-index: 3 !important;
  display: flex;
  width: min(34%, 10rem);
  aspect-ratio: 1;
  align-items: flex-end;
  justify-content: center;
  gap: .55rem;
  font-size: 0 !important;
  pointer-events: none;
}
.product-redirect-art .product-redirect-motif i {
  position: relative;
  inset: auto;
  width: 18%;
  height: 42%;
  border: 1px solid color-mix(in srgb, var(--product-accent, var(--cyan)) 72%, transparent);
  border-radius: 0;
  box-shadow: none;
  background: color-mix(in srgb, var(--product-accent, var(--cyan)) 8%, transparent);
}
.product-redirect-art .product-redirect-motif i:nth-child(2) { height: 72%; }
.product-redirect-art .product-redirect-motif i:nth-child(3) { height: 100%; }
.product-redirect-art--clinical .product-redirect-motif { align-items: center; }
.product-redirect-art--clinical .product-redirect-motif i { height: 72%; border-radius: 50% 50% 0 0; }
.product-redirect-art--clinical .product-redirect-motif i:nth-child(2) { height: 100%; }
.product-redirect-art--clinical .product-redirect-motif i:nth-child(3) { height: 52%; }
.product-redirect-art--ecosystem .product-redirect-motif { flex-wrap: wrap; align-content: center; }
.product-redirect-art--ecosystem .product-redirect-motif i { width: 36%; height: 36%; }
.product-redirect-art--learning .product-redirect-motif { align-items: flex-end; }
.product-redirect-art--learning .product-redirect-motif i { width: 28%; height: 28%; transform: translateY(calc(var(--step, 0) * -1rem)); }
.product-redirect-art--learning .product-redirect-motif i:nth-child(2) { --step: 1; height: 46%; }
.product-redirect-art--learning .product-redirect-motif i:nth-child(3) { --step: 2; height: 64%; }
.product-redirect-art--relationship .product-redirect-motif i { width: 34%; height: 34%; border-radius: 50%; }
.product-redirect-art--relationship .product-redirect-motif i:nth-child(2) { align-self: flex-start; }
.product-redirect-art--journey .product-redirect-motif i { width: 27%; height: 70%; border-radius: 50% 50% 0 0; border-bottom: 0; }
.product-redirect-art--journey .product-redirect-motif i:nth-child(2) { height: 100%; }
.product-redirect-art--mobility .product-redirect-motif { transform: rotate(-18deg); }
.product-redirect-art--mobility .product-redirect-motif i { width: 12%; height: 100%; }
.product-redirect-close {
  background: linear-gradient(135deg, color-mix(in srgb, var(--product-accent, var(--cyan)) 7%, var(--navy-deep)), var(--navy-deep) 58%);
}
.product-page-visit { background: var(--product-accent, var(--white)); }

/* One narrative motion at a time; ambient systems settle after their entrance. */
.proof-source-visual i,
.network-city::after,
.branch-grid > span > i::after,
.workflow-route-packet,
.hero-route-packet { animation-iteration-count: 3; }

html[dir="rtl"] .product-heading-copy h2,
html[dir="rtl"] .partner-heading-copy h2,
html[dir="rtl"] .portfolio-cover h1,
html[dir="rtl"] .portfolio-gallery-top h2,
html[dir="rtl"] .product-redirect-copy h1,
html[dir="rtl"] .product-redirect-copy h2 {
  letter-spacing: -.035em;
  line-height: 1.1;
}
html[dir="rtl"] .portfolio-panel-meta,
html[dir="rtl"] .portfolio-filters,
html[dir="rtl"] .portfolio-controls { letter-spacing: 0; }

/* The portfolio stamp is a quiet index, not a second display headline. */
.portfolio-cover-mark b {
  font-weight: 300;
  opacity: .88;
  transform: scaleX(.9);
  transform-origin: right center;
}
html[dir="rtl"] .portfolio-cover-mark b { transform-origin: left center; }

@media (hover: none), (any-pointer: coarse) {
  .product-logo-card .product-logo-mark {
    opacity: 1;
    transform: none;
    margin-top: auto;
    margin-bottom: 3rem;
  }
  .product-logo-card .product-logo-detail {
    opacity: 1;
    transform: none;
    pointer-events: none;
  }
  .product-logo-detail > span,
  .product-logo-detail b { display: none; }
  .selected-work-copy::before { opacity: .82; }
  .selected-work-copy p,
  .selected-work-link { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .product-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-logo-card,
  .product-logo-card:nth-child(n) { grid-column: span 1; }
  .story-step { min-height: auto; }
}

@media (max-width: 600px) {
  .console-section,
  .platforms,
  .capabilities,
  .contact,
  .portfolio,
  .journal,
  .faq-section,
  .product-exhibition,
  .work-exhibition { padding-block: 4.25rem; }
  .product-logo-grid {
    display: flex;
    width: auto;
    margin-inline: -1rem;
    padding-inline: 1rem;
    overflow-x: auto;
    border-inline-start: 0;
    scroll-padding-inline: 1rem;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }
  .product-logo-grid::-webkit-scrollbar { display: none; }
  .product-logo-card,
  .product-logo-card:nth-child(n) {
    flex: 0 0 min(78vw, 22rem);
    scroll-snap-align: start;
  }
  .product-logo-card .product-logo-mark { margin-bottom: 4.25rem; font-size: clamp(1.55rem, 8vw, 2.2rem); }
  .product-logo-card--operium .product-logo-mark { font-size: clamp(1.2rem, 6vw, 1.8rem); }
  .product-logo-detail > span { display: block; }
  .product-logo-detail strong { font-size: 1rem; line-height: 1.25; }
  .portfolio-controls button,
  .portfolio-filters button { min-height: 2.75rem; }
  .portfolio-panel-copy h2 { font-size: clamp(1.65rem, 8vw, 2.7rem); }
  .portfolio-panel-copy > p { font-size: .8rem; }
  .product-redirect-art { min-height: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
  .product-logo-card,
  .product-logo-card::before,
  .product-logo-card::after,
  .selected-work-copy::before,
  .selected-work-copy p,
  .selected-work-link,
  .portfolio-panel-copy::before,
  .portfolio-panel-copy > p,
  .portfolio-panel-footer,
  .product-redirect-art-image { transition-duration: .01ms !important; }
}

/* Unified portfolio controller ------------------------------------------------ */
.portfolio-enhanced .portfolio-sticky {
  touch-action: none;
  overscroll-behavior: contain;
}
.portfolio-enhanced .portfolio-track-wrap {
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.portfolio-controls button {
  position: relative;
  transition: color var(--motion-interface) ease,
    border-color var(--motion-interface) ease,
    transform var(--motion-component) var(--ease-lix),
    opacity var(--motion-interface) ease;
}
.portfolio-controls button.is-swipe-active {
  color: var(--cyan);
  border-color: var(--cyan);
  animation: portfolio-control-pulse .52s var(--ease-lix) both;
}
.portfolio-controls button:disabled {
  opacity: .34;
  cursor: default;
}
.portfolio-panel.is-current {
  border-color: color-mix(in srgb, var(--cyan) 38%, var(--line-strong));
}
.portfolio-scroll-hint i {
  position: relative;
  overflow: hidden;
  background: var(--line-strong);
}
.portfolio-scroll-hint i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cyan);
  transform: scaleX(var(--portfolio-progress, 0));
  transform-origin: left center;
  transition: transform .18s linear;
}
html[dir="rtl"] .portfolio-scroll-hint i::after { transform-origin: right center; }
@keyframes portfolio-control-pulse {
  0% { transform: translateX(0); }
  42% { transform: translateX(.32rem); }
  100% { transform: translateX(0); }
}
html[dir="rtl"] .portfolio-controls button.is-swipe-active {
  animation-name: portfolio-control-pulse-rtl;
}
@keyframes portfolio-control-pulse-rtl {
  0% { transform: translateX(0); }
  42% { transform: translateX(-.32rem); }
  100% { transform: translateX(0); }
}

/* Handwritten phrases stay expressive without overpowering mobile layouts. */
@media (max-width: 600px) {
  :where(
    .hero-copy h1 em,
    .proof h2 em,
    .journal-feature h2 em,
    .faq-intro h2 em,
    .page-hero h1 em,
    .page-hero h2 em,
    .page-cta h2 em,
    .contact h2 em
  ) {
    font-size: clamp(1.9rem, 10.5vw, 3.2rem) !important;
    line-height: 1.08;
  }
  .ink-phrase-shell,
  .ink-word-shell,
  .ink-phrase-final { max-inline-size: 100%; }
  html[dir="rtl"] :where(
    .hero-copy h1 em,
    .proof h2 em,
    .journal-feature h2 em,
    .faq-intro h2 em,
    .page-hero h1 em,
    .page-hero h2 em,
    .page-cta h2 em,
    .contact h2 em,
    [data-ar-handwriting]
  ) {
    font-size: clamp(1.65rem, 8.7vw, 2.65rem) !important;
    line-height: 1.38;
  }
}

@media (max-width: 380px) {
  :where(
    .hero-copy h1 em,
    .proof h2 em,
    .journal-feature h2 em,
    .faq-intro h2 em,
    .page-hero h1 em,
    .page-cta h2 em
  ) { font-size: clamp(1.7rem, 9.8vw, 2.55rem) !important; }
  html[dir="rtl"] :where(h1 em, h2 em, [data-ar-handwriting]) {
    font-size: clamp(1.5rem, 8.3vw, 2.3rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-controls button.is-swipe-active { animation: none; }
  .portfolio-scroll-hint i::after { transition: none; }
}

/* Authentic product identities and quieter product handoffs. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.product-logo-mark:has(img) {
  display: grid;
  grid-template-columns: clamp(3.25rem, 5.4vw, 5.25rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(.8rem, 1.5vw, 1.25rem);
  font-size: clamp(1rem, 1.85vw, 1.75rem);
  letter-spacing: -.055em;
}
.product-logo-mark > img {
  display: block;
  width: clamp(3.25rem, 5.4vw, 5.25rem);
  height: clamp(3.25rem, 5.4vw, 5.25rem);
  max-height: none;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid rgba(238, 244, 248, .12);
  background: var(--navy-deep);
}
.product-logo-mark > span { min-width: 0; }
.product-logo-card:hover .product-logo-mark > img,
.product-logo-card:focus-visible .product-logo-mark > img { border-color: rgba(10, 26, 49, .22); }

.product-identity {
  display: inline-flex;
  width: min(100%, 6.2em);
  min-height: .82em;
  align-items: center;
}
.product-identity img {
  display: block;
  width: 100%;
  max-height: 1em;
  object-fit: contain;
  object-position: left center;
}
html[dir="rtl"] .product-identity img { object-position: right center; }
.product-redirect-copy h1:has(.product-identity) {
  width: min(100%, 38rem);
  min-height: clamp(4.5rem, 8vw, 8.5rem);
  display: flex;
  align-items: center;
}
.product-redirect-copy h1 .product-identity { width: min(100%, 5.2em); }
.product-redirect-art-name:has(.product-identity) { width: min(58%, 23rem); }
.product-redirect-art-name .product-identity { width: 100%; }

.product-redirect-actions .product-page-cta,
.product-page-visit,
.product-page-contact {
  position: relative;
  gap: .72rem;
  padding: .35rem 0 .55rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--product-accent, var(--cyan)) 54%, transparent);
  background: transparent !important;
  color: var(--white) !important;
  font: 600 .78rem/1.25 var(--mono);
  letter-spacing: .045em;
  text-transform: uppercase;
  transition: color var(--motion-interface) ease, border-color var(--motion-interface) ease;
}
.product-page-cta i {
  display: inline-block;
  color: var(--product-accent, var(--cyan));
  font-style: normal;
  transition: transform var(--motion-component) var(--ease-lix);
}
.product-page-cta:hover,
.product-page-cta:focus-visible { color: var(--product-accent, var(--cyan)) !important; border-color: currentColor; }
.product-page-cta:hover i,
.product-page-cta:focus-visible i { transform: translate(.22rem, -.16rem); }
html[dir="rtl"] .product-page-contact:hover i,
html[dir="rtl"] .product-page-contact:focus-visible i { transform: translate(-.22rem, 0); }

.product-redirect-close {
  display: grid;
  grid-template-columns: minmax(8rem, .32fr) minmax(0, 1.25fr) minmax(10rem, .38fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 7rem);
  max-width: none;
  min-height: min(64vh, 42rem);
  margin: 0;
  padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 6rem);
  border-top: 1px solid var(--line);
}
.product-redirect-close-index { display: grid; gap: .75rem; align-self: start; }
.product-redirect-close-index span,
.product-redirect-close-index b {
  color: var(--quiet);
  font: .66rem/1.35 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 400;
}
.product-redirect-close-index b { color: var(--product-accent, var(--cyan)); }
.product-redirect-close-copy .product-page-kicker { margin: 0; color: var(--product-accent, var(--cyan)); }
.product-redirect-close h2 {
  max-width: 15ch;
  margin: .9rem 0 0;
  font-size: clamp(2.2rem, 4.4vw, 5rem);
  line-height: 1;
}
.product-redirect-close-copy > p:last-child {
  max-width: 43rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.75;
}
.product-redirect-close-action { justify-self: end; }
.product-redirect-close-action .product-page-cta { margin: 0; }

/* The old document loader is not part of navigation. */
.site-preloader { display: none !important; }

@media (max-width: 760px) {
  .product-logo-mark:has(img) {
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: .8rem;
    font-size: clamp(1rem, 5.5vw, 1.5rem);
  }
  .product-redirect-copy h1:has(.product-identity) { min-height: 4.5rem; }
  .product-redirect-close {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 2.25rem;
    padding-block: 4.75rem;
  }
  .product-redirect-close-index { grid-template-columns: 1fr auto; }
  .product-redirect-close-action { justify-self: start; }
  .product-redirect-close h2 { font-size: clamp(2rem, 9.8vw, 3.25rem); }
}

/* Product identity planes: the icon is the card, not a badge inside it. */
.product-logo-card:has(.product-logo-mark img) {
  padding: 0;
  background: var(--navy-deep);
  color: var(--white);
}
.product-logo-card--clinical:has(.product-logo-mark img) { background: #042425; }
.product-logo-card--ecosystem:has(.product-logo-mark img) { background: #171719; }
.product-logo-card--learning:has(.product-logo-mark img) { background: #00c0c8; }
.product-logo-card--relationship:has(.product-logo-mark img) { background: #1f3b36; }
.product-logo-card--journey:has(.product-logo-mark img) { background: #18201b; }
.product-logo-card--mobility:has(.product-logo-mark img) { background: #202427; }
.product-logo-card:has(.product-logo-mark img)::before,
.product-logo-card:has(.product-logo-mark img)::after { display: none; }
.product-logo-card:has(.product-logo-mark img) .product-logo-number {
  position: absolute;
  inset: clamp(.9rem, 1.8vw, 1.4rem) auto auto clamp(.9rem, 1.8vw, 1.4rem);
  z-index: 5;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 .12rem .75rem rgba(0, 0, 0, .75);
}
html[dir="rtl"] .product-logo-card:has(.product-logo-mark img) .product-logo-number {
  inset-inline: auto clamp(.9rem, 1.8vw, 1.4rem);
}
.product-logo-card:has(.product-logo-mark img) .product-logo-mark {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  max-width: none;
  margin: 0;
  overflow: hidden;
  opacity: 1;
  transform: none;
}
.product-logo-card:has(.product-logo-mark img) .product-logo-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 11, 22, .08) 28%, rgba(3, 11, 22, .82) 100%),
    linear-gradient(90deg, rgba(3, 11, 22, .18), transparent 48%);
  transition: background var(--motion-component) ease, opacity var(--motion-interface) ease;
}
.product-logo-card:has(.product-logo-mark img) .product-logo-mark > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none;
  max-height: none;
  border: 0;
  background: transparent;
  object-fit: cover;
  opacity: .9;
  filter: saturate(.86) contrast(1.04);
  transform: scale(1.015);
  transition: opacity var(--motion-interface) ease,
    filter var(--motion-component) ease,
    transform 900ms var(--ease-lix);
}
.product-logo-card:has(.product-logo-mark img) .product-logo-mark > span {
  position: absolute;
  inset: auto clamp(1.05rem, 2.5vw, 2rem) clamp(1rem, 2.8vw, 1.8rem);
  z-index: 3;
  display: block;
  color: var(--white);
  font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
  font-size: clamp(2.15rem, 4.1vw, 4.8rem);
  line-height: .88;
  letter-spacing: -.09em;
  font-weight: 600;
  text-shadow: 0 .22rem 1.3rem rgba(0, 0, 0, .64);
  transition: opacity var(--motion-interface) ease,
    transform var(--motion-component) var(--ease-lix);
}
.product-logo-card:has(.product-logo-mark img) .product-logo-detail {
  position: absolute;
  z-index: 4;
  inset: auto clamp(1.05rem, 2.5vw, 2rem) clamp(1.05rem, 2.5vw, 2rem);
  display: grid;
  gap: .48rem;
  color: var(--white);
}
.product-logo-card:has(.product-logo-mark img):hover,
.product-logo-card:has(.product-logo-mark img):focus-visible,
.product-logo-card:has(.product-logo-mark img):focus-within {
  color: var(--white);
}
.product-logo-card:has(.product-logo-mark img):hover .product-logo-mark,
.product-logo-card:has(.product-logo-mark img):focus-visible .product-logo-mark,
.product-logo-card:has(.product-logo-mark img):focus-within .product-logo-mark {
  opacity: 1;
  transform: none;
}
.product-logo-card:has(.product-logo-mark img):hover .product-logo-mark::after,
.product-logo-card:has(.product-logo-mark img):focus-visible .product-logo-mark::after,
.product-logo-card:has(.product-logo-mark img):focus-within .product-logo-mark::after {
  background: linear-gradient(180deg, rgba(4, 14, 28, .72), rgba(4, 14, 28, .96));
}
.product-logo-card:has(.product-logo-mark img):hover .product-logo-mark > img,
.product-logo-card:has(.product-logo-mark img):focus-visible .product-logo-mark > img,
.product-logo-card:has(.product-logo-mark img):focus-within .product-logo-mark > img {
  opacity: .28;
  filter: saturate(.4) contrast(1.08);
  transform: scale(1.075);
}
.product-logo-card:has(.product-logo-mark img):hover .product-logo-mark > span,
.product-logo-card:has(.product-logo-mark img):focus-visible .product-logo-mark > span,
.product-logo-card:has(.product-logo-mark img):focus-within .product-logo-mark > span {
  opacity: 0;
  transform: translateY(-.65rem);
}

@media (hover: none), (any-pointer: coarse) {
  .product-logo-card:has(.product-logo-mark img) .product-logo-mark {
    margin: 0;
  }
  .product-logo-card:has(.product-logo-mark img) .product-logo-detail {
    display: none;
  }
}

@media (max-width: 600px) {
  .product-logo-card:has(.product-logo-mark img) .product-logo-mark > span {
    inset-inline: 1rem;
    font-size: clamp(2.1rem, 12vw, 3.6rem);
  }
}

/* Mobile product cards are an image-led index. There is no hover on a phone,
   so keep the tile quiet and legible: one square identity plane, a generous
   floating wordmark, and the index in the corner. The product page carries
   the brief and the link destination. */
@media (max-width: 600px) {
  .product-logo-grid {
    gap: .65rem;
    padding-inline: 1rem;
    scroll-padding-inline: 1rem;
  }
  .product-logo-card,
  .product-logo-card:nth-child(n) {
    flex-basis: min(84vw, 22rem);
    aspect-ratio: 1 / 1;
    border-inline-end: 1px solid rgba(194, 214, 232, .2);
    border-bottom: 1px solid rgba(194, 214, 232, .2);
  }
  .product-logo-card:has(.product-logo-mark img) .product-logo-detail {
    display: none;
  }
  .product-logo-card:has(.product-logo-mark img) .product-logo-mark > span {
    inset: auto 1.15rem 1.1rem;
    font-size: clamp(2.45rem, 14vw, 4rem);
    line-height: .86;
  }
  .product-logo-card:has(.product-logo-mark img) .product-logo-number {
    inset: 1.05rem auto auto 1.1rem;
    font-size: .62rem;
  }
  html[dir="rtl"] .product-logo-card:has(.product-logo-mark img) .product-logo-number {
    inset-inline: auto 1.1rem;
  }
  .product-logo-card--operium .product-logo-mark {
    align-content: end;
    padding: 1.1rem;
    font-size: clamp(1.35rem, 7vw, 2rem);
  }
}