:root {
  color-scheme: dark;
  --background: #0a0a0b;
  --surface: #131316;
  --text: #f0f0f0;
  --body: #b7b7bf;
  --muted: #a4a4ae;
  --green: #00ff88;
  --line: #303037;
  --display: "PingFang SC", "Heiti SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--body);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

button,
textarea {
  font: inherit;
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: wait;
}

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

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4,
strong {
  color: var(--text);
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
}

h2 {
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.35;
  letter-spacing: -0.035em;
}

h3 {
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -0.025em;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

[id] {
  scroll-margin-top: 104px;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 5px;
}

::selection {
  background: var(--green);
  color: var(--background);
}

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

.accent {
  color: var(--green);
}

.mono {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.07em;
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 20px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.eyebrow .mono {
  color: var(--muted);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 22px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--green);
  color: var(--background);
  font-weight: 600;
  transform: translateY(-160%);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 10, 11, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

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

.brand {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  color: var(--text);
  font-size: 27px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.06em;
}

.brand > span {
  color: var(--green);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-nav > a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #d0d0d6;
  font-size: 14px;
  white-space: nowrap;
}

.site-nav > a:not(.button):hover,
.site-nav > a[aria-current]:not(.button) {
  color: var(--green);
}

.menu-toggle {
  display: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 52px;
  padding: 13px 23px;
  border: 1px solid var(--green);
  border-radius: 0;
  background: var(--green);
  color: var(--background);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.button:hover {
  border-color: #6dffba;
  background: #6dffba;
}

.button > span {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
}

.button-small {
  min-height: 44px;
  gap: 18px;
  padding: 10px 17px;
  font-size: 13px;
}

.button-full {
  width: 100%;
  justify-content: space-between;
}

.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 44px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}

.text-link > span,
.service-link > span {
  color: var(--green);
  font-size: 19px;
}

.text-link:hover,
.service-link:hover {
  color: var(--green);
}

.hero {
  position: relative;
  isolation: isolate;
  padding-top: 60px;
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(240, 240, 240, 0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 240, 240, 0.026) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(#000 0%, #000 58%, transparent 100%);
  pointer-events: none;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 90px;
  padding-bottom: 62px;
}

.status-dot,
.growth-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--green);
}

.hero h1 {
  margin-bottom: 25px;
  font-size: clamp(65px, 5.5vw, 84px);
  font-weight: 650;
  line-height: 1.17;
  letter-spacing: -0.055em;
}

.hero-lead {
  max-width: 29em;
  color: var(--text);
  font-size: 20px;
  line-height: 1.75;
}

.mobile-break {
  display: none;
}

.hero-description {
  max-width: 34em;
  margin-top: 14px;
  color: var(--body);
  font-size: 16px;
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-top: 28px;
}

.growth-path {
  min-width: 0;
  padding: 24px 0 0 30px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.growth-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--body);
}

.growth-steps {
  position: relative;
  margin-top: 27px;
}

.growth-steps li:not(:last-child)::before {
  position: absolute;
  top: 23px;
  bottom: -23px;
  left: 5px;
  width: 1px;
  background: var(--green);
  content: "";
}

.growth-steps li {
  position: relative;
  min-width: 0;
  padding: 9px 0 21px 32px;
}

.growth-marker {
  position: absolute;
  top: 18px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 1px solid var(--green);
  background: var(--background);
}

.growth-steps li:last-child .growth-marker {
  background: var(--green);
}

.growth-en {
  display: block;
  margin-bottom: 4px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.growth-steps strong {
  display: block;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.5;
}

.growth-steps p {
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.75;
}

.growth-caption {
  margin-top: 5px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 15px;
}

.hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.hero-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  color: var(--text);
}

.hero-bottom a:hover,
.hero-bottom a span {
  color: var(--green);
}

.section {
  padding-block: 108px;
  border-top: 1px solid var(--line);
}

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: 80px;
  margin-bottom: 52px;
}

.section-description {
  max-width: 31em;
  padding-bottom: 4px;
  font-size: 16px;
  line-height: 1.9;
}

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

.situation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 28px 27px 0 0;
  border-top: 1px solid var(--line);
}

.situation + .situation {
  padding-left: 26px;
  border-left: 1px solid var(--line);
}

.label {
  display: inline-block;
  margin-bottom: 17px;
  color: var(--green);
  font-size: 14px;
  line-height: 1.6;
}

.situation h3 {
  margin-bottom: 16px;
  font-size: 23px;
}

.situation p {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.9;
}

.situation .text-link {
  margin-top: auto;
}

.services-section,
.outcomes-section {
  background: var(--surface);
}

.service-grid {
  align-items: stretch;
  gap: 22px;
}

.service {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 26px 0;
  border: 1px solid #393940;
  border-top-color: var(--green);
  background: var(--background);
}

.service-type {
  margin-bottom: 17px;
  color: var(--green);
}

.service h3 {
  margin-bottom: 22px;
  font-size: 28px;
}

.service-promise {
  min-height: 3.2em;
  margin-bottom: 20px;
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

.service-description {
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 1.85;
}

.service h4 {
  margin-top: auto;
  margin-bottom: 13px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

.deliverables {
  margin-bottom: 24px;
}

.deliverables li {
  position: relative;
  margin-top: 10px;
  padding-left: 15px;
  color: #d0d0d6;
  font-size: 15px;
  line-height: 1.8;
}

.deliverables li::before {
  position: absolute;
  top: 12px;
  left: 0;
  width: 4px;
  height: 4px;
  background: var(--green);
  content: "";
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary > span {
  flex-shrink: 0;
  color: var(--green);
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform 180ms ease;
}

details[open] > summary > span {
  transform: rotate(45deg);
}

.participation {
  margin-bottom: 22px;
  border-top: 1px solid var(--line);
}

.participation summary {
  min-height: 49px;
  padding-block: 10px;
  font-size: 14px;
}

.participation p {
  padding-bottom: 9px;
  font-size: 14px;
  line-height: 1.9;
}

.service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 66px;
  margin: 0 -26px;
  padding: 17px 26px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}

.outcomes-section {
  border-top-color: #393940;
}

.about-layout,
.faq-layout,
.contact-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 96px;
}

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

.process-grid li {
  position: relative;
  min-width: 0;
  padding: 26px 23px 0 0;
  border-top: 1px solid var(--line);
}

.process-grid li + li {
  padding-left: 23px;
  border-left: 1px solid var(--line);
}

.process-number {
  display: block;
  margin-bottom: 22px;
  color: var(--green);
  font-size: 15px;
}

.process-grid h3 {
  margin-bottom: 13px;
  font-size: 20px;
  white-space: nowrap;
}

.process-grid p {
  font-size: 15px;
  line-height: 1.9;
}

.collaboration-note {
  margin-top: 45px;
  padding: 23px 26px;
  border-left: 2px solid var(--green);
  background: var(--surface);
  font-size: 15px;
  line-height: 1.9;
}

.collaboration-note > span {
  color: var(--text);
  font-weight: 500;
}

.about-section {
  background: var(--surface);
}

.about-copy {
  padding-top: 3px;
}

.about-copy .about-lead {
  margin-bottom: 28px;
  color: var(--text);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.6;
}

.about-copy > p + p {
  margin-top: 20px;
}

.faq-layout {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.faq-heading {
  position: sticky;
  top: 120px;
}

.faq-heading h2 {
  font-size: clamp(30px, 2.9vw, 42px);
}

.faq-list details {
  border-top: 1px solid var(--line);
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  min-height: 79px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
}

.faq-list details > p {
  max-width: 36em;
  padding: 0 32px 26px 0;
  font-size: 16px;
  line-height: 1.9;
}

.contact-section {
  background: var(--surface);
}

.contact-layout {
  gap: 72px;
}

.contact-copy h2 {
  margin-bottom: 28px;
  font-size: clamp(32px, 3vw, 43px);
}

.contact-copy > p:not(.eyebrow) {
  max-width: 31em;
}

.contact-questions {
  margin-block: 25px;
}

.contact-questions li {
  position: relative;
  padding-left: 20px;
  color: var(--text);
  line-height: 2.1;
}

.contact-questions li::before {
  position: absolute;
  top: 15px;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--green);
  content: "";
}

.contact-scope {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}

.contact-panel {
  min-width: 0;
  padding: 32px;
  border: 1px solid #3a3a42;
  background: var(--background);
}

.contact-panel-title {
  margin-bottom: 26px;
  color: var(--text);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.5;
}

.service-context {
  margin: -7px 0 23px;
  padding-left: 13px;
  border-left: 2px solid var(--green);
  color: var(--text);
  font-size: 14px;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 28px;
}

.qr-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 188px;
  height: 188px;
  flex: 0 0 188px;
  padding: 12px;
  background: #fff;
}

.qr-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 7px;
  color: #55555f;
  font-size: 12px;
  text-align: center;
}

.qr-placeholder .mono {
  color: #55555f;
}

.qr-placeholder strong {
  color: #1d1d23;
  font-size: 23px;
  font-weight: 600;
}

.qr-copy {
  min-width: 0;
}

.qr-copy > p:first-child {
  margin-bottom: 10px;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
}

.qr-copy > p + p {
  color: var(--body);
  font-size: 14px;
  line-height: 1.9;
}

.copy-status {
  min-height: 1.8em;
  margin-top: 13px;
  color: var(--body);
  font-size: 14px;
}

.manual-copy {
  margin-top: 15px;
}

.manual-copy label {
  display: block;
  margin-bottom: 9px;
  color: var(--text);
  font-size: 14px;
}

.manual-copy textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 180px;
  padding: 13px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  line-height: 1.8;
}

.site-footer {
  padding-block: 50px 27px;
  border-top: 1px solid var(--line);
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 36px;
}

.footer-top .brand + p {
  margin-top: 11px;
  font-size: 14px;
}

.footer-belief {
  color: var(--text);
  font-size: 20px;
  letter-spacing: 0.08em;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
}

.footer-bottom nav a:hover {
  color: var(--green);
}

.mobile-contact {
  display: none;
}

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

  .hero-layout {
    gap: 52px;
  }

  .section-intro,
    .about-layout,
  .faq-layout {
    gap: 56px;
  }

  .contact-layout {
    gap: 42px;
  }

  .contact-panel {
    padding: 27px;
  }

  .contact-method {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .qr-copy {
    max-width: 28em;
  }

  .process-grid li,
  .process-grid li + li {
    padding-right: 17px;
    padding-left: 17px;
  }

  .process-grid li:first-child {
    padding-left: 0;
  }
}

@media (max-width: 1023px) {
  .header-inner {
    flex-wrap: wrap;
    min-height: 74px;
    gap: 0 20px;
    padding-block: 14px;
  }

  .site-nav {
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
    gap: 9px 24px;
    padding-top: 20px;
  }

  .site-nav > a:not(.button) {
    justify-content: flex-start;
  }

  .site-nav .button {
    margin-left: auto;
  }

  .js .site-nav {
    display: none;
  }

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

  .js .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    gap: 6px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--text);
  }

  .menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform 180ms ease;
  }

  .menu-open .menu-toggle span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .menu-open .menu-toggle span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 35px;
  }

  .hero h1 {
    font-size: 65px;
  }

  .hero-lead {
    font-size: 18px;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }

  .growth-path {
    padding-left: 20px;
  }

  .growth-heading .mono {
    max-width: 17em;
  }

  .growth-steps strong {
    font-size: 19px;
  }

  .growth-steps p {
    font-size: 14px;
  }

  .section {
    padding-block: 84px;
  }

  .section-intro {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 35px;
  }

  .situation-grid {
    gap: 20px;
  }

  .situation,
  .situation + .situation {
    padding-right: 0;
  }

  .situation + .situation {
    padding-left: 20px;
  }

  .situation h3 {
    font-size: 21px;
  }

  .service-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .service {
    padding: 29px 30px 0;
  }

  .service-promise {
    min-height: auto;
  }

  .service-description {
    max-width: 43em;
  }

  .service-link {
    margin-inline: -30px;
    padding-inline: 30px;
  }

    .about-layout,
  .faq-layout,
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
  }

  .contact-copy > p:not(.eyebrow) {
    max-width: 40em;
  }

  .faq-heading {
    position: static;
  }

  .contact-method {
    align-items: center;
    flex-direction: row;
    gap: 28px;
  }

  .contact-panel {
    padding: 30px;
  }

  .process-grid li,
  .process-grid li + li {
    padding-right: 12px;
    padding-left: 12px;
  }

  .process-grid li:first-child {
    padding-left: 0;
  }

  .process-grid h3 {
    font-size: 18px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }

  [id] {
    scroll-margin-top: 94px;
  }

  .container {
    width: calc(100% - 44px);
  }

  .header-inner {
    min-height: 72px;
  }

  .brand {
    font-size: 25px;
  }

  .site-nav {
    flex-direction: column;
    padding-top: 17px;
    padding-bottom: 8px;
    gap: 4px;
  }

  .site-nav > a:not(.button) {
    min-height: 46px;
    font-size: 16px;
  }

  .site-nav .button {
    width: 100%;
    margin: 10px 0 0;
    font-size: 15px;
  }

  .hero {
    padding-top: 41px;
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 43px;
    padding-bottom: 33px;
  }

  .hero .eyebrow {
    margin-bottom: 20px;
  }

  .hero h1 {
    margin-bottom: 23px;
    font-size: 44px;
    font-weight: 650;
    line-height: 1.23;
    letter-spacing: -0.04em;
  }

  .hero-lead {
    font-size: 18px;
    line-height: 1.8;
  }

  .mobile-break {
    display: inline;
  }

  .hero-description {
    margin-top: 15px;
    font-size: 16px;
  }

  .hero-actions {
    align-items: flex-start;
    gap: 13px;
    margin-top: 25px;
  }

  .hero-actions .button {
    min-height: 52px;
  }

  .growth-path {
    padding: 24px 0 0;
    border-left: 0;
  }

  .growth-heading .mono {
    max-width: none;
    font-size: 12px;
  }

  .growth-steps {
    margin-top: 22px;
  }

  .growth-steps li {
    padding-bottom: 22px;
  }

  .growth-steps strong {
    font-size: 21px;
  }

  .growth-steps p {
    font-size: 15px;
  }

  .growth-caption {
    margin-top: 2px;
    padding-top: 18px;
  }

  .hero-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    padding-block: 20px;
    font-size: 14px;
  }

  .hero-bottom a {
    width: 100%;
    justify-content: space-between;
    min-height: 36px;
  }

  .section {
    padding-block: 64px;
  }

  .eyebrow {
    gap: 7px 14px;
    margin-bottom: 17px;
    font-size: 14px;
  }

  .eyebrow .mono {
    font-size: 11px;
  }

  h2,
  .faq-heading h2,
  .contact-copy h2 {
    font-size: 30px;
    line-height: 1.4;
  }

  .section-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 33px;
  }

  .section-description {
    max-width: none;
    padding-bottom: 0;
    font-size: 16px;
  }

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

  .situation-grid {
    gap: 0;
  }

  .situation,
  .situation + .situation {
    padding: 26px 0 25px;
    border-left: 0;
  }

  .situation:last-child {
    padding-bottom: 0;
  }

  .label {
    margin-bottom: 12px;
  }

  .situation h3 {
    margin-bottom: 12px;
    font-size: 23px;
  }

  .situation p {
    margin-bottom: 14px;
  }

  .service {
    padding: 25px 22px 0;
  }

  .service h3 {
    margin-bottom: 18px;
    font-size: 27px;
  }

  .service-type {
    margin-bottom: 13px;
  }

  .service-promise {
    margin-bottom: 19px;
    font-size: 20px;
  }

  .service-description {
    margin-bottom: 24px;
  }

  .deliverables li {
    font-size: 15px;
  }

  .service-link {
    margin-inline: -22px;
    padding-inline: 22px;
  }

    .about-layout,
  .faq-layout,
  .contact-layout {
    gap: 33px;
  }

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

  .process-grid li,
  .process-grid li + li,
  .process-grid li:first-child {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 17px;
    padding: 23px 0;
    border-left: 0;
  }

  .process-number {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 3px 0 0;
  }

  .process-grid h3 {
    grid-column: 2;
    margin-bottom: 9px;
    font-size: 21px;
  }

  .process-grid p {
    grid-column: 2;
    font-size: 16px;
  }

  .process-grid li:last-child {
    border-bottom: 1px solid var(--line);
  }

  .collaboration-note {
    margin-top: 29px;
    padding: 20px;
  }

  .collaboration-note > span {
    display: block;
    margin-bottom: 6px;
  }

  .about-copy .about-lead {
    margin-bottom: 23px;
    font-size: 22px;
  }

  .faq-list summary {
    min-height: 76px;
    gap: 18px;
    padding-block: 21px;
    font-size: 16px;
  }

  .faq-list details > p {
    padding-right: 0;
    padding-bottom: 24px;
  }

  .contact-copy h2 {
    margin-bottom: 23px;
  }

  .contact-questions li {
    padding-block: 3px;
    line-height: 1.9;
  }

  .contact-panel {
    padding: 25px 22px;
  }

  .contact-panel-title {
    margin-bottom: 23px;
    font-size: 21px;
  }

  .contact-method {
    align-items: flex-start;
    flex-direction: column;
    gap: 19px;
    margin-bottom: 23px;
  }

  .qr-frame {
    width: 188px;
    height: 188px;
    flex-basis: 188px;
  }

  .button-full {
    gap: 14px;
    padding-inline: 17px;
  }

  .site-footer {
    padding-block: 36px 24px;
  }

  .footer-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 29px;
  }

  .footer-belief {
    font-size: 18px;
  }

  .footer-bottom {
    gap: 19px;
    padding-top: 23px;
  }

  .footer-bottom nav {
    gap: 12px 22px;
    font-size: 14px;
  }

  .footer-bottom nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }

  .mobile-contact {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 22px calc(15px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--green);
    background: var(--green);
    color: var(--background);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
  }

  .mobile-contact > span {
    font-size: 23px;
    line-height: 1;
  }
}

@media (max-width: 359px) {
  .hero-lead {
    font-size: 17px;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Growth and guided service discovery. */
.js-only { display: none; }
.js .js-only { display: block; }
.js .no-js-link { display: none; }
.js .situation-select { display: inline-flex; }
.situations-section { padding-block: 88px; }
.scenario-hint { margin: -18px 0 24px; color: var(--muted); font-size: 14px; }
.scenario-workspace { display: grid; grid-template-columns: 1fr 1.06fr; gap: 28px; align-items: stretch; }
.scenario-workspace .situation-grid { grid-template-columns: 1fr; gap: 12px; }
.scenario-workspace .situation {
  position: relative;
  padding: 20px 24px;
  border: 1px solid var(--line);
  background: var(--background);
  transition: border-color 180ms ease, background-color 180ms ease;
}
.scenario-workspace .situation .label { margin-bottom: 6px; font-size: 12px; }
.scenario-workspace .situation h3 { margin-bottom: 6px; font-size: 21px; }
.scenario-workspace .situation p { margin-bottom: 10px; font-size: 14px; line-height: 1.75; }
.situation-select { min-height: 24px; width: 100%; justify-content: space-between; padding: 0; border: 0; background: transparent; text-align: left; font-size: 12px; }
.situation-select:focus-visible { outline: none; }
.situation-select::after { position: absolute; inset: 0; content: ""; }
.scenario-workspace .situation:has(.situation-select:focus-visible) { outline: 2px solid var(--green); outline-offset: 4px; }
.scenario-workspace .situation.is-selected { border-color: var(--green); background: #102019; }
.situation-select[aria-pressed="true"] { color: var(--green); }
.situation-select > .selection-feedback { font-size: 12px; color: var(--muted); }
.situation-select[aria-pressed="true"] > .selection-feedback { color: var(--green); }
.selection-arrow { font-family: var(--mono); font-size: 17px; }
.scenario-panel { min-width: 0; border: 1px solid var(--line); background: var(--surface); }
.scenario-empty { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; min-height: 470px; padding: 38px; }
.scenario-empty > .mono { color: var(--muted); font-size: 12px; letter-spacing: .1em; }
.scenario-empty h3 { margin: 24px 0 16px; font-size: 36px; line-height: 1.4; font-weight: 500; }
.scenario-empty > p { font-size: 15px; line-height: 1.9; }
.seed-mark { display: flex; align-items: end; gap: 7px; height: 42px; margin-top: 35px; }
.seed-mark i { width: 4px; height: 14px; background: #00ff8840; }
.seed-mark i:nth-child(2) { height: 28px; background: #00ff8880; }
.seed-mark i:nth-child(3) { height: 42px; background: var(--green); }
.scenario-result { display: flex; flex-direction: column; gap: 28px; height: 100%; padding: 38px; }
.scenario-result .eyebrow { margin-bottom: 10px; color: var(--green); font-size: 13px; }
.scenario-result h3 { margin: 0 0 14px; font-size: 30px; }
#match-reason { max-width: 30em; font-size: 15px; line-height: 1.9; }
.match-label { margin-bottom: 16px; color: var(--text); font-size: 14px; }
.scenario-result li { padding: 11px 0 11px 18px; border-top: 1px solid var(--line); position: relative; font-size: 15px; }
.scenario-result li::before { position: absolute; top: 23px; left: 0; width: 4px; height: 4px; background: var(--green); content: ""; }
.match-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: auto; }
.match-actions .text-link { font-size: 14px; }
.scenario-footnote { display: block; margin-top: auto; padding-top: 24px; color: var(--muted); font-size: 12px; }
.scenario-result .scenario-footnote { padding: 0; margin: 0; }
html:not(.js) .scenario-workspace { grid-template-columns: 1fr; }
.service { position: relative; border-top-color: var(--line); transition: border-color 180ms ease; }
.service.is-selected { border-color: var(--green); }
.service-selection { display: none; position: absolute; top: 25px; right: 22px; color: var(--green); font-size: 12px; }
.service.is-selected .service-selection { display: block; }
.service.is-selected h3 { color: var(--green); }
.brief-editor { padding: 24px 0; border-top: 1px solid var(--line); }
.brief-heading { color: var(--text); font-size: 17px; }
.brief-help { margin: 6px 0 18px; font-size: 13px; }
.brief-editor label { display: block; margin: 14px 0 6px; color: var(--text); font-size: 14px; }
.brief-editor textarea {
  display: block;
  width: 100%;
  resize: vertical;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--background);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}
.brief-editor textarea::placeholder { color: var(--muted); font-size: 14px; }
.growth-footer { border-top: 1px solid var(--line); padding-top: 18px; }
.growth-footer .growth-caption { padding-top: 0; margin: 0; border: 0; }
.site-nav a[aria-current="location"]:not(.button) { color: var(--green); }
.process-grid li { transition: border-color 400ms ease; }
.process-grid li.is-reached { border-top-color: var(--green); }
.js .process-grid li:not(.is-reached) .process-number { color: var(--muted); }
.process-grid li.is-reached .process-number { color: var(--green); }

@media (prefers-reduced-motion: no-preference) {
  .growth-path.is-growing .growth-steps li {
    animation: growth-arrive 14s both infinite;
    animation-delay: calc(var(--step) * 1.5s);
  }
  .growth-path.is-growing .growth-steps li::before {
    transform-origin: top;
    animation: growth-line 14s both infinite;
    animation-delay: calc(var(--step) * 1.5s + 250ms);
  }
  .growth-path.is-growing .growth-marker {
    animation: growth-node 14s both infinite;
    animation-delay: calc(var(--step) * 1.5s + 180ms);
  }
  .reveal.is-visible { animation: content-arrive 600ms both; }
  .scenario-result.is-updating { animation: result-arrive 300ms both; }
  @media (min-width: 1024px) {
    .process-grid li.is-visible { animation-delay: calc(var(--step) * 120ms); transition-delay: calc(var(--step) * 120ms); }
  }
  .button { transition: background-color 180ms, transform 180ms; }
  .button:hover { transform: translateY(-2px); }
  @keyframes result-arrive { from { opacity: .35; } to { opacity: 1; } }
  @keyframes growth-arrive { 0% { opacity: .35; transform: translateY(6px); } 6.5%, 100% { opacity: 1; transform: none; } }
  @keyframes growth-line { 0% { transform: scaleY(0); } 6.5%, 100% { transform: scaleY(1); } }
  @keyframes growth-node { 0% { background: var(--background); box-shadow: none; } 3% { background: var(--green); box-shadow: 0 0 18px #00ff8855; } 6.5%, 100% { background: var(--green); box-shadow: none; } }
  @keyframes content-arrive { from { opacity: .35; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* Refinement: a quieter canvas, clearer choices, and a balanced contact area. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.growth-path { padding: 28px 30px; border: 1px solid var(--line); background: radial-gradient(ellipse at 100% 0%, #00ff8809, transparent 65%), var(--background); }
.growth-heading { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.growth-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.growth-steps li:last-child { padding-bottom: 24px; }
.service-description { color: var(--muted); }
.service > h4 { padding-top: 20px; border-top: 1px solid var(--line); }
.contact-layout { align-items: start; }
.contact-copy .contact-method { margin: 32px 0 0; padding-top: 26px; border-top: 1px solid var(--line); flex-direction: row; align-items: center; gap: 20px; }
.contact-copy .qr-frame { width: 156px; height: 156px; flex: 0 0 156px; }
.qr-frame.qr-pending { border: 1px dashed #45574c; background: #102019; }
.qr-pending .qr-placeholder, .qr-pending .qr-placeholder .mono { color: var(--muted); }
.qr-pending .qr-placeholder strong { color: var(--text); font-size: 20px; }
.contact-panel > .eyebrow { color: var(--green); font-size: 12px; margin-bottom: 12px; }
.contact-panel-title { font-size: 24px; margin-bottom: 22px; }
.contact-panel .brief-editor { border: 0; padding-top: 0; }
.contact-panel .brief-help { margin-top: 0; }
.js .button-full.js-only { display: flex; }
.brief-editor textarea { background: var(--surface); transition: border-color 180ms; }
.brief-editor textarea:focus { border-color: var(--green); }
.copy-status:not(:empty) { padding: 12px 14px; border-left: 2px solid var(--green); background: #102019; color: var(--text); }
.site-nav a[aria-current="location"]:not(.button) { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
@media (hover: hover) {
  .scenario-workspace .situation:hover { border-color: #7e9587; background: #111a16; }
  .scenario-workspace .situation.is-selected:hover { border-color: var(--green); background: #102019; }
  .service:hover { border-color: #7e9587; }
  .service.is-selected:hover { border-color: var(--green); }
  .service-link:hover { color: var(--green); background: #102019; }
  .faq-list summary:hover { color: var(--green); }
}
@media (max-width: 1023px) {
  .scenario-workspace { gap: 18px; }
  .scenario-workspace .situation { padding: 18px; }
  .scenario-result, .scenario-empty { padding: 26px; }
  .scenario-result h3 { font-size: 26px; }
  .match-actions { gap: 16px; }
}
@media (max-width: 767px) {
  html { scroll-padding-bottom: 80px; }
  .hero h1 { font-size: clamp(42px, 11.8vw, 62px); line-height: 1.2; }
  .hero-description { font-size: 14px; line-height: 1.85; }
  .growth-path { padding: 22px; }
  .growth-heading .mono { font-size: 10px; }
  .growth-steps strong { font-size: 18px; }
  .growth-steps p { font-size: 14px; }
  .growth-steps li { padding-bottom: 16px; }
  .situations-section { padding-block: 64px; }
  .scenario-hint { margin: -12px 0 20px; }
  .scenario-workspace { grid-template-columns: 1fr; gap: 18px; }
  .scenario-workspace .situation { padding: 16px 18px; }
  .scenario-workspace .situation h3 { font-size: 19px; }
  .scenario-workspace .situation p { margin-bottom: 8px; font-size: 13px; }
  .scenario-workspace .situation .label { margin-bottom: 3px; font-size: 11px; }
  .scenario-empty { min-height: 220px; padding: 24px; }
  .scenario-empty h3 { margin: 16px 0 8px; font-size: 25px; }
  .scenario-empty h3 br, .scenario-empty > p br { display: none; }
  .scenario-empty .seed-mark { display: none; }
  .scenario-empty .scenario-footnote { padding-top: 16px; }
  .scenario-result { gap: 22px; padding: 24px; }
  .scenario-result h3 { font-size: 25px; }
  .scenario-footnote { font-size: 12px; }
  .service-selection { top: 25px; right: 22px; }
  .contact-copy .contact-method { gap: 16px; }
  .contact-copy .qr-frame { width: 116px; height: 116px; flex-basis: 116px; padding: 8px; }
  .contact-copy .qr-frame:not(.qr-pending) { width: 156px; height: 156px; flex-basis: 156px; }
  .qr-pending .qr-placeholder strong { font-size: 18px; }
  .qr-pending .qr-placeholder > span:last-child { font-size: 10px; }
  .qr-copy > p + p { font-size: 13px; line-height: 1.75; }
  .contact-panel-title { font-size: 21px; }
  .contact-panel .brief-help { font-size: 13px; line-height: 1.8; }
  .mobile-contact { right: 12px; left: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); padding: 13px 18px; border: 1px solid #00ff8880; background: #102019; color: var(--text); box-shadow: 0 6px 22px #0008; }
  .mobile-contact > span { color: var(--green); }
}
@media (max-width: 359px) {
  .scenario-result { padding: 20px; }
  .match-actions .button { width: 100%; }
  .contact-copy .contact-method { flex-wrap: wrap; }
}

/* Brand atmosphere: coordinates, orbital light and discrete pixels. */
.hero { overflow: clip; }
.hero-grid {
  background-image: linear-gradient(#00ff8808 1px, transparent 1px), linear-gradient(90deg, #00ff8808 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(#000 0%, #000 70%, transparent 100%);
}
.hero-grid::after {
  position: absolute; inset: -30%; content: "";
  background: linear-gradient(110deg, transparent 38%, #00ff8810 47%, #89ffd51c 50%, #00ff880a 53%, transparent 62%);
  transform: translateX(-25%);
}
.space-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.space-haze { position: absolute; width: 75%; height: 75%; border-radius: 50%; }
.space-haze-one {
  top: -24%; right: -8%;
  background: radial-gradient(ellipse, #00ff882b 0%, #00a66f12 36%, transparent 69%);
  transform: rotate(-25deg);
}
.space-haze-two {
  right: 8%; bottom: -43%; width: 110%; height: 80%;
  background: radial-gradient(ellipse, #00ff8826 0%, #3ad4b412 35%, transparent 68%);
  transform: rotate(-18deg);
}
.space-orbits { position: absolute; top: -7%; left: 0; width: 100%; height: 110%; stroke: #60ffc52b; stroke-width: 1; }
.space-orbits .orbit-signal { stroke: #8fffd94d; stroke-width: 1.5; stroke-dasharray: 32 420; }
.space-pixels { position: absolute; inset: 0; }
.space-pixels i { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); background: #84ffc6; opacity: .35; box-shadow: 0 0 9px #00ff8826; }
.space-pixels i:nth-child(5n) { box-shadow: 8px 0 #00ff8826, 0 8px #00ff8826; }
.hero-copy { position: relative; }
.hero-copy::before { position: absolute; inset: -30px -15px; z-index: -1; background: radial-gradient(ellipse at 35% 50%, #0a0a0ba8, transparent 74%); content: ""; pointer-events: none; }
.hero .growth-path { background: linear-gradient(135deg, #10271dd9, #0a0a0bf2 65%); border-color: #49775c66; }
.ambient-toggle { flex-shrink: 0; margin-left: auto; min-height: 36px; padding: 4px 10px; border: 1px solid #3c5949; background: #0a0a0b99; color: var(--muted); font: 12px var(--display); }
.ambient-toggle:hover { color: var(--green); border-color: var(--green); }
.hero-bottom > a { margin-left: 10px; }
.services-section, .contact-section { position: relative; isolation: isolate; overflow: clip; }
.services-section::before, .contact-section::before {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; content: "";
  background: radial-gradient(ellipse at 90% 5%, #00ff8810, transparent 45%), linear-gradient(115deg, transparent 35%, #00ff8806 51%, transparent 65%);
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero-grid::after { animation: coordinate-light 18s ease-in-out infinite alternate; }
  .js .space-haze-one { animation: cosmic-drift-one 22s ease-in-out infinite alternate; }
  .js .space-haze-two { animation: cosmic-drift-two 26s ease-in-out infinite alternate; }
  .js .space-pixels i { animation: pixel-drift var(--duration) ease-in-out var(--delay) infinite alternate; }
  .js .space-orbits .orbit-signal { animation: orbit-transit 28s linear infinite; }
  .js .services-section::before, .js .contact-section::before { animation: section-light 20s ease-in-out infinite alternate; }
  @keyframes coordinate-light { to { transform: translateX(28%); } }
  @keyframes cosmic-drift-one { to { transform: translate(-16%, 19%) rotate(-8deg) scale(1.1); opacity: .65; } }
  @keyframes cosmic-drift-two { to { transform: translate(15%, -14%) rotate(7deg); opacity: .6; } }
  @keyframes pixel-drift { from { transform: translateY(7px); opacity: .18; } to { transform: translateY(-12px); opacity: .65; } }
  @keyframes orbit-transit { to { stroke-dashoffset: -904; } }
  @keyframes section-light { from { opacity: .45; } to { opacity: 1; } }
}
.ambient-paused .space-scene *, .page-inactive .space-scene *,
.ambient-paused .hero-grid::after, .page-inactive .hero-grid::after,
.ambient-paused .services-section::before, .page-inactive .services-section::before,
.ambient-paused .contact-section::before, .page-inactive .contact-section::before { animation-play-state: paused !important; }
@media (max-width: 767px) {
  .hero-grid { background-size: 36px 36px; }
  .space-orbits { width: 980px; height: 740px; left: auto; right: -530px; top: 0; opacity: .6; }
  .space-haze-one { width: 150%; right: -65%; top: -5%; height: 65%; }
  .space-haze-two { width: 170%; bottom: -20%; right: -45%; height: 55%; }
  .space-pixels i:nth-child(2n) { display: none; }
  .hero-bottom { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .hero-bottom > span { grid-column: 1 / -1; }
  .hero-bottom > a { grid-column: 1; grid-row: 2; margin: 0; width: auto; justify-content: flex-start; gap: 16px; }
  .ambient-toggle { grid-column: 2; grid-row: 2; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .js .ambient-toggle { display: none; } }

.ambient-paused .growth-path *, .ambient-paused .growth-path li::before,
.page-inactive .growth-path *, .page-inactive .growth-path li::before,
.growth-offscreen *, .growth-offscreen li::before { animation-play-state: paused !important; }

/* WeCom is the contact destination; composing a brief is optional. */
.contact-primary { border-top: 2px solid var(--green); }
.contact-primary .contact-panel-title { margin-bottom: 14px; }
.contact-direct-note { margin-bottom: 22px; font-size: 15px; line-height: 1.9; }
.contact-primary .service-context { margin: 0 0 22px; }
.contact-primary .contact-method { margin: 28px 0 30px; flex-direction: row; align-items: center; gap: 24px; }
.contact-primary .qr-frame { width: 180px; height: 180px; flex: 0 0 180px; }
.brief-optional { border-top: 1px solid var(--line); }
.brief-optional > summary { min-height: 64px; padding: 15px 0; color: var(--body); font-size: 14px; }
.brief-optional > summary:hover { color: var(--text); }
.brief-optional .brief-editor { padding: 4px 0 22px; }
.copy-secondary { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; padding: 9px 16px; border: 1px solid #506357; background: transparent; color: var(--text); font-size: 14px; }
.copy-secondary:hover { border-color: var(--green); color: var(--green); }
.copy-secondary > span { font-size: 18px; }
.brief-optional .copy-status:empty { display: none; }
.brief-optional .copy-status:not(:empty) { padding: 0; border: 0; background: transparent; color: var(--body); font-size: 13px; }
@media (max-width: 1023px) {
  .contact-primary .contact-method { gap: 18px; }
}
@media (max-width: 767px) {
  .contact-primary .contact-method { align-items: flex-start; flex-direction: column; }
  .contact-primary .qr-frame { align-self: center; }
  .contact-primary .qr-copy { width: 100%; }
  .brief-optional > summary { font-size: 14px; gap: 12px; }
}

/* Mobile review: stable navigation and explicit paths to selected content. */
.scenario-jump { display: none; }
@media (max-width: 1023px) {
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 40px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--background);
    box-shadow: 0 16px 24px #0005;
  }
}
@media (max-width: 767px) {
  .js .site-nav { max-height: calc(100dvh - 72px); padding: 12px 22px 22px; }
  .site-header .brand, .site-footer .brand { min-height: 44px; align-items: center; }
  .hero-bottom > a, .ambient-toggle, .footer-bottom nav a { min-height: 44px; }
  .footer-bottom nav a { display: inline-flex; align-items: center; }
  .scenario-workspace .situation.is-selected .scenario-jump {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    border-top: 1px solid #395b46;
    color: var(--green);
    font-size: 14px;
  }
  .process-grid li, .process-grid li + li, .process-grid li:first-child {
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 14px;
    padding-block: 20px;
  }
  .process-grid h3 { font-size: 20px; margin-bottom: 7px; }
  .process-grid p { font-size: 15px; line-height: 1.85; }
  .collaboration-note { margin-top: 28px; }
  .manual-copy textarea { font-size: 16px; }
  .contact-panel { padding: 24px 22px; }
  .copy-secondary { width: 100%; justify-content: space-between; }
  h2, .contact-panel-title { text-wrap: balance; }
}
@media (max-width: 359px) {
  h2, .faq-heading h2, .contact-copy h2 { font-size: 28px; }
  .service h3 { font-size: 25px; }
}

/* Working method: six dimensions and a seven-stage feedback circuit. */
.method-map, .delivery-map { margin-top: 48px; }
.method-heading { margin-bottom: 28px; }
.method-heading > .mono { color: var(--green); }
.method-heading h3 { margin-top: 12px; font-size: 30px; line-height: 1.45; }
.method-heading > p { margin-top: 10px; font-size: 16px; }
.elements-origin { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border: 1px solid #3b6550; background: #102019; }
.elements-origin strong { font-size: 20px; }
.elements-origin > span:last-child { margin-left: auto; font-size: 14px; }
.origin-dot { width: 10px; height: 10px; background: var(--green); box-shadow: 0 0 20px #00ff8840; }
.elements-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 22px; background: #324139; border: 1px solid #324139; }
.element-node { position: relative; padding: 24px; background: var(--background); }
.element-node::before { position: absolute; top: -23px; left: 50%; height: 22px; width: 1px; background: #3b6550; content: ""; }
.element-node:nth-child(n+4)::before { display: none; }
.element-node dt { display: flex; align-items: baseline; gap: 14px; color: var(--text); font-size: 23px; }
.element-node dt span { color: var(--green); font-size: 13px; }
.element-node dd { margin-top: 12px; font-size: 14px; line-height: 1.8; }
.delivery-map { padding-top: 40px; border-top: 1px solid var(--line); }
.delivery-circuit { position: relative; }
.circuit-lines { position: absolute; inset: 0; width: 100%; height: 368px; pointer-events: none; }
.delivery-nodes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: 160px 160px; gap: 48px 2.666667%; }
.delivery-node { position: relative; min-width: 0; padding: 19px 18px; border: 1px solid #3b6550; background: var(--surface); }
.node-index { position: absolute; right: 15px; top: 16px; color: #789586; font-size: 11px; }
.node-scope { display: block; padding-right: 22px; color: var(--muted); font-size: 12px; }
.delivery-node h4 { margin: 10px 0 8px; font-size: 21px; line-height: 1.4; }
.delivery-node p { font-size: 13px; line-height: 1.75; }
.delivery-node-4 { border-color: var(--green); background: #103523; }
.delivery-node-4 h4 { color: var(--green); }
.delivery-node-5 { grid-column: 4; grid-row: 2; }
.delivery-node-6 { grid-column: 3; grid-row: 2; }
.delivery-node-7 { grid-column: 2; grid-row: 2; }
.circuit-return { position: absolute; left: 0; top: 314px; width: 23%; text-align: center; color: var(--green); font-size: 14px; }
.circuit-return > span:last-child { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.method-boundary { margin-top: 24px; color: var(--muted); font-size: 13px; }
.cooperation-start { margin-top: 40px; border-block: 1px solid var(--line); }
.cooperation-start > summary { min-height: 64px; font-size: 17px; padding: 18px 0; }
.cooperation-start .process-grid { margin-top: 16px; }
.cooperation-start .collaboration-note { margin-bottom: 24px; }
@media (max-width: 1023px) {
  .delivery-nodes { grid-template-columns: 1fr; grid-template-rows: none; gap: 28px; padding-left: 26px; }
  .delivery-node { grid-column: auto; grid-row: auto; padding: 20px 24px; }
  .delivery-node:not(:last-child)::after { position: absolute; top: 100%; left: 50%; height: 28px; line-height: 28px; color: var(--green); content: "↓"; }
  .circuit-lines { display: none; }
  .delivery-circuit::before { position: absolute; top: 50px; bottom: 29px; left: 0; width: 16px; border-left: 1px dashed #3b6550; border-block: 1px dashed #3b6550; content: ""; }
  .delivery-circuit::after { position: absolute; top: 36px; left: 9px; color: var(--green); content: "→"; }
  .circuit-return { position: relative; top: auto; width: auto; margin: 24px 0 0 26px; text-align: left; padding: 12px 16px; background: #102019; border: 1px solid #3b6550; }
  .circuit-return > span:last-child { font-size: 12px; }
  .elements-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .element-node:nth-child(3)::before { display: none; }
}
@media (max-width: 767px) {
  .method-map, .delivery-map { margin-top: 32px; }
  .method-heading h3 { font-size: 24px; }
  .elements-origin { flex-wrap: wrap; gap: 8px 12px; padding: 16px; }
  .elements-origin > span:last-child { width: 100%; margin-left: 22px; font-size: 13px; }
  .element-node { padding: 18px 14px; }
  .element-node dt { display: block; font-size: 21px; }
  .element-node dt span { display: block; margin-top: 5px; font-size: 12px; }
  .element-node dd { font-size: 13px; margin-top: 10px; }
  .delivery-map { padding-top: 30px; }
  .delivery-node { padding: 18px; }
  .delivery-node h4 { font-size: 21px; }
  .delivery-node p { font-size: 14px; }
}

/* Slow diagram illumination: 30-second cycle with a quiet pause after the return path. */
.circuit-signals { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .method-motion { --flow-cycle: 30s; }
  .method-motion .elements-origin, .method-motion .element-node { isolation: isolate; }
  .method-motion .elements-origin { position: relative; }
  .method-motion .elements-origin::after, .method-motion .element-node::after {
    position: absolute; inset: 0; z-index: -1; pointer-events: none; content: "";
    background: linear-gradient(115deg, transparent 10%, #00ff8814 42%, #8fffc820 50%, #00ff880a 58%, transparent 90%);
    background-size: 300% 100%;
    animation: method-light 24s ease-in-out infinite alternate;
  }
  .method-motion .element-node:nth-child(2n)::after { animation-delay: -6s; }
  .method-motion .element-node:nth-child(3n)::after { animation-delay: -12s; }
  .method-motion .delivery-node {
    animation: stage-illuminate var(--flow-cycle) ease-in-out infinite both;
    animation-delay: calc(var(--flow-step) * 3s);
  }
  .method-motion .delivery-node h4 { --label-rest: var(--text); }
  .method-motion .node-index { --label-rest: #789586; }
  .method-motion .delivery-node h4, .method-motion .node-index {
    animation: stage-label var(--flow-cycle) ease-in-out infinite both;
    animation-delay: calc(var(--flow-step) * 3s);
  }
  .method-motion .circuit-lines > g:not(.circuit-signals) { opacity: .4; }
  .method-motion .circuit-signals { opacity: 1; }
  .method-motion .circuit-signal {
    stroke: var(--green); stroke-width: 5px; stroke-linecap: butt;
    stroke-dasharray: 18 100; stroke-dashoffset: 18; opacity: 0;
    filter: drop-shadow(0 0 4px #00ff8880);
    animation: circuit-travel var(--flow-cycle) linear infinite both;
    animation-delay: calc(var(--flow-step) * 3s + 2s);
  }
  .method-motion .circuit-return {
    animation: return-illuminate var(--flow-cycle) ease-in-out 20s infinite both;
  }
  @keyframes method-light {
    from { background-position: 100% 50%; opacity: .3; }
    to { background-position: 0% 50%; opacity: .85; }
  }
  @keyframes stage-illuminate {
    0%, 10%, 100% { background-color: var(--surface); border-color: #3b6550; box-shadow: none; }
    1.5%, 7% { background-color: #145c3b; border-color: #5effb0; box-shadow: inset 4px 0 var(--green), 0 0 24px #00ff8820; }
  }
  @keyframes stage-label {
    0%, 10%, 100% { color: var(--label-rest); text-shadow: none; }
    2%, 7% { color: #8fffc8; text-shadow: 0 0 16px #00ff8860; }
  }
  @keyframes circuit-travel {
    0% { opacity: 0; stroke-dashoffset: 18; }
    .3% { opacity: 1; stroke-dashoffset: 18; }
    3.3% { opacity: 1; stroke-dashoffset: -100; }
    3.4%, 100% { opacity: 0; stroke-dashoffset: -100; }
  }
  @keyframes return-illuminate {
    0%, 10%, 100% { color: var(--green); text-shadow: none; }
    2%, 7% { color: #b2ffdc; text-shadow: 0 0 18px #00ff8870; }
  }
  @media (max-width: 1023px) {
    .method-motion .delivery-node:not(:last-child)::before {
      position: absolute; top: calc(100% + 2px); left: calc(50% - 3px);
      width: 6px; height: 8px; background: var(--green); pointer-events: none; content: "";
      box-shadow: 0 0 8px #00ff8880;
      animation: mobile-block var(--flow-cycle) linear infinite both;
      animation-delay: calc(var(--flow-step) * 3s + 2s);
    }
    @keyframes mobile-block {
      0% { opacity: 0; transform: translateY(0); }
      .3% { opacity: 1; transform: translateY(0); }
      3.3% { opacity: 1; transform: translateY(18px); }
      3.4%, 100% { opacity: 0; transform: translateY(18px); }
    }
    .method-motion .delivery-node:not(:last-child)::after {
      animation: mobile-arrow var(--flow-cycle) ease-in-out infinite both;
      animation-delay: calc(var(--flow-step) * 3s + 2s);
    }
    .method-motion .delivery-circuit::before, .method-motion .delivery-circuit::after {
      animation: mobile-return var(--flow-cycle) ease-in-out 20s infinite both;
    }
    @keyframes mobile-arrow { 0%, 6%, 100% { opacity: .35; text-shadow: none; } 2%, 4% { opacity: 1; text-shadow: 0 0 12px #00ff88; } }
    @keyframes mobile-return { 0%, 10%, 100% { opacity: .4; } 2%, 7% { opacity: 1; border-color: var(--green); } }
  }
}
.ambient-paused .method-motion *, .ambient-paused .method-motion *::before, .ambient-paused .method-motion *::after,
.page-inactive .method-motion *, .page-inactive .method-motion *::before, .page-inactive .method-motion *::after,
.map-offscreen *, .map-offscreen *::before, .map-offscreen *::after { animation-play-state: paused !important; }

/* Depth: distant stars, orbital atmosphere, then the working surface. */
.space-scene::before {
  position: absolute; inset: -10%; content: ""; opacity: .5;
  background-image: radial-gradient(1px 1px at 35px 42px, #c5e9da 80%, transparent), radial-gradient(1px 1px at 128px 176px, #8bb9a3 80%, transparent), radial-gradient(1px 1px at 236px 85px, #8bb9a3 80%, transparent);
  background-size: 293px 251px, 397px 337px, 479px 389px;
}
.hero-grid { background-image: linear-gradient(#00ff8804 1px, transparent 1px), linear-gradient(90deg, #00ff8804 1px, transparent 1px); }
.hero .growth-path {
  position: relative; border-color: transparent;
  background: radial-gradient(ellipse at 80% 20%, #14332680, transparent 75%), linear-gradient(90deg, transparent, #0a100e80);
  box-shadow: none;
}
.approach-section { position: relative; isolation: isolate; background: radial-gradient(ellipse at 75% 48%, #0f281b50, transparent 62%), var(--background); }
.method-map, .delivery-map { position: relative; background: transparent; }
.element-node { background: #0b110e; }

/* Tangible deliverables, shown as illustrative working documents. */
.outcomes-section { position: relative; isolation: isolate; background: radial-gradient(ellipse at 50% 58%, #14382440, transparent 70%), var(--background); border: 0; }
.outcomes-section .section-intro { margin-bottom: 42px; }
.artifact-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; align-items: start; }
.artifact-card { min-width: 0; padding: 24px 0 0; border: 0; border-top: 1px solid #36534380; background: transparent; box-shadow: none; }
.artifact-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.artifact-heading .mono { color: var(--green); font-size: 11px; letter-spacing: .06em; }
.artifact-heading > span:last-child { font-size: 11px; color: #9eb4a6; padding: 1px 0; }
.artifact-card h3 { font-size: 22px; line-height: 1.5; }
.artifact-purpose { margin-top: 8px; font-size: 14px; }
.artifact-preview { display: flex; flex-direction: column; min-height: 390px; margin: 26px 0 22px; padding: 18px; border: 1px solid #30443870; background: linear-gradient(145deg, #10201770, #0b100e60); box-shadow: none; font-size: 13px; }
.preview-caption { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #263d2e; color: #9bb6a6; font-size: 12px; }
.artifact-tag { display: block; margin-bottom: 9px; color: #7edba9; font-size: 11px; }
.priority-task strong, .handover-document strong { display: block; font-size: 15px; font-weight: 500; }
.priority-task > p { margin-top: 7px; }
.preview-facts { margin-top: 17px; }
.preview-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #1d2c23; }
.preview-facts dt { color: #90a799; flex-shrink: 0; }
.preview-facts dd { color: #d0dfd5; text-align: right; }
.preview-conclusion { margin-top: auto; padding-top: 17px; font-size: 12px; line-height: 1.85; }
.preview-conclusion > span { display: block; color: var(--green); margin-bottom: 3px; }
.preview-flow { display: grid; gap: 22px; }
.preview-flow li { position: relative; padding: 8px 12px; border: 1px solid #354b3d; background: #111d16; }
.preview-flow li:not(:last-child)::after { position: absolute; left: 50%; top: 100%; height: 22px; line-height: 22px; content: "↓"; color: #64b58a; }
.preview-flow li > span { display: block; color: #90ad9c; font-size: 11px; }
.preview-flow li > strong { display: block; font-size: 13px; font-weight: 500; }
.preview-flow .human-check { border-left: 2px solid var(--green); background: #153020; }
.handover-document { padding: 12px; border-left: 2px solid #4c8865; background: #112016; }
.document-arrow { display: block; margin: 5px 0; color: var(--green); }
.artifact-details { border-top: 1px solid #365343; }
.artifact-details > summary { min-height: 60px; font-size: 14px; color: #a5edc5; gap: 16px; }
.artifact-details[open] > summary { color: var(--green); }
.artifact-detail-body { padding-bottom: 24px; font-size: 14px; }
.artifact-detail-body h4 { margin-bottom: 12px; font-size: 15px; }
.artifact-detail-body li { position: relative; padding-left: 14px; margin-bottom: 8px; }
.artifact-detail-body li::before { position: absolute; top: 10px; left: 0; width: 3px; height: 3px; background: var(--green); content: ""; }
.artifact-detail-body > p { margin: 18px 0; color: #a6b7ac; }
.artifact-detail-body .text-link { min-height: 44px; font-size: 14px; }
.artifact-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 36px; padding-top: 24px; border-top: 1px solid #2e493b; font-size: 14px; }
.artifact-footer .text-link { flex-shrink: 0; min-height: 44px; font-size: 14px; }
.artifact-service-link { display: flex; align-items: center; justify-content: space-between; min-height: 50px; border-top: 1px solid var(--line); color: var(--green); font-size: 14px; }
@media (hover: hover) {
  .artifact-service-link:hover, .artifact-details > summary:hover { color: #b5ffda; }
  .artifact-card:focus-within { border-color: #72ba8e; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .space-scene::before { translate: 0 calc(var(--hero-depth, 0px) * .3); }
  .space-orbits { translate: 0 var(--hero-depth, 0px); }
}
@media (max-width: 1100px) and (min-width: 1024px) {
  .artifact-gallery { gap: 14px; }
  .artifact-card { padding: 20px 0 0; }
  .artifact-card h3 { font-size: 20px; }
  .artifact-preview { padding: 14px; min-height: 390px; }
}
@media (max-width: 1023px) {
  .artifact-gallery { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  .artifact-preview { min-height: 0; }
  .preview-conclusion { margin-top: 4px; }
}
@media (max-width: 767px) {
  .space-scene::before { opacity: .3; }
  .js .space-haze-two, .js .space-pixels i { animation: none; }
  .artifact-gallery { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .artifact-card { padding: 22px 0 0; }
  .artifact-card h3 { font-size: 22px; }
  .artifact-preview { min-height: 0; margin-top: 22px; }
  .preview-conclusion { margin-top: 4px; }
  .artifact-footer { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 26px; }
}