:root {
  --lotus-yellow: #ffe450;
  --lotus-yellow-strong: #ffd000;
  --ink: #434343;
  --ink-soft: #4d4d4d;
  --paper: #ffffff;
  --paper-soft: #f5f7fb;
  --muted: #62666d;
  --line: rgba(10, 10, 10, 0.12);
  --glass: rgba(255, 255, 255, 0.08);
  --glass-line: rgba(255, 255, 255, 0.18);
  --cyan: #54e7ff;
  --green: #94ffbf;
  --max: 1180px;
  --header: 82px;
  --radius: 8px;
  color-scheme: light dark;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  line-height: 1.7;
  min-width: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

body.is-loading {
  overflow: hidden;
}

body::before {
  pointer-events: none;
  position: fixed;
  transition: opacity 420ms ease, visibility 420ms ease;
  z-index: 1000;
}

body::before {
  background: var(--lotus-yellow);
  content: "";
  inset: 0;
  opacity: 1;
}

body::selection {
  background: var(--lotus-yellow);
}

body.is-ready::before {
  opacity: 0;
  visibility: hidden;
}

.site-loader {
  align-items: center;
  color: #434343;
  display: flex;
  flex-direction: column;
  gap: 30px;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: fixed;
  transition: opacity 360ms ease, visibility 360ms ease;
  z-index: 1001;
}

body.is-ready .site-loader {
  opacity: 0;
  visibility: hidden;
}

.loader-emblem {
  animation: loaderTurn 2.4s linear infinite;
  border: 1px solid rgba(67, 67, 67, 0.25);
  border-radius: 50%;
  height: 84px;
  position: relative;
  width: 84px;
  will-change: transform;
}

.loader-emblem::before,
.loader-emblem::after,
.loader-emblem span {
  border-radius: 50%;
  content: "";
  position: absolute;
}

.loader-emblem::before {
  border: 2px solid transparent;
  border-top-color: #434343;
  border-right-color: #434343;
  inset: 9px;
}

.loader-emblem::after {
  border: 2px solid transparent;
  border-bottom-color: #434343;
  inset: 23px;
}

.loader-emblem span {
  background: #434343;
  height: 6px;
  left: 50%;
  top: -3px;
  width: 6px;
}

.loader-emblem span:nth-child(2) { transform: translate(-50%, 0) rotate(120deg); transform-origin: 3px 45px; }
.loader-emblem span:nth-child(3) { transform: translate(-50%, 0) rotate(240deg); transform-origin: 3px 45px; }

.loader-messages {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  height: 22px;
  letter-spacing: 0.12em;
  position: relative;
  text-align: center;
  width: min(90vw, 310px);
}

.loader-messages span {
  animation: loaderMessage 0.75s ease both;
  inset: 0;
  opacity: 0;
  position: absolute;
  white-space: nowrap;
  will-change: opacity, transform;
}

.loader-messages span:nth-child(2) { animation-delay: 0.55s; }
.loader-messages span:nth-child(3) { animation: loaderFinal 0.7s 1.1s ease both; }

.loader-progress {
  background: rgba(67, 67, 67, 0.2);
  height: 1px;
  overflow: hidden;
  width: min(72vw, 230px);
}

.loader-progress i {
  animation: loaderSweep 1.6s ease-in-out infinite;
  background: #434343;
  display: block;
  height: 100%;
  transform: translateX(-100%);
  width: 45%;
  will-change: transform;
}

@keyframes loaderTurn { to { transform: rotate(360deg); } }
@keyframes loaderMessage { 0% { opacity: 0; transform: translateY(8px); } 25%, 68% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes loaderFinal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loaderSweep { from { transform: translateX(-110%); } to { transform: translateX(340%); } }

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

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

button {
  color: inherit;
  font: inherit;
}

strong,
b,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

::selection {
  background: var(--lotus-yellow);
  color: var(--ink);
}

.skip-link {
  background: var(--lotus-yellow);
  color: var(--ink);
  font-weight: 600;
  left: 16px;
  padding: 10px 14px;
  position: fixed;
  top: 16px;
  transform: translateY(-140%);
  z-index: 1000;
}

.skip-link:focus {
  transform: translateY(0);
}

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

.page-noise {
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
  position: fixed;
  z-index: 60;
}

.page-noise::before {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 4px 4px;
  content: "";
  inset: 0;
  position: absolute;
}

.container {
  margin: 0 auto;
  max-width: var(--max);
  padding: 0 28px;
  width: 100%;
}

.section-pad {
  padding: 128px 0;
}

.site-header {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #4d4d4d;
  display: flex;
  height: 118px;
  justify-content: space-between;
  left: 0;
  padding: 0 clamp(22px, 2.7vw, 48px);
  position: fixed;
  right: 0;
  top: 0;
  transition: background 180ms ease, box-shadow 180ms ease, height 180ms ease;
  z-index: 100;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 48px rgba(10, 10, 10, 0.08);
  height: 78px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.brand {
  align-items: center;
  display: inline-flex;
  min-width: 0;
}

.brand-copy {
  align-items: baseline;
  display: flex;
  gap: 7px;
  line-height: 1;
  white-space: nowrap;
}

.brand-copy span {
  font-size: clamp(18px, 1.34vw, 28px);
  font-weight: 600;
}

.brand-copy strong {
  font-size: clamp(24px, 1.9vw, 38px);
  font-weight: 600;
  letter-spacing: 0;
}

.site-nav {
  align-items: center;
  display: flex;
  gap: clamp(18px, 2vw, 36px);
}

.site-nav a {
  align-items: center;
  border-radius: 999px;
  color: #5d5d5d;
  display: inline-flex;
  font-size: clamp(14px, 1.05vw, 22px);
  font-weight: 600;
  gap: 7px;
  padding: 8px 0;
  transition: background 160ms ease, color 160ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: transparent;
  color: #434343;
  outline: none;
}

.site-nav .nav-cta {
  background: var(--lotus-yellow);
  color: #4d4d4d;
  min-height: 56px;
  padding: 0 28px;
}

.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  background: #ffd927;
  color: var(--ink);
}

.mail-icon {
  border: 2px solid currentColor;
  border-radius: 2px;
  height: 15px;
  position: relative;
  width: 21px;
}

.mail-icon::before,
.mail-icon::after {
  background: currentColor;
  content: "";
  height: 2px;
  position: absolute;
  top: 5px;
  width: 12px;
}

.mail-icon::before {
  left: 0;
  transform: rotate(33deg);
  transform-origin: left center;
}

.mail-icon::after {
  right: 0;
  transform: rotate(-33deg);
  transform-origin: right center;
}

.menu-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: none;
  height: 42px;
  padding: 0;
  position: relative;
  width: 42px;
}

.menu-toggle span:not(.sr-only) {
  background: #4d4d4d;
  height: 2px;
  left: 10px;
  position: absolute;
  transition: transform 180ms ease, top 180ms ease;
  width: 22px;
}

.menu-toggle span:first-child {
  top: 15px;
}

.menu-toggle span:nth-child(2) {
  top: 24px;
}

.menu-toggle[aria-expanded="true"] span:first-child {
  top: 20px;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  top: 20px;
  transform: rotate(-45deg);
}

.hero {
  background: #fff;
  color: #4d4d4d;
  height: 240svh;
  min-height: 100svh;
  overflow: clip;
  position: relative;
}

.hero-stage {
  background: #fff;
  height: 100svh;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.trail-canvas {
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: fixed;
  width: 100%;
  z-index: 70;
}

.hero-inner {
  display: block;
  margin: 0 auto;
  max-width: none;
  min-height: 100svh;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 2;
}

.hero-copy {
  --hero-depth-reveal: 0;
  --hero-opacity: 1;
  --hero-rot: 0deg;
  --hero-scale: 1;
  --hero-tilt: 0deg;
  --hero-x: 0px;
  --hero-y: 0px;
  left: clamp(28px, 4.2vw, 90px);
  opacity: var(--hero-opacity);
  position: absolute;
  top: 42%;
  transform:
    perspective(900px)
    translate3d(var(--hero-x), var(--hero-y), 0)
    translateY(-18%)
    rotateX(var(--hero-tilt))
    rotate(calc(-3deg + var(--hero-rot)))
    skewX(-4deg)
    scale(var(--hero-scale));
  transform-origin: 52% 100%;
  transform-style: preserve-3d;
  width: min(55vw, 1050px);
  z-index: 3;
}

.hero-title-object { display: inline-grid; position: relative; transform-style: preserve-3d; }
.hero-title-object > [data-particle-title] { position: relative; transform: translateZ(0.002em); z-index: 1; }
.hero-title-object > .hero-title-depth-layer {
  color: #687176;
  filter: none;
  inset: 0 auto auto 0;
  opacity: var(--hero-depth-reveal);
  pointer-events: none;
  position: absolute;
  text-shadow: 0 1px 0 rgba(255, 228, 80, 0.13);
  transform: translate3d(0, 0, var(--depth-z));
  transition: none;
  -webkit-text-stroke: 0;
}
.text-built .hero-title-object > .hero-title-depth-layer { color: #596266; filter: none; -webkit-text-stroke: 0; }

.hero-title-stack {
  color: transparent;
  display: inline-grid;
  font-size: clamp(58px, 7.1vw, 148px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.76;
  margin: 0;
  opacity: 1;
  position: relative;
  text-transform: uppercase;
  -webkit-text-stroke: 1.4px var(--lotus-yellow);
  filter: drop-shadow(0 0 12px rgba(255, 208, 0, 0.6));
  transition: color 900ms ease, -webkit-text-stroke-color 900ms ease, filter 900ms ease;
  white-space: nowrap;
}

.text-built .hero-title-stack {
  color: #434343;
  filter: drop-shadow(0 24px 34px rgba(10, 10, 10, 0.12));
  -webkit-text-stroke-color: transparent;
}

.hero-title-stack span {
  display: block;
}

.hero-title-stack small {
  display: block;
  font-size: 0.36em;
  font-weight: 600;
  line-height: 1;
  margin-left: 0.04em;
  margin-top: 0.1em;
}

.hero-title-stack i {
  background: var(--lotus-yellow);
  display: inline-block;
  height: 0.95em;
  margin-left: 0.11em;
  transform: translateY(0.08em) skewX(2deg);
  vertical-align: top;
  width: 0.27em;
}

.hero-text-canvas {
  contain: strict;
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  will-change: opacity;
  z-index: 5;
}

.hero-figure {
  bottom: 0;
  display: block;
  pointer-events: none;
  position: absolute;
  right: -22vw;
  width: min(90vw, 1840px);
  z-index: 2;
}

.hero-figure video {
  aspect-ratio: 1408 / 768;
  display: block;
  height: auto;
  object-fit: contain;
  opacity: 0.96;
  width: 100%;
}

.eyebrow,
.section-kicker {
  color: var(--lotus-yellow);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.hero-lead {
  color: rgba(77, 77, 77, 0.78);
  font-size: 19px;
  line-height: 1.9;
  margin: 34px 0 0;
  max-width: 680px;
}

.hero-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  min-height: 48px;
  overflow: hidden;
  padding: 0 20px;
  position: relative;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.button:hover,
.button:focus-visible {
  outline: none;
  transform: translateY(-2px);
}

.button-primary {
  background: var(--lotus-yellow);
  color: var(--ink);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: #fff;
}

.button-ghost {
  background: rgba(10, 10, 10, 0.04);
  border-color: rgba(10, 10, 10, 0.14);
  color: var(--ink);
}

.button-ghost:hover,
.button-ghost:focus-visible {
  background: rgba(10, 10, 10, 0.08);
  border-color: rgba(10, 10, 10, 0.24);
}

.hero-panel {
  background: rgba(10, 10, 10, 0.58);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  padding: 18px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.panel-status {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 10px;
  padding-bottom: 16px;
  text-transform: uppercase;
}

.live-dot {
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(148, 255, 191, 0.9);
  height: 9px;
  width: 9px;
}

.signal-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.signal-list div {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  gap: 14px;
  grid-template-columns: 44px 1fr;
  min-height: 68px;
}

.signal-list div:last-child {
  border-bottom: 0;
}

.signal-list dt {
  color: var(--lotus-yellow);
  font-size: 12px;
  font-weight: 600;
}

.signal-list dd {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.scroll-cue {
  align-items: center;
  bottom: 34px;
  color: rgba(77, 77, 77, 0.55);
  display: flex;
  font-size: 11px;
  font-weight: 600;
  flex-direction: column;
  gap: 10px;
  left: 44px;
  position: absolute;
  text-transform: uppercase;
  z-index: 3;
}

.scroll-cue span {
  writing-mode: vertical-rl;
}

.scroll-cue i {
  background: rgba(77, 77, 77, 0.22);
  display: block;
  height: 86px;
  overflow: hidden;
  position: relative;
  width: 1px;
}

.scroll-cue i::before {
  animation: cue 1.5s ease-in-out infinite;
  background: var(--lotus-yellow);
  content: "";
  height: 34px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1px;
}

@keyframes cue {
  0% {
    transform: translateY(-38px);
  }
  100% {
    transform: translateY(92px);
  }
}

.intro {
  background: #050505;
  color: #fff;
  min-height: 250svh;
  overflow: visible;
  padding: 0;
  position: relative;
}

.intro-layout {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  position: sticky;
  text-align: center;
  top: 0;
  z-index: 1;
}

.intro::before,
.intro::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.intro::before {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 228, 80, 0.2), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 42%);
  inset: 0;
}

.intro::after {
  background: linear-gradient(180deg, #050505 0%, transparent 18%, transparent 82%, #050505 100%);
  inset: 0;
}

.intro-sphere-canvas {
  height: 100%;
  inset: 0;
  opacity: 0.86;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.intro-title {
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.22;
  margin: 0 auto;
  max-width: 980px;
  text-wrap: balance;
}

.intro .section-kicker {
  margin-bottom: 24px;
}

.intro-text {
  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
  margin: 30px auto 0;
  max-width: 900px;
  text-wrap: balance;
}

.intro-text p {
  display: grid;
  gap: 7px;
  margin: 0;
}

.intro-line {
  --intro-line-opacity: 0;
  display: block;
  filter: blur(calc((1 - var(--intro-line-opacity)) * 8px));
  opacity: var(--intro-line-opacity);
  transform: translateY(calc((1 - var(--intro-line-opacity)) * 18px));
  will-change: opacity, transform, filter;
}

.intro .section-link {
  margin-left: auto;
  margin-right: auto;
}

.services-portal {
  --company-scene-opacity: 1;
  --services-portal-opacity: 1;
  --services-screen-opacity: 0;
  --services-screen-dim: 0.68;
  --services-screen-light: 0.3;
  --services-screen-scale: 0.1;
  --services-screen-x: 50vw;
  --services-screen-y: 0px;
  background: #050505;
  height: 480svh;
  opacity: var(--services-portal-opacity);
  overflow: clip;
  position: relative;
  will-change: opacity;
  z-index: 2;
}

.services-portal.is-reduced {
  display: none;
}

.services-portal-sticky {
  background: #050505;
  height: 100svh;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.company-front-scene {
  background: #0b1319;
  height: 100%;
  inset: 0;
  opacity: var(--company-scene-opacity);
  position: absolute;
  width: 100%;
  z-index: 0;
}

.services-portal-sticky::before,
.services-portal-sticky::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.services-portal-sticky::before {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(5, 5, 5, 0.16) 100%);
  opacity: var(--company-scene-opacity);
  z-index: 1;
}

.services-portal-sticky::after {
  display: none;
}

.services-screen-layer {
  background: #060606;
  border-radius: 0;
  height: var(--services-screen-height, 100svh);
  left: 0;
  opacity: var(--services-screen-opacity);
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate3d(var(--services-screen-x), var(--services-screen-y), 0) scale(var(--services-screen-scale));
  transform-origin: left top;
  width: 100%;
  will-change: transform, opacity;
  z-index: 3;
}

.services-screen-layer::before,
.services-screen-layer::after {
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.services-screen-layer::before {
  background: rgba(5, 5, 5, var(--services-screen-dim));
  z-index: 2;
}

.services-screen-layer::after {
  background-image: var(--services-screen-finish, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: var(--services-screen-surface-opacity, 0);
  z-index: 3;
}

.services-preview {
  min-height: 100%;
  position: relative;
  z-index: 1;
}

.services-preview .services {
  min-height: 100svh;
  pointer-events: none;
}

.services-preview .is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.section-link {
  align-items: center;
  background: var(--lotus-yellow);
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  margin-top: 28px;
  min-height: 46px;
  padding: 0 18px;
  text-transform: uppercase;
  transition: background 180ms ease, transform 180ms ease;
}

.intro .section-link,
.technology .section-link,
.contact .section-link {
  color: var(--ink);
}

.section-link::after {
  background: currentColor;
  content: "";
  height: 1px;
  transition: transform 180ms ease;
  width: 44px;
}

.section-link:hover::after,
.section-link:focus-visible::after {
  transform: translateX(8px);
}

.section-link:hover,
.section-link:focus-visible {
  background: #fff;
  transform: translateY(-2px);
}

.section-link:focus-visible {
  outline: 2px solid var(--lotus-yellow);
  outline-offset: 6px;
}

.services {
  background: var(--paper-soft);
  overflow: clip;
}

.services-portal + .services,
.services-anchor {
  margin-top: -100svh;
  position: relative;
}

.services-portal.is-reduced + .services,
.services-anchor.is-fallback {
  margin-top: 0;
}

.services-layout {
  display: block;
}

.section-sticky {
  max-width: 780px;
  position: relative;
}

.section-sticky h2,
.section-heading h2,
.company-copy h2,
.contact-panel h2 {
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.section-sticky p:not(.section-kicker),
.section-heading p,
.company-copy p,
.contact-panel p {
  color: var(--muted);
  font-size: 16px;
  margin: 24px 0 0;
}

.service-stack {
  display: grid;
  gap: 32px;
  margin-top: 54px;
}

.service-card {
  background: radial-gradient(circle at 88% 82%, rgba(84, 231, 255, 0.14), transparent 28%), linear-gradient(145deg, #fff 0%, #fff 65%, #f9fdff 100%);
  border: 1px solid #dfe6ea;
  border-radius: 8px;
  box-shadow: 0 16px 44px rgba(38, 69, 85, 0.08);
  color: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  grid-template-rows: auto auto 1fr auto auto;
  min-height: 510px;
  overflow: hidden;
  padding: 54px 56px 42px;
  position: relative;
  transform: translate3d(var(--card-shift, 0px), 0, 0);
  opacity: var(--card-alpha, 1);
  transition: border-color 180ms ease, box-shadow 180ms ease;
  will-change: transform;
}

.service-art {
  align-items: center;
  display: flex;
  grid-column: 2;
  grid-row: 1 / 5;
  height: 100%;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.service-art::before {
  background-image: radial-gradient(#cde7f0 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  content: "";
  height: 90px;
  opacity: 0.8;
  position: absolute;
  right: 1%;
  top: 0;
  width: 150px;
}

.service-art img {
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  position: relative;
  transform: translate3d(0, var(--art-shift, 0px), 0);
  width: 100%;
  will-change: transform;
}

.service-card::before {
  background: linear-gradient(90deg, var(--lotus-yellow), #baf2cb 50%, var(--cyan));
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.service-card:hover {
  border-color: #9fdfe3;
  box-shadow: 0 24px 66px rgba(38, 69, 85, 0.14);
}

.card-index {
  align-items: center;
  color: #c6a100;
  display: flex;
  font-size: 25px;
  font-weight: 600;
  gap: 14px;
  grid-column: 1;
  margin-bottom: 48px;
}

.card-index::after { background: linear-gradient(90deg, var(--lotus-yellow), var(--cyan)); content: ""; height: 2px; width: 90px; }

.service-card h3 {
  font-size: 2.8rem;
  grid-column: 1;
  letter-spacing: 0;
  line-height: 1.18;
  margin: 0;
  max-width: 660px;
}

.service-card p {
  color: var(--muted);
  font-size: 17px;
  grid-column: 1;
  line-height: 1.85;
  margin: 24px 0 0;
  max-width: 650px;
}

.service-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 1 / -1;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.service-card li {
  background: rgba(255, 250, 226, 0.92);
  border: 1px solid rgba(213, 191, 103, 0.22);
  border-radius: 999px;
  color: #434343;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
}

.service-card li:nth-child(3n + 2) { background: rgba(230, 251, 242, 0.95); border-color: rgba(129, 210, 163, 0.25); }
.service-card li:nth-child(3n) { background: rgba(230, 246, 255, 0.95); border-color: rgba(110, 191, 232, 0.24); }
.service-card li::before { background: #d5ac1f; border-radius: 50%; content: ""; display: inline-block; height: 7px; margin-right: 8px; width: 7px; }
.service-card li:nth-child(3n + 2)::before { background: #65bd8a; }
.service-card li:nth-child(3n)::before { background: #4baee4; }

.service-card-action {
  align-items: center;
  color: #3d5b65;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 9px;
  grid-column: 1 / -1;
  margin-top: 22px;
  width: max-content;
}

.service-card-action > span { font-size: 19px; line-height: 1; transition: transform 180ms ease; }
.service-card:hover .service-card-action > span { transform: translate(3px, -3px); }

.needs { background: #fff; }
.needs-grid { border-top: 1px solid #cfd6d9; display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
.need-item { border-bottom: 1px solid #cfd6d9; border-right: 1px solid #cfd6d9; display: flex; flex-direction: column; min-height: 330px; padding: 30px; transition: background 180ms ease; }
.need-item:first-child { border-left: 1px solid #cfd6d9; }
.need-item:hover { background: #f7fbfc; }
.need-item > span { color: #a88300; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; font-weight: 600; }
.need-item h3 { font-size: 24px; line-height: 1.4; margin: 44px 0 0; }
.need-item p { color: var(--muted); font-size: 15px; margin: 18px 0 24px; }
.need-item b { border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 600; margin-top: auto; padding-bottom: 6px; width: max-content; }

.lab { background: #172126; color: #f6f8f7; overflow: hidden; }
.lab .section-kicker { color: var(--lotus-yellow); }
.lab-intro { align-items: end; display: grid; gap: 35px; grid-template-columns: 1fr minmax(260px, 420px); }
.lab-intro h2 { font-size: 2.8rem; line-height: 1.2; margin: 0; }
.lab-intro > p { color: #c6d2d3; font-size: 15px; margin: 0; }
.lab-tabs { border-bottom: 1px solid #4d6066; display: flex; gap: 0; margin-top: 55px; overflow-x: auto; scroll-snap-type: x proximity; }
.lab-tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; color: #aebfc4; cursor: pointer; flex: 1; font-size: 14px; font-weight: 600; min-width: max-content; padding: 18px 24px; text-align: left; }
.lab-tabs button { scroll-snap-align: start; }
.lab-tabs button[aria-selected="true"] { border-bottom-color: var(--lotus-yellow); color: #fff; }
.lab-tabs button:focus-visible, .lab button:focus-visible { outline: 2px solid var(--lotus-yellow); outline-offset: -2px; }
.lab-panel { align-items: stretch; display: grid; gap: 48px; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); padding-top: 48px; }
.lab-panel[hidden] { display: none; }
.lab-copy { padding: 16px 0; }
.lab-index { color: #7bdbe6; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; font-weight: 600; }
.lab-copy h3 { font-size: clamp(2rem, 3.1vw, 2.8rem); line-height: 1.24; margin: 27px 0 0; }
.lab-copy p { color: #c4d0d2; font-size: 15px; line-height: 1.9; margin: 20px 0 0; }
.lab-copy .text-route { color: var(--lotus-yellow); margin-top: 34px; }
.lab-controls { display: grid; gap: 14px; margin-top: 30px; }
.lab-controls label { display: flex; font-size: 13px; justify-content: space-between; }
.lab-controls output { color: var(--lotus-yellow); font-family: "SFMono-Regular", Consolas, monospace; }
.lab-controls input { accent-color: var(--lotus-yellow); cursor: pointer; margin: 0 0 12px; width: 100%; }
.lab-controls select { background: #223037; border: 1px solid #79929a; border-radius: 4px; color: #f6f8f7; font: inherit; min-height: 42px; padding: 7px 12px; }
.lab-workspace { background: #223037; border: 1px solid #45606a; border-radius: 8px; box-shadow: 0 28px 65px rgba(0, 0, 0, 0.18); min-height: 470px; overflow: hidden; padding: 24px; }
.workspace-top { align-items: center; border-bottom: 1px solid #4b626a; color: #aac2c8; display: flex; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; gap: 20px; justify-content: space-between; letter-spacing: 0.06em; padding-bottom: 17px; }
.workspace-top span:last-child { color: var(--lotus-yellow); }
.workspace-foot { color: #aec0c3; font-size: 11px; line-height: 1.6; margin: 15px 0 0; }
.cash-kpis { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; padding: 30px 0 20px; }
.cash-kpis > div { border-left: 2px solid var(--lotus-yellow); padding-left: 15px; }
.cash-kpis > div + div { border-left-color: #73d5e9; }
.cash-kpis small { color: #b9c9cd; display: block; font-size: 12px; }
.cash-kpis strong { display: block; font-size: clamp(1.35rem, 2.6vw, 2.3rem); margin-top: 4px; white-space: nowrap; }
.cash-chart { border-top: 1px solid #3b515a; padding-top: 12px; }
.cash-chart svg { height: auto; overflow: visible; width: 100%; }
.cash-months { color: #a8bfc4; display: grid; font-size: 11px; grid-template-columns: repeat(6, 1fr); text-align: center; }
.mini-kpis { border-bottom: 1px solid #3b515a; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); padding: 26px 0; }
.mini-kpis > div { border-left: 2px solid var(--lotus-yellow); padding-left: 12px; }
.mini-kpis > div:nth-child(2) { border-color: #6ed5e2; }
.mini-kpis > div:nth-child(3) { border-color: #83daa4; }
.mini-kpis small { color: #a9c0c5; display: block; font-size: 11px; }
.mini-kpis strong { display: block; font-size: clamp(1.25rem, 2.5vw, 1.9rem); font-weight: 600; margin-top: 7px; }
.inventory-rows { display: grid; gap: 0; margin-top: 18px; }
.inventory-row { align-items: center; border-bottom: 1px solid #3b515a; display: grid; gap: 14px; grid-template-columns: 100px 1fr 85px; min-height: 52px; }
.inventory-row strong { font-size: 13px; font-weight: 600; }
.inventory-row small { color: #b3c5c9; font-size: 11px; text-align: right; }
.inventory-bar { background: #354c55; height: 10px; overflow: hidden; }
.inventory-bar i { background: linear-gradient(90deg, #ffe450, #6ed5e2); display: block; height: 100%; }
.outreach-chart { align-items: end; border-bottom: 1px solid #667f87; display: grid; gap: 12px; grid-template-columns: repeat(7, 1fr); height: 190px; padding: 26px 4px 0; }
.outreach-chart i { background: linear-gradient(180deg, #ffe450, #9bda9e); display: block; min-height: 8px; transition: height 220ms ease; }
.learning-current { border-bottom: 1px solid #3b515a; display: grid; gap: 14px; grid-template-columns: 1fr auto; padding: 32px 0; }
.learning-current > span { font-size: 18px; font-weight: 600; }
.learning-current > strong { color: var(--lotus-yellow); font-size: 25px; font-weight: 600; }
.learning-meter { background: #3c535c; grid-column: 1 / -1; height: 12px; overflow: hidden; }
.learning-meter i { background: var(--lotus-yellow); display: block; height: 100%; transition: width 220ms ease; }
.learning-modules { display: grid; margin-top: 16px; }
.learning-modules div { border-bottom: 1px solid #3b515a; color: #b3c4c8; font-size: 13px; padding: 14px 0; }
.learning-modules div.is-complete { color: #ffe450; }
.learning-advance { margin-top: 18px; }
.flow-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.flow-options button, .layout-toggle { background: transparent; border: 1px solid #6a828a; border-radius: 999px; color: #e8f0f0; cursor: pointer; font-size: 12px; padding: 9px 14px; }
.flow-options button[aria-pressed="true"], .layout-toggle[aria-pressed="true"] { background: var(--lotus-yellow); border-color: var(--lotus-yellow); color: var(--ink); }
.flow-source { align-items: center; border: 1px solid #56818c; display: flex; gap: 20px; justify-content: space-between; margin-top: 30px; padding: 18px; }
.flow-source span { color: #7bdbe6; font-size: 12px; }
.flow-source strong { font-size: 17px; }
.flow-steps { border-left: 1px solid #63838d; list-style: none; margin: 25px 0 0 17px; padding: 0; }
.flow-steps li { align-items: center; display: flex; gap: 22px; margin: 0 0 20px -18px; }
.flow-steps li > span { align-items: center; background: var(--lotus-yellow); border-radius: 50%; color: var(--ink); display: flex; flex: none; font-size: 11px; height: 36px; justify-content: center; width: 36px; }
.flow-steps small { color: #a8c0c6; display: block; font-size: 11px; }
.flow-steps strong { display: block; font-size: 15px; font-weight: 600; }
.web-options { display: grid; gap: 14px; margin-top: 28px; }
.web-options > span { font-size: 13px; }
.web-options > div { display: flex; gap: 10px; }
.swatch { border: 2px solid transparent; border-radius: 50%; cursor: pointer; height: 36px; width: 36px; }
.swatch[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: 3px; }
.swatch-yellow { background: #ffe450; }.swatch-cyan { background: #73d5e9; }.swatch-coral { background: #f19c8c; }
.layout-toggle { justify-self: start; }
.web-preview { --preview-accent: #ffe450; background: #fff; color: #434343; margin-top: 24px; overflow: hidden; }
.web-preview[data-color="cyan"] { --preview-accent: #73d5e9; }.web-preview[data-color="coral"] { --preview-accent: #f19c8c; }
.web-preview-nav { align-items: center; display: flex; font-size: 10px; justify-content: space-between; padding: 14px 18px; }
.web-preview-nav strong { font-size: 12px; }.web-preview-nav span { color: #7d8688; }
.web-preview-body { display: grid; grid-template-columns: 1fr 0.75fr; min-height: 265px; }
.web-preview-body > div { background: var(--preview-accent); padding: 28px 24px; }
.web-preview-body small { font-size: 9px; }.web-preview-body h4 { font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.22; margin: 22px 0 0; }
.web-preview-body p { font-size: 11px; line-height: 1.6; max-width: 220px; }
.web-preview-button { border-bottom: 1px solid #434343; display: inline-block; font-size: 10px; font-weight: 600; margin-top: 8px; padding-bottom: 3px; }
.web-preview-body img { height: 100%; object-fit: cover; object-position: 65% center; width: 100%; }
.web-preview.is-editorial .web-preview-body { grid-template-columns: 1fr; position: relative; }
.web-preview.is-editorial .web-preview-body > div { background: rgba(255, 255, 255, 0.88); margin: 35px; max-width: 72%; position: relative; z-index: 1; }
.web-preview.is-editorial .web-preview-body img { inset: 0; position: absolute; }
.lab-bottom { align-items: center; border-top: 1px solid #4b626a; display: flex; gap: 30px; justify-content: space-between; margin-top: 45px; padding-top: 22px; }
.lab-bottom p { color: #b8c8cb; font-size: 13px; margin: 0; }
.lab-bottom .section-link { flex: none; margin-top: 0; }

.technology {
  background:
    linear-gradient(180deg, #050505, #11131a 62%, #050505);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.technology::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(180deg, transparent 0, black 18%, black 82%, transparent 100%);
  opacity: 0.16;
  position: absolute;
}

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

.section-heading {
  max-width: 830px;
}

.technology .section-heading p {
  color: rgba(255, 255, 255, 0.68);
}

.architecture {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  display: grid;
  gap: 1px;
  grid-template-columns: 300px 1fr;
  margin-top: 56px;
  overflow: hidden;
  transform-style: preserve-3d;
}

.architecture-core {
  align-content: center;
  background:
    linear-gradient(135deg, rgba(255, 228, 80, 0.95), rgba(84, 231, 255, 0.78)),
    var(--lotus-yellow);
  color: #434343;
  display: grid;
  min-height: 340px;
  padding: 30px;
}

.architecture-core span {
  align-self: start;
  font-size: 13px;
  font-weight: 600;
}

.architecture-core strong {
  align-self: end;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.05;
  max-width: 240px;
}

.architecture-grid {
  background: rgba(255, 255, 255, 0.07);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.architecture-grid article {
  background: rgba(6, 7, 10, 0.76);
  min-height: 170px;
  padding: 28px;
}

.architecture-grid span {
  color: var(--cyan);
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.architecture-grid h3 {
  font-size: 22px;
  margin: 0;
}

.architecture-grid p {
  color: rgba(255, 255, 255, 0.64);
  font-size: 14px;
  margin: 12px 0 0;
}

.code-rail {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.58);
  display: block;
  margin-top: 42px;
  overflow: hidden;
  padding: 18px 0;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #434343 5%, #434343 95%, transparent);
}

.code-rail-track,
.code-rail-group {
  align-items: center;
  display: flex;
  gap: 36px;
  width: max-content;
}

.code-rail-track {
  animation: rail 28s linear infinite;
  animation-play-state: paused;
  gap: 0;
  will-change: transform;
}

.code-rail.is-playing .code-rail-track { animation-play-state: running; }

.code-rail-group {
  flex: none;
  padding-right: 36px;
}

.code-rail-group span {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
}

.code-rail-group span:nth-child(3n + 1) { color: var(--lotus-yellow); }

.code-rail-group span::before {
  color: var(--cyan);
  content: "/ ";
  opacity: 0.75;
}

@keyframes rail {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.process {
  background: #fff;
}

.process-grid {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 48px;
  overflow: hidden;
  position: relative;
}

.process-card {
  border-right: 1px solid var(--line);
  min-height: 310px;
  padding: 26px;
  position: relative;
}

.process-card::before {
  background: var(--lotus-yellow);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: 59px;
}

.process-card::after {
  border-right: 2px solid #434343;
  border-top: 2px solid #434343;
  content: "";
  height: 9px;
  position: absolute;
  right: 14px;
  top: 55px;
  transform: rotate(45deg);
  width: 9px;
}

.process-card:last-child::after { display: none; }

.process-card:last-child {
  border-right: 0;
}

.process-card span {
  align-items: center;
  background: var(--lotus-yellow);
  border: 1px solid #434343;
  border-radius: 50%;
  color: #434343;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  height: 44px;
  justify-content: center;
  margin: 10px 0 58px;
  position: relative;
  width: 44px;
  z-index: 1;
}

.process-card h3 {
  font-size: 22px;
  margin: 0;
}

.process-card p {
  color: var(--muted);
  font-size: 14px;
  margin: 14px 0 0;
}
.process-card h3 small { color: #767b7e; display: block; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; letter-spacing: 0.08em; margin-top: 7px; }
.nav-explore { display: none; }

.insights {
  background: #fff;
}

.insights-layout {
  align-items: end;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.route-button {
  align-items: center;
  background: var(--lotus-yellow);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  gap: 14px;
  min-height: 58px;
  padding: 0 24px;
  transition: background 180ms ease, transform 180ms ease;
  white-space: nowrap;
}

.route-button span {
  background: currentColor;
  height: 1px;
  position: relative;
  width: 34px;
}

.route-button span::after {
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  content: "";
  height: 8px;
  position: absolute;
  right: 0;
  top: -4px;
  transform: rotate(45deg);
  width: 8px;
}

.route-button:hover,
.route-button:focus-visible {
  background: #fff;
  box-shadow: 0 18px 44px rgba(10, 10, 10, 0.1);
  outline: none;
  transform: translateY(-2px);
}

.insights-routes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.route-button-outline {
  background: transparent;
  border: 1px solid #b8bbc0;
}

.company {
  background: #172126;
  color: #fff;
  min-height: 650px;
  overflow: hidden;
  position: relative;
}

.company-visual,
.company-visual::after {
  inset: 0;
  position: absolute;
}

.company-visual img { height: 100%; object-fit: cover; object-position: center 48%; width: 100%; }
.company-visual::after { background: linear-gradient(90deg, rgba(10, 20, 25, 0.96) 0%, rgba(10, 20, 25, 0.78) 42%, rgba(10, 20, 25, 0.26) 100%); content: ""; }
.company-layout { align-items: center; display: flex; min-height: 400px; position: relative; z-index: 1; }
.company-copy { max-width: 590px; }
.company-copy h2 { line-height: 1.18; }
.company-copy p:not(.section-kicker) { color: #e0e6e5; line-height: 1.95; max-width: 560px; }
.company-keywords { border-top: 1px solid rgba(255, 255, 255, 0.34); display: flex; flex-wrap: wrap; gap: 30px; margin-top: 32px; padding-top: 22px; }
.company-keywords span { color: var(--lotus-yellow); font-size: 13px; font-weight: 600; }
.company-keywords span::before { border: 1px solid currentColor; border-radius: 50%; content: ""; display: inline-block; height: 8px; margin-right: 10px; width: 8px; }
.company-links { align-items: center; display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.company-links .section-link { margin-top: 0; }
.company-text-link { border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 600; padding-bottom: 4px; }
.company-visual-label { bottom: -90px; color: rgba(255, 255, 255, 0.74) !important; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px !important; position: absolute; right: 28px; text-align: right; }

.faq { background: #f5f8f9; }
.faq-layout { display: grid; gap: 64px; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.faq-list { border-top: 1px solid #c8d2d5; }
.faq-list details { border-bottom: 1px solid #c8d2d5; padding: 20px 0; }
.faq-list summary { cursor: pointer; font-size: 17px; font-weight: 600; list-style: none; padding: 6px 38px 6px 0; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 26px; font-weight: 400; position: absolute; right: 0; top: 0; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { color: var(--muted); font-size: 15px; line-height: 1.9; margin: 14px 0 2px; }
.faq-list details a { border-bottom: 1px solid currentColor; color: #517783; }

.company-table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.company-table div {
  display: grid;
  gap: 24px;
  grid-template-columns: 148px 1fr;
  min-height: 76px;
  padding: 22px 24px;
}

.company-table div + div {
  border-top: 1px solid var(--line);
}

.company-table span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.company-table strong {
  color: var(--ink);
  font-size: 15px;
}

.contact {
  background: #050505;
  color: #fff;
}

.contact-panel {
  background:
    linear-gradient(135deg, rgba(255, 228, 80, 0.18), rgba(84, 231, 255, 0.08)),
    rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: 58px;
  position: relative;
  overflow: hidden;
}

.contact-panel::before {
  background: var(--lotus-yellow);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.contact-panel h2 {
  max-width: 720px;
}

.contact-panel p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 740px;
}

.site-footer {
  background: #050505;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 28px 0;
}

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

.site-footer p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  margin: 0;
}

.site-footer .brand-copy span {
  font-size: 16px;
}

.site-footer .brand-copy strong {
  font-size: 24px;
}

.subpage {
  background: var(--paper-soft);
}

.subpage .site-header {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 48px rgba(10, 10, 10, 0.06);
  height: 78px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.sub-hero {
  background: #fff;
  padding: 160px 0 82px;
}

.sub-hero h1 {
  color: #4d4d4d;
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.18;
  margin: 0;
  text-transform: uppercase;
}

.sub-hero p {
  color: var(--muted);
  font-size: 18px;
  margin: 28px 0 0;
  max-width: 760px;
}

.sub-content {
  padding: 82px 0 128px;
}

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

.sub-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}

.sub-card h2,
.sub-card h3 {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.25;
  margin: 0;
}

.sub-card p {
  color: var(--muted);
  margin: 16px 0 0;
}

.sub-card ul {
  color: var(--muted);
  margin: 18px 0 0;
  padding-left: 1.2em;
}

.sub-card li + li {
  margin-top: 8px;
}

.sub-card.full {
  grid-column: 1 / -1;
}

.sub-section {
  background: #fff;
  padding: 96px 0;
  scroll-margin-top: 78px;
}

.sub-section-soft { background: var(--paper-soft); }

.sub-section-title,
.sub-lead h2,
.sub-cta h2,
.service-detail h2,
.article-conclusion h2 {
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.23;
  margin: 0;
}

.sub-lead { max-width: 860px; }
.sub-hero-solutions { background: linear-gradient(110deg, #f9fbff 0%, #fff 48%, #e8faff 100%); }
.solution-intro { display: grid; gap: 28px; grid-template-columns: 1fr 1.2fr; }
.solution-intro .section-kicker { grid-column: 1 / -1; margin: 0; }
.solution-intro h2 { font-size: 2.8rem; line-height: 1.3; margin: 0; }
.solution-intro > p:last-child { color: var(--muted); line-height: 1.9; margin: 0; }
.solution-list { display: grid; gap: 30px; }
.solution-case { background: #fff; border: 1px solid #dce6e8; border-top: 5px solid var(--lotus-yellow); padding: clamp(28px, 5vw, 60px); scroll-margin-top: 100px; }
.solution-case:nth-child(2) { border-top-color: #81d8d4; }
.solution-case:nth-child(3) { border-top-color: #6cc7ec; }
.solution-case-top { display: grid; gap: 24px; grid-template-columns: 180px 1fr; }
.solution-case-top > span { color: #9a8000; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; font-weight: 600; padding-top: 8px; }
.solution-case h2 { font-size: 2.8rem; line-height: 1.25; margin: 0; }
.solution-case > p { color: var(--muted); line-height: 1.9; margin: 30px 0; max-width: 850px; }
.solution-case ol { border-top: 1px solid #dce4e6; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.solution-case li { border-right: 1px solid #dce4e6; display: grid; gap: 12px; padding: 24px 20px 24px 0; }
.solution-case li + li { padding-left: 20px; }
.solution-case li:last-child { border-right: 0; }
.solution-case li strong { color: #9a8000; font-size: 13px; }
.solution-case li span { font-size: 14px; }
.solution-case-links { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 28px; }
.solution-case-links a { border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 600; }
.sub-lead > p:last-child { color: var(--muted); font-size: 18px; line-height: 1.9; margin: 28px 0 0; }

.sub-feature-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: 38px;
  background: #cdd1d3;
  border: 1px solid #cdd1d3;
}

.sub-feature {
  background: #fff;
  min-height: 225px;
  padding: 26px;
}

.sub-feature span,
.service-detail-side > span,
.article-row small,
.news-row > span {
  color: #787d81;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
}

.sub-feature h3 { font-size: 21px; line-height: 1.35; margin: 34px 0 0; }
.sub-feature p { color: var(--muted); font-size: 15px; margin: 12px 0 0; }
.sub-feature-link { color: var(--ink); display: block; transition: background 180ms ease; }
.sub-feature-link:hover { background: #fffde9; }
.chooser-grid { border-top: 1px solid #ccd8dc; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; }
.chooser-grid a { border-bottom: 1px solid #ccd8dc; color: var(--ink); display: grid; gap: 12px; padding: 30px 24px; transition: background 160ms ease; }
.chooser-grid a:nth-child(odd) { border-right: 1px solid #ccd8dc; }
.chooser-grid a:hover { background: #f4fbfc; }
.chooser-grid span { color: #ad8b00; font-size: 12px; font-weight: 600; }
.chooser-grid strong { font-size: 20px; font-weight: 600; line-height: 1.45; }
.chooser-grid small { color: #52646b; font-size: 12px; font-weight: 600; }
.chooser-note, .connection-note { color: var(--muted); font-size: 14px; margin: 20px 0 0; }
.connection-flow { border-top: 2px solid var(--lotus-yellow); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 45px; }
.connection-flow > div { border-bottom: 1px solid #cad8dd; padding: 30px 30px 30px 0; position: relative; }
.connection-flow > div:not(:last-child)::after { background: var(--lotus-yellow); border-radius: 50%; content: ""; height: 11px; position: absolute; right: 18px; top: -7px; width: 11px; }
.connection-flow span { color: #918000; display: block; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; margin-bottom: 18px; }
.connection-flow strong { display: block; font-size: 23px; font-weight: 600; }
.connection-flow p { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.company-scene-band { background: #1a252a; height: min(62vw, 620px); min-height: 330px; overflow: hidden; position: relative; }
.company-scene-band::after { background: linear-gradient(90deg, rgba(19, 29, 34, 0.7), transparent 70%); content: ""; inset: 0; position: absolute; }
.company-scene-band img { height: 100%; object-fit: cover; object-position: center; width: 100%; }
.company-scene-band .container { color: #fff; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 1; }
.company-scene-band span { color: var(--lotus-yellow); font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; }
.company-scene-band p { font-size: 2.8rem; font-weight: 600; line-height: 1.3; margin: 22px 0 0; max-width: 500px; }
.contact-form-layout { align-items: start; display: grid; gap: clamp(35px, 6vw, 90px); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); scroll-margin-top: 92px; }
.contact-form-layout > div > p:not(.section-kicker) { color: var(--muted); line-height: 1.9; }
.contact-form-aside { border-top: 2px solid var(--lotus-yellow); margin-top: 48px; padding-top: 20px; }
.contact-form-aside > span { color: #9b7c00; font-size: 13px; font-weight: 600; }
.contact-form-aside ul { color: var(--muted); display: grid; gap: 9px; list-style: none; margin: 18px 0 0; padding: 0; }
.contact-form-aside li::before { background: var(--lotus-yellow); border-radius: 50%; content: ""; display: inline-block; height: 8px; margin-right: 12px; width: 8px; }
.contact-form { background: #fff; border: 1px solid #dce5e8; border-top: 5px solid var(--lotus-yellow); display: grid; gap: 24px; padding: clamp(24px, 4vw, 45px); }
.form-row { display: grid; gap: 9px; }
.form-row label { font-size: 14px; font-weight: 600; }
.form-row label span { color: #947600; font-size: 11px; margin-left: 8px; }
.form-row input, .form-row select, .form-row textarea { background: #fff; border: 1px solid #bfcbd0; border-radius: 4px; color: var(--ink); font: inherit; min-height: 48px; padding: 11px 13px; width: 100%; }
.form-row textarea { min-height: 175px; resize: vertical; }
.form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible { border-color: #b79400; outline: 2px solid var(--lotus-yellow); outline-offset: 1px; }
.form-honeypot { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; }
.form-status { color: #765f00; font-size: 14px; margin: 0; min-height: 1.7em; }
.contact-form .button { border: 0; cursor: pointer; justify-self: start; }
.contact-form .form-help { color: var(--muted); font-size: 12px; line-height: 1.8; margin: -10px 0 0; }
.contact-direct { font-size: 13px; margin-top: 18px; overflow-wrap: anywhere; }
.contact-direct a { border-bottom: 1px solid currentColor; }
.form-consent { align-items: start; display: flex; gap: 10px; font-size: 13px; line-height: 1.8; }
.form-consent input { flex: none; margin-top: 5px; width: 18px; height: 18px; accent-color: #b69a00; }
.form-consent a { text-decoration: underline; text-underline-offset: 3px; }
.contact-form button:disabled { cursor: not-allowed; opacity: 0.55; }

.sub-cta {
  align-items: end;
  display: flex;
  gap: 32px;
  justify-content: space-between;
}

.sub-cta > div { max-width: 690px; }
.sub-cta p:last-child { color: var(--muted); margin: 20px 0 0; }
.sub-cta .section-link { flex: none; }

.service-detail-list { display: grid; }

.service-detail {
  border-top: 1px solid #cfd3d7;
  display: grid;
  gap: 54px;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  padding: 54px 0;
  scroll-margin-top: 90px;
}

.service-detail:last-child { border-bottom: 1px solid #cfd3d7; }
.service-detail p:not(.section-kicker) { color: var(--muted); font-size: 17px; line-height: 1.9; max-width: 650px; }
.service-detail-side { align-self: end; border-left: 2px solid var(--lotus-yellow); padding-left: 25px; }
.service-detail-side ul { list-style: none; margin: 14px 0 0; padding: 0; }
.service-detail-side li { border-top: 1px solid #dfe1e2; font-size: 14px; padding: 10px 0; }

.profile-table { border-top: 1px solid #cdd1d3; margin: 38px 0 0; }
.profile-table div { border-bottom: 1px solid #cdd1d3; display: grid; gap: 30px; grid-template-columns: 180px 1fr; padding: 23px 0; }
.profile-table dt { color: var(--muted); font-size: 14px; font-weight: 600; }
.profile-table dd { font-size: 16px; margin: 0; }

.sub-list-heading { align-items: end; display: flex; gap: 25px; justify-content: space-between; }
.text-route { border-bottom: 1px solid currentColor; display: inline-flex; font-size: 14px; font-weight: 600; gap: 20px; padding-bottom: 7px; }
.text-route:hover { color: #947400; }
.article-list,
.news-list { border-top: 1px solid #cdd1d3; margin-top: 38px; }
.article-row { align-items: start; border-bottom: 1px solid #cdd1d3; display: grid; gap: 24px; grid-template-columns: 48px 1fr 30px; padding: 32px 0; transition: padding 180ms ease; }
.article-row:hover { padding-left: 10px; }
.article-row h3,
.news-row h3 { font-size: 22px; line-height: 1.4; margin: 8px 0 0; }
.article-row p,
.news-row p { color: var(--muted); font-size: 15px; margin: 9px 0 0; }
.article-number { color: #aa8600; font-size: 20px; }
.article-arrow { font-size: 23px; }
.news-row { border-bottom: 1px solid #cdd1d3; display: grid; gap: 28px; grid-template-columns: 160px 1fr; padding: 30px 0; }
.news-row a { border-bottom: 1px solid currentColor; }

.article-prose { max-width: 820px; }
.article-prose > p { color: var(--ink); font-size: 17px; line-height: 2; margin: 0 0 34px; }
.article-prose h2 { font-size: 2.8rem; line-height: 1.3; margin: 64px 0 22px; }
.article-prose .text-route { margin-top: 46px; }
.article-conclusion { background: var(--paper-soft); border-left: 4px solid var(--lotus-yellow); margin-top: 60px; padding: 34px; }
.article-conclusion h2 { margin: 0; }
.article-conclusion p { color: var(--muted); font-size: 16px; line-height: 1.9; }

.back-link {
  color: var(--ink);
  display: inline-flex;
  font-weight: 600;
  margin-top: 34px;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1100px) {
  .site-nav {
    gap: 18px;
  }

  .hero-copy {
    top: 40%;
    width: 66vw;
  }

  .hero-title-stack {
    font-size: clamp(54px, 9.3vw, 112px);
  }

  .hero-figure {
    opacity: 0.78;
    right: -14vw;
    width: 72vw;
  }

  .intro-layout,
  .services-layout,
  .company-layout {
    grid-template-columns: 1fr;
  }

  .intro-title,
  .intro .section-kicker,
  .intro-text {
    grid-column: auto;
  }

  .section-sticky {
    position: static;
  }

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

  .process-card:nth-child(2) {
    border-right: 0;
  }

  .process-card:nth-child(2)::after { display: none; }

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

  .lab-panel { gap: 30px; grid-template-columns: 1fr; }
  .lab-workspace { min-height: 0; }
}

@media (max-width: 820px) {
  body.menu-open { overflow: hidden; }
  .contact-form-layout { grid-template-columns: 1fr; }
  .chooser-grid { grid-template-columns: 1fr; }
  .chooser-grid a:nth-child(odd) { border-right: 0; }
  .connection-flow { grid-template-columns: 1fr; }
  .connection-flow > div:not(:last-child)::after { display: none; }
  .solution-intro, .solution-case-top { grid-template-columns: 1fr; }
  .solution-case ol { grid-template-columns: 1fr; }
  .solution-case li, .solution-case li + li { border-bottom: 1px solid #dce4e6; border-right: 0; padding: 15px 0; }
  .site-header {
    height: 82px;
    padding: 0 18px;
  }

  .menu-toggle {
    display: block;
  }

  .site-nav {
    align-items: stretch;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(10, 10, 10, 0.12);
    border-radius: var(--radius);
    box-shadow: 0 28px 70px rgba(10, 10, 10, 0.14);
    display: grid;
    gap: 0;
    left: 18px;
    opacity: 0;
    padding: 10px;
    pointer-events: none;
    position: absolute;
    right: 18px;
    top: calc(100% + 8px);
    transform: translateY(-10px);
    transition: opacity 160ms ease, transform 160ms ease;
    max-height: calc(100svh - 104px);
    overflow-y: auto;
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-nav a {
    color: #4d4d4d;
    font-size: 15px;
    padding: 15px 14px;
  }
  .nav-explore { border-top: 1px solid #dce3e6; display: grid; gap: 18px; padding: 18px 10px 8px; }
  .nav-explore-group { display: grid; gap: 2px; }
  .nav-explore-group > span { color: #738087; font-size: 11px; font-weight: 600; padding: 0 8px 5px; }
  .site-nav .nav-explore-group a { border: 0; font-size: 13px; padding: 7px 8px; }
  .site-nav .nav-explore-contact { align-items: center; background: var(--lotus-yellow); border-radius: 4px; display: flex; font-weight: 600; justify-content: space-between; margin-top: 3px; }

  .site-nav .nav-cta {
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
  }

  .section-pad {
    padding: 86px 0;
  }

  .service-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    min-height: 0;
    padding: 34px;
  }

  .service-art { grid-column: 1; grid-row: 4; height: 270px; margin-top: 12px; }
  .service-card h3, .service-card p, .service-card ul, .service-card-action { grid-column: 1; }
  .card-index { margin-bottom: 22px; }
  .service-card ul { margin-top: 24px; }

  .container {
    padding: 0 18px;
  }

  .hero-copy {
    left: 18px;
    top: 36%;
    width: calc(100vw - 36px);
  }

  .hero-title-stack {
    font-size: clamp(42px, 12.5vw, 86px);
  }

  .hero-figure {
    bottom: -2vh;
    opacity: 0.42;
    right: -28vw;
    width: 112vw;
  }

  .intro-title,
  .section-sticky h2,
  .section-heading h2,
  .company-copy h2,
  .contact-panel h2 {
    font-size: 2.8rem;
  }

  .intro-title {
    font-size: clamp(2.05rem, 9vw, 2.8rem);
    line-height: 1.3;
    max-width: 350px;
  }

  .intro-text {
    font-size: 16px;
  }

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

  .architecture-core {
    min-height: 220px;
  }

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

  .needs-grid { grid-template-columns: 1fr; }
  .need-item { border-left: 1px solid #cfd6d9; min-height: 0; }
  .need-item h3 { margin-top: 25px; }
  .lab-intro { gap: 18px; grid-template-columns: 1fr; }
  .lab-tabs button { flex: none; }
  .lab-bottom { align-items: start; flex-direction: column; }

  .company-table div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .insights-layout {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .contact-panel {
    padding: 38px 24px;
  }

  .sub-hero {
    padding: 124px 0 64px;
  }

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

@media (max-width: 560px) {
  .brand-copy {
    gap: 5px;
  }

  .brand-copy span {
    font-size: 16px;
  }

  .brand-copy strong {
    font-size: 24px;
  }

  .hero-title-stack {
    font-size: clamp(34px, 10.8vw, 46px);
  }

  .hero-title-stack small {
    font-size: 0.38em;
  }

  .hero-figure {
    bottom: 0;
    opacity: 0.34;
    right: -42vw;
    width: 138vw;
  }

  .button {
    width: 100%;
  }

  .intro-title,
  .section-sticky h2,
  .section-heading h2,
  .company-copy h2,
  .contact-panel h2 {
    font-size: 2.8rem;
  }

  .intro-title {
    font-size: clamp(1.85rem, 8vw, 2.8rem);
    line-height: 1.3;
    max-width: 360px;
  }

  .service-card {
    padding: 26px;
  }

  .service-card h3 {
    font-size: 2.25rem;
  }

  .service-card p { font-size: 15px; margin-top: 16px; }
  .service-art { height: 220px; }
  .lab-panel { padding-top: 28px; }
  .lab-workspace { padding: 18px; }
  .cash-kpis { gap: 12px; }
  .cash-kpis strong { font-size: 1.25rem; }
  .web-preview-body { grid-template-columns: 1fr 0.6fr; }
  .web-preview-body > div { padding: 20px; }
  .web-preview-body h4 { font-size: 1.65rem; }
  .web-preview-nav span { font-size: 8px; }

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

  .process-card {
    border-right: 0;
    min-height: auto;
    padding: 20px 24px 20px 80px;
  }

  .process-card::before { height: auto; left: 45px; right: auto; top: 0; bottom: 0; width: 2px; }
  .process-card::after { border-right: 2px solid #434343; border-top: 2px solid #434343; right: auto; left: 41px; top: auto; bottom: 12px; transform: rotate(135deg); }
  .process-card:nth-child(2)::after { display: block; }
  .process-card:last-child::after { display: none; }
  .process-card span { margin: 4px 0 16px -57px; }

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

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .scroll-cue {
    display: none;
  }

  .sub-cta { align-items: start; flex-direction: column; }
  .service-detail { gap: 18px; grid-template-columns: 1fr; }
  .profile-table div { gap: 5px; grid-template-columns: 1fr; }
  .sub-list-heading { align-items: start; flex-direction: column; }
  .news-row { gap: 7px; grid-template-columns: 1fr; }
  .article-row { gap: 12px; grid-template-columns: 32px 1fr 20px; }
  .sub-section { padding: 72px 0; }
  .sub-section-title, .sub-lead h2, .sub-cta h2, .service-detail h2, .article-prose h2 { font-size: 2.8rem; }
}

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

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

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

  .loader-messages span { animation: none; opacity: 0; }
  .loader-messages span:last-child { opacity: 1; }
  .service-art img { transform: none; }
}

.process.section-pad { min-height: 165svh; }
.process > .container { position: sticky; top: 108px; }
.process .process-grid { background: transparent; border: 0; border-radius: 0; gap: 18px; overflow: visible; }
.process .process-card {
  --process-focus: 0;
  --process-scale: 1;
  --process-lift: 0px;
  --process-title-color: #cfe0e1;
  background-color: #17282d;
  background-image: linear-gradient(rgba(115, 213, 233, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(115, 213, 233, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  border: 1px solid #33525b;
  border-radius: 6px;
  box-shadow: 0 14px 40px rgba(19, 42, 48, 0.12);
  color: #dce8e8;
  min-height: 330px;
  opacity: 1;
  overflow: hidden;
  padding: 30px 24px;
  transform: translate3d(0, var(--process-lift), 0) scale(var(--process-scale));
  transform-origin: center;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  will-change: transform;
  z-index: 1;
}
.process .process-card.is-active { border-color: #ffe450; box-shadow: 0 25px 65px rgba(14, 46, 53, 0.25), 0 0 24px rgba(255, 228, 80, 0.17); z-index: 3; }
.process .process-card::before { background: linear-gradient(90deg, #ffe450, #73d5e9); height: 3px; left: 0; right: 0; top: 0; }
.process .process-card::after { border: 0; color: #73d5e9; content: "+"; font: 600 28px/1 "SFMono-Regular", Consolas, monospace; height: auto; right: 22px; top: 24px; transform: none; width: auto; }
.process .process-card:last-child::after { display: block; }
.process .process-card > span { background: rgba(255, 228, 80, 0.1); border: 1px solid #ffe450; border-radius: 3px; color: #ffe450; height: 38px; margin: 0 0 85px; width: 54px; }
.process .process-card h3 { color: var(--process-title-color); font-size: 22px; line-height: 1.4; transition: color 120ms linear; }
.process .process-card h3 small { color: #7fd8e5; margin-top: 10px; }
.process .process-card p { color: #b5c7ca; line-height: 1.8; }
@media (max-width: 1100px) {
  .process.section-pad { min-height: 185svh; }
  .process .process-card { border: 1px solid #33525b; }
}
@media (max-width: 820px) {
  .process.section-pad { min-height: 0; }
  .process > .container { position: relative; top: auto; }
  .process .process-grid { gap: 12px; }
  .process .process-card { min-height: 205px; padding: 24px; }
  .process .process-card + .process-card { border: 1px solid #33525b; }
  .process .process-card > span { margin: 0 0 30px; }
  .process .process-card::after { border: 0; right: 18px; top: 18px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .process .process-card { transform: none; }
}

.insights { background: #eef5f5; }
.insights-heading { align-items: end; display: grid; gap: 55px; grid-template-columns: 1fr minmax(240px, 360px); }
.insights-heading h2 { font-size: 2.8rem; line-height: 1.18; margin: 0; }
.insights-heading > p { border-left: 3px solid var(--lotus-yellow); color: #5a686b; line-height: 1.9; margin: 0; padding-left: 22px; }
.insights-features { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 54px; }
.insight-feature { background: #fff; border: 1px solid #d5e3e5; border-radius: 6px; color: var(--ink); display: block; overflow: hidden; transition: box-shadow 220ms ease, transform 220ms ease; }
.insight-feature:hover { box-shadow: 0 24px 50px rgba(34, 65, 70, 0.13); transform: translateY(-5px); }
.insight-feature img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; width: 100%; }
.insight-feature > div { padding: 28px; }
.insight-feature span { color: #968000; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; font-weight: 600; }
.insight-feature h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.42; margin: 14px 0 0; }
.insight-feature p { color: var(--muted); font-size: 14px; margin: 14px 0 20px; }
.insight-feature b { border-bottom: 1px solid currentColor; font-size: 13px; padding-bottom: 4px; }
.insights-footer { align-items: center; display: flex; gap: 26px; justify-content: space-between; margin-top: 30px; }
.insights-footer .section-link { margin-top: 0; }

.faq { background: #f7f9f8; }
.faq-layout { gap: clamp(40px, 7vw, 110px); }
.faq-layout .section-heading { align-self: start; position: sticky; top: 120px; }
.faq-layout .section-heading::before { color: #d2b634; content: "Q"; display: block; font-family: "SFMono-Regular", Consolas, monospace; font-size: 95px; font-weight: 600; line-height: 0.9; margin-bottom: 26px; }
.faq-layout .section-heading .section-kicker { color: #957b00; }
.faq-list { border: 0; counter-reset: faq; display: grid; gap: 10px; }
.faq-list details { background: #fff; border: 1px solid #d7e0e1; border-radius: 5px; counter-increment: faq; padding: 0 22px; transition: border-color 180ms ease, box-shadow 180ms ease; }
.faq-list details[open] { border-color: #dac24d; box-shadow: 0 12px 30px rgba(61, 86, 87, 0.08); }
.faq-list summary { align-items: center; display: flex; gap: 17px; line-height: 1.5; min-height: 94px; padding: 17px 35px 17px 0; }
.faq-list summary::before { color: #b29712; content: counter(faq, decimal-leading-zero); flex: none; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; font-weight: 600; }
.faq-list summary::after { color: #73898c; right: 0; top: 50%; transform: translateY(-50%); }
.faq-list details p { border-top: 1px solid #e5ecec; margin: 0; padding: 18px 0 22px 38px; }

.contact { background: #142025 url("assets/page-contact.jpg") center 45% / cover no-repeat; min-height: 700px; position: relative; }
.contact::before { background: linear-gradient(90deg, rgba(12, 27, 32, 0.94), rgba(12, 27, 32, 0.72) 48%, rgba(12, 27, 32, 0.12)); content: ""; inset: 0; position: absolute; }
.contact .container { position: relative; z-index: 1; }
.contact-panel { background: none; border: 0; border-radius: 0; box-shadow: none; max-width: 840px; padding: 98px 0; }
.contact-panel::before { height: 3px; right: auto; top: 40px; width: 100px; }
.contact-panel .section-kicker { color: var(--lotus-yellow); }
.contact-panel h2 { font-size: 2.8rem; line-height: 1.18; }
.contact-panel p:not(.section-kicker) { color: #e3eceb; font-size: 17px; line-height: 1.9; }
.contact .button-ghost { border-color: rgba(255, 255, 255, 0.67); }
@media (max-width: 820px) {
  .insights-heading, .insights-features { grid-template-columns: 1fr; }
  .insights-heading { gap: 24px; }
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faq-layout .section-heading { position: static; }
  .contact { min-height: 640px; }
  .contact-panel { padding: 85px 0; }
  .contact::before { background: linear-gradient(90deg, rgba(12, 27, 32, 0.94), rgba(12, 27, 32, 0.57)); }
}
@media (max-width: 560px) {
  .insights-footer { align-items: start; flex-direction: column; }
  .faq-layout .section-heading h2 { font-size: clamp(2rem, 8vw, 2.4rem); text-wrap: balance; }
  .faq-list summary { min-height: 86px; }
  .faq-list details p { padding-left: 0; }
  .contact-panel { padding: 74px 0; }
}

.subpage .sub-hero {
  align-items: end;
  background-color: #17272d;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  display: flex;
  min-height: min(760px, 84svh);
  padding: 170px 0 96px;
  position: relative;
}
.subpage .sub-hero::before { background: linear-gradient(90deg, rgba(8, 25, 31, 0.89) 0%, rgba(8, 25, 31, 0.61) 42%, rgba(8, 25, 31, 0.02) 100%); content: ""; inset: 0; position: absolute; }
.subpage .sub-hero .container { position: relative; width: 100%; z-index: 1; }
.subpage .sub-hero .container::before { background: var(--lotus-yellow); content: ""; display: block; height: 3px; margin-bottom: 26px; width: 86px; }
.subpage .sub-hero .section-kicker { color: var(--lotus-yellow); }
.subpage .sub-hero h1 { color: #fff; max-width: 900px; text-shadow: 0 3px 24px rgba(8, 25, 31, 0.25); }
.subpage .sub-hero p:not(.section-kicker) { color: #e9f0ef; line-height: 1.85; max-width: 620px; }
.subpage .sub-hero .section-link { color: var(--ink); }
.hero-visual-note { color: rgba(255, 255, 255, 0.8); display: block; font-size: 10px; margin-top: 25px; }
.page-about .sub-hero { background-image: url("assets/page-about.jpg"); }
.page-service .sub-hero { background-image: url("assets/page-service.jpg"); }
.page-solutions .sub-hero { background-image: url("assets/page-solutions.jpg"); }
.page-company .sub-hero { background-image: url("assets/page-company.jpg"); }
.page-blog .sub-hero { background-image: url("assets/page-blog.jpg"); }
.page-news .sub-hero { background-image: url("assets/page-news.jpg"); }
.page-contact .sub-hero { background-image: url("assets/page-contact.jpg"); }
.page-article-ai .sub-hero { background-image: url("assets/page-article-ai.jpg"); }
.page-article-web .sub-hero { background-image: url("assets/page-article-web.jpg"); }
.page-article-cash .sub-hero { background-image: url("assets/page-article-cash.jpg"); }
.page-article-ai .sub-hero::before, .page-article-web .sub-hero::before { background: linear-gradient(90deg, rgba(12, 27, 32, 0.88), rgba(12, 27, 32, 0.42) 65%, rgba(12, 27, 32, 0.02)); }
.subpage .sub-section-title { position: relative; }
.subpage .sub-feature { border-top: 3px solid var(--lotus-yellow); }
.subpage .sub-feature:nth-child(3n + 2) { border-top-color: #83d5df; }
.subpage .sub-feature:nth-child(3n) { border-top-color: #9bd5ab; }
.service-detail-list { counter-reset: service; }
.service-detail { counter-increment: service; position: relative; }
.service-detail::before { color: #e2ebec; content: counter(service, decimal-leading-zero); font-family: "SFMono-Regular", Consolas, monospace; font-size: 85px; font-weight: 600; line-height: 1; position: absolute; right: 10px; top: 25px; z-index: 0; }
.service-detail > * { position: relative; z-index: 1; }
.need-item { min-height: 495px; }
.need-item img { aspect-ratio: 4 / 3; display: block; height: 185px; margin: 16px 0 0; object-fit: contain; width: 100%; }
.need-item h3 { margin-top: 18px; }

.page-about .sub-feature-grid .sub-feature::before,
.page-company .sub-feature-grid .sub-feature::before,
.page-contact .sub-feature-grid .sub-feature::before,
.page-service .sub-section-soft .sub-feature-grid .sub-feature::before {
  background-color: #f6fafb;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 155px;
  margin: -6px -6px 22px;
}
.page-about .sub-feature:nth-child(1)::before,
.page-company .sub-feature:nth-child(3)::before { background-image: url("assets/visual-learning.png"); }
.page-about .sub-feature:nth-child(2)::before,
.page-company .sub-feature:nth-child(1)::before,
.page-contact .sub-feature:nth-child(1)::before { background-image: url("assets/visual-workflow.jpg"); }
.page-about .sub-feature:nth-child(3)::before,
.page-company .sub-feature:nth-child(2)::before,
.page-contact .sub-feature:nth-child(2)::before { background-image: url("assets/visual-data.jpg"); }
.page-contact .sub-feature:nth-child(3)::before,
.page-service .sub-section-soft .sub-feature:nth-child(3)::before { background-image: url("assets/visual-growth.jpg"); }
.page-service .sub-section-soft .sub-feature:nth-child(1)::before { background-image: url("assets/visual-data.jpg"); }
.page-service .sub-section-soft .sub-feature:nth-child(2)::before { background-image: url("assets/visual-workflow.jpg"); }
.page-about .sub-feature-grid .sub-feature h3,
.page-company .sub-feature-grid .sub-feature h3,
.page-contact .sub-feature-grid .sub-feature h3,
.page-service .sub-section-soft .sub-feature-grid .sub-feature h3 { margin-top: 18px; }

.page-service .service-detail-side::before {
  background-color: #f7fafb;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 210px;
  margin: 0 0 18px;
}
.page-service #generative-ai .service-detail-side::before { background-image: url("assets/service-consulting.png"); }
.page-service #training .service-detail-side::before { background-image: url("assets/service-training.png"); }
.page-service #development .service-detail-side::before { background-image: url("assets/service-development.png"); }
.page-service #marketing .service-detail-side::before { background-image: url("assets/service-marketing.png"); }
.page-service #creative .service-detail-side::before { background-image: url("assets/service-creative.png"); }

.page-solutions .solution-case::before {
  aspect-ratio: 4 / 3;
  background-color: #f8fbfc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  float: right;
  margin: 0 0 26px 36px;
  width: min(33%, 350px);
}
.page-solutions .solution-case:nth-child(1)::before,
.page-solutions .solution-case:nth-child(3)::before { background-image: url("assets/visual-data.jpg"); }
.page-solutions .solution-case:nth-child(2)::before { background-image: url("assets/visual-workflow.jpg"); }
.page-solutions .solution-case:nth-child(4)::before,
.page-solutions .solution-case:nth-child(6)::before { background-image: url("assets/visual-growth.jpg"); }
.page-solutions .solution-case:nth-child(5)::before { background-image: url("assets/visual-learning.png"); }
.page-solutions .solution-case ol { clear: both; }

.page-blog .article-row { grid-template-columns: 48px minmax(0, 1fr) 188px 30px; }
.page-blog .article-row::before,
.page-news .news-row::before {
  aspect-ratio: 16 / 10;
  background-position: center;
  background-size: cover;
  content: "";
  display: block;
  grid-column: 3;
  grid-row: 1;
  width: 100%;
}
.page-blog .article-row:nth-child(1)::before { background-image: url("assets/page-article-ai.jpg"); }
.page-blog .article-row:nth-child(2)::before { background-image: url("assets/page-article-web.jpg"); }
.page-blog .article-row:nth-child(3)::before { background-image: url("assets/page-article-cash.jpg"); }
.page-blog .article-row > .article-number { grid-column: 1; grid-row: 1; }
.page-blog .article-row > div { grid-column: 2; grid-row: 1; }
.page-blog .article-row > .article-arrow { grid-column: 4; grid-row: 1; }
.page-news .news-row { grid-template-columns: 130px minmax(0, 1fr) 180px; }
.page-news .news-row:nth-child(1)::before { background-image: url("assets/visual-growth.jpg"); }
.page-news .news-row:nth-child(2)::before { background-image: url("assets/visual-data.jpg"); }
.page-news .news-row:nth-child(3)::before { background-image: url("assets/page-contact.jpg"); }
.page-news .news-row > span { grid-column: 1; grid-row: 1; }
.page-news .news-row > div { grid-column: 2; grid-row: 1; }
@media (max-width: 820px) {
  .need-item { min-height: 0; }
  .need-item img { height: clamp(180px, 42vw, 260px); }
  .page-solutions .solution-case::before { float: none; margin: 0 auto 25px; max-width: 440px; width: 100%; }
  .page-blog .article-row { grid-template-columns: 40px minmax(0, 1fr) 135px 25px; }
  .page-news .news-row { grid-template-columns: 100px minmax(0, 1fr) 125px; }
}
@media (max-width: 560px) {
  .page-solutions .solution-case::before { float: none; margin: 0 auto 25px; width: 100%; }
  .page-blog .article-row { grid-template-columns: 32px minmax(0, 1fr) 20px; }
  .page-blog .article-row::before { grid-column: 2; grid-row: 2; margin-top: 12px; max-width: 280px; }
  .page-blog .article-row > .article-arrow { grid-column: 3; }
  .page-news .news-row { grid-template-columns: 1fr; }
  .page-news .news-row > span { grid-column: 1; grid-row: 1; }
  .page-news .news-row > div { grid-column: 1; grid-row: 2; }
  .page-news .news-row::before { grid-column: 1; grid-row: 3; margin-top: 10px; max-width: 280px; }
}
@media (max-width: 820px) {
  .subpage .sub-hero { min-height: 66svh; padding: 150px 0 74px; }
  .subpage .sub-hero::before { background: linear-gradient(90deg, rgba(8, 25, 31, 0.88), rgba(8, 25, 31, 0.38)); }
}
@media (max-width: 560px) {
  .subpage .sub-hero { min-height: 600px; padding: 130px 0 70px; }
  .subpage .sub-hero h1 { font-size: clamp(2rem, 7.5vw, 2.4rem); }
  .subpage .sub-hero p:not(.section-kicker) { font-size: 15px; }
  .service-detail::before { font-size: 58px; }
}

html { scrollbar-gutter: stable; }
.menu-toggle { background: var(--lotus-yellow); border: 1px solid rgba(67,67,67,.12); border-radius: 50%; display: block; flex: none; height: 60px; width: 60px; transition: box-shadow 220ms ease, background 220ms ease; }
.menu-toggle:hover { box-shadow: 0 0 0 7px rgba(255,228,80,.2); }
.menu-toggle:focus-visible { outline: 2px solid #434343; outline-offset: 5px; }
.menu-toggle span:not(.sr-only) { height: 2px; left: 17px; width: 26px; transition: transform 320ms ease, top 320ms ease, width 320ms ease, left 320ms ease; }
.menu-toggle span:first-child { top: 23px; }
.menu-toggle span:nth-child(2) { left: 25px; top: 33px; width: 18px; }
.menu-toggle::after { background: #434343; border-radius: 50%; content: ""; height: 3px; left: 17px; position: absolute; top: 32.5px; transition: opacity 200ms ease, transform 320ms ease; width: 3px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 29px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { left: 17px; top: 29px; transform: rotate(-45deg); width: 26px; }
.menu-toggle[aria-expanded="true"]::after { opacity: 0; transform: translateX(8px); }
.menu-scrim { background: rgba(28,36,38,.28); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity 300ms ease; z-index: 99; }
.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }
.menu-open .site-header { background: #fff; }
.site-nav { align-items: start; background: #f8faf9; border: 1px solid #dce4e3; border-top: 3px solid var(--lotus-yellow); border-radius: 8px; box-shadow: 0 25px 60px rgba(32,44,45,.15); display: grid; gap: 0 48px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); left: auto; max-height: calc(100dvh - 145px); opacity: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px 38px; pointer-events: none; position: absolute; right: 24px; top: calc(100% + 10px); transform: translateY(-14px); transition: opacity 280ms ease, transform 350ms cubic-bezier(.22,1,.36,1), visibility 0s 350ms; visibility: hidden; width: min(1040px, calc(100vw - 48px)); }
.site-header.is-scrolled .site-nav, .subpage .site-nav { max-height: calc(100dvh - 102px); }
.site-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; visibility: visible; }
.site-nav > a { border-bottom: 1px solid #dbe2e2; border-radius: 0; display: flex; font-size: 26px; grid-column: 1; padding: 14px 0; width: 100%; }
.site-nav .nav-label { display: grid; gap: 4px; line-height: 1.3; min-width: 0; }
.site-nav .nav-label small { color: #697575; font-size: 12px; font-weight: 400; line-height: 1.5; }
.site-nav .nav-cta .nav-label { text-align: center; }
.site-nav .nav-cta .nav-label small { color: #565344; }
.site-nav a:focus-visible { outline: 2px solid #ac9000; outline-offset: 3px; }
.site-nav > a:not(.nav-cta)::after { content: "↗"; font-size: 18px; margin-left: auto; }
.site-nav .nav-cta { border: 0; border-radius: 4px; font-size: 19px; justify-content: center; margin-top: 18px; min-height: 50px; padding: 10px 18px; }
.nav-explore { border-left: 1px solid #dbe2e2; display: grid; gap: 24px; grid-column: 2; grid-row: 1 / span 5; padding: 8px 0 0 34px; }
.nav-explore-group { display: grid; gap: 5px; }
.nav-explore-group > span { color: #7a7f7f; font-size: 11px; font-weight: 600; margin-bottom: 5px; }
.site-nav .nav-explore-group a { border-radius: 2px; font-size: 14px; padding: 6px 0; }
.site-nav .nav-explore-contact { align-items: center; border-top: 1px solid #dbe2e2; border-radius: 0; color: #6b621f; display: flex; font-size: 14px; justify-content: space-between; padding: 15px 0 0; }

.process.is-unpinned { min-height: 0; }
.process.is-unpinned > .container { position: relative; top: auto; }
details:has(> .disclosure-content) { overflow: hidden; }
.disclosure-content { display: flow-root; }
.faq-list details summary::after, .faq-list details[open] summary::after { content: "+"; transition: transform 300ms ease, color 300ms ease; }
.faq-list details.is-expanded summary::after { color: #ac9000; transform: translateY(-50%) rotate(45deg); }

/* Editorial layouts share the same source in static and WordPress editions. */
.journal-topics { display: flex; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid #dce4e5; padding-bottom: 30px; }
.journal-topics a { border: 1px solid #d2dde0; border-radius: 4px; padding: 10px 18px; font-size: 15px; font-weight: 600; transition: background 180ms ease, border-color 180ms ease; }
.journal-topics a:hover { background: #fff4a5; border-color: #d8bd31; }
.journal-topic { margin-top: 72px; scroll-margin-top: 120px; }
.journal-topic-heading { align-items: end; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 28px; }
.journal-topic h2 { color: #434343; font-size: 2.8rem; font-weight: 600; line-height: 1.35; }
.journal-topic-heading p { color: #626e72; }
.journal-grid { display: grid; gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.journal-card { border: 1px solid #dce4e5; border-radius: 6px; background: #fff; display: flex; flex-direction: column; overflow: hidden; min-width: 0; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.journal-card:hover { border-color: #d0b940; transform: translateY(-4px); box-shadow: 0 12px 26px rgba(67, 67, 67, .08); }
.journal-card > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.journal-card > div { padding: 24px; display: flex; flex: 1; flex-direction: column; align-items: start; }
.journal-category { color: #6d620e; background: #fff6bd; padding: 4px 9px; font-size: 12px; font-weight: 600; border-radius: 3px; }
.journal-card h3 { color: #434343; font-size: 1.3rem; line-height: 1.65; font-weight: 600; margin: 18px 0 12px; }
.journal-card p { color: #627075; font-size: 14px; line-height: 1.9; margin-bottom: 22px; }
.journal-read { border-bottom: 1px solid #a3afb2; font-size: 13px; font-weight: 600; margin-top: auto; padding-bottom: 5px; }
.subpage .journal-hero { background: #f8faf9; min-height: 0; padding: 135px 0 34px; }
.subpage .journal-hero::before, .subpage .journal-hero .container::before { display: none; }
.subpage .journal-hero .section-kicker { color: #77691e; margin-top: 32px; }
.subpage .journal-hero h1 { color: #434343; text-shadow: none; font-size: 2.8rem; font-weight: 600; max-width: 1060px; line-height: 1.5; }
.subpage .journal-hero p.journal-byline { color: #6f7779; font-size: 13px; margin: 20px 0 30px; }
.journal-breadcrumb { color: #667176; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.journal-breadcrumb a { border-bottom: 1px solid #abb5b8; }
.journal-cover { margin: 28px 0 0; }
.journal-cover img { aspect-ratio: 16 / 9; display: block; height: auto; max-width: 100%; width: 100%; }
.journal-cover figcaption { color: #6d787c; font-size: 11px; line-height: 1.7; margin-top: 9px; }
.page-journal .article-body { padding-top: 50px; }
.article-prose .journal-lead, .journal-section > p, .journal-consult > p { color: #434343; font-size: 17px; line-height: 2.05; margin: 0 0 25px; }
.journal-summary { border-left: 4px solid #ffe447; background: #f6f9fa; padding: 24px 28px; margin: 38px 0; }
.journal-summary ul, .journal-checklist { list-style: none; padding: 0; margin: 18px 0 0; }
.journal-summary li { display: flex; gap: 12px; margin-top: 10px; font-size: 16px; line-height: 1.9; }
.journal-summary li::before { content: ""; width: 7px; height: 7px; margin-top: 11px; flex: 0 0 7px; background: #b39716; }
.journal-toc { border-top: 1px solid #d8e1e3; border-bottom: 1px solid #d8e1e3; padding: 24px 0; }
.journal-toc ol { padding-left: 25px; margin: 18px 0 0; }
.journal-toc li { font-size: 15px; line-height: 1.8; padding: 5px 0; }
.journal-toc a:hover, .journal-sources a:hover { text-decoration: underline; }
.article-prose h2[id] { scroll-margin-top: 130px; overflow-wrap: anywhere; font-weight: 600; }
.journal-table-scroll { overflow-x: auto; margin: 24px 0; border: 1px solid #dce5e5; }
.journal-table { border-collapse: collapse; min-width: 540px; width: 100%; font-size: 15px; color: #434343; }
.journal-table caption { text-align: left; padding: 16px 20px; background: #f7fafb; font-weight: 600; }
.journal-table th, .journal-table td { text-align: left; border-bottom: 1px solid #e0e6e7; padding: 16px 18px; line-height: 1.8; }
.journal-table thead { background: #fff5b6; }
.journal-table th { font-weight: 600; }
.journal-table tbody tr:last-child > * { border-bottom: 0; }
.journal-checklist li { border-bottom: 1px solid #dfe6e7; padding: 15px 0 15px 28px; line-height: 1.9; position: relative; font-size: 16px; }
.journal-checklist li::before { content: ""; position: absolute; left: 0; top: 22px; width: 12px; height: 12px; border: 1px solid #9b8b27; background: #fff5bd; }
.journal-consult { border-top: 3px solid #e4c535; border-bottom: 1px solid #dce6e8; padding: 42px 0; margin: 64px 0 0; }
.article-prose .journal-consult h2, .journal-consult h2 { color: #434343; font-size: 2.8rem; line-height: 1.45; margin: 18px 0 24px; font-weight: 600; }
.journal-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 22px; margin-top: 28px; }
.journal-related { list-style: none; padding: 0; margin: 22px 0; }
.journal-related li { border-bottom: 1px solid #dce5e6; }
.journal-related a { display: flex; justify-content: space-between; gap: 22px; font-size: 17px; line-height: 1.8; padding: 22px 0; }
.journal-related a:hover { color: #817116; }
.journal-sources { padding-top: 28px; margin-top: 36px; border-top: 1px solid #dfe7e8; color: #68767b; font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.journal-sources ul { padding-left: 18px; }
.journal-section .journal-reference { color: #67757b; font-size: 13px; line-height: 1.8; margin-top: -12px; }
.journal-reference a, .journal-sources a { border-bottom: 1px solid #b1c5ca; }
.journal-grid a:focus-visible, .journal-topics a:focus-visible, .journal-table-scroll:focus-visible { outline: 3px solid #ae9014; outline-offset: 4px; }
@media (max-width: 1020px) { .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .journal-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .journal-topic-heading { display: block; }
  .journal-topic-heading > p { margin-top: 18px; }
  .subpage .journal-hero { padding-top: 118px; }
  .subpage .journal-hero h1 { font-size: clamp(1.9rem, 7.5vw, 2.4rem); line-height: 1.35; overflow-wrap: anywhere; }
  .journal-card > div { padding: 22px; }
  .journal-summary { padding: 20px; }
  .journal-actions { align-items: start; flex-direction: column; }
  .journal-actions .button { white-space: normal; text-align: center; max-width: 100%; }
  .journal-section > p, .article-prose .journal-lead { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .journal-card { transition: none; } .journal-card:hover { transform: none; } }
.flow-options button, .layout-toggle, .swatch, .lab-tabs button { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.web-preview, .web-preview-button, .web-preview-body { transition: background-color 300ms ease, color 300ms ease; }

.site-footer { background: #252d2f; border-top: 4px solid var(--lotus-yellow); color: #f5f7f6; padding: 72px 0 25px; }
.footer-heading { align-items: center; display: flex; gap: 32px; justify-content: space-between; padding-bottom: 48px; }
.site-footer .brand-copy span { font-size: 18px; }
.site-footer .brand-copy strong { font-size: 42px; }
.site-footer .footer-heading p { color: #bec9c9; font-size: 17px; margin-top: 22px; }
.footer-contact { align-items: center; border-bottom: 1px solid #879190; color: #f5f7f6; display: flex; gap: 40px; padding: 18px 0; }
.footer-contact > span:last-child { align-items: center; background: var(--lotus-yellow); border-radius: 50%; color: #434343; display: flex; font-size: 25px; height: 54px; justify-content: center; transition: transform 220ms ease; width: 54px; }
.footer-contact:hover > span:last-child { transform: rotate(45deg); }
.footer-sitemap { border-top: 1px solid #4b5556; display: grid; gap: 36px; grid-template-columns: .85fr 1.25fr 1fr 1fr; padding: 42px 0 52px; }
.footer-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.footer-group h2 { color: var(--lotus-yellow); font-size: 13px; font-weight: 600; line-height: 1.6; margin: 0 0 9px; }
.footer-group a { color: #d4dddd; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; transition: color 180ms ease, transform 180ms ease; }
.footer-group a:hover { color: #fff; transform: translateX(3px); }
.site-footer a:focus-visible { outline: 2px solid var(--lotus-yellow); outline-offset: 5px; }
.footer-bottom { align-items: center; border-top: 1px solid #4b5556; display: flex; gap: 20px; justify-content: space-between; padding-top: 22px; }
.footer-bottom a { color: #d4dddd; font-size: 12px; }
.footer-bottom a span { color: var(--lotus-yellow); margin-left: 15px; }
@media (max-width: 820px) {
  .menu-toggle { transform: scale(.85); transform-origin: right center; }
  .site-nav { gap: 0; grid-template-columns: 1fr; left: 18px; max-height: calc(100dvh - 104px); padding: 18px 24px; right: 18px; width: auto; }
  .site-nav > a { font-size: 19px; padding: 12px 0; }
  .nav-explore { border-left: 0; border-top: 1px solid #dbe2e2; gap: 18px; grid-column: 1; grid-row: auto; margin-top: 22px; padding: 22px 0 0; }
  .site-nav .nav-explore-contact { background: transparent; }
  .footer-sitemap { gap: 36px 24px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-heading { align-items: start; flex-direction: column; }
  .footer-contact { width: min(100%,360px); justify-content: space-between; }
}
@media (max-width: 480px) {
  .site-footer { padding-top: 48px; }
  .footer-sitemap { gap: 32px 16px; }
  .footer-group a { font-size: 12px; }
  .footer-group h2 { font-size: 12px; }
  .footer-bottom { align-items: start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav, .menu-toggle, .menu-toggle span, .menu-toggle::after, .menu-scrim, .faq-list summary::after, .footer-group a, .footer-contact > span:last-child, .flow-options button, .layout-toggle, .swatch, .lab-tabs button { transition: none !important; }
}

/* Editorial blocks keep the reading order visible without relying on motion. */
.article-prose:has(.journal-reader) { max-width: 900px; }
.article-prose strong, .journal-summary li { color: #3c4849; font-weight: 600; }
.journal-reader { border-bottom: 1px solid #dce3e2; padding-bottom: 22px; margin-bottom: 28px; }
.journal-reader > span, .journal-example > span { color: #536362; font-size: 13px; font-weight: 600; }
.journal-reader p { font-size: 16px; line-height: 1.8; margin: 7px 0 0; }
.article-prose .journal-lead { font-size: 19px; line-height: 1.95; color: #434343; }
.journal-summary { background: #fffbea; border: 0; border-left: 4px solid #e5be16; margin: 36px 0; }
.journal-summary ul { display: grid; gap: 13px; padding-left: 22px; }
.journal-diagram { background: #f5f9f8; border-block: 1px solid #d6e2df; margin: 42px 0; padding: 28px; }
.journal-diagram figcaption { display: grid; gap: 8px; }
.journal-diagram figcaption > span { color: #526b6a; font-size: 12px; font-weight: 600; }
.journal-diagram figcaption > strong { font-size: 21px; line-height: 1.7; }
.journal-diagram ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; list-style: none; margin: 26px 0 18px; padding: 0; }
.journal-diagram li { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.journal-diagram li:not(:last-child)::after { content: "\2192"; position: absolute; top: 8px; right: -20px; color: #7b9691; }
.journal-step-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #ffe54e; font-size: 15px; color: #434343; font-weight: 600; }
.journal-diagram li strong { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.journal-diagram > p { font-size: 13px; color: #586967; margin: 0; }
.journal-glossary { margin: 36px 0; }
.journal-glossary dl { border-top: 1px solid #dce4e2; margin: 12px 0 0; display: grid; grid-template-columns: minmax(110px, .4fr) minmax(0,1fr); }
.journal-glossary dt, .journal-glossary dd { margin: 0; padding: 15px 12px; border-bottom: 1px solid #dce4e2; font-size: 15px; line-height: 1.8; }
.journal-glossary dt { font-weight: 600; background: #f4f8f6; }
.journal-section > p { margin: 0 0 24px; line-height: 2; }
.journal-section > p strong { display: inline; background: linear-gradient(transparent 67%,#fff0a6 67%); }
.journal-example { border-left: 3px solid #82c8c5; padding: 8px 0 8px 24px; margin: 34px 0; }
.article-prose .journal-example h3 { font-size: 20px; line-height: 1.6; margin: 8px 0 14px; font-weight: 600; }
.journal-example p { font-size: 16px; line-height: 1.9; }
.journal-example small, .journal-prompt small { color: #626d6c; font-size: 12px; line-height: 1.8; display: block; }
.journal-inline-figure { margin: 40px 0; }
.journal-inline-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
.journal-inline-figure figcaption { font-size: 12px; line-height: 1.7; color: #626d6c; margin-top: 10px; }
.journal-prompt { padding: 24px; background: #f0f6f5; border-left: 3px solid #5b8f89; margin: 34px 0; }
.journal-prompt > p:not(.section-kicker) { font-size: 16px; line-height: 1.9; white-space: pre-wrap; }
.journal-toc a { text-decoration-color: #a9bfba; text-underline-offset: 4px; }
.journal-checklist li { margin-bottom: 15px; }
.journal-consult { background: #fffbea; padding: 36px; margin-top: 52px; }
@media (max-width: 620px) {
  .journal-diagram { padding: 22px; }
  .journal-diagram ol { grid-template-columns: 1fr; gap: 26px; }
  .journal-diagram li { flex-direction: row; align-items: center; gap: 15px; }
  .journal-step-number { flex: 0 0 42px; }
  .journal-diagram li:not(:last-child)::after { content: "\2193"; top: auto; right: auto; left: 15px; bottom: -25px; }
  .journal-glossary dl { grid-template-columns: 1fr; }
  .journal-glossary dt { border-bottom: 0; padding-bottom: 5px; }
  .journal-glossary dd { padding-top: 8px; }
  .journal-consult { padding: 26px 20px; }
  .article-prose .journal-lead { font-size: 17px; }
}

@media (max-width: 680px) {
  .section-sticky h2,
  .section-heading h2,
  .company-copy h2,
  .contact-panel h2,
  .lab-intro h2,
  .insights-heading h2,
  .subpage .sub-section-title,
  .subpage .sub-lead h2,
  .subpage .sub-cta h2,
  .subpage .service-detail h2,
  .subpage .solution-intro h2,
  .subpage .solution-case h2,
  .subpage .article-prose h2,
  .subpage .journal-topic h2,
  .subpage .journal-consult h2,
  .subpage .company-scene-band p {
    font-size: clamp(2rem, 7vw, 2.8rem);
    line-height: 1.3;
    text-wrap: balance;
  }

  .subpage .sub-hero h1 {
    font-size: clamp(1.75rem, 7.5vw, 2.4rem);
    text-wrap: balance;
  }

  .subpage .journal-hero h1 { font-size: clamp(1.9rem, 7.5vw, 2.4rem); }
  .page-privacy .article-prose h1 { font-size: clamp(1.625rem, 7.5vw, 2rem); line-height: 1.35; text-wrap: balance; }
  .service-card h3 { font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1.3; }
}

@media (max-width: 560px) {
  .inventory-row { gap: 6px 10px; grid-template-columns: minmax(0, 1fr) auto; padding: 12px 0; }
  .inventory-row strong { grid-column: 1; grid-row: 1; }
  .inventory-row small { grid-column: 2; grid-row: 1; }
  .inventory-row .inventory-bar { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}

@media (max-width: 400px) {
  .web-preview-body, .web-preview.is-editorial .web-preview-body { grid-template-columns: minmax(0, 1fr); }
  .web-preview-body h4 { font-size: 1.25rem; }
  .web-preview-body img, .web-preview.is-editorial .web-preview-body img { aspect-ratio: 4 / 3; height: auto; position: static; width: 100%; }
  .web-preview.is-editorial .web-preview-body > div { background: var(--preview-accent); margin: 0; max-width: none; }
}

@media (max-width: 340px) {
  .lab-copy h3 { font-size: clamp(1.6rem, 8vw, 1.85rem); }
  .footer-sitemap { grid-template-columns: minmax(0, 1fr); }
  .footer-group a { font-size: 13px; }
  .site-nav { left: 12px; right: 12px; padding-inline: 20px; }
}

/* The header stays clear; white type in difference mode follows each pixel below it. */
.site-header,
.site-header.is-scrolled,
.subpage .site-header,
.menu-open .site-header {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header.has-floating-brand { justify-content: flex-end; }
.site-header > .brand { color: #434343; }
.header-brand {
  color: #fff;
  left: clamp(22px, 2.7vw, 48px);
  mix-blend-mode: difference;
  position: fixed;
  top: 59px;
  transform: translateY(-50%);
  transition: top 180ms ease, opacity 180ms ease, visibility 180ms ease;
  z-index: 101;
}
.header-brand.is-footer-visible { opacity: 0; pointer-events: none; visibility: hidden; }
.site-header.is-scrolled + .header-brand,
.subpage .header-brand { top: 39px; }
@media (max-width: 820px) {
  .header-brand { left: 18px; top: 41px; }
}

.contact .button-ghost { color: #fff; }
.contact .contact-panel { padding-inline: 28px; }
.contact .contact-panel::before { left: 28px; }
.intro-line { white-space: nowrap; }
.intro-title { max-width: none; }

@media (max-width: 820px) {
  .contact .contact-panel { padding-inline: 18px; }
  .contact .contact-panel::before { left: 18px; }
  .intro-title { font-size: 2.1rem; }
}
@media (max-width: 620px) {
  .intro-title { font-size: 1.45rem; }
}
@media (max-width: 420px) {
  .intro-title { font-size: 1.08rem; }
  .intro-text { font-size: 14px; }
}
@media (max-width: 360px) {
  .intro-text { font-size: 12px; }
}