/* Home about blueprint section */
.about-mini-section {
  --about-title: #F0F4F8;
  --about-body: #98A4B6;
  --about-accent: #0EA5E9;
  --about-accent-strong: #38BDF8;
  --about-panel-bg: rgba(13, 17, 23, 0.72);
  --about-panel-border: rgba(14, 165, 233, 0.20);
  --about-panel-shadow: 0 16px 42px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --about-word-fill: rgba(14, 165, 233, 0.07);
  --about-grid-line: rgba(14, 165, 233, 0.055);
  --about-edge-bg: var(--color-space);
  isolation: isolate;
  padding-block: clamp(4.5rem, 9vw, 7rem);
  color: var(--about-title);
  background:
    radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.13) 0%, rgba(14, 165, 233, 0.05) 22%, transparent 46%),
    linear-gradient(var(--about-grid-line) 1px, transparent 1px) 50% 50% / 42px 42px,
    linear-gradient(90deg, var(--about-grid-line) 1px, transparent 1px) 50% 50% / 42px 42px,
    rgba(8, 12, 20, 0.72);
  border-top: 1px solid rgba(14, 165, 233, 0.18);
  border-bottom: 1px solid rgba(14, 165, 233, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}
.about-mini-section::before,
.about-mini-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.about-mini-section::before {
  z-index: 0;
  background:
    linear-gradient(90deg, var(--about-edge-bg) 0%, transparent 16%, transparent 84%, var(--about-edge-bg) 100%),
    linear-gradient(180deg, var(--about-edge-bg) 0%, transparent 18%, transparent 82%, var(--about-edge-bg) 100%);
}
.about-mini-section::after {
  z-index: 0;
  background:
    radial-gradient(circle at 11% 18%, rgba(14, 165, 233, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 89% 82%, rgba(14, 165, 233, 0.18) 0 1px, transparent 2px),
    radial-gradient(ellipse 42% 72% at 100% 8%, rgba(14, 165, 233, 0.11) 0%, transparent 68%),
    radial-gradient(ellipse 52% 42% at 0% 100%, rgba(14, 165, 233, 0.10) 0%, transparent 70%);
  opacity: 0.95;
}
.about-mini-bg-word {
  position: absolute;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: clamp(2.8rem, 6.8vw, 6.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--about-word-fill);
  text-shadow: 0 0 28px rgba(14, 165, 233, 0.04);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  pointer-events: none;
}
.about-mini-bg-word--left {
  top: clamp(4.75rem, 7vw, 5.5rem);
  left: clamp(1rem, 3.2vw, 3rem);
}
.about-mini-bg-word--right {
  right: clamp(1rem, 4vw, 4.5rem);
  bottom: clamp(1rem, 2.6vw, 2.25rem);
  color: var(--about-word-fill);
  font-style: normal;
}
.about-mini-lines {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.about-mini-line-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.about-mini-card-layer {
  position: absolute;
  inset: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.about-mini-line-track,
.about-mini-line-flow,
.about-mini-line-dash {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.about-mini-line-track {
  stroke: rgba(14, 165, 233, 0.16);
  stroke-width: 1;
}
.about-mini-line-flow {
  stroke: rgba(56, 189, 248, 0.70);
  stroke-width: 1.15;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.22));
}
.about-mini-line-dash {
  stroke: rgba(14, 165, 233, 0.50);
  stroke-width: 1.15;
  stroke-dasharray: 8 12;
  stroke-dashoffset: 0;
  opacity: 0;
}
.about-mini-section[data-in-view] .about-mini-line-flow {
  animation: about-mini-line-draw 1.45s var(--ease-out-expo) forwards;
}
.about-mini-section[data-in-view] .about-mini-line-flow--bottom {
  animation-delay: 0.18s;
}
.about-mini-section[data-in-view] .about-mini-line-dash {
  animation:
    about-mini-line-fade 0.45s ease-out forwards 0.65s,
    about-mini-line-drift 16s linear infinite 0.65s;
}
.about-mini-section[data-in-view] .about-mini-line-dash--bottom {
  animation-delay: 0.9s, 0.9s;
}
.about-mini-node {
  position: absolute;
  display: block;
  z-index: 2;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: #0D1117;
  border: 2px solid rgba(56, 189, 248, 0.78);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.25));
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.about-mini-section[data-in-view] .about-mini-node {
  animation:
    about-mini-node-in 0.45s var(--ease-out-expo) forwards,
    about-mini-node-pulse 2.8s ease-in-out infinite;
}
.about-mini-section[data-in-view] .about-mini-node--1 { animation-delay: 0.42s, 1.2s; }
.about-mini-section[data-in-view] .about-mini-node--2 { animation-delay: 0.56s, 1.35s; }
.about-mini-section[data-in-view] .about-mini-node--3 { animation-delay: 0.68s, 1.5s; }
.about-mini-section[data-in-view] .about-mini-node--4 { animation-delay: 0.84s, 1.7s; }
.about-mini-section[data-in-view] .about-mini-node--5 { animation-delay: 0.72s, 1.55s; }
.about-mini-svg-card {
  position: absolute;
  display: block;
  z-index: 2;
  width: clamp(3rem, 4vw, 3.375rem);
  aspect-ratio: 1;
  opacity: 0;
  transform-origin: center;
}
.about-mini-section[data-in-view] .about-mini-svg-card {
  animation: about-mini-card-in 0.55s var(--ease-out-expo) forwards 0.78s;
}
.about-mini-section[data-in-view] .about-mini-svg-card--delay-2 {
  animation-delay: 0.86s;
}
.about-mini-section[data-in-view] .about-mini-svg-card--delay-3 {
  animation-delay: 0.94s;
}
.about-mini-section[data-in-view] .about-mini-svg-card--delay-4 {
  animation-delay: 1.02s;
}
.about-mini-section[data-in-view] .about-mini-svg-card--delay-5 {
  animation-delay: 1.1s;
}
.about-mini-section[data-in-view] .about-mini-svg-card--delay-6 {
  animation-delay: 1.18s;
}
.about-mini-svg-card-inner {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--about-accent-strong);
  background: var(--about-panel-bg);
  border: 1px solid var(--about-panel-border);
  box-shadow: var(--about-panel-shadow);
  backdrop-filter: blur(14px) saturate(1.2);
}
.about-mini-svg-card-inner svg {
  width: 26px;
  height: 26px;
}
.about-mini-svg-card-icon {
  width: 56%;
  height: 56%;
  object-fit: contain;
}
.about-mini-grid {
  min-height: clamp(28rem, 44vw, 34rem);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}
.about-mini-portrait {
  position: relative;
  min-height: clamp(25rem, 39vw, 32rem);
  width: min(100%, 32rem);
  margin-inline: auto;
}
.about-mini-portrait-glow,
.about-mini-portrait-disc,
.about-mini-portrait-ring,
.about-mini-dot-field {
  position: absolute;
  pointer-events: none;
}
.about-mini-portrait-glow {
  inset: 19% 6% 3% 13%;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.28) 0%, rgba(14, 165, 233, 0.08) 46%, transparent 72%);
  filter: blur(18px);
}
.about-mini-portrait-disc {
  left: 11%;
  bottom: 5%;
  width: min(78%, 25rem);
  aspect-ratio: 1;
  border-radius: 9999px;
  background:
    linear-gradient(145deg, rgba(14, 165, 233, 0.18), rgba(12, 74, 110, 0.30)),
    rgba(13, 17, 23, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 80px rgba(0, 0, 0, 0.20);
}
.about-mini-portrait-ring {
  left: 2%;
  bottom: 0;
  width: min(92%, 29rem);
  aspect-ratio: 1;
  border-radius: 9999px;
}
.about-mini-portrait-ring--inner {
  border: 1px solid rgba(14, 165, 233, 0.28);
  animation: about-mini-ring-spin 24s linear infinite;
}
.about-mini-portrait-ring--outer {
  left: -1%;
  bottom: -4%;
  border: 1px dashed rgba(14, 165, 233, 0.34);
  animation: about-mini-ring-spin 34s linear reverse infinite;
}
.about-mini-dot-field {
  left: -3%;
  bottom: 22%;
  width: 4.5rem;
  height: 4.5rem;
  background-image: radial-gradient(circle, rgba(14, 165, 233, 0.42) 2px, transparent 2px);
  background-size: 16px 16px;
  opacity: 0.9;
}
.about-mini-photo-frame {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 0;
  width: min(82%, 25rem);
  transform: translateX(-48%);
}
.about-mini-photo {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.22));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
}
.about-mini-copy {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}
/* Matches the section-h2 scale: text-4xl -> md:text-5xl, extrabold, tracking-tight */
.about-mini-title {
  max-width: 44rem;
  margin-bottom: 1.55rem;
  color: var(--about-title);
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.about-mini-title-lock {
  display: inline-block;
  white-space: nowrap;
}
.about-mini-brand {
  display: inline-flex;
  width: 4.34em;
  max-width: 100%;
  height: 0.76em;
  margin-inline: 0.12em 0.02em;
  vertical-align: -0.13em;
  color: #0D67A5;
  filter: drop-shadow(0 0.16em 0.24em rgba(13, 103, 165, 0.18));
}
.about-mini-body {
  max-width: 42rem;
  margin-bottom: 2rem;
  color: var(--about-body);
  font-size: 1.125rem;
  line-height: 1.6;
}
@keyframes about-mini-line-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes about-mini-line-fade {
  to { opacity: 1; }
}
@keyframes about-mini-line-drift {
  to { stroke-dashoffset: -240; }
}
@keyframes about-mini-node-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.65); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes about-mini-node-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.35); }
}
@keyframes about-mini-card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes about-mini-ring-spin {
  to { transform: rotate(360deg); }
}
html.light .about-mini-section {
  --about-title: #000000;
  --about-body: #334155;
  --about-accent: #0369A1;
  --about-accent-strong: #0284C7;
  --about-panel-bg: rgba(255, 255, 255, 0.52);
  --about-panel-border: rgba(2, 132, 199, 0.20);
  --about-panel-shadow: 0 18px 42px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.80);
  --about-word-fill: rgba(3, 105, 161, 0.09);
  --about-grid-line: rgba(14, 165, 233, 0.13);
  --about-edge-bg: var(--color-space);
  background:
    radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.16) 0%, rgba(14, 165, 233, 0.07) 24%, transparent 48%),
    linear-gradient(var(--about-grid-line) 1px, transparent 1px) 50% 50% / 42px 42px,
    linear-gradient(90deg, var(--about-grid-line) 1px, transparent 1px) 50% 50% / 42px 42px,
    #EEF2F7 !important;
  border-top-color: rgba(2, 132, 199, 0.22);
  border-bottom-color: rgba(2, 132, 199, 0.22);
}
html.light .about-mini-section::after {
  background:
    radial-gradient(circle at 11% 18%, rgba(2, 132, 199, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 89% 82%, rgba(2, 132, 199, 0.22) 0 1px, transparent 2px),
    radial-gradient(ellipse 42% 72% at 100% 8%, rgba(14, 165, 233, 0.13) 0%, transparent 68%),
    radial-gradient(ellipse 52% 42% at 0% 100%, rgba(14, 165, 233, 0.12) 0%, transparent 70%);
}
html.light .about-mini-node {
  background: #EEF2F7;
  border-color: rgba(3, 105, 161, 0.72);
  filter: drop-shadow(0 0 8px rgba(2, 132, 199, 0.18));
}
html.light .about-mini-line-track {
  stroke: rgba(2, 132, 199, 0.20);
}
html.light .about-mini-line-flow {
  stroke: rgba(3, 105, 161, 0.82);
  filter: none;
}
html.light .about-mini-line-dash {
  stroke: rgba(2, 132, 199, 0.48);
}
html.light .about-mini-portrait-disc {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(14, 165, 233, 0.14)),
    rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 28px 80px rgba(15, 23, 42, 0.10);
}
html.light .about-mini-photo {
  filter: drop-shadow(0 24px 34px rgba(15, 23, 42, 0.14));
}
html.light .about-mini-brand {
  color: #0D67A5;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .about-mini-line-flow,
  .about-mini-line-dash,
  .about-mini-node,
  .about-mini-svg-card,
  .about-mini-portrait-ring {
    animation: none !important;
  }
  .about-mini-line-flow {
    stroke-dashoffset: 0;
  }
  .about-mini-line-dash,
  .about-mini-node,
  .about-mini-svg-card {
    opacity: 1;
  }
}
@media (max-width: 1023px) {
  .about-mini-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: clamp(2rem, 5vw, 3rem);
    text-align: center;
  }
  .about-mini-copy {
    max-width: 42rem;
    margin-inline: auto;
  }
  .about-mini-body {
    margin-inline: auto;
  }
  .about-mini-portrait {
    min-height: clamp(21rem, 56vw, 28rem);
    width: min(100%, 30rem);
    order: -1;
  }
  .about-mini-bg-word {
    font-size: clamp(2.6rem, 8vw, 4.8rem);
  }
  .about-mini-bg-word--left {
    top: 4.25rem;
    left: 1rem;
  }
  .about-mini-bg-word--right {
    right: 1rem;
    bottom: 1rem;
  }
  .about-mini-lines {
    opacity: 0.42;
  }
  .about-mini-svg-card {
    display: none !important;
  }
}
@media (max-width: 639px) {
  .about-mini-section {
    padding-block: clamp(3.4rem, 13vw, 4.75rem);
  }
  .about-mini-grid {
    gap: 1.75rem;
  }
  .about-mini-bg-word {
    font-size: clamp(2.15rem, 12vw, 3.8rem);
    opacity: 0.88;
  }
  .about-mini-bg-word--left {
    top: 3.75rem;
    left: 0.85rem;
  }
  .about-mini-bg-word--right {
    right: 0.85rem;
    bottom: 0.85rem;
  }
  .about-mini-lines {
    opacity: 0.28;
  }
  .about-mini-svg-card {
    display: none;
  }
  .about-mini-portrait {
    min-height: clamp(18rem, 96vw, 23rem);
    width: min(100%, 22rem);
  }
  .about-mini-portrait-disc {
    left: 13%;
    width: min(74%, 18rem);
  }
  .about-mini-portrait-ring {
    left: 4%;
    width: min(86%, 20rem);
  }
  .about-mini-photo-frame {
    width: min(72vw, 18.5rem);
  }
  .about-mini-title {
    font-size: clamp(1.85rem, 8.4vw, 2.35rem);
  }
  .about-mini-brand {
    width: 4.10em;
    height: 0.72em;
    margin-inline-start: 0.10em;
    vertical-align: -0.11em;
  }
  .about-mini-body {
    font-size: 0.98rem;
    line-height: 1.58;
  }
}

@media (max-width: 380px) {
  .about-mini-brand {
    width: 3.88em;
    height: 0.68em;
  }
  .about-mini-portrait {
    min-height: 18rem;
  }
  .about-mini-photo-frame {
    width: min(76vw, 16.8rem);
  }
  .about-mini-dot-field {
    display: none;
  }
}

/* =========================================
   HOME SERVICES - large product-story cards
   ========================================= */
.services-section {
  --service-card-bg: #111827;
  --service-panel-bg: #1a2233;
  --service-panel-soft: rgba(255, 255, 255, 0.045);
  --service-chip-bg: rgba(255, 255, 255, 0.06);
  --service-skeleton: rgba(255, 255, 255, 0.08);
  --service-grid-line: rgba(255, 255, 255, 0.035);
  --service-device-bg: #1a2233;
  --service-device-border: rgba(255, 255, 255, 0.14);
  --service-ink: #edf1f7;
  --service-copy: #a7b2c4;
  --service-muted: #7c8798;
  --service-hairline: rgba(255, 255, 255, 0.09);
  --service-success: #10b981;
  --service-response: #3bd681;
  --service-deployments: #a78bfa;
}

html.light .services-section {
  --service-card-bg: #fcfcfb;
  --service-panel-bg: rgba(255, 255, 255, 0.94);
  --service-panel-soft: #f5f7fa;
  --service-chip-bg: rgba(255, 255, 255, 0.78);
  --service-skeleton: #e8edf2;
  --service-grid-line: rgba(40, 67, 104, 0.028);
  --service-device-bg: #ffffff;
  --service-device-border: #d6d9dc;
  --service-ink: #0b1d38;
  --service-copy: #314867;
  --service-muted: #60728b;
  --service-hairline: rgba(38, 62, 94, 0.12);
  --service-success: #138a4b;
  --service-response: #0b7a3b;
  --service-deployments: #6d28d9;
}

.service-showcase-list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.service-showcase {
  --accent: var(--service-accent);
  --accent-solid: var(--service-accent-light);
  position: relative;
  overflow: hidden;
  color: var(--service-ink);
  background: var(--service-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: 0 24px 70px rgba(3, 12, 28, 0.18), 0 2px 8px rgba(3, 12, 28, 0.08);
  transition: transform 260ms var(--ease-out-expo), box-shadow 260ms ease, border-color 260ms ease;
}

.service-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--service-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--service-grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(125deg, transparent 10%, black 72%, transparent 100%);
}

.service-showcase:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 30px 86px rgba(3, 12, 28, 0.24), 0 3px 10px rgba(3, 12, 28, 0.09);
}

html.light .service-showcase {
  --accent: var(--service-accent-light);
  border-color: rgba(74, 92, 118, 0.14);
  box-shadow: 0 24px 65px rgba(33, 45, 64, 0.11), 0 2px 7px rgba(33, 45, 64, 0.05);
}

.service-showcase__main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  padding: clamp(1.5rem, 4vw, 3.75rem);
  padding-bottom: clamp(1.75rem, 3vw, 3rem);
}

.service-showcase__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.service-showcase__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-width: 0;
  margin-bottom: clamp(2.5rem, 5vw, 5.5rem);
}

.service-showcase__number {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.35rem;
  height: 3.35rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.7rem;
  color: var(--accent);
  background: var(--service-chip-bg);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  box-shadow: 0 3px 10px rgba(18, 38, 66, 0.04);
}

.service-showcase__dot {
  width: 0.52rem;
  height: 0.52rem;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}

.service-showcase__category {
  overflow: hidden;
  color: var(--service-copy);
  font-size: 0.9rem;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-showcase__title {
  max-width: 100%;
  color: var(--service-ink);
  background-image: linear-gradient(
    112deg,
    var(--service-ink) 0%,
    var(--service-ink) 24%,
    color-mix(in srgb, var(--accent) 76%, var(--service-ink)) 68%,
    var(--accent) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4.7vw, 4.35rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 0.98;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

@media (forced-colors: active) {
  .service-showcase__title {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}

.service-showcase__rule {
  width: 4.2rem;
  height: 0.25rem;
  margin: clamp(1.65rem, 3vw, 2.6rem) 0;
  border-radius: 999px;
  background: var(--accent);
}

.service-showcase__lead {
  color: var(--service-ink);
  font-size: clamp(1.08rem, 1.55vw, 1.3rem);
  font-weight: 610;
  line-height: 1.55;
  text-wrap: pretty;
}

.service-showcase__description {
  margin-top: 1.1rem;
  color: var(--service-copy);
  font-size: 0.96rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.service-showcase-scope {
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.service-showcase-scope h4 {
  margin-bottom: 0.7rem;
  color: var(--service-ink);
  font-size: 0.78rem;
  font-weight: 720;
}

.service-showcase-scope ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.9rem;
}

.service-showcase-scope li {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--service-copy);
  font-size: 0.76rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.service-showcase-scope li > span {
  width: 0.38rem;
  aspect-ratio: 1;
  flex: none;
  margin-top: 0.34rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.service-showcase__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: min(100%, 15rem);
  margin-top: clamp(1.7rem, 3vw, 2.6rem);
  padding: 0.9rem 1rem 0.9rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--accent-solid) 30%, transparent);
  border-radius: var(--radius-btn);
  color: #ffffff;
  background: var(--accent-solid);
  font-size: 0.9rem;
  font-weight: 650;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-solid) 22%, transparent);
  transition: filter 180ms ease, box-shadow 180ms ease, transform 160ms var(--ease-out-expo);
}

.service-showcase__cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent-solid) 30%, transparent);
}

.service-showcase-visual {
  position: relative;
  min-width: 0;
  min-height: 31rem;
  align-self: stretch;
  color: var(--service-ink);
  font-size: 0.68rem;
}

/* Lightweight SSR reserve for decorative service dashboards. The real
   dashboard module is loaded one card ahead of the viewport, so initial HTML
   and hydration do not carry six large aria-hidden DOM trees. */
.service-visual-placeholder {
  display: grid;
  grid-template-rows: 1.15fr 0.8fr 0.55fr;
  gap: 0.75rem;
  min-height: inherit;
  height: 100%;
  padding: 0.85rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.85rem;
  background: var(--service-panel-bg);
}

.service-visual-placeholder > span {
  display: block;
  min-height: 4rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.65rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 58%),
    var(--service-panel-soft);
}

.service-showcase-visual--fullstack[data-visual-state='pending'] {
  min-height: 38.95rem;
}

.service-showcase-visual--ai[data-visual-state='pending'] {
  min-height: 45rem;
}

.service-visual-composition {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
}

.service-visual-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.85rem;
  background: var(--service-panel-bg);
  box-shadow: 0 12px 30px rgba(25, 45, 73, 0.08);
}

.service-visual-panel__title {
  margin-bottom: 0.8rem;
  color: var(--service-ink);
  font-size: 0.72rem;
  font-weight: 720;
}

.service-architecture-panel,
.service-ai-flow {
  flex: 1;
}

.service-visual-composition--frontend {
  justify-content: center;
}

.service-frontend-browser-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
}

.service-theme-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.service-theme-picture--light {
  display: none;
}

html.light .service-theme-picture--dark {
  display: none;
}

html.light .service-theme-picture--light {
  display: block;
}

.service-theme-picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.service-frontend-browser-media img {
  border-radius: 0.9rem;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(8, 20, 38, 0.2));
}

html.light .service-frontend-browser-media img {
  filter: drop-shadow(0 18px 32px rgba(32, 54, 84, 0.12));
}

.service-frontend-mobile-media {
  position: absolute;
  z-index: 4;
  left: -1.2rem;
  bottom: -0.75rem;
  width: clamp(10rem, 31%, 13.25rem);
  aspect-ratio: 480 / 802;
}

.service-frontend-mobile-media img {
  object-fit: contain;
  filter: drop-shadow(0 20px 28px rgba(8, 20, 38, 0.24));
}

html.light .service-frontend-mobile-media img {
  filter: drop-shadow(0 20px 28px rgba(32, 54, 84, 0.16));
}

@media (min-width: 1024px) {
  .service-frontend-browser-media {
    left: -6%;
    top: -1.4rem;
    width: 112%;
  }

  .service-frontend-mobile-media {
    left: -2rem;
    bottom: 1.25rem;
    width: clamp(11rem, 34%, 14.5rem);
  }
}

.service-mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.36rem;
  height: 7rem;
  padding: 0.7rem 0.55rem 0;
  border-bottom: 1px solid var(--service-hairline);
}
.service-mini-chart span { flex: 1; height: var(--bar); min-width: 0.2rem; border-radius: 0.25rem 0.25rem 0 0; background: color-mix(in srgb, var(--accent) 72%, var(--service-panel-bg)); }

.service-dot-field {
  position: absolute;
  right: -0.5rem;
  bottom: -0.5rem;
  width: 8rem;
  height: 5rem;
  opacity: 0.45;
  background-image: radial-gradient(circle, var(--accent) 1.2px, transparent 1.4px);
  background-size: 0.85rem 0.85rem;
}

.service-visual-composition--fullstack {
  display: grid;
  grid-template-rows: minmax(12.25rem, 1fr) 15.25rem 9.75rem;
  min-height: 38.95rem;
}

.service-fullstack-architecture {
  --architecture-connector: #DEA35A;
  --architecture-connector-track: rgba(222, 163, 90, 0.16);
  --architecture-connector-glow: rgba(222, 163, 90, 0.35);
  overflow: hidden;
  padding: 0.85rem 0.8rem 0.65rem;
}

html.light .service-fullstack-architecture {
  --architecture-connector: #C68B43;
  --architecture-connector-track: rgba(192, 133, 64, 0.20);
  --architecture-connector-glow: rgba(192, 133, 64, 0.28);
}

.service-fullstack-architecture .service-visual-panel__title {
  margin-bottom: 0.35rem;
}

.service-architecture-diagram {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 0.82fr) minmax(1.35rem, 2.25rem)
    minmax(0, 0.62fr) minmax(1.35rem, 2.25rem)
    minmax(0, 0.9fr) minmax(1.35rem, 2.25rem)
    minmax(0, 0.7fr);
  gap: 0;
  align-items: stretch;
  min-height: 10.95rem;
  padding: 0 0.1rem 1.35rem;
}

.service-architecture-connector {
  position: relative;
  z-index: 2;
  align-self: stretch;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.service-architecture-connector__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.service-architecture-connector__svg--vertical {
  display: none;
}

.service-architecture-connector__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.service-architecture-connector__dots--vertical {
  display: none;
}

.service-architecture-connector__track path,
.service-architecture-connector__flow path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.service-architecture-connector__track path {
  stroke: var(--architecture-connector-track);
  stroke-width: 1;
}

.service-architecture-connector--data .service-architecture-connector__track path {
  stroke-dasharray: 2.5 4.5;
}

.service-architecture-connector__flow path {
  opacity: 0;
  stroke: var(--architecture-connector);
  stroke-width: 1.75;
  stroke-dasharray: 0.2 0.8;
  filter: drop-shadow(0 0 9px var(--architecture-connector-glow));
  animation-duration: 6s;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-iteration-count: infinite;
}

.service-architecture-connector__flow--forward path {
  animation-name: service-architecture-flow-forward;
}

.service-architecture-connector__flow--reverse path {
  animation-name: service-architecture-flow-reverse;
}

@keyframes service-architecture-flow-forward {
  0% { opacity: 0; stroke-dashoffset: 0; }
  1% { opacity: 1; }
  13% { opacity: 1; stroke-dashoffset: -1; }
  15%, 100% { opacity: 0; stroke-dashoffset: -1; }
}

@keyframes service-architecture-flow-reverse {
  0% { opacity: 0; stroke-dashoffset: -1; }
  1% { opacity: 1; }
  13% { opacity: 1; stroke-dashoffset: 0; }
  15%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

.service-architecture-connector__dot {
  position: absolute;
  left: var(--architecture-dot-x);
  top: var(--architecture-dot-y);
  display: block;
  width: 0.375rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--architecture-connector);
  box-shadow: 0 0 8px var(--architecture-connector-glow);
  transform: translate(-50%, -50%);
}

.service-architecture-group,
.service-api-gateway {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
}

.service-architecture-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.55rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--service-panel-bg) 95%, transparent);
  box-shadow: 0 5px 16px rgba(25, 45, 73, 0.05);
}

.service-architecture-group > strong {
  display: block;
  overflow: hidden;
  margin-bottom: 0.1rem;
  color: var(--service-ink);
  font-size: 0.56rem;
  font-weight: 720;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-architecture-client,
.service-backend-service,
.service-architecture-group--databases > div {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--service-hairline);
  border-radius: 0.55rem;
  background: var(--service-panel-bg);
  box-shadow: 0 3px 9px rgba(24, 44, 70, 0.045);
}

.service-architecture-client {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 2.95rem;
  padding: 0.35rem 0.2rem;
  color: var(--service-copy);
  text-align: center;
}

.service-architecture-client svg {
  width: 1rem;
  height: 1rem;
  margin-bottom: 0.15rem;
  color: #20bff4;
}

.service-architecture-client > span:not(.service-react-mark) {
  font-size: 0.5rem;
  font-weight: 630;
  line-height: 1.15;
}

.service-architecture-client small {
  color: var(--service-muted);
  font-size: 0.44rem;
  line-height: 1.15;
}

.service-api-gateway {
  display: flex;
  min-height: 5.7rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.65rem;
  background: var(--service-panel-bg);
  text-align: center;
  box-shadow: 0 6px 16px rgba(25, 45, 73, 0.07);
}

.service-api-gateway svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.35rem;
  color: var(--service-ink);
}

.service-api-gateway strong {
  overflow: hidden;
  max-width: 100%;
  color: var(--service-ink);
  font-size: 0.55rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-api-gateway span {
  overflow: hidden;
  max-width: 100%;
  margin-top: 0.15rem;
  color: var(--service-muted);
  font-size: 0.43rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-backend-service,
.service-architecture-group--databases > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.16rem;
  min-height: 1.55rem;
  padding: 0.25rem 0.35rem;
  color: var(--service-copy);
  text-align: center;
}

.service-backend-service svg,
.service-architecture-group--databases svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  color: #173d78;
}

html:not(.light) .service-backend-service svg {
  color: #8ab7f3;
}

.service-backend-service span,
.service-architecture-group--databases span {
  overflow: hidden;
  font-size: 0.46rem;
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-architecture-group--databases {
  gap: 0.48rem;
  padding-block: 0.65rem;
}

.service-architecture-group--databases > div {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.service-architecture-group--databases svg[data-icon='postgresql'] { color: #4169e1; }
.service-architecture-group--databases svg[data-icon='mongodb'] { color: #47a248; }
.service-architecture-group--databases svg[data-icon='redis'] { color: #ff4438; }

.service-architecture-key {
  position: absolute;
  z-index: 2;
  left: 0.25rem;
  bottom: 0;
  display: flex;
  gap: 1.65rem;
  color: var(--service-muted);
  font-size: 0.43rem;
}

.service-architecture-key span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.service-architecture-key i {
  width: 1.4rem;
  height: 2px;
  background: var(--architecture-connector);
}

.service-architecture-key span:last-child i {
  height: 0;
  border-top: 2px dotted var(--architecture-connector);
  background: transparent;
}

.service-fullstack-details {
  grid-template-columns: 1.04fr 0.96fr;
  min-height: 0;
  align-items: stretch;
}

.service-endpoints-panel,
.service-monitoring-panel {
  box-sizing: border-box;
  min-height: 15.25rem;
  overflow: hidden;
  padding: 0.8rem;
}

.service-endpoints-panel .service-visual-panel__title,
.service-monitoring-panel .service-visual-panel__title {
  margin-bottom: 0.55rem;
}

.service-endpoint-list {
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
}

.service-endpoint {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-height: 1.22rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.42rem;
  background: var(--service-panel-bg);
  box-shadow: 0 2px 7px rgba(25, 45, 73, 0.035);
}

.service-endpoint b {
  width: auto;
  color: #15a452;
  font-size: 0.48rem;
  font-weight: 760;
}

.service-endpoint[data-method='post'] b { color: #176df2; }
.service-endpoint[data-method='put'] b { color: #f06b1a; }
.service-endpoint[data-method='patch'] b { color: #8b5cf6; }
.service-endpoint[data-method='delete'] b { color: #e3343d; }
.service-endpoint[data-method='query'] b { color: #c026d3; }

.service-endpoint span {
  overflow: hidden;
  color: var(--service-copy);
  font-family: var(--font-mono);
  font-size: 0.45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-graphql-endpoint {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.42rem;
  padding: 0.46rem 0.35rem 0;
  border-top: 1px solid var(--service-hairline);
}

.service-graphql-endpoint svg {
  width: 0.85rem;
  color: #e535ab;
}

.service-graphql-endpoint strong {
  overflow: hidden;
  color: #176df2;
  font-size: 0.46rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-graphql-endpoint span {
  color: var(--service-muted);
  font-family: var(--font-mono);
  font-size: 0.43rem;
}

.service-monitoring {
  display: flex;
  flex-direction: column;
}

.service-monitoring__label,
.service-monitoring__metrics > div > span,
.service-monitoring__deployment > span {
  color: var(--service-muted);
  font-size: 0.46rem;
}

.service-monitoring__uptime {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.15rem;
}

.service-monitoring__uptime strong {
  color: var(--service-ink);
  font-size: 1.1rem;
  font-weight: 620;
  letter-spacing: -0.03em;
}

.service-monitoring__uptime i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #18a84e;
}

.service-monitoring__chart {
  width: 100%;
  height: 3.35rem;
  margin-top: 0.18rem;
  overflow: visible;
}

.service-monitoring__gradient-start {
  stop-color: var(--accent);
  stop-opacity: 0.24;
}

.service-monitoring__gradient-middle {
  stop-color: var(--accent);
  stop-opacity: 0.08;
}

.service-monitoring__gradient-end {
  stop-color: var(--accent);
  stop-opacity: 0;
}

.service-monitoring__grid {
  fill: none;
  stroke: var(--service-hairline);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.service-monitoring__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.service-monitoring__metrics {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--service-hairline);
}

.service-monitoring__metrics > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}

.service-monitoring__metrics > div + div {
  padding-left: 0.65rem;
  border-left: 1px solid var(--service-hairline);
}

.service-monitoring__metrics > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-monitoring__metrics strong {
  font-size: 0.82rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.service-monitoring__count {
  display: inline-block;
  min-width: 2ch;
  color: inherit;
  font: inherit;
  text-align: right;
}

.service-monitoring__metric--response strong {
  color: var(--service-response);
}

.service-monitoring__metric--deployments > span,
.service-monitoring__metric--deployments strong {
  color: var(--service-deployments);
}

.service-monitoring__deployment {
  padding-top: 0.48rem;
}

.service-monitoring__deployment div {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  margin-top: 0.22rem;
  color: var(--service-copy);
}

.service-monitoring__deployment svg {
  width: 0.8rem;
  color: #18a84e;
}

.service-monitoring__deployment strong,
.service-monitoring__deployment time {
  font-size: 0.48rem;
}

.service-monitoring__deployment time {
  color: var(--service-muted);
}

.service-api-response {
  --terminal-bg: #0f141b;
  --terminal-bar: #1b222d;
  --terminal-border: rgba(202, 216, 232, 0.14);
  --terminal-text: #d7e0eb;
  --terminal-muted: #8d9aaa;
  --terminal-key: #78d49a;
  --terminal-string: #a9dfb9;
  --terminal-prompt: #7eb8ff;
  overflow: hidden;
  min-height: 9.75rem;
  border: 1px solid var(--terminal-border);
  border-radius: 0.82rem;
  color: var(--terminal-text);
  background: var(--terminal-bg);
  box-shadow: 0 14px 30px rgba(6, 12, 20, 0.2);
}

html.light .service-api-response {
  --terminal-bg: #f7f7f8;
  --terminal-bar: #e9eaec;
  --terminal-border: rgba(57, 67, 79, 0.18);
  --terminal-text: #26313e;
  --terminal-muted: #687483;
  --terminal-key: #176d3a;
  --terminal-string: #29743f;
  --terminal-prompt: #175db8;
  box-shadow: 0 14px 28px rgba(37, 47, 61, 0.12);
}

.service-api-response__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.72rem;
  border-bottom: 1px solid var(--terminal-border);
  background: var(--terminal-bar);
}

.service-api-response__controls {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  justify-self: start;
}

.service-api-response__controls i {
  width: 0.56rem;
  height: 0.56rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
}

.service-api-response__controls i[data-control='close'] { background: #ff5f57; }
.service-api-response__controls i[data-control='minimize'] { background: #febc2e; }
.service-api-response__controls i[data-control='maximize'] { background: #28c840; }

.service-api-response__body {
  padding: 0.55rem 0.85rem 0.65rem;
}

.service-api-response__command {
  overflow: hidden;
  margin-bottom: 0.38rem;
  color: var(--terminal-muted);
  font-family: var(--font-mono);
  font-size: 0.41rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-api-response__command b {
  color: var(--terminal-prompt);
  font-weight: 620;
}

.service-api-response__prompt {
  margin: 0 0.28rem;
  color: var(--terminal-key);
}

.service-api-response__typed {
  color: var(--terminal-text);
}

.service-api-response__caret {
  display: inline-block;
  width: 0.28rem;
  height: 0.62rem;
  margin-left: 0.12rem;
  vertical-align: -0.11rem;
  background: var(--terminal-text);
  animation: service-api-caret-blink 0.9s steps(1, end) infinite;
}

.service-api-response[data-command-complete='true'] .service-api-response__caret {
  animation: none;
  opacity: 0;
  transform: translateY(0.38rem);
  transition:
    opacity 80ms linear,
    transform 140ms cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes service-api-caret-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

.service-api-response__header strong {
  overflow: hidden;
  color: var(--terminal-text);
  font-size: 0.52rem;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-api-response__header svg {
  width: 0.9rem;
  color: var(--terminal-muted);
  justify-self: end;
}

.service-api-response pre {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.43rem;
  line-height: 1.33;
  white-space: pre-wrap;
}

.service-api-response code > span { color: var(--terminal-text); }
.service-api-response code b { color: var(--terminal-key); font-weight: 580; }
.service-api-response code em { color: var(--terminal-string); font-style: normal; }

/* AI Integration dashboard - dense operational view from the service art direction. */
.service-showcase-visual.service-showcase-visual--ai {
  min-height: 45rem;
}

.service-visual-composition--ai {
  display: grid;
  grid-template-columns: minmax(13rem, 0.78fr) minmax(18rem, 1.22fr);
  grid-template-rows: minmax(19rem, 1fr) 12rem 12.25rem;
  gap: 0.72rem;
  min-height: 45rem;
}

.service-ai-panel {
  box-sizing: border-box;
  overflow: hidden;
  padding: 0.72rem;
}

.service-ai-panel .service-visual-panel__title {
  margin-bottom: 0.55rem;
  font-size: 0.68rem;
}

.service-ai-pipeline { display: flex; flex-direction: column; grid-column: 1; grid-row: 1; }
.service-ai-knowledge { display: flex; flex-direction: column; grid-column: 2; grid-row: 1; }
.service-ai-metrics { display: flex; flex-direction: column; grid-column: 1; grid-row: 2; }
.service-ai-services { display: flex; flex-direction: column; grid-column: 2; grid-row: 2; }
.service-ai-tasks { display: flex; flex-direction: column; grid-column: 1 / -1; grid-row: 3; }

.service-ai-pipeline__list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.service-ai-pipeline__item {
  display: flex;
  flex-direction: column;
}

.service-ai-pipeline__step {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.42rem;
  min-height: 1.42rem;
  padding: 0.22rem 0.48rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.38rem;
  color: var(--service-copy);
  background: color-mix(in srgb, var(--service-panel-bg) 88%, var(--service-card-bg));
  box-shadow: 0 2px 7px rgba(9, 20, 36, 0.045);
}

.service-ai-pipeline__connector {
  display: grid;
  height: 0.62rem;
  flex: none;
  place-items: center;
  color: var(--service-copy);
  opacity: 0.78;
}

.service-ai-pipeline__connector svg {
  width: 0.68rem;
  height: 0.68rem;
}

.service-ai-pipeline__step > svg {
  width: 0.82rem;
  height: 0.82rem;
  color: var(--service-copy);
}

.service-ai-pipeline__step > span {
  overflow: hidden;
  color: var(--service-ink);
  font-size: 0.52rem;
  font-weight: 610;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-ai-pipeline__step > strong {
  color: var(--service-success);
  font-size: 0.45rem;
  font-weight: 630;
  white-space: nowrap;
}

.service-ai-pipeline__step > strong[data-tone='warning'] { color: #f0a01f; }
.service-ai-pipeline__step > strong[data-tone='info'] { color: #55a7ff; }

.service-ai-knowledge__head,
.service-ai-knowledge__row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) 0.48fr 0.55fr 0.72fr;
  align-items: center;
  gap: 0.35rem;
}

.service-ai-knowledge__head {
  min-height: 1.15rem;
  padding: 0 0.45rem;
  color: var(--service-muted);
  font-size: 0.43rem;
  text-align: right;
}

.service-ai-knowledge__list {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
}

.service-ai-knowledge__row {
  min-height: 2rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.42rem;
  color: var(--service-copy);
  background: color-mix(in srgb, var(--service-panel-bg) 88%, var(--service-card-bg));
}

.service-ai-knowledge__row > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42rem;
  overflow: hidden;
  color: var(--service-ink);
  font-size: 0.47rem;
  font-weight: 590;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-ai-knowledge__row > span svg {
  width: 0.86rem;
  height: 0.86rem;
  flex: none;
  color: var(--accent);
}

.service-ai-knowledge__row > b {
  position: relative;
  color: var(--service-copy);
  font-size: 0.44rem;
  font-weight: 520;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.service-ai-knowledge__row > b:last-child {
  padding-right: 0.65rem;
  color: var(--service-muted);
}

.service-ai-knowledge__row > b i {
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.28rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--service-success);
  box-shadow: 0 0 8px color-mix(in srgb, var(--service-success) 45%, transparent);
  transform: translateY(-50%);
}

.service-ai-metrics__list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.45rem;
}

.service-ai-metric {
  display: grid;
  grid-template-columns: 0.9rem minmax(0, 1fr) auto minmax(2.7rem, 0.65fr);
  align-items: center;
  gap: 0.35rem;
  min-height: 1.45rem;
}

.service-ai-metric > svg:first-child {
  width: 0.82rem;
  height: 0.82rem;
  color: var(--service-copy);
}

.service-ai-metric > span {
  overflow: hidden;
  color: var(--service-ink);
  font-size: 0.43rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-ai-metric > strong {
  color: var(--service-ink);
  font-size: 0.52rem;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.service-ai-metric > svg:last-child {
  width: 100%;
  height: 1.05rem;
  overflow: visible;
}

.service-ai-metric polyline {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}

.service-ai-services__grid {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0.55rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.42rem;
}

.service-ai-service {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.32rem 0.2rem;
  color: var(--service-muted);
  text-align: center;
}

.service-ai-service:not(:nth-child(4n + 1)) { border-left: 1px solid var(--service-hairline); }
.service-ai-service:nth-child(n + 5) { border-top: 1px solid var(--service-hairline); }

.service-ai-service img {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
  opacity: 0.75;
  filter: brightness(0) invert(1);
}

html.light .service-ai-service img {
  opacity: 0.66;
  filter: brightness(0);
}

.service-ai-service span {
  overflow: hidden;
  max-width: 100%;
  color: var(--service-copy);
  font-size: 0.43rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-ai-tasks__list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.3rem;
}

.service-ai-task {
  display: grid;
  grid-template-columns: 0.85rem minmax(7rem, 1fr) minmax(8rem, 1.15fr) 4.2rem 4.55rem;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.3rem;
  padding: 0.2rem 0.42rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.34rem;
  color: var(--service-copy);
  background: color-mix(in srgb, var(--service-panel-bg) 88%, var(--service-card-bg));
}

.service-ai-task > svg {
  width: 0.72rem;
  height: 0.72rem;
  color: var(--accent);
}

.service-ai-task > strong,
.service-ai-task > span,
.service-ai-task > time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-ai-task > strong {
  color: var(--service-ink);
  font-size: 0.45rem;
  font-weight: 620;
}

.service-ai-task > span,
.service-ai-task > time {
  color: var(--service-muted);
  font-size: 0.42rem;
}

.service-ai-task > time { text-align: right; }

.service-ai-task > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 0;
  padding: 0.1rem 0.25rem;
  border: 1px solid color-mix(in srgb, var(--service-success) 18%, transparent);
  border-radius: 0.28rem;
  color: var(--service-success);
  background: color-mix(in srgb, var(--service-success) 8%, transparent);
  font-size: 0.41rem;
  font-weight: 580;
  line-height: 1;
  text-align: center;
}

.service-ai-task > b[data-status='deployed'] {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.service-flow-row { display: flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 8.5rem; }
.service-flow-node { display: flex; flex: 1; min-width: 0; min-height: 4.8rem; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.65rem 0.35rem; border: 1px solid var(--service-hairline); border-radius: 0.65rem; color: var(--service-copy); background: var(--service-panel-bg); text-align: center; box-shadow: 0 5px 14px rgba(25, 45, 73, 0.05); }
.service-flow-node svg { color: var(--accent); }
.service-flow-arrow { width: 0.9rem; flex: none; color: var(--accent); }
.service-architecture-legend { display: flex; gap: 1.5rem; color: var(--service-muted); }
.service-architecture-legend span::before { content: ''; display: inline-block; width: 1.5rem; height: 1px; margin: 0 0.4rem 0.2rem 0; background: var(--accent); }

.service-visual-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.service-status { display: flex; align-items: center; gap: 0.4rem; color: var(--service-success); }
.service-status svg { width: 0.9rem; }
.service-status strong { color: var(--service-ink); }

.service-result-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.6rem; align-items: center; gap: 0.45rem; padding: 0.48rem 0; border-bottom: 1px solid var(--service-hairline); color: var(--service-muted); }
.service-result-row svg { width: 0.8rem; color: var(--accent); }
.service-result-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 0.55rem; }
.service-result-row i { height: 0.2rem; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--score), var(--service-skeleton) var(--score)); }

.service-showcase-visual--performance {
  min-height: 0;
  font-size: 0.64rem;
  container: performance-visual / inline-size;
}

.service-showcase-visual--performance .service-visual-watermark {
  display: none;
}

.service-visual-composition--performance {
  gap: 0.55rem;
  height: auto;
}

.service-visual-composition--performance .service-visual-panel {
  padding: 0.65rem;
  border-radius: 0.7rem;
  box-shadow: 0 7px 18px rgba(12, 28, 50, 0.06);
}

.service-visual-composition--performance .service-visual-panel__title {
  margin-bottom: 0.55rem;
  font-size: 0.64rem;
}

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

.service-performance-vital {
  min-width: 0;
  padding: 0.62rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.56rem;
  background: color-mix(in srgb, var(--service-panel-bg) 88%, var(--service-panel-soft));
}

.service-performance-vital__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--service-ink);
  font-size: 0.47rem;
  font-weight: 670;
  line-height: 1.25;
}

.service-performance-vital__label i {
  width: 0.46rem;
  height: 0.46rem;
  flex: none;
  border-radius: 50%;
  background: var(--service-success);
  box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--service-success) 10%, transparent);
}

.service-performance-vital__label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-performance-vital__reading {
  display: grid;
  grid-template-columns: auto minmax(2.75rem, 1fr);
  align-items: end;
  gap: 0.5rem;
  margin-top: 0.52rem;
}

.service-performance-vital__reading strong {
  color: var(--service-success);
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1.8vw, 1.55rem);
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}

.service-performance-vital__reading small {
  font-family: var(--font-sans);
  font-size: 0.58em;
  font-weight: 690;
  letter-spacing: 0;
}

.service-performance-sparkline {
  width: 100%;
  height: 1.55rem;
  overflow: visible;
}

.service-performance-sparkline path {
  fill: none;
  stroke: var(--service-success);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.service-performance-vital__rating {
  display: inline-flex;
  align-items: center;
  min-height: 1rem;
  margin-top: 0.45rem;
  padding: 0.12rem 0.48rem;
  border: 1px solid color-mix(in srgb, var(--service-success) 82%, transparent);
  border-radius: 0.28rem;
  color: var(--service-success);
  background: color-mix(in srgb, var(--service-success) 5%, transparent);
  font-size: 0.45rem;
  font-weight: 720;
  line-height: 1;
}

.service-performance-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 0.55rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.58rem;
  background: color-mix(in srgb, var(--service-panel-bg) 88%, var(--service-panel-soft));
}

.service-performance-summary > div {
  display: flex;
  min-width: 0;
  min-height: 5.15rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.42rem;
  text-align: center;
}

.service-performance-summary > div + div {
  border-left: 1px solid var(--service-hairline);
}

.service-performance-summary > div > span {
  min-height: 1.4rem;
  color: var(--service-ink);
  font-size: 0.4rem;
  font-weight: 650;
  line-height: 1.25;
  text-wrap: balance;
}

.service-performance-summary__metric strong {
  margin-top: 0.25rem;
  color: var(--service-ink);
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}

.service-performance-summary__metric strong small {
  font-size: 0.55em;
  font-weight: 600;
}

.service-performance-summary__metric > svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0.45rem;
  color: #2563eb;
}

.service-performance-score-ring {
  --performance-ring-size: 3.15rem;
  position: relative;
  display: grid;
  place-content: center;
  width: var(--performance-ring-size);
  height: var(--performance-ring-size);
  margin-top: 0.15rem;
  border-radius: 50%;
  background: conic-gradient(
    var(--service-success) calc(var(--performance-score) * 1%),
    color-mix(in srgb, var(--service-success) 12%, var(--service-panel-soft)) 0
  );
  isolation: isolate;
}

.service-performance-score-ring::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0.3rem;
  border-radius: inherit;
  background: var(--service-panel-bg);
}

.service-performance-score-ring strong {
  color: var(--service-success);
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.service-performance-score-ring span {
  margin-top: 0.12rem;
  color: var(--service-ink);
  font-size: 0.48rem;
  line-height: 1;
}

.service-performance-details {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
  gap: 0.55rem;
}

.service-performance-timeline__axis,
.service-performance-timeline__row {
  display: grid;
  grid-template-columns: minmax(4.85rem, 0.9fr) 2.6rem minmax(6.5rem, 2fr);
  align-items: center;
  gap: 0.35rem;
}

.service-performance-timeline__axis {
  margin: -0.18rem 0 0.25rem;
}

.service-performance-timeline__axis > div {
  display: flex;
  justify-content: space-between;
  color: var(--service-muted);
  font-size: 0.38rem;
  font-weight: 560;
  white-space: nowrap;
}

.service-performance-timeline {
  display: flex;
  flex-direction: column;
}

.service-performance-timeline__row {
  min-height: 1.03rem;
}

.service-performance-timeline__row > span {
  overflow: hidden;
  color: var(--service-copy);
  font-size: 0.43rem;
  font-weight: 570;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-performance-timeline__row > strong {
  color: var(--service-copy);
  font-family: var(--font-mono);
  font-size: 0.39rem;
  font-weight: 590;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.service-performance-timeline__track {
  position: relative;
  align-self: stretch;
  min-width: 0;
  border-left: 1px solid var(--service-hairline);
  background-image: linear-gradient(90deg, transparent calc(100% - 1px), var(--service-hairline) 0);
  background-size: 25% 100%;
}

.service-performance-timeline__track i {
  position: absolute;
  top: calc(50% - 0.235rem);
  left: var(--timeline-start);
  width: max(var(--timeline-size), 0.34rem);
  height: 0.47rem;
  border-radius: 0.18rem;
  background: var(--timeline-color);
  box-shadow: 0 0.14rem 0.35rem color-mix(in srgb, var(--timeline-color) 18%, transparent);
  transform-origin: left center;
}

.service-performance-improvements {
  min-width: 0;
}

.service-performance-improvements__list {
  overflow: hidden;
  border: 1px solid var(--service-hairline);
  border-radius: 0.48rem;
}

.service-performance-improvement {
  display: grid;
  grid-template-columns: 1.5rem minmax(6rem, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.12rem;
  padding: 0.28rem 0.42rem;
}

.service-performance-improvement + .service-performance-improvement {
  border-top: 1px solid var(--service-hairline);
}

.service-performance-improvement__icon {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.36rem;
  color: #2563eb;
  background: color-mix(in srgb, #2563eb 9%, var(--service-panel-soft));
}

.service-performance-improvement:nth-child(4) .service-performance-improvement__icon {
  color: #c026d3;
  background: color-mix(in srgb, #c026d3 9%, var(--service-panel-soft));
}

.service-performance-improvement:nth-child(6) .service-performance-improvement__icon {
  color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 9%, var(--service-panel-soft));
}

.service-performance-improvement__icon svg {
  width: 0.84rem;
  height: 0.84rem;
}

.service-performance-improvement > strong {
  overflow: hidden;
  color: var(--service-copy);
  font-size: 0.43rem;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-performance-improvement__outcomes {
  display: flex;
  justify-content: flex-end;
  gap: clamp(0.45rem, 1vw, 1rem);
  color: var(--service-success);
  font-size: 0.4rem;
  font-weight: 620;
  white-space: nowrap;
}

.service-performance-stack {
  min-width: 0;
}

.service-performance-stack .service-visual-panel__title {
  margin-bottom: 0.45rem;
}

.service-performance-stack__list {
  display: flex;
  gap: 0.34rem;
  min-width: 0;
}

.service-performance-stack__chip {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 1.82rem;
  padding: 0.34rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--stack-brand) 18%, var(--service-hairline));
  border-radius: 0.4rem;
  color: var(--service-copy);
  background: color-mix(in srgb, var(--stack-brand) 5%, var(--service-panel-soft));
}

.service-performance-stack__chip svg {
  width: 0.82rem;
  height: 0.82rem;
  flex: none;
  color: var(--stack-brand);
}

.service-performance-stack__chip span {
  overflow: hidden;
  font-size: 0.38rem;
  font-weight: 580;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 640px) {
  @container performance-visual (max-width: 35.99rem) {
    .service-performance-summary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-performance-summary > div:nth-child(3n + 1) {
      border-left: 0;
    }

    .service-performance-summary > div:nth-child(n + 4) {
      border-top: 1px solid var(--service-hairline);
    }

    .service-performance-details {
      grid-template-columns: minmax(0, 1fr);
    }

    .service-performance-stack__list {
      flex-wrap: wrap;
    }

    .service-performance-stack__chip {
      flex-basis: calc(20% - 0.3rem);
    }
  }
}

.service-check-list { display: flex; flex-direction: column; gap: 0.65rem; }
.service-check-list span { display: flex; align-items: center; gap: 0.5rem; color: var(--service-copy); }
.service-check-list svg { width: 0.9rem; color: var(--service-success); }

.service-showcase-visual.service-showcase-visual--mentoring {
  min-height: 0;
  container: mentoring-visual / inline-size;
}

.service-showcase-visual--mentoring .service-visual-watermark {
  display: none;
}

.service-visual-composition--mentoring {
  --mentoring-complete: #34d399;
  --mentoring-issue: #fb7185;
  --mentoring-refactor: #60a5fa;
  --mentoring-editor: #0b1728;
  --mentoring-editor-top: #101f34;
  height: auto;
  gap: 0.72rem;
}

html.light .service-visual-composition--mentoring {
  --mentoring-complete: #087443;
  --mentoring-issue: #be123c;
  --mentoring-refactor: #1d4ed8;
}

.service-mentoring-roadmap,
.service-mentoring-review,
.service-mentoring-session {
  padding: 0.82rem;
}

.service-mentoring-roadmap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.service-mentoring-roadmap > .service-visual-panel__title,
.service-mentoring-review > .service-visual-panel__title,
.service-mentoring-session > .service-visual-panel__title {
  margin-bottom: 0.62rem;
  font-size: 0.68rem;
  letter-spacing: -0.012em;
}

.service-mentoring-roadmap__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  border: 1px solid var(--service-hairline);
  border-radius: 0.58rem;
  background: color-mix(in srgb, var(--accent) 3%, var(--service-panel-soft));
}

.service-mentoring-summary-metric {
  display: grid;
  min-width: 0;
  align-content: center;
  min-height: 3.2rem;
  padding: 0.48rem 0.62rem;
}

.service-mentoring-summary-metric--eta {
  border-inline-start: 1px solid var(--service-hairline);
}

.service-mentoring-summary-metric > span {
  color: var(--service-muted);
  font-size: 0.42rem;
  line-height: 1.2;
}

.service-mentoring-summary-metric > strong {
  margin-top: 0.14rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.service-mentoring-summary-metric > i {
  overflow: hidden;
  width: 100%;
  height: 0.24rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: var(--service-skeleton);
}

.service-mentoring-summary-metric > i > b {
  display: block;
  width: var(--mentoring-progress);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left center;
}

.service-mentoring-roadmap__steps {
  display: grid;
  margin-top: 0.72rem;
}

.service-mentoring-roadmap__step {
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr) auto;
  grid-template-areas:
    'number label status'
    'number track track';
  align-items: center;
  gap: 0.34rem 0.48rem;
  min-width: 0;
  min-height: 2.85rem;
  padding-block: 0.36rem;
}

.service-mentoring-roadmap__step + .service-mentoring-roadmap__step {
  border-top: 1px solid var(--service-hairline);
}

.service-mentoring-roadmap__number {
  display: grid;
  grid-area: number;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.42rem;
  color: #ffffff;
  background: var(--accent-solid);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 680;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent-solid) 18%, transparent);
}

.service-mentoring-roadmap__step > strong {
  grid-area: label;
  min-width: 0;
  color: var(--service-copy);
  font-size: 0.5rem;
  font-weight: 640;
  line-height: 1.2;
  text-wrap: pretty;
}

.service-mentoring-roadmap__step > span {
  grid-area: status;
  color: var(--service-muted);
  font-size: 0.44rem;
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
}

.service-mentoring-roadmap__step[data-tone='complete'] > span {
  color: var(--mentoring-complete);
}

.service-mentoring-roadmap__step[data-tone='active'] > span {
  color: var(--accent);
}

.service-mentoring-roadmap__track {
  position: relative;
  grid-area: track;
  overflow: visible;
  width: 100%;
  height: 0.22rem;
  border-radius: 999px;
  background: var(--service-skeleton);
}

.service-mentoring-roadmap__track > b {
  display: block;
  width: var(--mentoring-progress);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left center;
}

.service-mentoring-roadmap__track > em {
  position: absolute;
  top: 50%;
  left: 53%;
  width: 0.86rem;
  height: 0.86rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--service-panel-bg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translate(-50%, -50%);
}

.service-mentoring-roadmap__track > em::after {
  content: '';
  position: absolute;
  inset: 0.28rem;
  border-radius: 50%;
  background: var(--accent);
}

.service-mentoring-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.72rem;
  min-width: 0;
}

.service-mentoring-review__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  margin-bottom: 0.58rem;
}

.service-mentoring-review__stats > div {
  display: grid;
  grid-template-rows: 0.88rem auto;
  min-width: 0;
  align-content: center;
  min-height: 2.35rem;
  padding: 0.28rem 0.38rem;
  border-inline-start: 1px solid var(--service-hairline);
}

.service-mentoring-review__stats > div:nth-child(3n + 1) {
  border-inline-start: 0;
}

.service-mentoring-review__stats > div:nth-child(n + 4) {
  border-top: 1px solid var(--service-hairline);
}

.service-mentoring-review__stats dt {
  display: flex;
  min-width: 0;
  height: 0.88rem;
  align-items: flex-end;
  color: var(--service-muted);
  font-size: 0.36rem;
  line-height: 1.15;
  text-wrap: balance;
}

.service-mentoring-review__stats dd {
  margin-top: 0.16rem;
  color: var(--service-copy);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.service-mentoring-review__stats dd[data-tone='positive'] {
  color: var(--mentoring-complete);
}

.service-mentoring-editor {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.58rem;
  color: #aebdd0;
  background: var(--mentoring-editor);
}

.service-mentoring-editor__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.34rem;
  min-height: 1.55rem;
  padding: 0.28rem 0.46rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background: var(--mentoring-editor-top);
}

.service-mentoring-editor__header > svg {
  width: 0.66rem;
  height: 0.66rem;
  color: #7f94ae;
}

.service-mentoring-editor__header > span {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.38rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-mentoring-editor__header > b {
  display: flex;
  gap: 0.28rem;
  font-family: var(--font-mono);
  font-size: 0.36rem;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
}

.service-mentoring-editor__header > b > i,
.service-mentoring-editor__header > b > em {
  min-width: 1.35rem;
  font-style: normal;
  text-align: end;
}

.service-mentoring-editor__header > b > i { color: #5bd18b; }
.service-mentoring-editor__header > b > em { color: #fb7185; }

.service-mentoring-editor__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5.35rem, 34%);
  gap: 0.36rem;
  align-items: stretch;
  min-height: 7.3rem;
  padding: 0.38rem;
  overflow: hidden;
}

.service-mentoring-editor__lines {
  display: grid;
  min-width: 0;
  width: auto;
  align-content: center;
  padding: 0;
}

.service-mentoring-editor__lines code {
  display: grid;
  grid-template-columns: 0.82rem minmax(0, 1fr);
  min-width: 0;
  min-height: 0.84rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.35rem;
  line-height: 1.2;
}

.service-mentoring-editor__lines code > span {
  color: #617792;
  text-align: right;
}

.service-mentoring-editor__lines code > i {
  overflow: hidden;
  padding-inline-start: 0.26rem;
  color: #a8bdd6;
  font-style: normal;
  text-overflow: clip;
  white-space: nowrap;
}

.service-mentoring-editor__lines code:nth-child(1) > i,
.service-mentoring-editor__lines code:nth-child(4) > i {
  color: #8fb7ef;
}

.service-mentoring-editor__notes {
  display: flex;
  min-width: 0;
  width: auto;
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch;
  gap: 0.3rem;
  pointer-events: none;
}

.service-mentoring-editor__notes > span {
  width: 100%;
  max-width: 100%;
  padding: 0.3rem 0.38rem;
  border: 1px solid color-mix(in srgb, var(--note-color) 38%, transparent);
  border-radius: 0.34rem;
  color: color-mix(in srgb, var(--note-color) 78%, white);
  background: color-mix(in srgb, var(--note-color) 18%, #102037);
  font-size: 0.34rem;
  font-weight: 560;
  line-height: 1.22;
  text-wrap: pretty;
  box-shadow: 0 5px 12px rgba(3, 12, 28, 0.22);
}

.service-mentoring-editor__notes > span[data-tone='issue'] { --note-color: var(--mentoring-issue); }
.service-mentoring-editor__notes > span[data-tone='refactor'] { --note-color: var(--mentoring-refactor); }
.service-mentoring-editor__notes > span[data-tone='positive'] { --note-color: var(--mentoring-complete); }

.service-mentoring-session__overview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.68rem;
}

.service-mentoring-session__avatar {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--service-panel-bg));
}

.service-mentoring-session__avatar > svg {
  width: 1.38rem;
  height: 1.38rem;
}

.service-mentoring-session__details {
  min-width: 0;
}

.service-mentoring-session__details > small {
  display: block;
  color: var(--service-muted);
  font-size: 0.39rem;
  line-height: 1.2;
}

.service-mentoring-session__details > strong {
  display: block;
  overflow: hidden;
  margin-top: 0.14rem;
  color: var(--service-ink);
  font-size: 0.57rem;
  font-weight: 680;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-mentoring-session__details dl {
  display: grid;
  gap: 0.24rem;
  margin-top: 0.5rem;
}

.service-mentoring-session__details dl > div {
  display: grid;
  grid-template-columns: minmax(3.2rem, 0.72fr) minmax(0, 1fr);
  gap: 0.35rem;
}

.service-mentoring-session__details dt,
.service-mentoring-session__details dd {
  font-size: 0.38rem;
  line-height: 1.2;
}

.service-mentoring-session__details dt { color: var(--service-muted); }
.service-mentoring-session__details dd { color: var(--service-copy); }

.service-mentoring-session__agenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.7rem;
  margin-top: 0.72rem;
  padding-top: 0.62rem;
  border-top: 1px solid var(--service-hairline);
}

.service-mentoring-session__list {
  min-width: 0;
}

.service-mentoring-session__list > strong {
  display: flex;
  min-height: 0.58rem;
  align-items: flex-end;
  color: var(--service-copy);
  font-size: 0.46rem;
  font-weight: 680;
  line-height: 1.2;
  text-wrap: balance;
}

.service-mentoring-session__list ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.34rem;
  margin-top: 0.48rem;
}

.service-mentoring-session__list li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.36rem;
  color: var(--service-copy);
  font-size: 0.42rem;
  font-weight: 560;
  line-height: 1.2;
}

.service-mentoring-session__list li > svg {
  width: 0.66rem;
  height: 0.66rem;
  flex: none;
  color: var(--accent);
}

.service-mentoring-session__list[data-list='next'] li > svg {
  color: var(--mentoring-refactor);
}

@container mentoring-visual (min-width: 30rem) {
  .service-mentoring-roadmap {
    grid-template-columns: minmax(9.5rem, 1fr) minmax(13.5rem, 1.15fr);
    column-gap: 0.9rem;
  }

  .service-mentoring-roadmap > .service-visual-panel__title {
    align-self: center;
    margin-bottom: 0;
    font-size: 0.76rem;
  }

  .service-mentoring-roadmap__summary {
    grid-column: 2;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .service-mentoring-summary-metric {
    min-height: 2.75rem;
    padding-block: 0.22rem;
  }

  .service-mentoring-roadmap__steps {
    grid-column: 1 / -1;
    margin-top: 0.82rem;
  }

  .service-mentoring-roadmap__step {
    grid-template-columns: 1.55rem minmax(8.2rem, 1.05fr) 4.85rem minmax(6.25rem, 1.45fr);
    grid-template-areas: 'number label status track';
    gap: 0.52rem;
    min-height: 2.45rem;
    padding-block: 0.22rem;
  }

  .service-mentoring-roadmap__step + .service-mentoring-roadmap__step {
    border-top: 0;
  }

  .service-mentoring-roadmap__step > strong {
    font-size: 0.47rem;
  }

  .service-mentoring-roadmap__step > span {
    font-size: 0.42rem;
  }

  .service-mentoring-lower {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.92fr);
  }

  .service-mentoring-review__stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .service-mentoring-review__stats > div:nth-child(n + 4) {
    border-top: 0;
  }

  .service-mentoring-review__stats > div:nth-child(3n + 1) {
    border-inline-start: 1px solid var(--service-hairline);
  }

  .service-mentoring-review__stats > div:first-child {
    border-inline-start: 0;
  }

  .service-mentoring-session__avatar {
    width: 2.7rem;
    height: 2.7rem;
  }

  .service-mentoring-session__avatar > svg {
    width: 1.16rem;
    height: 1.16rem;
  }

}

.service-showcase-visual.service-showcase-visual--consulting {
  min-height: 0;
  container: consulting-visual / inline-size;
}

.service-visual-composition--consulting {
  --consulting-blue: #60a5fa;
  --consulting-cyan: #38bdf8;
  --consulting-orange: #fb923c;
  --consulting-critical: #fb7185;
  --consulting-high: #f59e0b;
  --consulting-medium: #facc15;
  --consulting-good-copy: #6ee7b7;
  --consulting-warning-copy: #fdba74;
  --consulting-high-copy: #fda4af;
  height: auto;
  gap: 0.68rem;
}

html.light .service-visual-composition--consulting {
  --consulting-blue: #1d4ed8;
  --consulting-cyan: #0369a1;
  --consulting-orange: #c2410c;
  --consulting-critical: #be123c;
  --consulting-high: #b45309;
  --consulting-medium: #a16207;
  --consulting-good-copy: #087443;
  --consulting-warning-copy: #a44408;
  --consulting-high-copy: #b42318;
}

.service-consulting-assessment,
.service-consulting-health,
.service-consulting-recommendations,
.service-consulting-priorities,
.service-consulting-stack {
  padding: 0.72rem;
}

.service-consulting-assessment .service-visual-panel__title,
.service-consulting-health .service-visual-panel__title,
.service-consulting-recommendations .service-visual-panel__title,
.service-consulting-priorities .service-visual-panel__title,
.service-consulting-stack .service-visual-panel__title {
  margin-bottom: 0.58rem;
  font-size: 0.62rem;
}

.service-consulting-assessment__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.service-consulting-assessment__card {
  --consulting-metric: var(--accent);
  display: flex;
  min-width: 0;
  min-height: 5.45rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.62rem;
  border: 1px solid color-mix(in srgb, var(--consulting-metric) 20%, var(--service-hairline));
  border-radius: 0.62rem;
  background: color-mix(in srgb, var(--consulting-metric) 5%, var(--service-panel-bg));
}

.service-consulting-assessment__card[data-tone='blue'] {
  --consulting-metric: var(--consulting-blue);
}

.service-consulting-assessment__card[data-tone='orange'] {
  --consulting-metric: var(--consulting-orange);
}

.service-consulting-assessment__label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
  color: var(--service-ink);
  font-size: 0.5rem;
  font-weight: 680;
  line-height: 1.2;
  text-wrap: pretty;
}

.service-consulting-assessment__label svg {
  width: 0.86rem;
  height: 0.86rem;
  flex: none;
  color: var(--consulting-metric);
}

.service-consulting-assessment__body {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
}

.service-consulting-ring {
  width: 3rem;
  height: 3rem;
  overflow: visible;
  color: var(--consulting-metric);
}

.service-consulting-ring circle,
.service-consulting-gauge path {
  fill: none;
  stroke-linecap: round;
}

.service-consulting-ring__track,
.service-consulting-gauge__track {
  stroke: var(--service-skeleton);
}

.service-consulting-ring__track,
.service-consulting-ring__value {
  stroke-width: 4.5;
}

.service-consulting-ring__value {
  stroke: currentColor;
  stroke-dasharray: 100 100;
  transform: rotate(-90deg);
  transform-origin: center;
}

.service-consulting-gauge {
  width: 3.35rem;
  height: 2.35rem;
  overflow: visible;
  color: var(--consulting-metric);
}

.service-consulting-gauge__track,
.service-consulting-gauge__value {
  stroke-width: 5;
}

.service-consulting-gauge__value {
  stroke: currentColor;
  stroke-dasharray: 100 100;
}

.service-consulting-team-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0.25rem solid var(--consulting-metric);
  border-radius: 50%;
  color: var(--consulting-metric);
  background: color-mix(in srgb, var(--consulting-metric) 8%, var(--service-panel-bg));
}

.service-consulting-team-mark svg {
  width: 1.55rem;
  height: 1.55rem;
}

.service-consulting-assessment__result {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.34rem;
}

.service-consulting-assessment__result > strong {
  color: var(--service-ink);
  font-size: 1rem;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}

.service-consulting-assessment__result > strong small {
  margin-left: 0.22rem;
  color: var(--service-muted);
  font-size: 0.48rem;
  font-weight: 560;
  letter-spacing: 0;
}

.service-consulting-assessment__result > span {
  display: inline-flex;
  max-width: 100%;
  padding: 0.16rem 0.34rem;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 0.28rem;
  font-size: 0.42rem;
  font-weight: 590;
  line-height: 1.1;
  text-wrap: balance;
}

.service-consulting-assessment__result > span[data-status='good'] {
  color: var(--consulting-good-copy);
  background: color-mix(in srgb, var(--service-success) 10%, transparent);
}

.service-consulting-assessment__result > span[data-status='warning'] {
  color: var(--consulting-warning-copy);
  background: color-mix(in srgb, var(--consulting-orange) 9%, transparent);
}

.service-consulting-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.68rem;
}

.service-consulting-health,
.service-consulting-recommendations {
  display: flex;
  flex-direction: column;
}

.service-consulting-health__list,
.service-consulting-recommendations__list {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.34rem;
}

.service-consulting-health__row {
  --consulting-row-accent: var(--accent);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(3rem, 0.62fr) 4.15rem;
  min-width: 0;
  align-items: center;
  gap: 0.34rem;
  min-height: 1.12rem;
}

.service-consulting-health__row[data-tone='blue'] { --consulting-row-accent: var(--consulting-blue); }
.service-consulting-health__row[data-tone='cyan'] { --consulting-row-accent: var(--consulting-cyan); }
.service-consulting-health__row[data-tone='orange'] { --consulting-row-accent: var(--consulting-orange); }

.service-consulting-health__label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.34rem;
}

.service-consulting-health__label > svg {
  width: 0.74rem;
  height: 0.74rem;
  flex: none;
  color: var(--consulting-row-accent);
}

.service-consulting-health__label > span {
  overflow: hidden;
  color: var(--service-copy);
  font-size: 0.43rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-consulting-health__row > i {
  overflow: hidden;
  height: 0.24rem;
  border-radius: 99px;
  background: var(--service-skeleton);
}

.service-consulting-health__row > i > b {
  display: block;
  width: var(--consulting-progress);
  height: 100%;
  border-radius: inherit;
  background: var(--consulting-row-accent);
  transform-origin: left center;
}

.service-consulting-health__row > strong {
  color: var(--service-ink);
  font-size: 0.43rem;
  font-weight: 690;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.service-consulting-recommendation {
  display: grid;
  grid-template-columns: 0.72rem minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.12rem;
}

.service-consulting-recommendation__check {
  width: 0.68rem;
  height: 0.68rem;
  overflow: visible;
  color: var(--service-success);
}

.service-consulting-recommendation__check circle {
  fill: color-mix(in srgb, var(--service-success) 8%, transparent);
  stroke: currentColor;
  stroke-width: 1.35;
  opacity: 0.52;
}

.service-consulting-recommendation__check path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-consulting-recommendation > span {
  overflow: hidden;
  color: var(--service-copy);
  font-size: 0.42rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-consulting-recommendation > strong {
  min-width: 2.65rem;
  padding: 0.14rem 0.3rem;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 0.26rem;
  font-size: 0.38rem;
  font-weight: 590;
  line-height: 1;
  text-align: center;
}

.service-consulting-recommendation > strong[data-priority='high'] {
  color: var(--consulting-high-copy);
  background: color-mix(in srgb, var(--consulting-critical) 9%, transparent);
}

.service-consulting-recommendation > strong[data-priority='medium'] {
  color: var(--consulting-warning-copy);
  background: color-mix(in srgb, var(--consulting-high) 9%, transparent);
}

.service-consulting-priorities__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
}

.service-consulting-priority {
  --consulting-priority: var(--consulting-high);
  min-width: 0;
  padding: 0.5rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--consulting-priority) 18%, var(--service-hairline));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--consulting-priority) 6%, var(--service-panel-bg));
}

.service-consulting-priority[data-priority='critical'] { --consulting-priority: var(--consulting-critical); }
.service-consulting-priority[data-priority='medium'] { --consulting-priority: var(--consulting-medium); }

.service-consulting-priority > strong {
  color: var(--consulting-priority);
  font-size: 0.44rem;
  font-weight: 700;
}

.service-consulting-priority ul {
  display: grid;
  gap: 0.24rem;
  margin-top: 0.3rem;
  padding-left: 0.72rem;
  list-style: disc;
}

.service-consulting-priority li {
  color: var(--service-copy);
  font-size: 0.4rem;
  line-height: 1.2;
}

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

.service-consulting-stack__item {
  display: flex;
  min-width: 0;
  min-height: 1.55rem;
  align-items: center;
  gap: 0.38rem;
  padding: 0.3rem 0.42rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.34rem;
  color: var(--consulting-stack-color);
  background: var(--service-chip-bg);
}

html.light .service-consulting-stack__item {
  color: var(--consulting-stack-light);
}

.service-consulting-stack__brand,
.service-consulting-stack__asset {
  width: 0.82rem;
  height: 0.82rem;
  flex: none;
  object-fit: contain;
}

.service-consulting-stack__item > span {
  overflow: hidden;
  color: var(--service-copy);
  font-size: 0.4rem;
  font-weight: 590;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container consulting-visual (min-width: 22rem) {
  .service-consulting-assessment__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@container consulting-visual (min-width: 28rem) {
  .service-consulting-priorities__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@container consulting-visual (min-width: 30rem) {
  .service-visual-composition--consulting {
    gap: 0.52rem;
  }

  .service-consulting-assessment,
  .service-consulting-health,
  .service-consulting-recommendations,
  .service-consulting-priorities,
  .service-consulting-stack {
    padding: 0.6rem;
  }

  .service-consulting-assessment .service-visual-panel__title,
  .service-consulting-health .service-visual-panel__title,
  .service-consulting-recommendations .service-visual-panel__title,
  .service-consulting-priorities .service-visual-panel__title,
  .service-consulting-stack .service-visual-panel__title {
    margin-bottom: 0.44rem;
  }

  .service-consulting-assessment__grid {
    gap: 0.42rem;
  }

  .service-consulting-assessment__card {
    min-height: 4.8rem;
    gap: 0.4rem;
    padding: 0.5rem;
  }

  .service-consulting-assessment__body {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0.52rem;
  }

  .service-consulting-ring,
  .service-consulting-team-mark {
    width: 2.75rem;
    height: 2.75rem;
  }

  .service-consulting-gauge {
    width: 3.08rem;
    height: 2.12rem;
  }

  .service-consulting-assessment__result {
    gap: 0.26rem;
  }

  .service-consulting-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem;
  }

  .service-consulting-health__list,
  .service-consulting-recommendations__list {
    gap: 0.24rem;
  }

  .service-consulting-health__row,
  .service-consulting-recommendation {
    min-height: 0.98rem;
  }

  .service-consulting-priorities__grid {
    gap: 0.35rem;
  }

  .service-consulting-priority {
    padding: 0.4rem 0.5rem;
  }

  .service-consulting-priority ul {
    gap: 0.18rem;
    margin-top: 0.22rem;
  }

  .service-consulting-stack__grid {
    gap: 0.3rem;
  }

  .service-consulting-stack__item {
    min-height: 1.35rem;
    gap: 0.32rem;
    padding: 0.22rem 0.34rem;
  }
}

@container consulting-visual (min-width: 34rem) {
  .service-consulting-stack__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .service-consulting-stack__item {
    grid-column: span 2;
  }

  .service-consulting-stack__item:nth-child(3),
  .service-consulting-stack__item:nth-child(5),
  .service-consulting-stack__item:nth-child(6),
  .service-consulting-stack__item:nth-child(9),
  .service-consulting-stack__item:nth-child(12) {
    grid-column: span 3;
  }
}

.service-visual-watermark { position: absolute; z-index: 0; right: -1.5rem; bottom: -1rem; width: 7rem; height: 7rem; color: var(--accent); opacity: 0.045; }

.service-showcase-stack {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0 clamp(1.5rem, 4vw, 3.75rem) clamp(1.6rem, 3vw, 2.6rem);
}

.service-showcase[data-service='ai'] .service-showcase-stack {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.service-stack-chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  min-height: 3.6rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--service-hairline);
  border-radius: 0.7rem;
  color: var(--service-copy);
  background: var(--service-chip-bg);
  font-size: 0.78rem;
  font-weight: 590;
  transition: transform 180ms var(--ease-out-expo), border-color 180ms ease, box-shadow 180ms ease;
}

.service-stack-chip:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 8px 18px rgba(19, 39, 67, 0.08);
}

.service-stack-chip__icon { display: grid; place-items: center; flex: none; }
.service-stack-chip__brand-svg {
  width: 1.25rem;
  height: 1.25rem;
}
.service-stack-chip__brand-path--light { display: none; }
html.light .service-stack-chip__brand-path--dark { display: none; }
html.light .service-stack-chip__brand-path--light { display: block; }
.service-stack-chip__brand-path {
  stroke: none;
}
.service-stack-chip__icon > img[data-theme-monochrome] {
  filter: brightness(0) invert(1);
}
html.light .service-stack-chip__icon > img[data-theme-monochrome] {
  filter: brightness(0);
}
.service-stack-chip__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.service-showcase-benefits {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 clamp(1.5rem, 4vw, 3.75rem);
  padding: clamp(1.35rem, 2.5vw, 2rem) 0 clamp(1.7rem, 3vw, 2.6rem);
  border-top: 1px solid var(--service-hairline);
}

.service-benefit { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; min-width: 0; padding: 0 1.5rem; }
.service-benefit:first-child { padding-left: 0; }
.service-benefit:last-child { padding-right: 0; }
.service-benefit + .service-benefit { border-left: 1px solid var(--service-hairline); }
.service-benefit__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.55rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--service-card-bg)); }
.service-benefit__icon svg { width: 1.1rem; }
.service-benefit h4 { color: var(--service-ink); font-size: 0.78rem; font-weight: 720; line-height: 1.3; }
.service-benefit p { display: -webkit-box; overflow: hidden; margin-top: 0.25rem; color: var(--service-muted); font-size: 0.68rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Bottom CTA strip */
.services-cta-strip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
html.light .services-cta-strip {
  background: #FFFFFF;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.services-note-icon {
  background: rgba(139, 92, 246, 0.16);
  color: #A78BFA;
}
html.light .services-note-icon {
  background: rgba(109, 40, 217, 0.10);
  color: #6D28D9;
}

/* Solid bronze emphasis keeps the section aligned with the site mark. */
.services-title-accent {
  color: var(--color-primary);
}
html.light .services-title-accent {
  color: #8f5d24;
}

/* Keep the product-story layout, but use a denser vertical rhythm on desktop. */
@media (min-width: 1024px) {
  .service-showcase__main {
    gap: 3rem;
    padding: 2.5rem;
    padding-bottom: 2rem;
  }

  .service-showcase__meta {
    margin-bottom: 2.5rem;
  }

  .service-showcase__rule {
    margin-block: 1.5rem;
  }

  .service-showcase__description {
    line-height: 1.6;
  }

  .service-showcase__cta {
    margin-top: 1.75rem;
  }

  .service-showcase[data-service='fullstack'] .service-showcase__content,
  .service-showcase[data-service='ai'] .service-showcase__content,
  .service-showcase[data-service='performance'] .service-showcase__content,
  .service-showcase[data-service='consulting'] .service-showcase__content {
    height: 100%;
    align-self: stretch;
  }

  .service-showcase[data-service='fullstack'] .service-showcase__cta,
  .service-showcase[data-service='ai'] .service-showcase__cta,
  .service-showcase[data-service='performance'] .service-showcase__cta,
  .service-showcase[data-service='consulting'] .service-showcase__cta {
    margin-top: auto;
  }

  .service-showcase[data-service='performance'] .service-showcase__main {
    grid-template-columns: minmax(19rem, 0.95fr) minmax(0, 1.25fr);
    gap: 1.5rem;
  }

  .service-showcase-visual {
    min-height: 25rem;
  }

  .service-showcase-stack {
    padding: 0 2.5rem 1.75rem;
  }

  .service-stack-chip {
    min-height: 3.25rem;
  }

  .service-showcase-benefits {
    margin-inline: 2.5rem;
    padding: 1.25rem 0 1.75rem;
  }
}

@media (max-width: 1023px) {
  .service-showcase__main { grid-template-columns: 1fr; }
  .service-showcase__meta { margin-bottom: 2.5rem; }
  .service-showcase__title { max-width: 13ch; }
  .service-showcase-visual { min-height: 29rem; }
  .service-showcase-visual--performance { min-height: 0; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .service-showcase[data-service='ai'] .service-showcase-stack {
    gap: 0.35rem;
  }

  .service-showcase[data-service='ai'] .service-stack-chip {
    gap: 0.3rem;
    padding: 0.4rem;
    font-size: 0.68rem;
  }
}

@media (max-width: 767px) {
  .service-showcase__main { display: flex; flex-direction: column; gap: 0; }
  .service-showcase__content { display: contents; }
  .service-showcase-visual { order: 1; margin-top: 2rem; }
  .service-showcase-visual[data-visual-state='pending'] { min-height: 23.5rem; }
  .service-showcase-visual.service-showcase-visual--frontend { min-height: 0; }
  .service-visual-composition--frontend {
    display: grid;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .service-frontend-browser-media { width: 100%; margin: 0; }
  .service-frontend-mobile-media {
    position: relative;
    inset: auto;
    width: clamp(8rem, 38vw, 10rem);
    margin-top: -3rem;
    margin-left: clamp(0.25rem, 4vw, 1.25rem);
    justify-self: start;
  }
  .service-visual-composition--frontend .service-dot-field { display: none; }
  .service-showcase-visual.service-showcase-visual--ai { min-height: 0; }
  .service-showcase-visual.service-showcase-visual--performance { min-height: 0; }
  .service-visual-composition--performance { height: auto; }
  .service-performance-stack__list { flex-wrap: wrap; }
  .service-performance-stack__chip { flex-basis: calc(20% - 0.3rem); }
  .service-visual-composition--ai {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .service-ai-pipeline,
  .service-ai-knowledge,
  .service-ai-metrics,
  .service-ai-services,
  .service-ai-tasks {
    grid-column: 1;
    grid-row: auto;
  }
  .service-ai-pipeline { min-height: 18rem; }
  .service-ai-knowledge { min-height: 16.5rem; }
  .service-ai-metrics { min-height: 10.5rem; }
  .service-ai-services { min-height: 15rem; }
  .service-ai-services__grid { min-height: 12.75rem; }
  .service-ai-tasks { min-height: 13rem; }
  .service-showcase-visual--fullstack { min-height: 0; }
  .service-visual-composition--fullstack {
    height: auto;
    min-height: 0;
    grid-template-rows: auto;
  }
  .service-fullstack-architecture { padding: 0.8rem 0.65rem 0.65rem; }
  .service-architecture-diagram {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 0 0 1.35rem;
  }
  .service-architecture-connector {
    width: 100%;
    height: 2.15rem;
  }
  .service-architecture-connector__svg--horizontal { display: none; }
  .service-architecture-connector__svg--vertical { display: block; }
  .service-architecture-connector__dots--horizontal { display: none; }
  .service-architecture-connector__dots--vertical { display: block; }
  .service-architecture-group {
    display: grid;
    gap: 0.42rem;
    padding: 0.58rem;
  }
  .service-architecture-group > strong {
    grid-column: 1 / -1;
    margin-bottom: 0;
    font-size: 0.5rem;
  }
  .service-architecture-group--frontend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-architecture-group--backend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-architecture-group--databases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-architecture-client {
    min-height: 3.4rem;
    padding: 0.35rem 0.2rem;
  }
  .service-architecture-client svg {
    width: 1.15rem;
    height: 1.15rem;
  }
  .service-api-gateway {
    width: clamp(7.25rem, 46%, 9rem);
    min-height: 4.6rem;
    justify-self: center;
  }
  .service-backend-service,
  .service-architecture-group--databases > div {
    min-height: 3.2rem;
    padding: 0.3rem 0.15rem;
  }
  .service-backend-service svg,
  .service-architecture-group--databases svg {
    width: 1.05rem;
    height: 1.05rem;
  }
  .service-backend-service span,
  .service-architecture-group--databases span {
    overflow: visible;
    font-size: 0.43rem;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
  }
  .service-fullstack-details { grid-template-columns: minmax(0, 1fr); }
  .service-endpoints-panel { min-height: 15.25rem; }
  .service-monitoring-panel { min-height: 13.25rem; }
  .service-showcase__cta { order: 2; }
  .service-showcase-stack { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; padding-bottom: 1.25rem; }
  .service-showcase[data-service='ai'] .service-showcase-stack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-stack-chip { display: grid; place-items: center; aspect-ratio: 1; min-height: 0; padding: 0.65rem; }
  .service-stack-chip__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .service-stack-chip__icon > svg,
  .service-stack-chip__icon > img { width: 1.4rem; height: 1.4rem; }
  .service-showcase-benefits { gap: 0; padding-top: 1.2rem; }
  .service-benefit { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; padding: 0 0.5rem; text-align: center; }
  .service-benefit__icon { width: 2rem; height: 2rem; border-radius: 0; color: var(--accent-solid); background: transparent; }
  .service-benefit__icon svg { width: 1.25rem; }
  .service-benefit h4 { max-width: 13ch; font-size: 0.7rem; text-wrap: balance; }
  .service-benefit p { display: none; }
}

@media (max-width: 639px) {
  .service-showcase { border-radius: 1.25rem; }
  .service-showcase__main { gap: 0; padding: 1.25rem; padding-bottom: 1.5rem; }
  .service-showcase__meta { gap: 0.7rem; margin-bottom: 2rem; }
  .service-showcase__number { width: 3rem; height: 3rem; }
  .service-showcase__category { font-size: 0.78rem; white-space: normal; }
  .service-showcase__title { max-width: 100%; font-size: clamp(2.15rem, 12vw, 3.2rem); line-height: 1.02; }
  .service-showcase__description { font-size: 0.9rem; }
  .service-showcase-scope ul { grid-template-columns: minmax(0, 1fr); }
  .service-showcase__cta { width: 100%; }
  .service-showcase-visual { min-height: 23.5rem; font-size: 0.58rem; }
  .service-showcase-visual--fullstack { min-height: 0; }
  .service-showcase-visual--performance { min-height: 0; }
  .service-visual-panel { padding: 0.75rem; }
  .service-fullstack-architecture { padding-inline: 0.45rem; }
  .service-architecture-group { padding-inline: 0.38rem; }
  .service-architecture-key { gap: 0.8rem; font-size: 0.39rem; }
  .service-architecture-key i { width: 0.9rem; }
  .service-api-response__header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; }
  .service-api-response__header strong { justify-self: center; }
  .service-api-response__command { font-size: 0.39rem; }
  .service-api-response pre { font-size: 0.41rem; }
  .service-flow-row { gap: 0.28rem; }
  .service-flow-node { min-height: 4.1rem; gap: 0.35rem; padding: 0.4rem 0.2rem; }
  .service-flow-arrow { width: 0.65rem; }
  .service-ai-panel { padding: 0.68rem; }
  .service-ai-knowledge__head,
  .service-ai-knowledge__row {
    grid-template-columns: minmax(7.1rem, 1.55fr) 0.48fr 0.55fr 0.74fr;
    gap: 0.25rem;
  }
  .service-ai-knowledge__head {
    padding-inline: 0.3rem;
    font-size: 0.38rem;
  }
  .service-ai-knowledge__row {
    min-height: 2.15rem;
    padding-inline: 0.35rem;
  }
  .service-ai-knowledge__row > span {
    font-size: 0.43rem;
    line-height: 1.12;
    white-space: normal;
  }
  .service-ai-knowledge__row > b { font-size: 0.39rem; }
  .service-ai-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-ai-service { border-top: 0; border-left: 0; }
  .service-ai-service:not(:nth-child(4n + 1)) { border-left: 0; }
  .service-ai-service:nth-child(n + 5) { border-top: 0; }
  .service-ai-service:not(:nth-child(3n + 1)) { border-left: 1px solid var(--service-hairline); }
  .service-ai-service:nth-child(n + 4) { border-top: 1px solid var(--service-hairline); }
  .service-ai-task {
    grid-template-columns: 0.85rem minmax(0, 1fr) auto;
    grid-template-areas:
      'icon title status'
      'icon detail status'
      'icon time status';
    gap: 0.16rem 0.4rem;
    min-height: 2.35rem;
    padding: 0.32rem 0.4rem;
  }
  .service-ai-task > svg { grid-area: icon; }
  .service-ai-task > strong { grid-area: title; }
  .service-ai-task > span { grid-area: detail; }
  .service-ai-task > time { grid-area: time; text-align: left; }
  .service-ai-task > b { grid-area: status; min-width: 3.85rem; }
  .service-performance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-performance-summary > div:nth-child(2n + 1) { border-left: 0; }
  .service-performance-summary > div:nth-child(n + 3) { border-top: 1px solid var(--service-hairline); }
  .service-performance-details { grid-template-columns: minmax(0, 1fr); }
  .service-performance-stack__chip { flex-basis: calc(33.333% - 0.3rem); }
  .service-showcase-stack { padding-inline: 1.25rem; }
  .service-showcase[data-service='ai'] .service-showcase-stack {
    gap: 0.35rem;
  }
  .service-showcase[data-service='ai'] .service-stack-chip {
    padding: 0.4rem;
  }
  .service-showcase[data-service='ai'] .service-stack-chip__brand-svg,
  .service-showcase[data-service='ai'] .service-stack-chip__icon > img {
    width: 1.2rem;
    height: 1.2rem;
  }
  .service-showcase-benefits { margin-inline: 1.25rem; }
  .service-stack-chip { padding: 0.55rem; border-radius: 0.5rem; }
  .service-benefit + .service-benefit { border-left: 1px solid var(--service-hairline); }
  .service-benefit h4 { font-size: 0.66rem; }
}

@media (max-width: 479px) {
  .service-performance-vitals { grid-template-columns: minmax(0, 1fr); }
  .service-performance-vital__label span { overflow: visible; text-overflow: clip; }
  .service-performance-stack__chip { flex-basis: calc(50% - 0.3rem); }
}

/* Mobile: full-bleed, seamless single canvas. "Blocks" (border/radius/shadow/gap)
   start at the tablet breakpoint (768px) and stay through desktop - see the base
   .service-showcase-list/.service-showcase rules above. */
@media (max-width: 767px) {
  .service-showcase-list {
    gap: 0;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .service-showcase {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .service-showcase + .service-showcase {
    border-top: 1px solid var(--service-hairline);
  }
  .service-showcase:hover {
    transform: none;
    box-shadow: none;
  }
  .service-showcase__main { padding-left: 1.5rem; padding-right: 1.5rem; }
  .service-showcase-stack { padding-inline: 1.5rem; }
  .service-showcase-benefits { margin-inline: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .service-showcase,
  .service-showcase__cta,
  .service-stack-chip { transition-duration: 0.01ms !important; }
  .service-showcase:hover,
  .service-stack-chip:hover { transform: none; }
  .service-architecture-connector__flow path { animation: none; }
  .service-architecture-connector__flow--forward path {
    opacity: 0.65;
    stroke-dasharray: none;
  }
  .service-architecture-connector__flow--reverse path { opacity: 0; }
  .service-api-response__caret { animation: none; opacity: 0; }
}

/* =========================================
   HOME PROCESS - full-width aligned delivery system panel
   ========================================= */
.process-system {
  --process-divider: rgba(255, 255, 255, 0.08);
  --process-grid: rgba(14, 165, 233, 0.055);
  --process-node-ring: #080C14;
  --process-tag: rgba(255, 255, 255, 0.025);
  background:
    radial-gradient(circle at 78% 52%, rgba(14, 165, 233, 0.08), transparent 34%),
    linear-gradient(var(--process-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--process-grid) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  isolation: isolate;
}

html.light .process-system {
  --process-divider: rgba(15, 23, 42, 0.09);
  --process-grid: rgba(14, 165, 233, 0.07);
  --process-node-ring: #EEF2F7;
  --process-tag: rgba(15, 23, 42, 0.025);
  background:
    radial-gradient(circle at 78% 52%, rgba(14, 165, 233, 0.10), transparent 34%),
    linear-gradient(var(--process-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--process-grid) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}

.process-system.section {
  padding-block: clamp(5.5rem, 7vw, 7rem);
}

.process-system__axis {
  position: absolute;
  z-index: 0;
  background: rgba(14, 165, 233, 0.16);
  pointer-events: none;
}

.process-system__axis::before,
.process-system__axis::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(14, 165, 233, 0.28);
  border-radius: 9999px;
  background: var(--color-space);
}

.process-system__axis--horizontal {
  left: 0;
  right: 0;
  top: 5.5rem;
  height: 1px;
}

.process-system__axis--horizontal::before {
  left: clamp(1.5rem, 5vw, 6rem);
  top: -4px;
  width: 9px;
  height: 9px;
}

.process-system__axis--horizontal::after {
  right: clamp(1.5rem, 5vw, 6rem);
  top: -3px;
  width: 7px;
  height: 7px;
}

.process-system__axis--vertical {
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 1px;
}

.process-system__axis--vertical::before {
  left: -4px;
  top: 5.25rem;
  width: 9px;
  height: 9px;
}

.process-system__axis--vertical::after {
  left: -3px;
  bottom: 5.25rem;
  width: 7px;
  height: 7px;
}

.process-system__frame {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 4rem);
}

.process-system__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 3vw, 3.25rem);
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 44%),
    rgba(8, 12, 20, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 24px 70px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px) saturate(1.12);
}

.process-system__panel::before,
.process-system__panel::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: 0;
  width: clamp(3rem, 8vw, 7rem);
  pointer-events: none;
}

.process-system__panel::before {
  left: 0;
}

.process-system__panel::after {
  right: 0;
}

.process-system__panel > * {
  position: relative;
  z-index: 1;
}

html.light .process-system__panel {
  border-color: rgba(14, 165, 233, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.46) 62%, rgba(255, 255, 255, 0.6)),
    rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 24px 70px rgba(15, 23, 42, 0.08);
}

.process-system__panel::before,
html.light .process-system__panel::before {
  background: linear-gradient(90deg, var(--color-space), transparent);
  opacity: 0.2;
}

.process-system__panel::after,
html.light .process-system__panel::after {
  background: linear-gradient(270deg, var(--color-space), transparent);
  opacity: 0.16;
}

.process-system__layout {
  display: grid;
  grid-template-columns: minmax(20rem, 0.82fr) minmax(40.625rem, 1.38fr);
  gap: clamp(3rem, 3.8vw, 4.5rem);
  align-items: stretch;
}

.process-system__intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding-block: 0.75rem;
}

.process-system__title {
  max-width: 14ch;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2.65rem, 4.15vw, 4.2rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

.process-system__summary {
  max-width: 48ch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--color-text-muted);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.72;
  text-wrap: pretty;
}

.process-proofs {
  display: grid;
  margin: clamp(1.75rem, 3vw, 2.75rem) 0 0;
  padding: clamp(1.15rem, 2vw, 1.6rem) 0 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--process-divider);
  list-style: none;
}

.process-proof {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0 clamp(0.75rem, 1.5vw, 1.35rem);
  color: var(--color-text-muted);
  font-size: clamp(0.72rem, 0.82vw, 0.82rem);
  line-height: 1.4;
}

.process-proof + .process-proof {
  border-left: 1px solid var(--process-divider);
}

.process-proof span {
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.process-proof__icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  color: var(--color-gold);
}

.process-timeline-shell {
  position: relative;
  min-width: 0;
  min-height: 100%;
}

.process-timeline {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  min-height: 40rem;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-timeline__rail,
.process-timeline__fill {
  position: absolute;
  z-index: 1;
  top: 12.5%;
  bottom: 12.5%;
  left: 1.5rem;
  width: 1px;
  pointer-events: none;
}

.process-timeline__rail {
  background: var(--process-divider);
}

.process-timeline__fill {
  background: linear-gradient(
    180deg,
    rgba(14, 165, 233, 0.32),
    rgba(14, 165, 233, 0.92) 42%,
    rgba(245, 158, 11, 0.96) 67%,
    rgba(14, 165, 233, 0.4)
  );
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.24);
  transform-origin: top;
}

.process-stage {
  position: relative;
  display: grid;
  grid-template-columns: 4.25rem 4.5rem minmax(0, 1fr) minmax(9.25rem, 0.52fr);
  gap: 1.25rem;
  min-height: 0;
  align-items: center;
  padding: 1.55rem clamp(1rem, 1.5vw, 1.5rem) 1.55rem 0.35rem;
}

.process-stage + .process-stage {
  border-top: 1px solid var(--process-divider);
}

.process-timeline .process-stage.process-stage--active {
  z-index: 2;
  isolation: isolate;
  border-top-color: transparent;
  padding-block: clamp(1.85rem, 2.1vw, 2.2rem);
  background: transparent;
}

.process-timeline .process-stage--active + .process-stage {
  border-top-color: transparent;
}

.process-stage--active::before {
  content: "";
  position: absolute;
  inset: -0.75rem -2.5rem;
  z-index: -1;
  background: radial-gradient(
    ellipse at 58% 50%,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(245, 158, 11, 0.075) 34%,
    rgba(245, 158, 11, 0.035) 58%,
    transparent 82%
  );
  pointer-events: none;
}

html.light .process-stage--active {
  background: transparent;
}

html.light .process-stage--active::before {
  background: radial-gradient(
    ellipse at 58% 50%,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.58) 36%,
    rgba(245, 158, 11, 0.075) 62%,
    transparent 84%
  );
}

.process-stage__marker {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
}

.process-stage__node {
  position: absolute;
  left: 0.65rem;
  width: 0.95rem;
  height: 0.95rem;
  border: 3px solid var(--process-node-ring);
  border-radius: 9999px;
  background: var(--color-text-faint);
  box-shadow:
    0 0 0 1px var(--color-text-faint),
    0 0 0 5px var(--process-node-ring);
}

.process-stage__number {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.process-stage--active .process-stage__number {
  color: var(--color-gold);
}

.process-stage--active .process-stage__node {
  border-color: var(--process-node-ring);
  background: var(--color-gold);
  box-shadow:
    0 0 0 1px var(--color-gold),
    0 0 0 5px var(--process-node-ring),
    0 0 18px rgba(245, 158, 11, 0.55);
}

.process-stage--active .process-stage__node::before,
.process-stage--active .process-stage__node::after {
  content: "";
  position: absolute;
  inset: -0.65rem;
  border: 1px solid rgba(245, 158, 11, 0.72);
  border-radius: 9999px;
  opacity: 0;
  pointer-events: none;
}

.process-system--visible .process-stage--active .process-stage__node {
  animation: process-heartbeat-core 2.3s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

.process-system--visible .process-stage--active .process-stage__node::before {
  animation: process-heartbeat-ring 2.3s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

.process-system--visible .process-stage--active .process-stage__node::after {
  animation: process-heartbeat-ring 2.3s 0.16s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

@keyframes process-heartbeat-core {
  0%, 4%, 10%, 18%, 100% { transform: scale(1); }
  7% { transform: scale(1.24); }
  14% { transform: scale(1.14); }
}

@keyframes process-heartbeat-ring {
  0%, 4% {
    opacity: 0;
    transform: scale(0.72);
  }
  8% {
    opacity: 0.68;
  }
  22%, 100% {
    opacity: 0;
    transform: scale(1.72);
  }
}

.process-stage__icon {
  display: flex;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(14, 165, 233, 0.24);
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.045);
  color: var(--color-primary);
}

.process-stage__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.process-stage--active .process-stage__icon {
  border-color: rgba(245, 158, 11, 0.44);
  background: rgba(245, 158, 11, 0.06);
  color: var(--color-gold);
}

.process-stage__copy {
  min-width: 0;
}

.process-stage__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.process-stage__heading h3 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.process-stage__active-label {
  padding: 0.26rem 0.48rem;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 5px;
  color: var(--color-gold);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.process-stage__copy p {
  max-width: 48ch;
  margin: 0.58rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.58;
  text-wrap: pretty;
}

.process-stage__outputs {
  min-width: 0;
  align-self: center;
}

.process-stage__outputs-label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.process-stage__outputs ul {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  list-style: none;
}

.process-stage__outputs li {
  max-width: 100%;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--process-divider);
  border-radius: 6px;
  background: var(--process-tag);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.process-stage--active .process-stage__outputs li {
  border-color: rgba(245, 158, 11, 0.34);
  color: var(--color-text);
}

@media (max-width: 73.75rem) {
  .process-system__axis--vertical {
    display: none;
  }

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

  .process-system__intro {
    padding-block: 0;
  }

  .process-system__title {
    max-width: 15ch;
  }

  .process-timeline {
    min-height: 37rem;
  }
}

@media (max-width: 47.99rem) {
  .process-system.section {
    padding-block: 4.5rem;
  }

  .process-system__panel {
    padding: clamp(1.25rem, 4vw, 2rem);
    border-radius: 16px;
  }

  .process-system__frame {
    padding-inline: clamp(0.75rem, 3vw, 1.5rem);
  }

  .process-system__axis--horizontal {
    top: 3.25rem;
  }

  .process-system__layout {
    gap: 3.25rem;
  }

  .process-system__title {
    max-width: 14ch;
    font-size: clamp(2.35rem, 10.5vw, 3.35rem);
  }

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

  .process-proof {
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 3.25rem;
    padding: 0.75rem;
    font-size: 0.76rem;
  }

  .process-proof + .process-proof {
    border-left: 0;
  }

  .process-proof:nth-child(even) {
    border-left: 1px solid var(--process-divider);
  }

  .process-proof:nth-child(n + 3) {
    border-top: 1px solid var(--process-divider);
  }

  .process-timeline {
    grid-template-rows: none;
    min-height: 0;
    height: auto;
  }

  .process-stage {
    grid-template-columns: 3.35rem 3.5rem minmax(0, 1fr);
    gap: 0.85rem;
    min-height: 0;
    padding: 1.5rem 0.35rem 1.5rem 0.2rem;
  }

  .process-timeline__rail,
  .process-timeline__fill {
    top: 4.75rem;
    bottom: 4.75rem;
    left: 1.325rem;
  }

  .process-stage__node {
    left: 0.65rem;
  }

  .process-stage__number {
    font-size: 1rem;
  }

  .process-stage__icon {
    width: 3.25rem;
    height: 3.25rem;
  }

  .process-stage__icon svg {
    width: 1.4rem;
    height: 1.4rem;
  }

  .process-stage__outputs {
    grid-column: 3;
    margin-top: 0.15rem;
  }

  .process-stage__outputs ul {
    flex-flow: row wrap;
  }
}

@media (max-width: 29.99rem) {
  .process-system__panel {
    padding-inline: 0.9rem;
  }

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

  .process-proof {
    min-height: 0;
    padding: 0.8rem 0.35rem;
  }

  .process-proof:nth-child(even) {
    border-left: 0;
  }

  .process-proof:nth-child(n + 2) {
    border-top: 1px solid var(--process-divider);
  }

  .process-stage {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.8rem;
    padding-right: 0.85rem;
  }

  .process-stage__marker {
    grid-row: 1 / span 2;
  }

  .process-stage__number {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
  }

  .process-stage__icon {
    grid-column: 2;
  }

  .process-stage__copy,
  .process-stage__outputs {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-system--visible .process-stage--active .process-stage__node,
  .process-system--visible .process-stage--active .process-stage__node::before,
  .process-system--visible .process-stage--active .process-stage__node::after {
    animation: none;
  }
}