:root {
  --white: #fff;
  --paper: #f5f5f6;
  --soft: #ebebed;
  --muted: #a5a5ac;
  --ink: #020202;
  --teal: #123a3f;
  --teal-deep: #08272c;
  --black: #020404;
  --line: rgba(255, 255, 255, .1);
  --ease: cubic-bezier(.7, 0, .3, 1);
  --content: 1224px;
  --gutter: 20px;
}

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

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--black);
  color: var(--white);
  font-family: "PingFang SC", "Microsoft YaHei", Inter, "Inter Placeholder", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

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

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

img,
svg {
  display: block;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3,
strong {
  font-weight: 500;
}

.page-grid {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(var(--content), calc(100% - 40px));
  transform: translateX(-50%);
  border-right: 1px solid var(--line);
  background-image: repeating-linear-gradient(
    to right,
    var(--line) 0,
    var(--line) 1px,
    transparent 1px,
    transparent 25%
  );
  pointer-events: none;
}

.hero-shell,
.section,
.site-footer {
  position: relative;
  isolation: isolate;
}

.hero-shell {
  height: 718px;
  overflow: hidden;
  background: #163d42;
}

.hero-shell::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 2560px;
  height: 980px;
  background-image:
    linear-gradient(180deg, rgba(3, 25, 29, .25), rgba(3, 25, 29, .06)),
    url("public/assets/images/hero-lines-generated.png");
  background-position: center center;
  background-size: cover;
  content: "";
  transform: translateX(-50%);
}

.hero-shell::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, .2) 52%, rgba(0, 0, 0, .4)),
    rgba(0, 0, 0, .12);
  content: "";
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  overflow: hidden;
  transition: height 420ms var(--ease), background-color 420ms var(--ease);
}

.nav-rail {
  position: relative;
  z-index: 2;
  width: min(var(--content), 100%);
  height: 72px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-left {
  position: relative;
  display: flex;
  height: 44px;
  padding: 7px 12px;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 4px;
  background: rgba(8, 28, 32, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 8px 28px rgba(0, 0, 0, .14);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}

.nav-left:hover {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(14, 43, 48, .5);
}

.wordmark img {
  width: 164px;
  max-height: 108px;
}

.nav-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, .13);
}

.careers-link {
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
  transition: color 300ms var(--ease);
}

.careers-link:hover,
.careers-link:focus-visible {
  color: var(--white);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-text-link {
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  color: var(--soft);
  font-size: 14px;
  line-height: 20px;
  transition: color 300ms var(--ease), background-color 300ms var(--ease);
}

.nav-text-link:hover,
.nav-text-link:focus-visible {
  background: rgba(255, 255, 255, .08);
  color: var(--white);
}

.stealth-link {
  display: flex;
  width: 109px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}

.stealth-link:hover,
.stealth-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.menu-toggle,
.mobile-menu {
  display: none;
}

.hero {
  position: relative;
  z-index: 2;
  height: 718px;
}

.hero-inner,
.section-inner {
  position: relative;
  z-index: 2;
  width: min(var(--content), calc(100% - 40px));
  margin: 0 auto;
}

.hero-inner {
  height: 100%;
  padding: 160px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.lead {
  width: 612px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.lead-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lead h1 {
  color: var(--white);
  font-size: 64px;
  line-height: 1.06;
  letter-spacing: -2.56px;
}

.lead-copy p {
  width: 480px;
  color: var(--paper);
  font-size: 16px;
  line-height: 22px;
}

.action {
  position: relative;
  isolation: isolate;
  display: flex;
  height: 72px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid transparent;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  transition: color 420ms var(--ease), border-color 420ms var(--ease);
}

.action::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--ink);
  content: "";
  transform: translateX(-102%);
  transition: transform 420ms var(--ease);
}

.action:hover::before,
.action:focus-visible::before {
  transform: translateX(0);
}

.action:hover,
.action:focus-visible {
  color: var(--white);
}

.action:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.action-primary {
  background: var(--white);
  color: var(--ink);
}

.action-original {
  width: 306px;
}

.action-original svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.trust-strip {
  display: flex;
  width: 100%;
  height: 96px;
  align-items: center;
}

.trust-copy {
  width: 612px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trust-copy p {
  color: var(--white);
  font-size: 16px;
  line-height: 22px;
}

.trust-copy p:last-child {
  color: var(--soft);
}

.client-grid {
  width: 612px;
  height: 96px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 48px);
}

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.client-logo img {
  width: auto;
  max-width: 154px;
  max-height: 31px;
  object-fit: contain;
}

.client-logo:first-child img {
  max-width: 136px;
}

.client-logo:nth-child(4) img {
  max-width: 142px;
}

.section {
  overflow: hidden;
}

.section-kicker {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.section-kicker span:first-child {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.section-kicker-dark {
  color: rgba(2, 2, 2, .78);
}

.section-kicker-dark span:first-child {
  color: rgba(2, 2, 2, .46);
}

.company-profile {
  min-height: 720px;
  background:
    linear-gradient(90deg, rgba(0, 22, 26, .56), rgba(0, 22, 26, .18)),
    url("public/assets/images/hero-ribbons.jpg") center 58% / cover no-repeat,
    var(--teal-deep);
}

.company-profile::before {
  position: absolute;
  inset: 0;
  background: rgba(5, 34, 39, .87);
  content: "";
}

.company-profile .section-inner {
  padding: 128px 0;
}

.profile-intro {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.profile-intro h2 {
  max-width: 548px;
  font-size: 48px;
  line-height: 1.09;
  letter-spacing: -1.5px;
}

.profile-copy {
  max-width: 510px;
  padding: 6px 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--soft);
  font-size: 22px;
  line-height: 31px;
}

.profile-facts {
  margin-top: 96px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.fact {
  min-height: 168px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
}

.fact:first-child {
  border-left: 1px solid var(--line);
}

.fact strong {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -1.3px;
}

.fact span {
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}

.fact-mark {
  justify-content: flex-end;
  overflow: hidden;
  color: rgba(255, 255, 255, .14);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 2.8px;
  white-space: nowrap;
}

.business-sectors {
  background: var(--black);
}

.business-sectors .section-inner {
  padding: 128px 0 112px;
}

.principles-section .section-inner {
  padding: 128px 0;
}

.section-heading {
  display: block;
  padding-left: 0;
}

.section-heading h2 {
  max-width: 760px;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -1.8px;
}

.business-module {
  min-height: 820px;
}

.module-layout {
  min-height: 820px;
  padding: 112px 0 128px;
  display: block;
}

.module-intro {
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: end;
  gap: 48px;
}

.module-heading {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.module-number {
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.4px;
}

.module-heading h2 {
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -2px;
}

.module-lead {
  max-width: 680px;
  color: var(--soft);
  font-size: 23px;
  line-height: 34px;
  letter-spacing: -.5px;
}

.module-mosaic {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, 232px);
  gap: 18px;
}

.business-card {
  position: relative;
  isolation: isolate;
  min-height: 224px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 2px;
  background: rgba(255, 255, 255, .045);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: transform 380ms var(--ease), border-color 380ms var(--ease), box-shadow 380ms var(--ease);
}

.business-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 42%);
  content: "";
  opacity: .24;
  transition: opacity 380ms var(--ease);
}

.business-card:hover,
.business-card:focus-visible {
  z-index: 3;
  border-color: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 24px 52px rgba(0, 0, 0, .2);
  transform: translateY(-6px);
}

.business-card:hover::before,
.business-card:focus-visible::before {
  opacity: .72;
}

.business-card-large {
  min-height: 482px;
}

.card-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .6px;
}

.card-copy {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.business-card h3 {
  max-width: 460px;
  font-size: 25px;
  line-height: 31px;
  letter-spacing: -.6px;
}

.business-card-large h3 {
  font-size: 38px;
  line-height: 44px;
  letter-spacing: -1.25px;
}

.business-card p {
  max-width: 470px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 24px;
}

.card-art {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.art-code {
  top: 56px;
  right: -46px;
  width: 68%;
  height: 58%;
  opacity: .56;
  transform: rotate(-8deg);
}

.art-code i {
  position: absolute;
  right: 0;
  width: 100%;
  height: 34%;
  border: 1px solid rgba(198, 225, 239, .32);
  border-radius: 50%;
}

.art-code i:nth-child(2) { top: 22%; right: 8%; width: 78%; }
.art-code i:nth-child(3) { top: 44%; right: 16%; width: 58%; }

.art-orbit {
  top: 16%;
  right: -12%;
  width: 72%;
  aspect-ratio: 1;
  opacity: .58;
}

.art-orbit i,
.art-learning i {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(212, 233, 244, .28);
  border-radius: 50%;
}

.art-orbit i:nth-child(1) { transform: scaleX(.38) rotate(28deg); }
.art-orbit i:nth-child(2) { transform: scaleX(.68) rotate(-32deg); }
.art-orbit i:nth-child(3) { inset: 36%; background: rgba(220, 239, 248, .15); box-shadow: 0 0 80px rgba(189, 221, 238, .28); }

.art-ledger {
  top: 38px;
  right: 34px;
  width: 42%;
  height: 54%;
  opacity: .4;
}

.art-ledger i {
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  background: rgba(2, 2, 2, .32);
  box-shadow: 0 42px rgba(2, 2, 2, .24), 0 84px rgba(2, 2, 2, .18);
}

.art-ledger i:nth-child(2) { width: 72%; transform: rotate(90deg) translate(76px, -72px); }
.art-ledger i:nth-child(3) { top: 68%; width: 62%; height: 68px; background: linear-gradient(90deg, rgba(31, 90, 99, .08), rgba(31, 90, 99, .38)); box-shadow: none; }

.art-learning {
  top: 4%;
  right: -6%;
  width: 64%;
  aspect-ratio: 1;
  opacity: .52;
}

.art-learning i:nth-child(1) { transform: scaleX(.42) rotate(46deg); }
.art-learning i:nth-child(2) { transform: scaleX(.7) rotate(-18deg); }
.art-learning i:nth-child(3) { inset: 31%; border-style: dashed; }

.mosaic-software {
  grid-template-areas:
    "main main main main main main main device device device device device"
    "main main main main main main main system system system system system";
}

.card-software-main { grid-area: main; background: radial-gradient(circle at 82% 22%, rgba(95, 143, 160, .28), transparent 48%), #090d0f; }
.card-software-device { grid-area: device; background: rgba(229, 239, 244, .085); }
.card-software-system { grid-area: system; background: #0c282d; }

.mosaic-cloud {
  grid-template-areas:
    "native native native native native core core core core core core core"
    "data data data data data core core core core core core core";
}

.card-cloud-native { grid-area: native; background: rgba(255, 255, 255, .07); }
.card-cloud-data { grid-area: data; background: rgba(4, 27, 31, .54); }
.card-cloud-core { grid-area: core; background: radial-gradient(circle at 78% 26%, rgba(194, 226, 239, .22), transparent 42%), #0b3036; }

.mosaic-enterprise {
  grid-template-rows: 270px 250px;
}

.card-enterprise-finance { grid-column: 1 / 9; grid-row: 1; background: #e7ebec; }
.card-enterprise-register { grid-column: 9 / 13; grid-row: 1; background: #dbe5e7; }
.card-enterprise-brand { grid-column: 4 / 13; grid-row: 2; background: #c9d9dc; }
.card-enterprise-finance .card-copy { max-width: 270px; }
.card-enterprise-finance .card-copy p { max-width: 260px; }

.mosaic-education {
  grid-template-areas:
    "accounting accounting accounting accounting computer computer computer computer computer computer computer computer"
    "security security security security computer computer computer computer computer computer computer computer";
}

.card-education-accounting { grid-area: accounting; background: rgba(255, 255, 255, .07); }
.card-education-computer { grid-area: computer; background: radial-gradient(circle at 78% 30%, rgba(119, 185, 198, .26), transparent 48%), #0a3037; }
.card-education-security { grid-area: security; background: rgba(35, 91, 102, .42); }

.module-software {
  background: #050707;
}

.module-cloud {
  background: #123a3f;
}

.module-glow {
  position: absolute;
  top: -280px;
  right: -180px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(208, 228, 241, .25), transparent 68%);
  filter: blur(28px);
  mix-blend-mode: hard-light;
}

.module-enterprise {
  background: var(--paper);
  color: var(--ink);
}

.module-enterprise .module-number,
.module-enterprise .card-meta,
.module-enterprise .business-card p {
  color: rgba(2, 2, 2, .56);
}

.module-enterprise .business-card {
  border-color: rgba(2, 2, 2, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .56);
}

.module-enterprise .business-card:hover,
.module-enterprise .business-card:focus-visible {
  border-color: rgba(2, 2, 2, .28);
  box-shadow: 0 26px 55px rgba(30, 62, 68, .14);
}

.module-enterprise .module-lead {
  color: rgba(2, 2, 2, .82);
}

.module-education {
  background: #071b20;
}

.education-lines {
  position: absolute;
  inset: 0;
  opacity: .34;
  background:
    radial-gradient(ellipse at 78% 38%, transparent 0 27%, rgba(176, 211, 230, .25) 27.2% 27.45%, transparent 27.7% 35%, rgba(176, 211, 230, .16) 35.2% 35.4%, transparent 35.7%),
    radial-gradient(ellipse at 72% 46%, rgba(50, 111, 122, .38), transparent 52%);
}

.sector-grid {
  margin-top: 88px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--line);
}

.sector-card {
  position: relative;
  min-height: 420px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  outline: none;
  cursor: pointer;
  transition: color 420ms var(--ease), background-color 420ms var(--ease);
}

.sector-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .1));
  content: "";
  opacity: 0;
  transition: opacity 420ms var(--ease);
}

.sector-card:hover::before,
.sector-card:focus-visible::before {
  opacity: 1;
}

.sector-card.is-active {
  background: var(--white);
  color: var(--ink);
}

.sector-index {
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.sector-card.is-active .sector-index {
  color: rgba(2, 2, 2, .5);
}

.sector-card h3 {
  margin-bottom: 24px;
  font-size: 38px;
  line-height: 1.13;
  letter-spacing: -1.1px;
}

.sector-card p {
  max-width: 310px;
  color: var(--soft);
  font-size: 16px;
  line-height: 24px;
}

.sector-card.is-active p {
  color: rgba(2, 2, 2, .68);
}

.sector-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  line-height: 20px;
}

.sector-card.is-active .sector-footer {
  color: rgba(2, 2, 2, .58);
}

.arrow-glyph {
  font-size: 24px;
  transition: transform 300ms var(--ease);
}

.sector-card:hover .arrow-glyph,
.sector-card:focus-visible .arrow-glyph {
  transform: translate(4px, -4px);
}

.intelligence-system {
  background: var(--teal);
}

.system-glow {
  position: absolute;
  top: 8%;
  right: -12%;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 220, 239, .26), transparent 66%);
  filter: blur(22px);
  mix-blend-mode: hard-light;
}

.system-layout {
  padding: 144px 0;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 0;
}

.system-copy {
  padding-right: 72px;
}

.system-copy h2 {
  margin-top: 0;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -1.8px;
}

.system-copy > p {
  max-width: 420px;
  margin-top: 32px;
  color: var(--soft);
  font-size: 18px;
  line-height: 28px;
}

.workflow-steps {
  border-bottom: 1px solid var(--line);
}

.workflow-step {
  position: relative;
  min-height: 148px;
  padding: 32px 28px;
  display: grid;
  grid-template-columns: 102px 1fr;
  border-top: 1px solid var(--line);
  outline: none;
  transition: background-color 300ms var(--ease);
}

.workflow-step::before {
  position: absolute;
  top: 40px;
  left: 57px;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: var(--teal);
  content: "";
  transition: background-color 300ms var(--ease), transform 300ms var(--ease);
}

.workflow-step:not(:last-child)::after {
  position: absolute;
  top: 52px;
  bottom: -40px;
  left: 62px;
  width: 1px;
  background: rgba(255, 255, 255, .22);
  content: "";
}

.workflow-step:hover,
.workflow-step:focus-visible {
  background: rgba(255, 255, 255, .06);
}

.workflow-step:hover::before,
.workflow-step:focus-visible::before {
  background: var(--white);
  transform: scale(1.35);
}

.step-number {
  padding-left: 48px;
  color: var(--muted);
  font-size: 13px;
  line-height: 22px;
}

.workflow-step h3 {
  font-size: 28px;
  line-height: 34px;
}

.workflow-step p {
  max-width: 470px;
  margin-top: 12px;
  color: var(--soft);
  font-size: 16px;
  line-height: 24px;
}

.operating-metrics {
  background: var(--paper);
  color: var(--ink);
}

.metrics-grid {
  padding: 112px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid rgba(2, 2, 2, .18);
}

.metrics-intro,
.metric {
  min-height: 260px;
  padding: 28px;
  border-top: 1px solid rgba(2, 2, 2, .18);
  border-right: 1px solid rgba(2, 2, 2, .18);
  border-bottom: 1px solid rgba(2, 2, 2, .18);
}

.metrics-intro {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
}

.metrics-intro h2 {
  max-width: 520px;
  margin-top: 0;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -1.4px;
}

.metrics-intro > p {
  margin-top: auto;
  color: rgba(2, 2, 2, .56);
  font-size: 15px;
  line-height: 22px;
}

.metric {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.metric > div {
  display: flex;
  align-items: baseline;
}

.metric strong {
  font-size: 64px;
  line-height: 68px;
  letter-spacing: -2.4px;
  font-variant-numeric: tabular-nums;
}

.metric span {
  margin-left: 5px;
  font-size: 22px;
  line-height: 28px;
}

.metric p {
  max-width: 190px;
  color: rgba(2, 2, 2, .64);
  font-size: 15px;
  line-height: 22px;
}

.principles-section {
  background: var(--black);
}

.principle-list {
  margin-top: 88px;
  border-bottom: 1px solid var(--line);
}

.principle {
  position: relative;
  min-height: 180px;
  padding: 36px 24px;
  display: grid;
  grid-template-columns: 78px 408px 1fr;
  align-items: start;
  border-top: 1px solid var(--line);
  outline: none;
  transition: background-color 300ms var(--ease);
}

.principle:hover,
.principle:focus-visible {
  background: linear-gradient(90deg, rgba(255, 255, 255, .07), transparent);
}

.principle > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 22px;
}

.principle h3 {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -.8px;
}

.principle p {
  max-width: 520px;
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
  transition: color 300ms var(--ease);
}

.principle:hover p,
.principle:focus-visible p {
  color: var(--paper);
}

.global-presence {
  min-height: 680px;
  background: #0b3035;
}

.presence-glow {
  position: absolute;
  top: -240px;
  left: 32%;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191, 218, 235, .2), rgba(14, 64, 69, .1) 40%, transparent 70%);
  filter: blur(28px);
  mix-blend-mode: hard-light;
}

.presence-layout {
  min-height: 680px;
  padding: 120px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.presence-copy {
  max-width: 520px;
}

.presence-copy h2 {
  margin-top: 0;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -1.8px;
}

.presence-copy p {
  max-width: 470px;
  margin-top: 28px;
  color: var(--soft);
  font-size: 18px;
  line-height: 28px;
}

.orbit {
  position: relative;
  width: 520px;
  aspect-ratio: 1;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
}

.orbit::before,
.orbit::after,
.orbit-ring {
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  content: "";
}

.orbit::before {
  transform: scaleX(.48);
}

.orbit::after {
  transform: scaleY(.48);
}

.orbit-ring-one {
  transform: rotate(34deg) scaleX(.55);
}

.orbit-ring-two {
  transform: rotate(-34deg) scaleX(.55);
}

.orbit-ring-three {
  inset: 49% 6%;
  border-radius: 50%;
}

.orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(255, 255, 255, .72);
  font-family: "IBM Plex Sans Thai", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.4px;
  transform: translate(-50%, -50%);
}

.region {
  position: absolute;
  z-index: 2;
  padding: 8px 12px;
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  transition: transform 300ms var(--ease);
}

.region:hover {
  transform: translateY(-3px);
}

.region-na { top: 19%; left: -4%; }
.region-eu { top: 11%; right: 9%; }
.region-apac { right: -5%; bottom: 24%; }
.region-remote { bottom: 9%; left: 16%; }

.contact-cta {
  min-height: 620px;
  background: var(--teal) url("public/assets/images/hero-lines-generated.png") center 54% / cover no-repeat;
}

.contact-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 31, 35, .94), rgba(3, 31, 35, .62) 58%, rgba(3, 31, 35, .74));
}

.contact-inner {
  min-height: 620px;
  padding: 112px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-inner h2 {
  max-width: 900px;
  margin-top: 0;
  font-size: 64px;
  line-height: 1.06;
  letter-spacing: -2.4px;
}

.contact-inner > p {
  max-width: 520px;
  margin-top: 28px;
  color: var(--paper);
  font-size: 18px;
  line-height: 27px;
}

.contact-actions {
  margin-top: 48px;
  display: flex;
  gap: 0;
}

.contact-actions .action {
  width: 306px;
}

.action-secondary {
  border-color: rgba(255, 255, 255, .72);
  background: transparent;
  color: var(--white);
}

.action-secondary::before {
  background: var(--white);
}

.action-secondary:hover,
.action-secondary:focus-visible {
  color: var(--ink);
}

.site-footer {
  min-height: 467px;
  overflow: hidden;
  background: #010303;
}

.footer-fade {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  opacity: .92;
}

.footer-orb {
  position: absolute;
  z-index: 0;
  top: -260px;
  left: 50%;
  width: 900px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 241, 248, .22), rgba(117, 151, 170, .09) 42%, transparent 68%);
  filter: blur(30px);
  mix-blend-mode: hard-light;
  opacity: .7;
  transform: translateX(-50%);
}

.footer-inner {
  position: relative;
  min-height: 467px;
  padding: 0 0 56px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.footer-brand {
  position: absolute;
  top: 156px;
  left: 50%;
  width: 190px;
  transform: translateX(-50%);
}

.footer-brand img {
  width: 100%;
  max-height: 72px;
  object-fit: contain;
}

.footer-meta {
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

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

.footer-links a,
.footer-meta p {
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
  transition: color 300ms var(--ease);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--white);
}

/* Inner pages */
.inner-hero {
  position: relative;
  isolation: isolate;
  height: 620px;
  overflow: hidden;
  background: #092b30 url("public/assets/images/hero-lines-generated.png") center 54% / cover no-repeat;
}

.inner-hero::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(2, 24, 28, .46) 56%, rgba(0, 0, 0, .42));
  content: "";
}

.contact-page-hero {
  height: 560px;
  background-position: center 62%;
}

.inner-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 154px 0 82px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.inner-eyebrow {
  margin-bottom: 34px;
  color: var(--muted);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 1.6px;
}

.inner-hero h1 {
  max-width: 920px;
  font-size: 68px;
  line-height: 1.04;
  letter-spacing: -2.7px;
}

.inner-hero-content > p {
  max-width: 610px;
  margin-top: 30px;
  color: var(--soft);
  font-size: 18px;
  line-height: 28px;
}

.about-section-head {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-section-head > span,
.contact-section-title > span,
.inquiry-copy > span,
.commitment-grid > div > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 1.2px;
}

.about-section-head h2,
.contact-section-title h2 {
  font-size: 48px;
  line-height: 1.09;
  letter-spacing: -1.6px;
}

.about-section-head-wide {
  max-width: 780px;
}

.about-story {
  background: var(--paper);
  color: var(--ink);
}

.about-story-layout {
  padding: 128px 0 136px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
}

.about-story .about-section-head > span {
  color: rgba(2, 2, 2, .48);
}

.about-story-copy {
  padding-left: 40px;
  border-left: 1px solid rgba(2, 2, 2, .17);
}

.about-highlight {
  max-width: 760px;
  font-size: 42px;
  line-height: 50px;
  letter-spacing: -1.4px;
}

.about-columns {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px;
}

.about-columns p {
  color: rgba(2, 2, 2, .64);
  font-size: 17px;
  line-height: 28px;
}

.about-capabilities {
  background: var(--black);
}

.about-capabilities .section-inner,
.about-values .section-inner,
.about-timeline .section-inner,
.offices-section .section-inner,
.contact-routes .section-inner {
  padding: 120px 0 128px;
}

.capability-panorama {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.capability-panorama article {
  min-height: 350px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color 340ms var(--ease), transform 340ms var(--ease);
}

.capability-panorama article:nth-child(2) { background: #10363b; }
.capability-panorama article:nth-child(3) { background: rgba(255, 255, 255, .055); }
.capability-panorama article:hover { background: #17434a; transform: translateY(-5px); }

.capability-panorama span {
  color: var(--muted);
  font-size: 13px;
}

.capability-panorama h3 {
  margin-top: auto;
  font-size: 34px;
  line-height: 40px;
}

.capability-panorama p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 23px;
}

.about-values {
  background: #0b3035;
}

.values-mosaic {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 250px 220px;
  gap: 18px;
}

.value-card {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .055);
}

.value-card span {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .8px;
}

.value-card h3 {
  max-width: 560px;
  font-size: 26px;
  line-height: 33px;
  letter-spacing: -.6px;
}

.value-card p {
  max-width: 520px;
  color: var(--soft);
  font-size: 16px;
  line-height: 25px;
}

.value-card-main {
  grid-column: 1 / 8;
  grid-row: 1 / 3;
  padding: 36px;
  background: radial-gradient(circle at 90% 12%, rgba(168, 211, 226, .2), transparent 45%), #061d22;
}

.value-card-main h3 { font-size: 38px; line-height: 45px; letter-spacing: -1.2px; }
.value-card-human { grid-column: 8 / 13; grid-row: 1; background: rgba(65, 119, 129, .42); }
.value-card-clear { grid-column: 8 / 11; grid-row: 2; }
.value-card-together { grid-column: 11 / 13; grid-row: 2; background: #dce7e9; color: var(--ink); }
.value-card-together span { color: rgba(2, 2, 2, .52); }
.value-card-together h3 { font-size: 20px; line-height: 27px; }

.about-timeline {
  background: var(--paper);
  color: var(--ink);
}

.about-timeline .about-section-head > span { color: rgba(2, 2, 2, .46); }

.timeline-grid {
  margin-top: 82px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.timeline-grid article {
  position: relative;
  min-height: 272px;
  padding: 0 26px 30px 0;
  border-top: 1px solid rgba(2, 2, 2, .2);
}

.timeline-grid article > span {
  position: absolute;
  top: -6px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--teal);
}

.timeline-grid strong {
  display: block;
  margin-top: 32px;
  color: rgba(2, 2, 2, .46);
  font-size: 14px;
  letter-spacing: 1px;
}

.timeline-grid h3 {
  max-width: 240px;
  margin-top: 54px;
  font-size: 24px;
  line-height: 31px;
}

.timeline-grid p {
  max-width: 240px;
  margin-top: 14px;
  color: rgba(2, 2, 2, .58);
  font-size: 15px;
  line-height: 23px;
}

.offices-section {
  min-height: 820px;
  background: #071f24;
}

.office-glow {
  position: absolute;
  top: -340px;
  right: -170px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 211, 225, .2), transparent 68%);
  filter: blur(24px);
}

.offices-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 48px;
}

.offices-intro > div:last-child {
  padding-bottom: 4px;
}

.offices-intro p {
  color: var(--soft);
  font-size: 18px;
  line-height: 28px;
}

.offices-intro small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 20px;
}

.office-grid {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.office-card {
  position: relative;
  min-height: 210px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 320ms var(--ease), color 320ms var(--ease);
}

.office-card:hover,
.office-card:focus-visible {
  background: var(--white);
  color: var(--ink);
  outline: none;
}

.office-card > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 20px;
}

.office-card strong {
  margin-top: auto;
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -1px;
}

.office-card i {
  position: absolute;
  right: 28px;
  bottom: 31px;
  font-size: 22px;
  font-style: normal;
  transition: transform 300ms var(--ease);
}

.office-card:hover i,
.office-card:focus-visible i { transform: translate(4px, -4px); }

.office-dialog {
  width: min(680px, calc(100% - 40px));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.office-dialog::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(8px);
}

.office-dialog-panel {
  position: relative;
  padding: 38px;
  background: var(--paper);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .36);
}

.dialog-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(2, 2, 2, .18);
  background: transparent;
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.dialog-kicker {
  color: rgba(2, 2, 2, .5);
  font-size: 13px;
  letter-spacing: 1px;
}

.office-dialog h2 {
  margin-top: 28px;
  font-size: 48px;
  line-height: 54px;
}

.office-dialog dl {
  margin: 48px 0 0;
  border-bottom: 1px solid rgba(2, 2, 2, .15);
}

.office-dialog dl > div {
  padding: 18px 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  border-top: 1px solid rgba(2, 2, 2, .15);
}

.office-dialog dt { color: rgba(2, 2, 2, .5); font-size: 13px; }
.office-dialog dd { margin: 0; font-size: 16px; line-height: 24px; }
.office-dialog-panel > p { margin-top: 22px; color: rgba(2, 2, 2, .46); font-size: 12px; }

.compact-cta,
.compact-cta .contact-inner { min-height: 520px; }

/* Contact page */
.contact-routes {
  background: var(--black);
}

.contact-section-title {
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.route-grid {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.route-card {
  position: relative;
  min-height: 286px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  transition: transform 340ms var(--ease), box-shadow 340ms var(--ease);
}

.route-card:hover,
.route-card:focus-visible {
  z-index: 2;
  transform: translateY(-5px);
  box-shadow: 0 28px 58px rgba(0, 0, 0, .22);
}

.route-card > span,
.route-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 20px;
}

.route-card h3 {
  max-width: 310px;
  margin-top: auto;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: -.7px;
}

.route-card p { margin-top: 18px; }
.route-card i { position: absolute; top: 28px; right: 28px; font-size: 22px; font-style: normal; }
.route-card-light { background: var(--paper); color: var(--ink); }
.route-card-light > span, .route-card-light p { color: rgba(2, 2, 2, .52); }
.route-card-teal { background: #174149; }
.route-card-dark { background: #080d0f; }

.inquiry-section {
  background: var(--paper);
  color: var(--ink);
}

.inquiry-layout {
  padding: 128px 0 136px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
}

.inquiry-copy h2 {
  max-width: 450px;
  margin-top: 48px;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -1.6px;
}

.inquiry-copy > p {
  max-width: 430px;
  margin-top: 28px;
  color: rgba(2, 2, 2, .6);
  font-size: 16px;
  line-height: 26px;
}

.response-note {
  margin-top: 68px;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(2, 2, 2, .18);
}

.response-note strong { font-size: 28px; }
.response-note span { color: rgba(2, 2, 2, .52); font-size: 13px; }

.contact-form {
  padding: 36px;
  border: 1px solid rgba(2, 2, 2, .15);
  background: #fff;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.contact-form label {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}

.contact-form label > span {
  color: rgba(2, 2, 2, .52);
  font-size: 13px;
  line-height: 20px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-bottom: 1px solid rgba(2, 2, 2, .22);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  transition: border-color 240ms ease;
}

.contact-form textarea {
  min-height: 144px;
  padding-top: 18px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--teal); }

.form-submit {
  width: 260px;
  height: 64px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  transition: background-color 280ms ease, transform 280ms ease;
}

.form-submit:hover,
.form-submit:focus-visible { background: var(--teal); transform: translateY(-2px); }

.form-success {
  margin-top: 24px;
  padding: 20px;
  background: #d8e7e8;
  color: var(--ink);
}

.form-success[hidden] { display: none; }
.form-success p { margin-top: 6px; color: rgba(2, 2, 2, .62); font-size: 14px; }

.contact-commitment {
  background: #0b3035;
}

.commitment-grid {
  padding: 112px 0 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}

.commitment-grid h2 {
  max-width: 520px;
  margin-top: 42px;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -1.4px;
}

.commitment-grid dl { margin: 0; border-bottom: 1px solid var(--line); }
.commitment-grid dl > div { padding: 24px 0; display: grid; grid-template-columns: 140px 1fr; border-top: 1px solid var(--line); }
.commitment-grid dt { color: var(--muted); font-size: 13px; }
.commitment-grid dd { margin: 0; color: var(--soft); font-size: 16px; line-height: 26px; }

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}

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

.workflow-step:nth-child(2) { transition-delay: 80ms; }
.workflow-step:nth-child(3) { transition-delay: 160ms; }
.workflow-step:nth-child(4) { transition-delay: 240ms; }

@media (max-width: 1100px) {
  .profile-copy {
    padding-left: 24px;
  }

  .sector-card {
    padding: 28px;
  }

  .sector-card h3 {
    font-size: 32px;
  }

  .principle {
    grid-template-columns: 64px 340px 1fr;
  }

  .orbit {
    width: 450px;
  }

  .module-intro {
    grid-template-columns: 310px 1fr;
  }

  .module-mosaic {
    grid-template-rows: repeat(2, 218px);
  }

  .about-story-layout {
    grid-template-columns: 310px 1fr;
  }

  .capability-panorama {
    grid-template-columns: repeat(2, 1fr);
  }

  .capability-panorama article {
    min-height: 270px;
  }

  .inquiry-layout {
    gap: 44px;
  }
}

@media (max-width: 810px) {
  .page-grid {
    width: calc(100% - 40px);
    background-image: repeating-linear-gradient(
      to right,
      var(--line) 0,
      var(--line) 1px,
      transparent 1px,
      transparent 50%
    );
  }

  .hero-shell,
  .hero {
    height: 893px;
  }

  .hero-shell::before {
    left: -680px;
    background-position: center center;
    background-size: cover;
    transform: none;
  }

  .site-header {
    height: 72px;
  }

  .site-header.is-open {
    height: 100dvh;
    background: rgba(3, 28, 32, .98);
    backdrop-filter: blur(18px);
  }

  .nav-rail {
    width: 100%;
    padding: 16px;
    align-items: flex-start;
  }

  .nav-left {
    height: 40px;
    padding: 6px 10px;
  }

  .nav-divider,
  .desktop-careers,
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    position: absolute;
    z-index: 3;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: block;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle span {
    position: absolute;
    top: 18px;
    left: 12px;
    width: 16px;
    height: 2px;
    background: var(--white);
    transition: transform 320ms var(--ease), top 320ms var(--ease);
  }

  .menu-toggle span:last-child {
    top: 23px;
  }

  .site-header.is-open .menu-toggle span:first-child {
    top: 20px;
    transform: rotate(45deg);
  }

  .site-header.is-open .menu-toggle span:last-child {
    top: 20px;
    transform: rotate(-45deg);
  }

  .mobile-menu {
    position: absolute;
    top: 88px;
    left: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
    pointer-events: none;
  }

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

  .mobile-menu > a {
    padding: 10px 0 16px;
    border-bottom: 1px solid var(--line);
    color: var(--white);
    font-size: 32px;
    font-weight: 400;
    line-height: 38.4px;
    letter-spacing: -.32px;
  }

  .mobile-menu .mobile-stealth {
    height: 48px;
    margin-top: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--white);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
  }

  .hero-inner {
    width: calc(100% - 40px);
    padding: 160px 0 48px;
    gap: 120px;
  }

  .lead {
    width: 100%;
  }

  .lead h1 {
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -1.92px;
  }

  .lead-copy p {
    width: 100%;
  }

  .action-original {
    width: 100%;
  }

  .trust-strip {
    height: 212px;
    flex-direction: column;
    align-items: stretch;
    gap: 64px;
  }

  .trust-copy {
    width: 100%;
  }

  .client-grid {
    width: 100%;
    height: 96px;
    grid-template-columns: repeat(2, 1fr);
  }

  .client-logo {
    justify-content: flex-start;
    padding-left: 24px;
  }

  .client-logo:nth-child(odd) {
    padding-left: 24px;
  }

  .client-logo:nth-child(even) {
    padding-left: 28px;
  }

  .client-logo img,
  .client-logo:first-child img,
  .client-logo:nth-child(4) img {
    max-width: 130px;
    max-height: 30px;
  }

  .company-profile .section-inner,
  .principles-section .section-inner {
    padding: 80px 0;
  }

  .business-sectors .section-inner {
    padding: 80px 0 72px;
  }

  .profile-intro {
    margin-top: 56px;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .profile-intro h2 {
    font-size: 38px;
    line-height: 44px;
    letter-spacing: -1.1px;
  }

  .profile-copy {
    padding: 0;
    font-size: 19px;
    line-height: 28px;
  }

  .profile-facts {
    margin-top: 64px;
    grid-template-columns: 1fr;
  }

  .fact {
    min-height: 138px;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .fact-mark {
    min-height: 96px;
  }

  .section-heading {
    padding-left: 0;
  }

  .section-heading h2,
  .system-copy h2,
  .presence-copy h2 {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.25px;
  }

  .sector-grid {
    margin-top: 64px;
    grid-template-columns: 1fr;
  }

  .sector-card {
    min-height: 300px;
  }

  .business-module,
  .module-layout {
    min-height: auto;
  }

  .module-layout {
    padding: 88px 0;
  }

  .module-intro {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .module-heading {
    gap: 28px;
  }

  .module-heading h2 {
    font-size: 44px;
    line-height: 50px;
    letter-spacing: -1.4px;
  }

  .module-lead {
    font-size: 21px;
    line-height: 32px;
  }

  .module-mosaic {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .business-card {
    min-height: 240px;
  }

  .business-card-large {
    min-height: 360px;
  }

  .card-cloud-core,
  .card-education-computer { order: -1; }

  .inner-hero,
  .contact-page-hero {
    height: 560px;
  }

  .inner-hero-content {
    padding: 132px 0 64px;
  }

  .inner-hero h1 {
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -1.8px;
  }

  .inner-hero-content > p {
    font-size: 16px;
    line-height: 25px;
  }

  .about-story-layout {
    padding: 88px 0;
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .about-story-copy {
    padding-left: 0;
    border-left: 0;
  }

  .about-highlight {
    font-size: 34px;
    line-height: 42px;
    letter-spacing: -1px;
  }

  .about-columns {
    margin-top: 48px;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-capabilities .section-inner,
  .about-values .section-inner,
  .about-timeline .section-inner,
  .offices-section .section-inner,
  .contact-routes .section-inner {
    padding: 88px 0;
  }

  .about-section-head {
    gap: 28px;
  }

  .about-section-head h2,
  .contact-section-title h2 {
    font-size: 40px;
    line-height: 46px;
  }

  .capability-panorama {
    margin-top: 56px;
  }

  .values-mosaic {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
  }

  .value-card,
  .value-card-main {
    min-height: 240px;
    padding: 28px;
  }

  .value-card-main {
    min-height: 360px;
  }

  .value-card-main h3 {
    font-size: 34px;
    line-height: 41px;
  }

  .timeline-grid {
    margin-top: 64px;
    grid-template-columns: 1fr;
  }

  .timeline-grid article {
    min-height: auto;
    padding: 0 0 48px 36px;
    border-top: 0;
    border-left: 1px solid rgba(2, 2, 2, .2);
  }

  .timeline-grid article > span {
    top: 0;
    left: -6px;
  }

  .timeline-grid strong {
    margin-top: 0;
  }

  .timeline-grid h3 {
    margin-top: 28px;
  }

  .offices-intro {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .office-grid {
    margin-top: 56px;
    grid-template-columns: repeat(2, 1fr);
  }

  .office-dialog-panel {
    padding: 32px;
  }

  .route-grid {
    margin-top: 56px;
    grid-template-columns: 1fr;
  }

  .route-card {
    min-height: 250px;
  }

  .inquiry-layout {
    padding: 88px 0;
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .inquiry-copy h2 {
    margin-top: 36px;
    font-size: 40px;
    line-height: 46px;
  }

  .response-note {
    margin-top: 44px;
  }

  .commitment-grid {
    padding: 88px 0;
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .commitment-grid h2 {
    font-size: 38px;
    line-height: 44px;
  }

  .system-layout {
    padding: 88px 0;
    grid-template-columns: 1fr;
    gap: 72px;
  }

  .system-copy {
    padding-right: 0;
  }

  .workflow-step {
    grid-template-columns: 56px 1fr;
    padding: 28px 0;
  }

  .workflow-step::before {
    left: 6px;
  }

  .workflow-step:not(:last-child)::after {
    left: 11px;
  }

  .step-number {
    padding-left: 0;
    opacity: 0;
  }

  .metrics-grid {
    padding: 80px 0;
    grid-template-columns: repeat(2, 1fr);
  }

  .metrics-intro {
    grid-column: span 2;
  }

  .principle {
    grid-template-columns: 64px 1fr;
    gap: 0;
  }

  .principle p {
    grid-column: 2;
    margin-top: 24px;
  }

  .presence-layout {
    min-height: 760px;
    padding: 88px 0;
    grid-template-columns: 1fr;
    gap: 72px;
  }

  .orbit {
    width: 340px;
    max-width: 92vw;
    margin: 0 auto;
  }

  .contact-inner {
    padding: 96px 0;
  }

  .contact-inner h2 {
    margin-top: 0;
    font-size: 46px;
    line-height: 52px;
    letter-spacing: -1.5px;
  }

  .contact-actions {
    flex-direction: column;
  }

  .contact-actions .action {
    width: 100%;
  }

  .footer-inner {
    padding-bottom: 48px;
  }

  .footer-meta {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .company-profile {
    min-height: auto;
  }

  .section-kicker {
    gap: 16px;
  }

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

  .metrics-intro {
    grid-column: 1;
  }

  .metrics-intro,
  .metric {
    min-height: 230px;
  }

  .metric strong {
    font-size: 56px;
  }

  .principle {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .principle p {
    grid-column: 1;
    margin-top: 0;
  }

  .principle h3 {
    font-size: 28px;
    line-height: 34px;
  }

  .region {
    font-size: 12px;
  }

  .region-na { left: -2%; }
  .region-eu { right: 4%; }
  .region-apac { right: -1%; }

  .business-card {
    min-height: 218px;
    padding: 24px;
  }

  .business-card-large {
    min-height: 330px;
  }

  .business-card-large h3 {
    font-size: 32px;
    line-height: 38px;
  }

  .capability-panorama {
    grid-template-columns: 1fr;
  }

  .capability-panorama article {
    min-height: 230px;
  }

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

  .office-card {
    min-height: 190px;
  }

  .office-dialog {
    width: calc(100% - 32px);
  }

  .office-dialog-panel {
    padding: 26px 22px;
  }

  .office-dialog h2 {
    font-size: 40px;
  }

  .office-dialog dl > div {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-form {
    padding: 24px;
  }

  .form-submit {
    width: 100%;
  }

  .commitment-grid dl > div {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .site-footer {
    min-height: 467px;
  }

  .footer-inner {
    min-height: 467px;
    padding-bottom: 40px;
    align-items: flex-end;
  }

  .footer-brand {
    top: 146px;
    width: 154px;
  }

  .footer-meta {
    width: 100%;
    display: flex;
    align-items: flex-end;
  }

  .footer-links {
    max-width: 190px;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 8px 20px;
    text-align: right;
  }
}

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

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

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}