/* Complete homepage styles, applied after the above-the-fold shell has painted. */
/* Route-optimized homepage stylesheet. Keep source ordering aligned with app/globals.css. */
:root {
  --ink: #10172d;
  --ink-soft: #1c2745;
  --emerald: #5aaee6;
  --emerald-bright: #85d7ff;
  --emerald-deep: #42529b;
  --ivory: #ffffff;
  --paper: #ffffff;
  --warm: #f3f3f3;
  --stone: #d8deeb;
  --brass: #d6b268;
  --muted: #68718a;
  --line: rgba(16, 23, 45, 0.14);
  --line-light: rgba(246, 241, 232, 0.16);
  --night-950: #080d1c;
  --night-900: #0b1020;
  --night-800: #151d36;
  --pearl-50: #fbfaf6;
  --pearl-100: #f4f2ec;
  --ice-400: #78c8ff;
  --ice-300: #9fddff;
  --iris-500: #8177e8;
  --iris-400: #a49af5;
  --coral-500: #f36f7f;
  --champagne-400: #d7b46c;
  --display: var(--font-display), "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --sans: var(--font-body), "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
}

/* Match the critical mobile font stack after deferred homepage styles load,
   so the late stylesheet cannot reintroduce the multi-file body font. */
@media (max-width: 700px) {
  :root.font-body-local {
    --font-body: "Plus Jakarta Sans Variable";
    --sans: var(--font-body), "Helvetica Neue", Arial, sans-serif;
  }
}

.font-body-local {
  --font-body: "Be Vietnam Pro";
}

.font-display-local {
  --font-display: "Plus Jakarta Sans Variable";
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: #7d91ed;
  color: #fff;
}

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

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

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

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 1px solid var(--emerald-bright);
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(38, 194, 129, 0.12);
}

.page-shell {
  width: min(100% - 64px, 1480px);
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: clamp(110px, 13vw, 210px);
}

.section--warm {
  background: var(--ivory);
}

.section--dark {
  background: var(--ink);
  color: var(--ivory);
}

.section--emerald {
  background: #273c7a;
  color: var(--ivory);
}

.eyebrow {
  margin: 0 0 28px;
  color: var(--emerald-deep);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow--light {
  color: #87d8b4;
}

.display-title {
  max-width: 920px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(48px, 6.4vw, 104px);
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 0.95;
}

.display-title--light {
  color: var(--ivory);
}

.large-copy {
  max-width: 680px;
  margin: 48px 0 0;
  color: #39453f;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 350;
  line-height: 1.62;
}

.large-copy--muted {
  color: rgba(243, 240, 232, 0.64);
}

.section-index {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 64px;
  margin-bottom: clamp(64px, 8vw, 120px);
}

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 36px;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 0 23px;
  font-size: 13px;
  font-weight: 570;
  letter-spacing: -0.01em;
  transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1), background 300ms, color 300ms, border-color 300ms;
}

.button:hover {
  transform: translateY(-2px);
}

.button--solid {
  background: var(--emerald);
  color: #fff;
  box-shadow: 0 10px 40px rgba(31, 169, 113, 0.22);
}

.button--solid:hover {
  background: var(--emerald-bright);
  box-shadow: 0 14px 52px rgba(31, 169, 113, 0.3);
}

.button--ghost {
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(14px);
}

.button--ghost:hover {
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(255, 255, 255, 0.07);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 580;
  transition: gap 300ms, color 300ms;
}

.text-link:hover {
  gap: 30px;
  color: var(--emerald-deep);
}

.text-link--light {
  color: var(--ivory);
}

.text-link--light:hover {
  color: #87d8b4;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Skip initial layout and paint work for homepage sections below the hero. */
.intro-section,
.solutions-section,
.contact-cta-section,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* Domain-level brand gateway */
.brand-gateway {
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(120, 200, 255, 0.16), transparent 29%),
    radial-gradient(circle at 18% 84%, rgba(129, 119, 232, 0.12), transparent 32%),
    #080d1c;
  color: var(--pearl-50);
}

.brand-gateway::before {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(159, 221, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 221, 255, 0.045) 1px, transparent 1px);
  background-size: 54px 54px;
  content: "";
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.brand-gateway__shell {
  position: relative;
  z-index: 1;
  width: min(100% - 72px, 1480px);
  min-height: 100svh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.brand-gateway__header {
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(246, 241, 232, 0.16);
}

.brand-gateway__brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.brand-gateway__brand img {
  width: 30px;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.4);
}

.brand-gateway__brand > span {
  width: 1px;
  height: 34px;
  background: rgba(215, 180, 108, 0.55);
}

.brand-gateway__brand strong {
  font-size: 13px;
  font-weight: 600;
}

.brand-gateway__languages {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-gateway__languages a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(246, 241, 232, 0.16);
  border-radius: 999px;
  padding: 0 15px;
  color: var(--pearl-50);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
}

.brand-gateway__languages a:first-child {
  border-color: rgba(120, 200, 255, 0.58);
  background: rgba(120, 200, 255, 0.08);
}

.brand-gateway__languages span {
  color: rgba(246, 241, 232, 0.54);
  font-weight: 400;
  letter-spacing: 0;
}

.brand-gateway__hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
  align-items: center;
  gap: clamp(64px, 9vw, 150px);
  padding-block: clamp(72px, 9vh, 124px);
}

.brand-gateway__eyebrow,
.brand-gateway__identity-label {
  margin: 0 0 28px;
  color: var(--ice-300);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.brand-gateway__intro h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(70px, 9vw, 146px);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.82;
}

.brand-gateway__intro h1 span {
  display: inline-block;
  margin-left: 0.18em;
  color: var(--champagne-400);
  font-family: var(--sans);
  font-size: 0.13em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: top;
}

.brand-gateway__lead {
  max-width: 720px;
  margin: 44px 0 0;
  color: rgba(246, 241, 232, 0.72);
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 350;
  line-height: 1.7;
}

.brand-gateway__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 42px;
}

.brand-gateway__primary,
.brand-gateway__secondary {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  font-size: 13px;
  font-weight: 600;
}

.brand-gateway__primary {
  min-width: 246px;
  border-radius: 999px;
  padding: 0 22px;
  background: var(--ice-400);
  color: var(--night-950);
}

.brand-gateway__secondary {
  min-height: auto;
  border-bottom: 1px solid rgba(246, 241, 232, 0.45);
  padding-bottom: 6px;
  color: rgba(246, 241, 232, 0.72);
}

.brand-gateway__identity {
  border: 1px solid rgba(159, 221, 255, 0.18);
  border-radius: 2px;
  padding: clamp(28px, 3vw, 44px);
  background: rgba(11, 16, 32, 0.62);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(18px);
}

.brand-gateway__identity dl {
  margin: 0;
}

.brand-gateway__identity dl > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 20px;
  border-top: 1px solid rgba(246, 241, 232, 0.1);
  padding-block: 15px;
}

.brand-gateway__identity dt {
  color: rgba(246, 241, 232, 0.42);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-gateway__identity dd {
  margin: 0;
  color: rgba(246, 241, 232, 0.88);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.brand-gateway__identity > a {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 6px;
  color: var(--ice-300);
  font-size: 12px;
  font-weight: 600;
}

.brand-gateway__services {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-block: 1px solid rgba(246, 241, 232, 0.14);
}

.brand-gateway__services a {
  min-height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border-right: 1px solid rgba(246, 241, 232, 0.12);
  padding: 18px 24px;
  color: rgba(246, 241, 232, 0.8);
  font-size: 13px;
  transition: background 250ms ease, color 250ms ease;
}

.brand-gateway__services a:last-child {
  border-right: 0;
}

.brand-gateway__services a:hover {
  background: rgba(120, 200, 255, 0.08);
  color: var(--pearl-50);
}

.brand-gateway__services span {
  color: var(--ice-400);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.brand-gateway__footer {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(246, 241, 232, 0.45);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.brand-gateway__footer a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: rgba(246, 241, 232, 0.8);
  font-weight: 600;
}

@media (max-width: 900px) {
  .brand-gateway__shell {
    width: min(100% - 36px, 720px);
  }

  .brand-gateway__header {
    min-height: 82px;
  }

  .brand-gateway__brand {
    gap: 12px;
  }

  .brand-gateway__brand > span,
  .brand-gateway__languages span {
    display: none;
  }

  .brand-gateway__brand strong {
    font-size: 11px;
  }

  .brand-gateway__languages a {
    min-width: 42px;
    justify-content: center;
    padding-inline: 10px;
  }

  .brand-gateway__hero {
    display: block;
    padding-block: 64px;
  }

  .brand-gateway__intro h1 {
    font-size: clamp(58px, 19vw, 104px);
  }

  .brand-gateway__lead {
    margin-top: 34px;
  }

  .brand-gateway__identity {
    margin-top: 56px;
  }

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

  .brand-gateway__services a {
    min-height: 84px;
    border-bottom: 1px solid rgba(246, 241, 232, 0.12);
    padding-inline: 16px;
  }

  .brand-gateway__services a:nth-child(2n) {
    border-right: 0;
  }

  .brand-gateway__services a:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 520px) {
  .brand-gateway__hero {
    padding-block: 50px;
  }

  .brand-gateway__eyebrow {
    margin-bottom: 20px;
    font-size: 9px;
  }

  .brand-gateway__intro h1 {
    font-size: clamp(52px, 17.5vw, 76px);
    line-height: 0.9;
  }

  .brand-gateway__lead {
    margin-top: 28px;
    font-size: 15px;
    line-height: 1.65;
  }

  .brand-gateway__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
    margin-top: 32px;
  }

  .brand-gateway__primary {
    width: 100%;
  }

  .brand-gateway__identity {
    margin-top: 46px;
    padding: 24px 20px;
  }

  .brand-gateway__identity dl > div {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
  }

  .brand-gateway__footer {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding-block: 22px;
  }
}

/* Header */
.site-header {
  --header-progress: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid rgba(215, 180, 108, 0.18);
  background-color: rgba(8, 10, 18, 0.965);
  color: var(--ivory);
  pointer-events: none;
  box-shadow: 0 14px 48px rgba(2, 3, 10, 0.2);
}

.site-header::before {
  position: absolute;
  z-index: 2;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 3%, rgba(215, 180, 108, .18) 20%, rgba(246, 235, 207, .5) 50%, rgba(215, 180, 108, .18) 80%, transparent 97%);
  content: "";
  pointer-events: none;
  transition: opacity 420ms ease;
  animation: header-rule-reveal 1400ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.site-header::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 18%, rgba(255, 250, 238, .025) 39%, rgba(215, 180, 108, .035) 48%, transparent 64%);
  content: "";
  opacity: 1;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.site-header.is-compact {
  height: 0;
  border: 0;
  background: none;
  color: var(--ivory);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header.is-compact::before {
  display: none;
  animation: none;
}

.site-header.is-compact::after {
  display: none;
}

.nav-shell {
  position: relative;
  display: grid;
  width: min(100% - 64px, 1480px);
  height: 94px;
  align-items: center;
  margin: 0 auto;
  border: 1px solid transparent;
  border-radius: 0;
  padding-inline: 0;
  background: transparent;
  grid-template-columns: 340px 1fr auto;
  pointer-events: auto;
  box-shadow: none;
  transition:
    width 720ms cubic-bezier(0.16, 1, 0.3, 1),
    height 720ms cubic-bezier(0.16, 1, 0.3, 1),
    margin 720ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 720ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 500ms ease,
    border-radius 720ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 500ms ease,
    box-shadow 600ms ease,
    grid-template-columns 720ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: header-arrive 900ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nav-shell::before {
  display: none;
  content: "";
}

.site-header.is-compact .nav-shell {
  width: min(calc(100% - 32px), 1320px);
  height: 68px;
  margin-top: 12px;
  border-color: rgba(215, 180, 108, 0.22);
  border-radius: 999px;
  padding-inline: 14px;
  background: linear-gradient(135deg, rgba(17, 19, 29, .95), rgba(7, 9, 16, .92));
  grid-template-columns: minmax(220px, 260px) 1fr auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 238, .1),
    inset 0 -1px 0 rgba(215, 180, 108, .05),
    0 18px 48px rgba(2, 3, 10, .3);
  backdrop-filter: blur(30px) saturate(112%);
  -webkit-backdrop-filter: blur(30px) saturate(112%);
}

.site-header.is-compact .nav-shell::before {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(108deg, transparent 14%, rgba(255, 250, 238, .045) 37%, rgba(215, 180, 108, .035) 43%, transparent 58%);
  content: "";
  opacity: .8;
  pointer-events: none;
}

@keyframes header-arrive {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes header-rule-reveal {
  from {
    opacity: 0;
    transform: translateX(-70%) scaleX(0.2);
  }
  to {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  width: max-content;
  transition: color 400ms ease;
}

.brand-mark {
  display: grid;
  flex: 0 0 100px;
  width: 100px;
  height: 62px;
  place-items: center;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1), height 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-logo {
  display: block;
  width: 96px;
  height: 60px;
  object-fit: contain;
  filter: none;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1), height 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand:hover .brand-logo {
  transform: scale(1.06);
}

.site-header.is-compact .brand-mark {
  flex-basis: 68px;
  width: 68px;
  height: 44px;
  transform: none;
}

.site-header.is-compact .brand-logo {
  width: 64px;
  height: 42px;
}

.brand-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 40px;
  margin: 0 17px;
  background: rgba(222, 204, 164, 0.42);
  transition: height 450ms ease, margin 600ms cubic-bezier(0.16, 1, 0.3, 1), background 400ms ease;
}

.site-header.is-compact .brand-divider {
  height: 28px;
  margin-inline: 14px;
  background: rgba(215, 180, 108, .32);
}

.brand-name {
  flex-shrink: 0;
  font-size: 17px;
  font-style: normal;
  font-weight: 520;
  letter-spacing: 0.31em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  transition: font-size 600ms cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-compact .brand-name {
  font-size: 13px;
  letter-spacing: 0.23em;
}

.primary-nav {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2vw, 34px);
  transition: gap 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-compact .primary-nav {
  gap: clamp(12px, 1.35vw, 22px);
}

.primary-nav a {
  position: relative;
  display: flex;
  min-width: 50px;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
  padding: 18px 2px 20px;
  color: rgba(243, 240, 232, 0.62);
  transition:
    color 280ms ease,
    letter-spacing 400ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 400ms ease;
  animation: nav-link-arrive 750ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.primary-nav a:nth-child(1) { animation-delay: 180ms; }
.primary-nav a:nth-child(2) { animation-delay: 230ms; }
.primary-nav a:nth-child(3) { animation-delay: 280ms; }
.primary-nav a:nth-child(4) { animation-delay: 330ms; }
.primary-nav a:nth-child(5) { animation-delay: 380ms; }
.primary-nav a:nth-child(6) { animation-delay: 430ms; }

@keyframes nav-link-arrive {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-item-index {
  color: #82d8ff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  transition: color 280ms ease, opacity 300ms ease;
}

.nav-item-label {
  font-size: 11px;
  font-weight: 660;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, #19d797, #8ef1cb 52%, transparent);
  box-shadow: 0 0 12px rgba(25, 215, 151, 0.58);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: #fff;
}

.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.primary-nav a:hover .nav-item-index,
.primary-nav a[aria-current="page"] .nav-item-index {
  color: #31e7a7;
}

.site-header.is-compact .primary-nav a {
  color: rgba(243, 240, 232, 0.62);
  gap: 5px;
  padding-block: 12px 14px;
}

.site-header.is-compact .primary-nav a:hover,
.site-header.is-compact .primary-nav a[aria-current="page"] {
  color: #fff;
}

.site-header.is-compact .primary-nav a::after {
  background: linear-gradient(90deg, #19d797, #8ef1cb 52%, transparent);
}

.site-header.is-compact .nav-item-index {
  color: #82d8ff;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  transition: gap 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-compact .nav-actions {
  gap: 12px;
}

.locale-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid rgba(215, 180, 108, .3);
  border-radius: 999px;
  padding: 5px 11px 5px 8px;
  background: rgba(255, 250, 238, .045);
  color: rgba(243, 240, 232, .58);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.14em;
  box-shadow: inset 0 1px 0 rgba(255, 250, 238, .05);
  transition: border-color 280ms ease, background 280ms ease, color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}

.locale-switch:hover {
  border-color: rgba(234, 215, 173, .66);
  background: rgba(215, 180, 108, .11);
  color: rgba(255, 252, 244, .92);
  box-shadow: inset 0 1px 0 rgba(255, 250, 238, .09), 0 8px 22px rgba(2, 3, 10, .2);
  transform: translateY(-1px);
}

.locale-current,
.locale-target {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.locale-current {
  margin: -2px 0 -2px -4px;
  border: 1px solid rgba(234, 215, 173, .28);
  border-radius: 999px;
  padding: 5px 7px 5px 6px;
  background: linear-gradient(135deg, rgba(215, 180, 108, .24), rgba(255, 250, 238, .09));
  color: #fffdf7;
  box-shadow: inset 0 1px 0 rgba(255, 250, 238, .11), 0 3px 9px rgba(2, 3, 10, .16);
}

.locale-current .locale-active {
  font-weight: 800;
  letter-spacing: .12em;
  text-shadow: 0 0 12px rgba(234, 215, 173, .2);
}

.locale-target {
  opacity: .48;
  transition: opacity 280ms ease;
}

.locale-switch:hover .locale-target {
  opacity: .86;
}

.locale-flag {
  display: block;
  width: 18px;
  height: 12px;
  flex: none;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  filter: saturate(.88) contrast(1.02);
}

.locale-switch-arrow {
  color: #dec28a;
  font-size: 11px;
  letter-spacing: 0;
  transition: transform 280ms ease;
}

.locale-switch:hover .locale-switch-arrow {
  transform: rotate(180deg);
}

.site-header.is-compact .locale-switch {
  min-height: 36px;
  border-color: rgba(215, 180, 108, .3);
  padding: 4px 9px 4px 7px;
  color: rgba(243, 240, 232, .58);
}

.site-header.is-compact .locale-current {
  padding: 4px 6px 4px 5px;
}

.site-header.is-compact .locale-switch:hover {
  color: rgba(243, 240, 232, 0.82);
}


.button--nav {
  position: relative;
  min-height: 50px;
  gap: 26px;
  overflow: hidden;
  border-color: rgba(70, 213, 160, 0.28);
  border-radius: 0;
  padding: 0 18px 0 21px;
  background:
    linear-gradient(135deg, rgba(39, 116, 85, 0.2), rgba(5, 23, 17, 0.74)),
    rgba(6, 25, 18, 0.72);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 24px rgba(19, 201, 137, 0.05);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  text-transform: uppercase;
}

.button--nav::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.7) 48%, transparent 70%);
  content: "";
  transform: translateX(-120%);
  transition: transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
}

.button--nav:hover::before {
  transform: translateX(120%);
}

.nav-cta-arrow {
  color: #2de3a3;
  font-size: 14px;
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1), color 300ms ease;
}

.button--nav:hover .nav-cta-arrow {
  transform: translate(3px, -3px);
}

.site-header.is-compact .button--nav {
  min-height: 44px;
  gap: 18px;
  padding-inline: 17px 15px;
  border-color: rgba(70, 213, 160, 0.34);
  background:
    linear-gradient(135deg, rgba(39, 116, 85, 0.22), rgba(5, 23, 17, 0.82)),
    rgba(6, 25, 18, 0.8);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 26px rgba(19, 201, 137, 0.08);
}

.site-header.is-compact .button--nav:hover {
  border-color: rgba(75, 232, 173, 0.62);
  background: rgba(10, 44, 31, 0.92);
}

.site-header.is-compact .nav-cta-arrow {
  color: #2de3a3;
}

.menu-button {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(222, 204, 164, 0.28);
  border-radius: 0;
  background: transparent;
  transition: border-color 300ms ease, background 300ms ease;
}

.menu-button::before {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--brass);
  border-right: 1px solid var(--brass);
  content: "";
}

.menu-button span {
  width: 17px;
  height: 1px;
  background: #fff;
  transition: background 300ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-compact .menu-button {
  border-color: rgba(100, 225, 180, 0.18);
  background: rgba(12, 47, 34, 0.18);
}

.site-header.is-compact .menu-button span {
  background: #fff;
}

.site-header.is-menu-open .menu-button span:first-child {
  transform: translateY(3px) rotate(45deg);
}

.site-header.is-menu-open .menu-button span:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

.header-progress {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(215, 180, 108, .25), #ead7ad, rgba(246, 235, 207, .72));
  box-shadow: 0 0 8px rgba(215, 180, 108, .18);
  opacity: 0;
  pointer-events: none;
  transform: scaleX(var(--header-progress));
  transform-origin: left center;
  transition: opacity 350ms ease;
}

.site-header.is-compact .header-progress {
  right: 28px;
  bottom: 0;
  left: 28px;
  border-radius: 999px;
  opacity: 0.72;
}

/* Header accent theme — cool blue to match the Friday Works interface. */
.site-header {
  border-bottom-color: rgba(82, 174, 255, .22);
}

.site-header::before {
  background: linear-gradient(90deg, transparent 3%, rgba(67, 153, 246, .2) 20%, rgba(137, 211, 255, .68) 50%, rgba(67, 153, 246, .2) 80%, transparent 97%);
}

.site-header::after {
  background: linear-gradient(105deg, transparent 18%, rgba(139, 211, 255, .025) 39%, rgba(65, 132, 235, .055) 48%, transparent 64%);
}

.site-header.is-compact .nav-shell {
  border-color: rgba(85, 174, 255, .27);
  box-shadow: inset 0 1px 0 rgba(179, 225, 255, .1), inset 0 -1px 0 rgba(62, 129, 233, .08), 0 18px 48px rgba(2, 3, 10, .3);
}

.site-header.is-compact .nav-shell::before {
  background: linear-gradient(108deg, transparent 14%, rgba(143, 213, 255, .045) 37%, rgba(64, 130, 236, .06) 43%, transparent 58%);
}

.brand-divider {
  background: rgba(106, 183, 255, .42);
}

.site-header.is-compact .brand-divider {
  background: rgba(90, 167, 255, .36);
}

.primary-nav a::after,
.site-header.is-compact .primary-nav a::after {
  background: linear-gradient(90deg, #3c8dff, #8bd8ff 52%, transparent);
  box-shadow: 0 0 12px rgba(72, 158, 255, .5);
}

.primary-nav a:hover .nav-item-index,
.primary-nav a[aria-current="page"] .nav-item-index {
  color: #80d4ff;
}

.locale-switch,
.site-header.is-compact .locale-switch {
  border-color: rgba(91, 173, 255, .36);
}

.locale-switch:hover {
  border-color: rgba(132, 205, 255, .72);
  background: rgba(63, 139, 235, .13);
}

.locale-current {
  border-color: rgba(126, 199, 255, .34);
  background: linear-gradient(135deg, rgba(61, 139, 239, .27), rgba(143, 213, 255, .09));
}

.locale-current .locale-active {
  text-shadow: 0 0 12px rgba(104, 190, 255, .24);
}

.locale-switch-arrow {
  color: #7fcfff;
}

.button--nav,
.site-header.is-compact .button--nav {
  border-color: rgba(87, 174, 255, .34);
  background: linear-gradient(135deg, rgba(38, 102, 190, .24), rgba(7, 20, 48, .84)), rgba(7, 18, 43, .78);
  box-shadow: inset 0 0 0 1px rgba(170, 222, 255, .035), 0 0 26px rgba(53, 145, 255, .08);
}

.button--nav:hover,
.site-header.is-compact .button--nav:hover {
  border-color: rgba(116, 201, 255, .68);
  background: rgba(12, 42, 82, .94);
}

.nav-cta-arrow,
.site-header.is-compact .nav-cta-arrow {
  color: #73caff;
}

.menu-button {
  border-color: rgba(104, 183, 255, .32);
}

.menu-button::before {
  border-color: #68bfff;
}

.header-progress {
  background: linear-gradient(90deg, rgba(61, 145, 255, .28), #82d2ff, rgba(171, 222, 255, .78));
  box-shadow: 0 0 8px rgba(71, 158, 255, .24);
}


/* Hero */
.hero {
  position: relative;
  /* A short release buffer lets the last video beat finish before the next section. */
  height: 160svh;
  min-height: 1152px;
  background: var(--ink);
  color: var(--ivory);
  --scroll-video-opacity: 0;
  --reverse-video-active: 0;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  background: #07100c;
}

@media (min-width: 901px) {
  .hero-sticky {
    background: url("/hero-laptop-poster.jpg") 62% center / cover no-repeat;
  }
}

.hero-sticky::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 16, 12, 0.94) 0%, rgba(7, 16, 12, 0.76) 39%, rgba(7, 16, 12, 0.32) 60%, rgba(7, 16, 12, 0.03) 100%),
    linear-gradient(0deg, rgba(7, 16, 12, 0.18), transparent 35%);
  content: "";
  pointer-events: none;
}

.hero-sticky::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.55) 0.45px, transparent 0.7px);
  background-size: 5px 5px;
  content: "";
  opacity: 0.035;
  pointer-events: none;
}

.hero-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  pointer-events: none;
}

.hero-scroll-video,
.hero-scroll-reverse-video {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  pointer-events: none;
}

.hero-scroll-video {
  opacity: calc(var(--scroll-video-opacity) * (1 - var(--reverse-video-active)));
}

.hero-scroll-reverse-video {
  opacity: calc(var(--scroll-video-opacity) * var(--reverse-video-active));
}

.hero-concept {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  padding-top: 92px;
  opacity: 1;
  pointer-events: none;
}

.hero-concept-inner {
  width: min(520px, 43vw);
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  will-change: opacity, transform;
}

.hero-concept-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
  color: #21bd80;
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.38em;
  line-height: 1;
  text-transform: uppercase;
}

.hero-concept-kicker::after {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, rgba(33, 189, 128, 0.85), transparent);
  content: "";
}

.hero-concept-title {
  display: flex;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(72px, 7.2vw, 118px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.78;
  flex-direction: column;
}

.hero-concept-seo-title {
  display: block;
  width: min(650px, 56vw);
  margin-top: 1.1rem;
  color: rgba(238, 243, 255, .78);
  font-family: var(--sans);
  font-size: clamp(15px, 1.28vw, 20px);
  font-weight: 380;
  letter-spacing: -.018em;
  line-height: 1.35;
}

.hero-concept-title > .hero-dissolve-text:first-child {
  color: #f8f6ef;
  text-shadow: 0 0 34px rgba(243, 240, 232, 0.08);
}

.hero-concept-title > .hero-dissolve-text:last-child {
  margin-top: 0.2em;
  color: #18a96f;
  text-shadow: 0 0 36px rgba(32, 216, 154, 0.11);
}

.hero-dissolve-text {
  display: inline-flex;
  white-space: pre;
}

.hero-mobile-static-title {
  display: none;
}

.hero-glyph {
  display: inline-block;
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  transform-origin: 50% 60%;
  will-change: auto;
}

.hero-concept-title[data-glyph-phase="dissolving"] .hero-glyph,
.hero-build-title[data-glyph-phase="dissolving"] .hero-glyph {
  will-change: transform, opacity;
  animation: hero-glyph-dissolve 1.28s cubic-bezier(0.22, 0.88, 0.32, 1) var(--glyph-delay) both;
}

.hero-concept-title[data-glyph-phase="assembling"] .hero-glyph,
.hero-build-title[data-glyph-phase="assembling"] .hero-glyph {
  will-change: transform, opacity;
  animation: hero-glyph-assemble 1.08s cubic-bezier(0.16, 1, 0.3, 1) var(--glyph-delay) both;
}

.hero-concept-title[data-glyph-phase="dissolved"] .hero-glyph,
.hero-build-title[data-glyph-phase="dissolved"] .hero-glyph {
  opacity: 0;
  transform: translate3d(var(--glyph-drift), var(--glyph-lift), 0) rotate(var(--glyph-turn)) scale(0.88);
}

@keyframes hero-glyph-dissolve {
  to {
    opacity: 0;
    transform: translate3d(var(--glyph-drift), var(--glyph-lift), 0) rotate(var(--glyph-turn)) scale(0.88);
  }
}

@keyframes hero-glyph-assemble {
  from {
    opacity: 0;
    transform: translate3d(var(--glyph-drift), var(--glyph-lift), 0) rotate(var(--glyph-turn)) scale(0.88);
  }
}

.hero-build-title-plain {
  color: rgba(248, 246, 239, 0.84);
}

.hero-build-title-accent {
  color: #159266;
  text-shadow: 0 0 34px rgba(26, 171, 117, 0.09);
}

.hero-concept-descriptor {
  margin: 36px 0 0;
  color: rgba(248, 246, 239, 0.92);
  font-size: clamp(19px, 1.55vw, 27px);
  font-weight: 330;
  letter-spacing: -0.025em;
}

.hero-concept-description {
  max-width: 480px;
  margin: 10px 0 0;
  color: rgba(243, 240, 232, 0.54);
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 340;
  line-height: 1.55;
}

.hero-concept-capabilities {
  display: flex;
  margin-top: 28px;
}

.hero-concept-capabilities > span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(243, 240, 232, 0.13);
  border-radius: 999px;
  margin-left: -1px;
  padding: 9px 22px;
  color: rgba(243, 240, 232, 0.48);
  font-size: 13px;
  font-weight: 390;
  white-space: nowrap;
}

.hero-concept-capabilities > span i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.hero-concept-capabilities > span.is-active {
  border-color: rgba(32, 216, 154, 0.34);
  color: #24c88b;
  box-shadow: inset 0 0 22px rgba(32, 216, 154, 0.035);
}

.hero-concept-cta {
  display: inline-flex;
  min-width: 208px;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(32, 216, 154, 0.5);
  margin-top: 32px;
  padding: 0 20px;
  color: rgba(248, 246, 239, 0.9);
  font-size: 13px;
  transition:
    border-color 300ms ease,
    background 300ms ease,
    color 300ms ease;
}

.hero-concept-cta span {
  color: #22ce8f;
  font-size: 20px;
  font-weight: 300;
}

.hero-concept-cta:hover {
  border-color: rgba(32, 216, 154, 0.78);
  background: rgba(32, 216, 154, 0.08);
  color: #fff;
}

.hero-build-concept {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  padding-top: 92px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
}

/* Invisible hero chapters must not sit above the active chapter's controls. */
.hero-concept-inner:not(.is-interactive),
.hero-build-concept:not(.is-interactive),
.hero-concept-inner:not(.is-interactive) *,
.hero-build-concept:not(.is-interactive) * {
  pointer-events: none !important;
}

.hero-build-concept.is-interactive {
  pointer-events: auto;
}

.hero-build-concept::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 23% 48%, rgba(18, 128, 87, 0.15), transparent 34%),
    linear-gradient(90deg, rgba(5, 14, 11, 0.74), rgba(5, 14, 11, 0.18) 62%, transparent);
  content: "";
}

.hero-build-copy {
  position: absolute;
  z-index: 2;
  top: 31%;
  left: 0;
  width: min(650px, 51%);
  pointer-events: auto;
}

.hero-build-kicker {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 28px;
  color: rgba(99, 205, 159, 0.72);
  font-size: 9px;
  font-weight: 570;
  letter-spacing: 0.4em;
  line-height: 1;
  text-transform: uppercase;
}

.hero-build-kicker i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #31c68d;
  box-shadow: 0 0 10px rgba(49, 198, 141, 0.62);
}

.hero-build-title {
  display: flex;
  margin: 0;
  color: rgba(248, 246, 239, 0.84);
  font-family: var(--sans);
  font-size: clamp(42px, 4.15vw, 70px);
  font-weight: 250;
  letter-spacing: -0.052em;
  line-height: 1.04;
  flex-direction: column;
}

.hero-build-title em {
  color: #159266;
  font-style: normal;
  font-weight: 270;
  text-shadow: 0 0 34px rgba(26, 171, 117, 0.09);
}

.hero-build-title b {
  font-weight: inherit;
}

.hero-build-description {
  max-width: 540px;
  margin: 22px 0 0;
  color: rgba(243, 240, 232, 0.5);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 340;
  line-height: 1.58;
}

.hero-build-actions {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-top: 30px;
}

.hero-build-primary,
.hero-build-secondary {
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
}

.hero-build-primary {
  min-width: 205px;
  min-height: 52px;
  justify-content: space-between;
  border: 1px solid rgba(32, 216, 154, 0.48);
  padding: 0 20px;
  color: rgba(248, 246, 239, 0.88);
  font-size: 12px;
  font-weight: 570;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background 280ms ease, border-color 280ms ease;
}

.hero-build-primary:hover {
  border-color: rgba(32, 216, 154, 0.82);
  background: rgba(32, 216, 154, 0.08);
}

.hero-build-primary span {
  color: #26c98d;
  font-size: 18px;
}

.hero-build-secondary {
  gap: 14px;
  color: rgba(243, 240, 232, 0.42);
  font-size: 10px;
  font-weight: 540;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 280ms ease;
}

.hero-build-secondary:hover {
  color: rgba(243, 240, 232, 0.82);
}

.hero-build-secondary span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(32, 216, 154, 0.17);
  border-radius: 50%;
  color: #22c98b;
}

.hero-build-standards {
  position: absolute;
  z-index: 2;
  top: 15.5%;
  right: 0;
  width: min(590px, 49%);
  border-top: 1px solid rgba(79, 210, 154, 0.24);
  padding-top: 13px;
}

.hero-build-standards-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 9px;
  color: rgba(137, 222, 184, 0.62);
  font-size: 7px;
  font-weight: 620;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
}

.hero-build-standards-label span {
  width: 16px;
  height: 1px;
  background: #2ad596;
  box-shadow: 0 0 12px rgba(42, 213, 150, 0.42);
}

.hero-build-standards-grid {
  display: grid;
  border-top: 1px solid rgba(243, 240, 232, 0.085);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-build-standards article {
  display: grid;
  min-width: 0;
  min-height: 67px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(243, 240, 232, 0.085);
  padding: 10px 14px 10px 4px;
  grid-template-columns: 26px minmax(0, 1fr);
}

.hero-build-standards article:nth-child(odd) {
  border-right: 1px solid rgba(243, 240, 232, 0.085);
}

.hero-build-standards article > span {
  align-self: start;
  padding-top: 4px;
  color: #30c990;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.12em;
  line-height: 1;
}

.hero-build-standards article > div {
  min-width: 0;
}

.hero-build-standards strong,
.hero-build-standards small {
  display: block;
  font-family: var(--sans);
}

.hero-build-standards strong {
  color: rgba(248, 246, 239, 0.88);
  font-size: clamp(10px, 0.82vw, 13px);
  font-weight: 490;
  letter-spacing: -0.012em;
  line-height: 1.18;
}

.hero-build-standards small {
  margin-top: 6px;
  overflow: hidden;
  color: rgba(243, 240, 232, 0.38);
  font-size: 7px;
  font-weight: 480;
  letter-spacing: 0.07em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-build-tech {
  position: absolute;
  z-index: 2;
  bottom: 61px;
  left: 0;
}

.hero-build-tech p {
  margin: 0 0 16px;
  color: rgba(243, 240, 232, 0.3);
  font-size: 8px;
  font-weight: 540;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-build-tech div {
  display: flex;
  align-items: center;
  gap: 28px;
}

.hero-build-tech span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(243, 240, 232, 0.28);
  font-size: 11px;
}

.hero-build-tech span i {
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(243, 240, 232, 0.24);
  transform: rotate(45deg);
}

.hero-build-orbit {
  position: absolute;
  z-index: 0;
  top: 17%;
  left: -11%;
  width: 68%;
  aspect-ratio: 1.65;
  border: 1px solid rgba(38, 194, 129, 0.25);
  border-radius: 50%;
  transform: rotate(11deg);
}

.hero-build-orbit::before,
.hero-build-orbit::after {
  position: absolute;
  border: 1px solid rgba(38, 194, 129, 0.09);
  border-radius: inherit;
  content: "";
}

.hero-build-orbit::before {
  inset: 7%;
}

.hero-build-orbit::after {
  inset: 17%;
}

.hero-build-orbit i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #26b77e;
  box-shadow: 0 0 18px rgba(38, 183, 126, 0.7);
}

.hero-build-orbit i:nth-child(1) { top: 0; left: 46%; }
.hero-build-orbit i:nth-child(2) { top: 22%; right: 2%; width: 4px; height: 4px; }
.hero-build-orbit i:nth-child(3) { bottom: 9%; left: 7%; width: 5px; height: 5px; }

.hero-build-wave {
  position: absolute;
  z-index: 0;
  right: -7%;
  bottom: 75px;
  width: 70%;
  height: 180px;
  background-image: radial-gradient(circle, rgba(96, 220, 165, 0.56) 0 0.7px, transparent 0.9px);
  background-size: 7px 7px;
  mask-image:
    linear-gradient(90deg, transparent, #000 20%, #000 82%, transparent),
    radial-gradient(ellipse at 50% 50%, #000, transparent 68%);
  opacity: 0.32;
  transform: perspective(520px) rotateX(58deg) rotateZ(-2deg);
  transform-origin: center bottom;
}

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

.hero-concept.is-glyph-rendering .hero-concept-title > span,
.hero-build-concept.is-glyph-rendering .hero-build-title :is(b, em) {
  color: transparent !important;
  text-shadow: none !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-content {
  position: relative;
  z-index: 4;
  display: flex;
  height: 100%;
  justify-content: center;
  flex-direction: column;
  padding-top: 85px;
}

.hero-content h1 {
  max-width: min(950px, 72vw);
  margin: 0;
  font-family: var(--display);
  font-size: clamp(67px, 8.3vw, 142px);
  font-weight: 400;
  letter-spacing: -0.064em;
  line-height: 0.86;
  text-wrap: balance;
}

.hero-bottom {
  display: flex;
  max-width: 930px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
  margin-top: clamp(44px, 6vh, 76px);
}

.hero-bottom > p {
  max-width: 470px;
  margin: 0;
  color: rgba(243, 240, 232, 0.64);
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 340;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex: none;
  gap: 12px;
}

.hero-meta {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 26px;
  left: 0;
  display: flex;
  justify-content: space-between;
  color: rgba(243, 240, 232, 0.38);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.scroll-cue {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.scroll-cue i::after {
  position: absolute;
  inset: 0;
  background: #8bdab9;
  content: "";
  animation: scroll-line 2.2s infinite ease-in-out;
  transform: translateX(-100%);
}

@keyframes scroll-line {
  50%, 100% { transform: translateX(100%); }
}

.glass-structure {
  position: absolute;
  z-index: 2;
  top: 18%;
  right: 1%;
  width: min(48vw, 740px);
  height: 68%;
  perspective: 1300px;
  transform: translate3d(calc(var(--hero-progress) * -40px), calc(var(--hero-progress) * 60px), 0) scale(calc(1 - var(--hero-progress) * 0.12));
  transform-style: preserve-3d;
}

.glass-panel {
  position: absolute;
  display: block;
  border: 1px solid rgba(139, 232, 193, 0.38);
  border-radius: 48px;
  background: linear-gradient(145deg, rgba(138, 231, 191, 0.14), rgba(14, 109, 75, 0.025) 52%, rgba(211, 255, 236, 0.1));
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.22), inset -1px -1px 3px rgba(14, 109, 75, 0.18), 0 40px 80px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
}

.glass-panel::after {
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.12) 33%, transparent 44%);
  content: "";
  animation: glass-shimmer 8s infinite ease-in-out;
}

@keyframes glass-shimmer {
  0%, 25% { transform: translateX(-40%); opacity: 0; }
  48% { opacity: 1; }
  70%, 100% { transform: translateX(40%); opacity: 0; }
}

.glass-panel--one {
  top: 3%;
  left: 27%;
  width: 52%;
  height: 72%;
  transform: rotateY(-20deg) rotateX(4deg) rotateZ(7deg);
  animation: float-one 9s infinite ease-in-out;
}

.glass-panel--two {
  right: 1%;
  bottom: 4%;
  width: 51%;
  height: 53%;
  transform: rotateY(14deg) rotateZ(-8deg) translateZ(50px);
  animation: float-two 11s infinite ease-in-out;
}

.glass-panel--three {
  bottom: 1%;
  left: 4%;
  width: 48%;
  height: 55%;
  transform: rotateY(22deg) rotateZ(9deg) translateZ(90px);
  animation: float-three 10s infinite ease-in-out;
}

.glass-core {
  position: absolute;
  top: 43%;
  left: 46%;
  color: rgba(181, 244, 216, 0.55);
  font-family: var(--display);
  font-size: 30px;
  font-style: italic;
  transform: translateZ(130px);
}

@keyframes float-one { 50% { transform: rotateY(-15deg) rotateX(1deg) rotateZ(4deg) translateY(-14px); } }
@keyframes float-two { 50% { transform: rotateY(9deg) rotateZ(-5deg) translateZ(62px) translateY(13px); } }
@keyframes float-three { 50% { transform: rotateY(17deg) rotateZ(12deg) translateZ(100px) translateY(-10px); } }

/* Intro */
.intro-section {
  position: relative;
  overflow: hidden;
  padding-block: 0;
  background:
    radial-gradient(circle at 92% 48%, rgba(13, 93, 64, 0.27), transparent 31%),
    radial-gradient(circle at 9% 78%, rgba(13, 74, 52, 0.16), transparent 34%),
    linear-gradient(135deg, #06130f 0%, #020a08 58%, #061610 100%);
  color: #f0f1ed;
}

.intro-section::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(74, 204, 146, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 204, 146, 0.026) 1px, transparent 1px);
  background-size: 56px 56px;
  content: "";
  mask-image: linear-gradient(90deg, transparent, #000 38%, #000 100%);
  opacity: 0.34;
  pointer-events: none;
}

.intro-shell {
  position: relative;
  z-index: 1;
  padding-top: clamp(54px, 5vw, 84px);
}

.intro-shell::before {
  position: absolute;
  top: -4%;
  right: -12%;
  width: min(63vw, 940px);
  aspect-ratio: 1;
  border: 1px solid rgba(68, 205, 143, 0.11);
  border-radius: 50%;
  box-shadow:
    0 0 0 86px rgba(50, 170, 117, 0.025),
    0 0 0 172px rgba(50, 170, 117, 0.018);
  content: "";
  pointer-events: none;
}

.intro-aura {
  position: absolute;
  z-index: 0;
  right: -7%;
  bottom: 10%;
  width: min(58vw, 850px);
  height: 470px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(28, 157, 102, 0.2), transparent 69%);
  filter: blur(22px);
  pointer-events: none;
}

.intro-topline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(237, 241, 237, 0.76);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.intro-topline-rule {
  display: block;
  width: 25px;
  height: 1px;
  background: #4bd293;
  box-shadow: 0 0 8px rgba(75, 210, 147, 0.5);
}

.intro-main {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 520px;
  align-items: center;
  gap: clamp(28px, 3vw, 52px);
  padding: clamp(50px, 5.6vw, 88px) 0 clamp(48px, 5vw, 78px);
  grid-template-columns:
    minmax(280px, 0.62fr)
    minmax(210px, 0.42fr)
    minmax(540px, 1.26fr);
}

.intro-heading {
  position: relative;
  align-self: center;
}

.intro-kicker {
  margin: 0 0 24px;
  color: #50d79a;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.intro-heading h2 {
  max-width: 470px;
  margin: 0;
  color: #f2f2ef;
  font-family: var(--sans);
  font-size: clamp(34px, 3.15vw, 52px);
  font-weight: 300;
  letter-spacing: -0.052em;
  line-height: 1.17;
}

.intro-heading-rule {
  display: block;
  width: 46px;
  height: 1px;
  margin-top: 30px;
  background: linear-gradient(90deg, #3fc68b, transparent);
}

.intro-summary {
  width: 100%;
  max-width: 320px;
  align-self: center;
  border-left: 1px solid rgba(132, 198, 168, 0.15);
  padding-left: clamp(26px, 3vw, 44px);
}

.intro-summary > p {
  margin: 0;
  color: rgba(226, 233, 228, 0.68);
  font-size: 13px;
  font-weight: 350;
  line-height: 1.82;
}

.intro-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 42px;
  border-bottom: 1px solid rgba(69, 205, 143, 0.48);
  padding-bottom: 13px;
  color: #56d99d;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 240ms ease, border-color 240ms ease;
}

.intro-link:hover {
  border-color: rgba(125, 238, 186, 0.85);
  color: #8aefc1;
}

.technology-stack {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 458px;
  align-items: center;
  grid-template-columns: minmax(270px, 1fr) 178px;
  grid-template-rows: 360px minmax(82px, auto);
}

.technology-stack-scene {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  height: 360px;
  min-width: 280px;
  perspective: 780px;
  transform-style: preserve-3d;
}

.technology-stack-glow {
  position: absolute;
  z-index: 0;
  top: 40%;
  left: 44%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 222, 135, 0.38), rgba(23, 173, 108, 0.12) 36%, transparent 69%);
  filter: blur(24px);
  opacity: 0.72;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.technology-stack-layer {
  --layer-offset: 0px;
  position: absolute;
  z-index: 1;
  top: var(--layer-top);
  left: 8%;
  width: 78%;
  height: 148px;
  overflow: hidden;
  border: 1px solid rgba(94, 224, 164, 0.34);
  border-radius: 0;
  background:
    linear-gradient(rgba(88, 213, 157, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 213, 157, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(40, 190, 124, 0.28), rgba(9, 41, 29, 0.23) 47%, rgba(2, 13, 9, 0.64));
  background-size: 12px 12px, 12px 12px, auto;
  box-shadow: inset 0 0 32px rgba(59, 216, 145, 0.08), 0 16px 30px rgba(0, 0, 0, 0.22);
  color: inherit;
  pointer-events: none;
  translate: 0 0;
  transform: translate3d(0, var(--layer-offset), 0) rotateX(58deg) rotateZ(-45deg);
  transform-origin: center center;
  animation: none;
  transition:
    border-color 320ms ease,
    box-shadow 320ms ease,
    filter 320ms ease,
    opacity 320ms ease;
  will-change: auto;
}

.technology-stack-layer::before,
.technology-stack-layer::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.technology-stack-layer::before {
  inset: 18%;
  border: 1px solid rgba(97, 226, 166, 0.17);
  border-radius: 50%;
  box-shadow: 0 0 0 15px rgba(97, 226, 166, 0.035), 0 0 0 31px rgba(97, 226, 166, 0.025);
}

.technology-stack-layer::after {
  inset: 0;
  background:
    radial-gradient(circle at 65% 34%, rgba(114, 235, 181, 0.2) 0 1px, transparent 1.5px),
    radial-gradient(circle at 31% 73%, rgba(114, 235, 181, 0.16) 0 1px, transparent 1.5px);
  background-size: 38px 38px, 48px 48px;
}

.technology-stack-layer > i,
.technology-stack-layer > span {
  position: absolute;
  border-radius: 50%;
  background: #5ce2a5;
  box-shadow: 0 0 12px rgba(83, 228, 161, 0.8);
}

.technology-stack-layer > i {
  top: 24%;
  left: 19%;
  width: 4px;
  height: 4px;
}

.technology-stack-layer > span {
  right: 23%;
  bottom: 25%;
  width: 3px;
  height: 3px;
}

.technology-stack-layer--1 {
  z-index: 4;
  animation-delay: -1.3s;
  border-color: rgba(145, 230, 193, 0.2);
  opacity: 0.58;
}

.technology-stack-layer--2 {
  z-index: 3;
  animation-delay: -3.7s;
  animation-duration: 7.4s;
  background-color: rgba(29, 91, 65, 0.2);
  opacity: 0.72;
}

.technology-stack-layer--3 {
  z-index: 2;
  animation-delay: -2.2s;
  animation-duration: 6.4s;
  border-color: rgba(74, 227, 153, 0.57);
  background-color: rgba(32, 139, 91, 0.23);
  box-shadow: inset 0 0 42px rgba(69, 230, 153, 0.18), 0 0 34px rgba(22, 175, 111, 0.12);
}

.technology-stack-layer--4 {
  z-index: 1;
  animation-delay: -5.1s;
  animation-duration: 7.8s;
  border-color: rgba(191, 162, 91, 0.38);
  background-color: rgba(38, 49, 33, 0.2);
  opacity: 0.78;
}

.technology-stack-layer.is-active {
  border-color: rgba(164, 226, 255, 0.98);
  box-shadow:
    inset 0 0 58px rgba(112, 176, 255, 0.34),
    0 0 42px rgba(109, 117, 255, 0.32);
  filter: brightness(1.38) saturate(1.24);
  opacity: 1 !important;
}

.technology-stack.has-active-layer .technology-stack-layer:not(.is-active) {
  filter: saturate(0.42) brightness(0.54);
  opacity: 0.32 !important;
}

.technology-stack-hit-targets {
  position: absolute;
  z-index: 9;
  inset-block: 0;
  left: 3%;
  display: grid;
  width: 90%;
  grid-template-rows: repeat(4, 1fr);
}

.technology-stack-hit-targets button {
  width: 100%;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.technology-stack-hit-targets button:focus-visible {
  outline: 1px solid rgba(145, 239, 193, 0.62);
  outline-offset: -8px;
  background: linear-gradient(90deg, transparent, rgba(69, 220, 151, 0.045), transparent);
}

.technology-stack-core {
  position: absolute;
  z-index: 7;
  top: 48%;
  left: 44%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5ee1a5;
  box-shadow: 0 0 12px #5ee1a5, 0 0 42px 20px rgba(51, 218, 145, 0.14);
  pointer-events: none;
}

.technology-stack-connector {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 360px;
  overflow: visible;
  pointer-events: none;
}

.technology-stack-connector path {
  fill: none;
  stroke: rgba(91, 226, 163, 0.55);
  stroke-dashoffset: 0;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.05;
  transition: stroke 280ms ease, opacity 280ms ease;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.technology-stack-connector circle {
  fill: #62dfa5;
  filter: drop-shadow(0 0 4px rgba(98, 223, 165, 0.7));
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 280ms ease, opacity 280ms ease;
}

.technology-stack.has-active-layer .technology-stack-connector g:not(.is-active) {
  opacity: 0.24;
}

.technology-stack-connector g.is-active path {
  stroke: rgba(126, 241, 190, 0.95);
  stroke-width: 1.35;
}

.technology-stack-connector g.is-active circle {
  fill: #a2f5ce;
}

.technology-stack-labels {
  position: relative;
  z-index: 8;
  display: grid;
  grid-column: 2;
  grid-row: 1;
  min-height: 340px;
  grid-template-rows: repeat(4, 1fr);
  padding-block: 25px;
}

.technology-stack-label {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 54px;
  justify-content: center;
  flex-direction: column;
  border: 0;
  padding: 0 0 0 15px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: filter 280ms ease, opacity 280ms ease, transform 280ms ease;
}

.technology-stack-label:focus-visible {
  outline: 1px solid rgba(91, 220, 158, 0.7);
  outline-offset: 6px;
}

.technology-stack-label strong {
  color: rgba(242, 244, 241, 0.82);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.13em;
  line-height: 1.3;
}

.technology-stack-label span {
  margin-top: 7px;
  color: rgba(212, 223, 216, 0.52);
  font-size: 9px;
  line-height: 1.45;
}

.technology-stack-label.is-active {
  background: linear-gradient(90deg, rgba(120, 200, 255, 0.12), transparent 82%);
  transform: none;
}

.technology-stack-label.is-active strong {
  color: #eef8ff;
  text-shadow: 0 0 14px rgba(130, 205, 255, 0.58);
}

.technology-stack-label.is-active span {
  color: rgba(221, 236, 255, 0.82);
}

.technology-stack.has-active-layer .technology-stack-label:not(.is-active) {
  filter: brightness(0.54);
  opacity: 0.62;
}

.technology-stack-detail {
  position: relative;
  z-index: 8;
  display: grid;
  min-height: 82px;
  align-items: start;
  gap: 18px;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: 34px 1fr;
  border-top: 1px solid rgba(98, 203, 153, 0.2);
  padding: 17px 10px 0;
}

.technology-stack-detail > span {
  color: #55da9d;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.technology-stack-detail strong {
  display: block;
  color: rgba(241, 244, 241, 0.88);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.14em;
  line-height: 1.3;
}

.technology-stack-detail p {
  max-width: 520px;
  margin: 7px 0 0;
  color: rgba(213, 224, 217, 0.6);
  font-size: 10px;
  line-height: 1.65;
}

@keyframes technology-layer-float {
  0%,
  100% {
    translate: 0 -2px;
  }
  50% {
    translate: 0 2.5px;
  }
}

.intro-services {
  position: relative;
  z-index: 2;
  display: grid;
  border-top: 1px solid rgba(137, 201, 170, 0.17);
  border-bottom: 1px solid rgba(137, 201, 170, 0.17);
  border-left: 1px solid rgba(137, 201, 170, 0.12);
  background: rgba(6, 25, 18, 0.36);
  grid-template-columns: 0.8fr repeat(4, 1fr);
}

.intro-services-lead,
.intro-service-card {
  min-height: 310px;
  border-right: 1px solid rgba(137, 201, 170, 0.17);
  padding: clamp(25px, 2.7vw, 42px);
}

.intro-services-lead {
  position: relative;
  display: flex;
  flex-direction: column;
}

.intro-services-mark {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(85, 218, 155, 0.55);
  border-radius: 50%;
}

.intro-services-mark i {
  display: block;
  width: 5px;
  height: 5px;
  border: 1px solid #5bdc9e;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(91, 220, 158, 0.6);
}

.intro-services-lead > p {
  margin: 42px 0 20px;
  color: #55d99d;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.15em;
}

.intro-services-lead > strong {
  max-width: 170px;
  color: rgba(231, 236, 232, 0.72);
  font-size: 13px;
  font-weight: 350;
  line-height: 1.72;
}

.intro-services-lead > a {
  display: grid;
  width: 42px;
  height: 42px;
  margin-top: auto;
  place-items: center;
  border: 1px solid rgba(72, 204, 145, 0.55);
  border-radius: 50%;
  color: #5fe0a4;
  transition: background 240ms ease, color 240ms ease, transform 240ms ease;
}

.intro-services-lead > a:hover {
  background: #4bd293;
  color: #04100b;
  transform: translateX(4px);
}

.intro-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background 350ms ease, transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.intro-service-card:hover {
  z-index: 1;
  background: linear-gradient(155deg, rgba(23, 89, 63, 0.34), rgba(5, 26, 18, 0.48));
  transform: translateY(-5px);
}

.intro-service-card > svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: rgba(237, 242, 238, 0.78);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.intro-service-card > span {
  margin-top: 36px;
  color: #52d596;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.1em;
}

.intro-service-card h3 {
  margin: 22px 0 0;
  color: #f0f2ee;
  font-family: var(--sans);
  font-size: clamp(20px, 1.65vw, 27px);
  font-weight: 350;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.intro-service-card p {
  max-width: 230px;
  margin: 24px 0 0;
  color: rgba(215, 224, 218, 0.61);
  font-size: 12px;
  font-weight: 350;
  line-height: 1.72;
}

.intro-service-card > div {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: auto;
}

.intro-service-card > div i {
  display: block;
  height: 1px;
  flex: 1;
  background: rgba(138, 197, 169, 0.28);
}

.intro-service-card > div b {
  color: #50d396;
  font-size: 20px;
  font-weight: 300;
}

/* What we build */
.build-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(12, 1fr);
}

.build-card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  display: flex;
  min-height: 610px;
  overflow: hidden;
  justify-content: space-between;
  flex-direction: column;
  border: 1px solid rgba(9, 19, 15, 0.12);
  border-radius: 3px;
  padding: clamp(28px, 3vw, 48px);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms, border-color 500ms;
}

.build-card:hover {
  z-index: 2;
  border-color: rgba(31, 169, 113, 0.45);
  box-shadow: 0 34px 80px rgba(29, 58, 44, 0.15);
  transform: translateY(-10px);
}

.build-card--1 {
  grid-column: span 5;
  background: #faf9f5;
}

.build-card--2 {
  grid-column: span 4;
  background: #dfe4dc;
}

.build-card--3 {
  grid-column: span 3;
  background: var(--ink-soft);
  color: var(--ivory);
}

.card-reflection {
  position: absolute;
  z-index: 0;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 68%);
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(var(--pointer-x) - 180px), calc(var(--pointer-y) - 180px));
  transition: opacity 300ms;
}

.build-card:hover .card-reflection,
.project-card:hover .card-reflection {
  opacity: 0.55;
}

.card-topline,
.project-topline {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.build-card--3 .card-topline {
  color: rgba(243, 240, 232, 0.48);
}

.build-card > div:last-child {
  position: relative;
  z-index: 1;
}

.build-card h3 {
  margin: 0 0 28px;
  font-family: var(--display);
  font-size: clamp(44px, 4.2vw, 72px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.build-card p {
  max-width: 450px;
  margin: 0;
  color: #4e5a54;
  font-size: 15px;
  line-height: 1.65;
}

.build-card--3 p {
  color: rgba(243, 240, 232, 0.62);
}

.build-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.build-card li {
  border: 1px solid rgba(9, 19, 15, 0.14);
  border-radius: 100px;
  padding: 7px 12px;
  font-size: 10px;
}

.build-card--3 li {
  border-color: rgba(243, 240, 232, 0.2);
}

/* Solutions showcase */
.solutions-section {
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 980px;
  background:
    radial-gradient(circle at 73% 14%, rgba(45, 151, 110, 0.055), transparent 29%),
    linear-gradient(180deg, #f8f6ef, #f4f1e9);
}

.solutions-section :is(
  .solution-globe::after,
  .globe-surface-point,
  .solution-orbit i,
  .solution-globe-scan,
  .app-surface,
  .ai-brain-aura,
  .ai-brain-edge,
  .ai-brain-node,
  .ai-data-rain i,
  .ai-pedestal i
) {
  animation-play-state: paused;
}

.solutions-section.is-motion-active :is(
  .solution-globe::after,
  .globe-surface-point,
  .solution-orbit i,
  .solution-globe-scan,
  .app-surface,
  .ai-brain-aura,
  .ai-brain-edge,
  .ai-brain-node,
  .ai-data-rain i,
  .ai-pedestal i
) {
  animation-play-state: running;
}

.solutions-section::before {
  position: absolute;
  right: 4%;
  bottom: 4%;
  width: 44vw;
  height: 44vw;
  border: 1px solid rgba(30, 118, 85, 0.045);
  border-radius: 50%;
  box-shadow:
    0 0 0 78px rgba(30, 118, 85, 0.018),
    0 0 0 156px rgba(30, 118, 85, 0.012);
  content: "";
  pointer-events: none;
}

.solutions-layout {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: stretch;
  gap: clamp(45px, 5vw, 86px);
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.78fr);
}

.solutions-copy {
  align-self: center;
  padding-right: clamp(0px, 2vw, 28px);
}

.solutions-kicker {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(29, 126, 90, 0.38);
  border-radius: 999px;
  margin: 0 0 31px;
  padding: 6px 13px;
  color: #237f60;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.solutions-kicker i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2b8e69;
  box-shadow: 0 0 0 4px rgba(43, 142, 105, 0.08);
}

.solutions-copy h2 {
  max-width: 520px;
  margin: 0;
  color: #0b2119;
  font-family: var(--sans);
  font-size: clamp(39px, 3.35vw, 58px);
  font-weight: 520;
  letter-spacing: -0.055em;
  line-height: 1.1;
}

.solutions-copy h2 span {
  display: block;
  color: #278360;
}

.solutions-description {
  max-width: 500px;
  margin: 31px 0 0;
  color: #64706a;
  font-size: 14px;
  line-height: 1.72;
}

.solutions-cta {
  display: inline-flex;
  min-width: 210px;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(20, 101, 73, 0.55);
  border-radius: 999px;
  margin-top: 58px;
  padding: 5px 6px 5px 22px;
  color: #174f3b;
  font-size: 12px;
  transition: background 300ms ease, color 300ms ease, transform 300ms ease;
}

.solutions-cta span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #154d39;
  color: #fff;
  font-size: 18px;
}

.solutions-cta:hover {
  background: #154d39;
  color: #fff;
  transform: translateY(-3px);
}

.solutions-carousel {
  min-width: 0;
}

.solutions-cards-frame {
  min-width: 0;
}

.solutions-scroll-cue {
  display: none;
}

.solutions-carousel-guide {
  display: none;
}

.solutions-cards {
  display: grid;
  min-width: 0;
  gap: 17px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-card {
  --scene-tilt-x: 0deg;
  --scene-tilt-y: 0deg;
  --scene-light-x: 50%;
  --scene-light-y: 42%;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 650px;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(10, 36, 27, 0.1);
  border-radius: 18px;
  padding: 27px 25px 26px;
  background: rgba(252, 251, 247, 0.88);
  box-shadow:
    0 24px 80px rgba(35, 54, 46, 0.06),
    inset 0 1px rgba(255, 255, 255, 0.9);
  transition:
    border-color 400ms ease,
    box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.solution-card--2 {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(235, 241, 237, 0.87)),
    #f7f7f2;
}

.solution-card--3 {
  border-color: rgba(69, 190, 137, 0.18);
  background:
    radial-gradient(circle at 50% 29%, rgba(28, 127, 88, 0.28), transparent 36%),
    linear-gradient(145deg, #0e2c22, #071b15 73%);
  color: #eef8f2;
  box-shadow:
    0 32px 90px rgba(5, 32, 23, 0.18),
    inset 0 1px rgba(123, 235, 183, 0.08);
}

.solution-card:hover {
  border-color: rgba(29, 135, 96, 0.35);
  box-shadow:
    0 34px 100px rgba(29, 76, 57, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.92);
  transform: translateY(-8px);
}

.solution-card--3:hover {
  border-color: rgba(91, 229, 166, 0.42);
  box-shadow:
    0 34px 100px rgba(6, 47, 32, 0.3),
    inset 0 1px rgba(123, 235, 183, 0.12);
}

.solution-card-light {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(
    circle at var(--scene-light-x) var(--scene-light-y),
    rgba(255, 255, 255, 0.75),
    transparent 34%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}

.solution-card--3 .solution-card-light {
  background: radial-gradient(
    circle at var(--scene-light-x) var(--scene-light-y),
    rgba(55, 226, 153, 0.13),
    transparent 34%
  );
}

.solution-card:hover .solution-card-light {
  opacity: 0.72;
}

.solution-card-topline {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #217b5b;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
}

.solution-card-topline a {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #1c392e;
  font-size: 17px;
  transition: color 250ms ease, transform 250ms ease;
}

.solution-card-topline a:hover {
  color: #1a9066;
  transform: translate(2px, -2px);
}

.solution-card--3 .solution-card-topline,
.solution-card--3 .solution-card-topline a {
  color: #75e1af;
}

.solution-card-visual {
  position: relative;
  z-index: 2;
  height: 335px;
  margin: 2px -9px 0;
  perspective: 900px;
}

.solution-scene {
  position: absolute;
  inset: 0;
  transform: rotateX(var(--scene-tilt-x)) rotateY(var(--scene-tilt-y));
  transform-style: preserve-3d;
  transition: transform 180ms ease-out;
  will-change: transform;
}

/* Website globe */
.solution-globe {
  position: absolute;
  z-index: 3;
  top: 48px;
  left: 50%;
  width: 198px;
  height: 198px;
  overflow: hidden;
  border: 1px solid rgba(42, 132, 99, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 29%, rgba(255, 255, 255, 0.95), transparent 34%),
    radial-gradient(circle at 57% 66%, rgba(59, 161, 121, 0.13), transparent 58%),
    linear-gradient(135deg, rgba(215, 230, 222, 0.42), rgba(251, 250, 246, 0.76));
  box-shadow:
    inset -18px -14px 34px rgba(36, 115, 86, 0.09),
    inset 13px 12px 26px rgba(255, 255, 255, 0.9),
    0 24px 45px rgba(27, 92, 68, 0.09);
  transform: translateX(-50%) translateZ(34px);
}

.solution-globe::before {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(54, 145, 109, 0.12);
  border-radius: 50%;
  content: "";
}

.solution-globe::after {
  position: absolute;
  top: -10%;
  left: -35%;
  width: 42%;
  height: 120%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
  content: "";
  transform: rotate(19deg);
  animation: globe-highlight 7s ease-in-out infinite;
}

.globe-latitude,
.globe-longitude {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(35, 123, 90, 0.17);
  border-radius: 50%;
}

.globe-latitude {
  right: 5%;
  left: 5%;
  height: 30%;
}

.globe-latitude--1 { top: 17%; }
.globe-latitude--2 { top: 35%; }
.globe-latitude--3 { top: 53%; }
.globe-longitude { inset-block: 4%; left: 50%; width: 34%; transform: translateX(-50%); }
.globe-longitude--1 { transform: translateX(-50%) rotate(34deg); }
.globe-longitude--2 { width: 62%; }
.globe-longitude--3 { transform: translateX(-50%) rotate(-34deg); }

.globe-land {
  position: absolute;
  z-index: 1;
  background:
    radial-gradient(circle, rgba(25, 111, 79, 0.54) 0 1.1px, transparent 1.35px);
  background-size: 5px 5px;
  filter: drop-shadow(0 0 4px rgba(34, 133, 94, 0.12));
}

.globe-land--one {
  top: 24%;
  left: 18%;
  width: 39%;
  height: 43%;
  clip-path: polygon(9% 13%, 47% 0, 86% 20%, 100% 49%, 73% 61%, 62% 100%, 30% 83%, 2% 54%);
}

.globe-land--two {
  top: 18%;
  right: 12%;
  width: 38%;
  height: 34%;
  clip-path: polygon(0 28%, 33% 0, 86% 14%, 100% 51%, 64% 74%, 20% 100%, 6% 65%);
}

.globe-land--three {
  right: 23%;
  bottom: 14%;
  width: 24%;
  height: 29%;
  clip-path: polygon(14% 0, 85% 11%, 100% 47%, 70% 100%, 22% 78%, 0 37%);
}

.globe-surface-point {
  position: absolute;
  z-index: 4;
  top: var(--point-y);
  left: var(--point-x);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #57b990;
  box-shadow: 0 0 8px rgba(52, 168, 120, 0.7);
  animation: globe-point-pulse 2.7s ease-in-out var(--point-delay) infinite;
}

.solution-orbit {
  position: absolute;
  z-index: 4;
  top: 141px;
  left: 50%;
  width: 256px;
  height: 94px;
  border: 1px solid rgba(33, 130, 94, 0.28);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-13deg) translateZ(55px);
}

.solution-orbit--two {
  width: 235px;
  height: 118px;
  opacity: 0.55;
  transform: translate(-50%, -50%) rotate(48deg) translateZ(22px);
}

.solution-orbit--three {
  width: 222px;
  height: 138px;
  opacity: 0.38;
  transform: translate(-50%, -50%) rotate(-67deg);
}

.solution-orbit i {
  position: absolute;
  top: 46%;
  left: -3px;
  width: 6px;
  height: 6px;
  border: 1px solid #2b956c;
  border-radius: 50%;
  background: #edf7f2;
  box-shadow: 0 0 10px rgba(41, 148, 106, 0.52);
  animation: orbit-satellite 6.4s linear infinite;
  transform-origin: 131px 3px;
}

.solution-pedestal {
  position: absolute;
  z-index: 2;
  top: 239px;
  left: 50%;
  width: 184px;
  height: 56px;
  transform: translateX(-50%) perspective(280px) rotateX(58deg);
  transform-style: preserve-3d;
}

.solution-pedestal span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(36, 128, 94, 0.22);
  border-radius: 50%;
  background: rgba(239, 247, 242, 0.66);
  box-shadow: 0 9px 22px rgba(32, 90, 68, 0.08);
}

.solution-pedestal span:nth-child(2) { inset: 9px 18px; }
.solution-pedestal span:nth-child(3) {
  inset: 18px 42px;
  background: radial-gradient(circle, rgba(56, 192, 137, 0.34), transparent 68%);
}

.solution-globe-scan {
  position: absolute;
  z-index: 5;
  top: 57px;
  left: 50%;
  width: 188px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 186, 132, 0.75), transparent);
  box-shadow: 0 0 13px rgba(40, 183, 128, 0.45);
  transform: translateX(-50%);
  animation: globe-scan 4.5s ease-in-out infinite;
}

/* Web application surfaces */
.solution-app-scene {
  perspective: 820px;
}

.app-surfaces {
  position: absolute;
  z-index: 3;
  top: 40px;
  left: 50%;
  width: 215px;
  height: 202px;
  transform: translateX(-50%) rotateX(4deg) rotateY(-11deg);
  transform-style: preserve-3d;
}

.app-surface {
  position: absolute;
  right: 0;
  width: 190px;
  height: 126px;
  overflow: hidden;
  border: 1px solid rgba(61, 145, 112, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(151, 203, 181, 0.2)),
    rgba(231, 241, 236, 0.62);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.9),
    0 22px 35px rgba(29, 86, 63, 0.08);
  backdrop-filter: blur(8px);
  transform-style: preserve-3d;
  animation: app-panel-float 6s ease-in-out infinite;
}

.app-surface--1 { top: 82px; right: 23px; z-index: 3; transform: translateZ(42px); }
.app-surface--2 { top: 43px; right: 11px; z-index: 2; opacity: 0.8; transform: translateZ(8px); animation-delay: -2s; }
.app-surface--3 { top: 3px; right: 0; z-index: 1; opacity: 0.62; transform: translateZ(-25px); animation-delay: -4s; }

.app-surface-topbar {
  display: flex;
  height: 20px;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid rgba(44, 125, 94, 0.12);
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.26);
}

.app-surface-topbar i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(43, 126, 94, 0.52);
}

.app-surface-topbar span {
  width: 42px;
  height: 3px;
  border-radius: 2px;
  margin-left: auto;
  background: rgba(43, 126, 94, 0.14);
}

.app-surface-layout {
  display: grid;
  height: calc(100% - 20px);
  grid-template-columns: 28px 1fr;
}

.app-surface-sidebar {
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid rgba(44, 125, 94, 0.11);
  padding-top: 10px;
  flex-direction: column;
}

.app-surface-sidebar i {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(38, 122, 90, 0.22);
  border-radius: 2px;
}

.app-surface-content {
  padding: 10px 10px 8px;
}

.app-surface-metrics {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, 1fr);
}

.app-surface-metrics span {
  height: 17px;
  border: 1px solid rgba(42, 131, 97, 0.12);
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(69, 157, 122, 0.08));
}

.app-surface-chart {
  display: flex;
  height: 39px;
  align-items: flex-end;
  gap: 5px;
  border-bottom: 1px solid rgba(39, 120, 89, 0.13);
  margin-top: 7px;
  padding: 0 5px 4px;
}

.app-surface-chart i {
  width: 10px;
  height: 30%;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(#6bbf9c, rgba(61, 146, 111, 0.13));
}

.app-surface-chart i:nth-child(2) { height: 48%; }
.app-surface-chart i:nth-child(3) { height: 72%; }
.app-surface-chart i:nth-child(4) { height: 55%; }
.app-surface-chart i:nth-child(5) { height: 88%; }
.app-surface-chart i:nth-child(6) { height: 68%; }

.app-surface-modules {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}

.app-surface-modules span {
  display: grid;
  min-width: 26px;
  height: 17px;
  place-items: center;
  border: 1px solid rgba(41, 128, 94, 0.16);
  border-radius: 3px;
  color: rgba(35, 115, 85, 0.62);
  font-size: 6px;
  font-weight: 700;
}

.app-surface-edge {
  position: absolute;
  display: block;
  background: rgba(41, 125, 94, 0.12);
}

.app-surface-edge--right { top: 7px; right: -4px; bottom: 5px; width: 4px; transform: skewY(52deg); }
.app-surface-edge--bottom { right: 4px; bottom: -4px; left: 7px; height: 4px; transform: skewX(38deg); }

.app-platform {
  position: absolute;
  z-index: 2;
  top: 231px;
  left: 50%;
  width: 238px;
  height: 76px;
  transform: translateX(-50%) rotateX(58deg) rotateZ(-1deg);
  transform-style: preserve-3d;
}

.app-platform-face {
  position: absolute;
  display: block;
  border: 1px solid rgba(42, 126, 94, 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(170, 210, 192, 0.33));
}

.app-platform-face--top { inset: 0; border-radius: 8px; }
.app-platform-face--front { right: 5px; bottom: -13px; left: 5px; height: 13px; transform: rotateX(-90deg); transform-origin: top; }
.app-platform-face--side { top: 5px; right: -13px; bottom: 5px; width: 13px; transform: rotateY(90deg); transform-origin: left; }

.app-platform > i {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 4px;
  border: 1px solid rgba(28, 130, 92, 0.52);
  border-radius: 50%;
}

.app-platform > i:nth-of-type(1) { top: 7px; left: 7px; }
.app-platform > i:nth-of-type(2) { top: 7px; right: 7px; }
.app-platform > i:nth-of-type(3) { right: 7px; bottom: 7px; }
.app-platform > i:nth-of-type(4) { bottom: 7px; left: 7px; }

.app-platform-shadow {
  position: absolute;
  top: 276px;
  left: 50%;
  width: 220px;
  height: 24px;
  border-radius: 50%;
  background: rgba(22, 78, 57, 0.13);
  filter: blur(13px);
  transform: translateX(-50%);
}

.app-guide {
  position: absolute;
  z-index: 1;
  border-top: 1px solid rgba(37, 125, 91, 0.15);
}

.app-guide::before,
.app-guide::after {
  position: absolute;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(42, 146, 105, 0.47);
  content: "";
}

.app-guide::before { left: 0; }
.app-guide::after { right: 0; }
.app-guide--one { top: 39px; right: 6%; left: 54%; }
.app-guide--two { top: 190px; right: 3%; left: 73%; }
.app-guide--three { top: 263px; right: 66%; left: 2%; }

/* AI neural brain */
.solution-ai-scene {
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.18));
}

.ai-brain {
  position: absolute;
  z-index: 4;
  top: 39px;
  left: 50%;
  width: 238px;
  height: 184px;
  border: 1px solid rgba(116, 227, 178, 0.32);
  border-radius: 47% 53% 44% 56% / 51% 45% 55% 49%;
  background:
    radial-gradient(circle at 34% 42%, rgba(74, 210, 151, 0.11), transparent 42%),
    radial-gradient(circle at 72% 46%, rgba(47, 161, 115, 0.1), transparent 40%);
  box-shadow:
    inset 0 0 38px rgba(69, 213, 150, 0.07),
    0 0 36px rgba(34, 170, 115, 0.08);
  transform: translateX(-50%) translateZ(38px);
}

.ai-brain::before {
  position: absolute;
  top: 12%;
  bottom: 9%;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(103, 225, 174, 0.25), transparent);
  content: "";
}

.ai-brain::after {
  position: absolute;
  right: 8%;
  bottom: -27px;
  width: 61px;
  height: 49px;
  border-right: 1px solid rgba(108, 225, 174, 0.3);
  border-bottom: 1px solid rgba(108, 225, 174, 0.3);
  border-radius: 0 0 46% 0;
  content: "";
  transform: skewX(-15deg);
}

.ai-brain-aura {
  position: absolute;
  inset: -13%;
  border: 1px solid rgba(69, 213, 150, 0.08);
  border-radius: inherit;
  box-shadow: 0 0 35px rgba(37, 198, 132, 0.13);
  animation: brain-aura 4s ease-in-out infinite;
}

.ai-brain-edge {
  position: absolute;
  z-index: 2;
  top: var(--edge-y);
  left: var(--edge-x);
  width: var(--edge-length);
  height: 1px;
  background: linear-gradient(90deg, rgba(87, 215, 158, 0.3), rgba(163, 242, 205, 0.7));
  opacity: 0.67;
  transform: rotate(var(--edge-angle));
  transform-origin: left center;
  animation: brain-edge-flow 3.8s ease-in-out var(--edge-delay) infinite;
}

.ai-brain-node {
  position: absolute;
  z-index: 3;
  top: var(--node-y);
  left: var(--node-x);
  width: 4px;
  height: 4px;
  border: 1px solid rgba(182, 248, 216, 0.78);
  border-radius: 50%;
  background: #54d698;
  box-shadow: 0 0 8px rgba(68, 224, 154, 0.8);
  animation: brain-node-pulse 2.5s ease-in-out var(--node-delay) infinite;
  transform: translate(-50%, -50%);
}

.ai-data-rain {
  position: absolute;
  z-index: 1;
  inset: 55px 0 39px;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 19%, #000 80%, transparent);
}

.ai-data-rain i {
  position: absolute;
  top: 0;
  left: var(--rain-x);
  width: 1px;
  height: var(--rain-height);
  background: linear-gradient(transparent, rgba(70, 215, 150, 0.46), transparent);
  animation: ai-rain 3.2s linear var(--rain-delay) infinite;
}

.ai-pedestal {
  position: absolute;
  z-index: 5;
  top: 246px;
  left: 50%;
  width: 184px;
  height: 53px;
  transform: translateX(-50%) perspective(250px) rotateX(61deg);
}

.ai-pedestal span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(83, 229, 163, 0.33);
  border-radius: 50%;
  background: rgba(9, 49, 34, 0.62);
  box-shadow: 0 0 26px rgba(48, 208, 137, 0.08);
}

.ai-pedestal span:nth-child(2) { inset: 9px 20px; }
.ai-pedestal span:nth-child(3) { inset: 18px 46px; }

.ai-pedestal i {
  position: absolute;
  z-index: 2;
  inset: 16px 58px;
  border-radius: 50%;
  background: #42d993;
  box-shadow: 0 0 14px #42d993, 0 0 42px 17px rgba(66, 217, 147, 0.35);
  animation: brain-core 2.8s ease-in-out infinite;
}

.solution-card-copy {
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 246px;
  flex: 1;
  flex-direction: column;
}

.solution-card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: rgba(51, 137, 104, 0.08);
  color: #1b7857;
  font-size: 15px;
}

.solution-card--3 .solution-card-icon {
  border: 1px solid rgba(91, 223, 162, 0.17);
  background: rgba(42, 177, 117, 0.08);
  color: #74e1ae;
  font-size: 10px;
}

.solution-card h3 {
  margin: 18px 0 0;
  color: #0d2119;
  font-family: var(--sans);
  font-size: clamp(21px, 1.55vw, 28px);
  font-weight: 570;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.solution-card--3 h3 {
  color: #f0f7f3;
}

.solution-card-copy > p {
  margin: 15px 0 0;
  color: #66716b;
  font-size: 11px;
  line-height: 1.65;
}

.solution-card--3 .solution-card-copy > p {
  color: rgba(222, 238, 229, 0.58);
}

.solution-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 0;
  padding: 25px 0 0;
  list-style: none;
}

.solution-card li {
  border: 1px solid rgba(17, 57, 42, 0.13);
  border-radius: 999px;
  padding: 6px 10px;
  color: #69736e;
  font-size: 8px;
  white-space: nowrap;
}

.solution-card--3 li {
  border-color: rgba(184, 237, 208, 0.18);
  color: rgba(222, 238, 229, 0.68);
}

.solutions-tech-strip {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  gap: 28px;
  border-top: 1px solid rgba(19, 70, 51, 0.12);
  margin-top: 64px;
  padding-top: 34px;
  grid-template-columns: 250px 1fr;
}

.solutions-tech-strip > p {
  margin: 0;
  color: #247c5c;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.solutions-tech-strip > div {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(7, 1fr);
}

.solutions-tech-strip span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: #737b77;
  font-size: 11px;
  white-space: nowrap;
}

.solutions-tech-strip i {
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  color: #626a66;
  font-size: 8px;
  font-style: normal;
  font-weight: 720;
}

@keyframes globe-highlight {
  0%, 100% { transform: translateX(-30px) rotate(19deg); }
  50% { transform: translateX(240px) rotate(19deg); }
}

@keyframes globe-point-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1.25); }
}

@keyframes orbit-satellite {
  to { transform: rotate(360deg); }
}

@keyframes globe-scan {
  0%, 100% { opacity: 0; transform: translate(-50%, 0); }
  18%, 82% { opacity: 0.75; }
  50% { transform: translate(-50%, 178px); }
}

@keyframes app-panel-float {
  0%, 100% { translate: 0 -2px; }
  50% { translate: 0 3px; }
}

@keyframes brain-aura {
  0%, 100% { opacity: 0.35; transform: scale(0.97); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

@keyframes brain-edge-flow {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 0.82; }
}

@keyframes brain-node-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(68, 224, 154, 0.4); transform: translate(-50%, -50%) scale(0.76); }
  50% { box-shadow: 0 0 11px rgba(68, 224, 154, 0.92); transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes ai-rain {
  from { opacity: 0; transform: translateY(-30px); }
  25% { opacity: 0.7; }
  to { opacity: 0; transform: translateY(260px); }
}

@keyframes brain-core {
  0%, 100% { opacity: 0.72; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

@media (max-width: 1280px) {
  .solutions-layout {
    gap: 55px;
    grid-template-columns: 1fr;
  }

  .solutions-copy {
    max-width: 760px;
    padding-right: 0;
  }

  .solutions-copy h2 {
    max-width: 700px;
  }

  .solutions-description {
    max-width: 660px;
  }

  .solutions-cta {
    margin-top: 38px;
  }
}

@media (max-width: 900px) {
  .solutions-carousel-guide {
    display: grid;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    margin: 0 2px 12px;
    color: rgba(181, 211, 241, .72);
    font-size: 9px;
    font-weight: 600;
    grid-template-columns: minmax(0, 1fr) auto auto;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .solutions-carousel-guide > p {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .solutions-carousel-guide > p span:last-child {
    color: #8ed8ff;
    animation: solutions-swipe-hint 1.6s ease-in-out infinite;
  }

  .solutions-carousel-pagination {
    display: flex;
    align-items: center;
  }

  .solutions-carousel-pagination button {
    display: grid;
    width: 24px;
    height: 32px;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
  }

  .solutions-carousel-pagination button span {
    width: 14px;
    height: 2px;
    background: rgba(142, 216, 255, .22);
    transition: width 240ms ease, background 240ms ease, box-shadow 240ms ease;
  }

  .solutions-carousel-pagination button.is-active span {
    width: 20px;
    background: #73c8f5;
    box-shadow: 0 0 10px rgba(115, 200, 245, .28);
  }

  .solutions-carousel-index {
    min-width: 42px;
    color: rgba(181, 211, 241, .78);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .solutions-cards {
    overflow-x: auto;
    padding: 4px 0 18px;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    grid-template-columns: repeat(3, minmax(285px, 78vw));
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .solutions-cards-frame {
    position: relative;
  }

  .solutions-cards-frame::after {
    position: absolute;
    z-index: 2;
    top: 4px;
    right: 0;
    bottom: 18px;
    width: 78px;
    background: linear-gradient(90deg, transparent, rgba(7, 16, 34, .86));
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
  }

  .solutions-cards-frame.has-more::after {
    opacity: 1;
  }

  .solutions-scroll-cue {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 10px;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(142, 216, 255, .32);
    border-radius: 50%;
    padding: 0;
    background: rgba(12, 92, 91, .94);
    box-shadow: 0 12px 30px rgba(3, 18, 34, .26), inset 0 1px rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(8px, -50%, 0);
    transition: opacity 220ms ease, transform 300ms cubic-bezier(.16, 1, .3, 1), background 220ms ease;
  }

  .solutions-cards-frame.has-more .solutions-scroll-cue {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, -50%, 0);
  }

  .solutions-scroll-cue:focus-visible {
    outline: 2px solid #73c8f5;
    outline-offset: 3px;
  }

  .solutions-scroll-cue span {
    font-size: 20px;
    line-height: 1;
    animation: solutions-scroll-cue-arrow 1.8s ease-in-out infinite;
  }

  .solutions-cards::-webkit-scrollbar {
    display: none;
  }

  .solution-card {
    min-height: 625px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .solutions-tech-strip {
    grid-template-columns: 1fr;
  }

  .solutions-tech-strip > div {
    overflow-x: auto;
    padding-bottom: 8px;
    grid-template-columns: repeat(7, minmax(112px, 1fr));
    scrollbar-width: none;
  }
}

@keyframes solutions-swipe-hint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@keyframes solutions-scroll-cue-arrow {
  0%, 100% { transform: translateX(-1px); }
  50% { transform: translateX(3px); }
}

@media (hover: none) and (pointer: coarse) {
  .solution-card:hover,
  .solution-card--3:hover {
    transform: none;
  }
}

@media (max-width: 620px) {
  .solutions-copy h2 {
    font-size: clamp(38px, 11vw, 51px);
  }

  .solutions-description {
    font-size: 13px;
  }

  .solutions-cards {
    grid-template-columns: repeat(3, minmax(282px, 86vw));
  }

  .solution-card {
    min-height: 610px;
    padding: 24px 20px;
  }

  .solution-card-visual {
    height: 320px;
  }

  .solutions-tech-strip {
    margin-top: 50px;
  }
}

/* Story */
.story-section {
  overflow: hidden;
}

.story-section::before {
  position: absolute;
  top: -40%;
  right: -15%;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 169, 113, 0.14), transparent 66%);
  content: "";
}

.story-grid {
  position: relative;
  display: grid;
  align-items: start;
  gap: 13vw;
  grid-template-columns: 1.45fr 0.75fr;
}

.story-copy .text-link {
  margin-top: 60px;
}

.story-timeline {
  position: relative;
  border-left: 1px solid var(--line-light);
  padding-left: 38px;
}

.story-timeline::before {
  position: absolute;
  top: 0;
  left: -2px;
  width: 3px;
  height: 25%;
  background: var(--emerald-bright);
  content: "";
  box-shadow: 0 0 24px rgba(38, 194, 129, 0.55);
}

.story-timeline > div {
  display: flex;
  min-height: 142px;
  justify-content: space-between;
  flex-direction: column;
  border-bottom: 1px solid var(--line-light);
  padding: 12px 0 28px;
}

.story-timeline strong {
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 64px);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.story-timeline span {
  color: rgba(243, 240, 232, 0.5);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Projects */
.projects-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.25fr 0.75fr;
}

.project-card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  display: flex;
  min-height: 500px;
  overflow: hidden;
  justify-content: space-between;
  flex-direction: column;
  padding: clamp(28px, 3vw, 48px);
  isolation: isolate;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms;
}

.project-card:hover {
  z-index: 2;
  box-shadow: 0 32px 78px rgba(9, 19, 15, 0.16);
  transform: translateY(-8px);
}

.project-card--large {
  min-height: 720px;
  grid-row: span 2;
}

.project-card--forest {
  background: #0f3f30;
  color: var(--ivory);
}

.project-card--ivory {
  background: var(--ivory);
}

.project-card--stone {
  background: #d7d8d0;
}

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

.projects-grid--archive .project-card--large {
  min-height: 630px;
  grid-column: span 2;
  grid-row: auto;
}

.projects-grid--archive .project-card { min-height: 525px; }

.project-card--with-preview {
  background: #0d1c16;
  color: var(--ivory);
}

.project-shot {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: .92;
  transform: scale(1.001);
  transition: transform 850ms cubic-bezier(.16, 1, .3, 1);
}

.project-card--with-preview::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 11, 8, .76) 0%, rgba(4, 11, 8, .1) 42%, rgba(4, 11, 8, .88) 100%);
  content: "";
}

.project-card--with-preview:hover .project-shot { transform: scale(1.055); }
.project-card--with-preview .project-orbit { z-index: 1; opacity: .55; }
.project-card--with-preview .project-topline,
.project-card--with-preview .project-copy { z-index: 2; }
.project-card--with-preview .project-topline { color: rgba(243, 240, 232, .7); }
.project-card--with-preview .project-copy p { color: #91dfbb; }
.project-card--with-preview .project-copy > span { color: rgba(243, 240, 232, .75); }
.project-card--with-preview .project-visit-link { color: #9ae7c2; }

.project-card--forest .project-topline {
  color: rgba(243, 240, 232, 0.52);
}

.project-copy {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.project-copy p {
  margin: 0 0 13px;
  color: var(--emerald-deep);
  font-size: 10px;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project-card--forest .project-copy p {
  color: #78d8af;
}

.project-copy h3,
.project-copy h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(46px, 5vw, 82px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.project-copy > span {
  display: block;
  max-width: 470px;
  color: #4f5954;
  font-size: 14px;
  line-height: 1.62;
}

.project-card--forest .project-copy > span {
  color: rgba(243, 240, 232, 0.62);
}

.project-visit-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid currentColor;
  margin-top: 30px;
  padding-bottom: 5px;
  border-right: 0;
  border-left: 0;
  border-top: 0;
  background: transparent;
  color: var(--emerald-deep);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color 250ms ease, gap 250ms ease;
}

.project-visit-link i { font-size: 15px; font-style: normal; }
.project-visit-link:hover { gap: 15px; color: var(--emerald); }
.project-card--forest .project-visit-link { color: #88dfb9; }

/* Interactive projects portfolio */
.inner-hero--projects {
  min-height: 92svh;
  background:
    radial-gradient(circle at 82% 18%, rgba(40, 186, 126, .2), transparent 33%),
    radial-gradient(circle at 18% 78%, rgba(22, 112, 78, .17), transparent 30%),
    #07110d;
}

.inner-hero--projects .inner-hero-aura {
  right: -2%;
  background: radial-gradient(circle, rgba(46, 206, 143, .2), transparent 64%);
  animation: project-hero-aura 9s ease-in-out infinite alternate;
}

.inner-hero--projects .inner-hero-content h1 { max-width: 1240px; }

.project-hero-meta {
  display: grid;
  width: min(620px, 62%);
  border-top: 1px solid rgba(243, 240, 232, .17);
  border-bottom: 1px solid rgba(243, 240, 232, .17);
  margin-top: 50px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-hero-meta span {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 13px;
  border-right: 1px solid rgba(243, 240, 232, .14);
  padding: 12px 22px 12px 0;
  color: rgba(243, 240, 232, .43);
  font-size: 9px;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.project-hero-meta span + span { padding-left: 22px; }
.project-hero-meta span:last-child { border-right: 0; }
.project-hero-meta b { color: #85deb7; font-family: var(--display); font-size: 28px; font-weight: 400; letter-spacing: -.04em; }

.project-portfolio {
  position: relative;
  overflow: clip;
  padding-top: 82px;
  padding-bottom: clamp(110px, 13vw, 190px);
  background: #e8ece8;
}

.project-portfolio-aura {
  position: absolute;
  top: -240px;
  right: -180px;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(17, 121, 82, .12);
  border-radius: 50%;
  pointer-events: none;
}

.project-portfolio-aura::before,
.project-portfolio-aura::after {
  position: absolute;
  border: 1px solid rgba(17, 121, 82, .11);
  border-radius: 50%;
  content: "";
}

.project-portfolio-aura::before { inset: 18%; }
.project-portfolio-aura::after { inset: 36%; }

.project-portfolio-intro {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(55px, 10vw, 170px);
  align-items: end;
  padding-block: clamp(105px, 12vw, 175px) clamp(70px, 8vw, 115px);
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
}

.project-portfolio-intro .eyebrow { margin-bottom: 32px; }

.project-portfolio-intro h2 {
  max-width: 900px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(62px, 7.7vw, 124px);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .87;
}

.project-portfolio-intro > p {
  max-width: 430px;
  margin: 0;
  color: #59615d;
  font-size: 15px;
  line-height: 1.72;
}

.project-portfolio-toolbar {
  position: relative;
  z-index: 2;
  top: auto;
  border-top: 1px solid rgba(9, 19, 15, .13);
  border-bottom: 1px solid rgba(9, 19, 15, .13);
  background: rgba(232, 236, 232, .9);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.project-portfolio-toolbar-inner {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.project-filter { display: flex; align-items: center; gap: 5px; }

.project-filter button {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  padding: 9px 15px;
  color: #606863;
  cursor: pointer;
  font-size: 10px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: border-color 250ms ease, background 250ms ease, color 250ms ease, transform 250ms ease;
}

.project-filter button:hover { color: var(--emerald-deep); transform: translateY(-1px); }
.project-filter button.is-active { border-color: rgba(14, 109, 75, .28); background: rgba(14, 109, 75, .08); color: var(--emerald-deep); }
.project-portfolio-toolbar-inner > span { flex: 0 0 auto; color: var(--emerald-deep); font-size: 9px; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; }

.project-portfolio-grid {
  display: grid;
  gap: 18px;
  padding-top: 20px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.project-portfolio-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --light-x: 50%;
  --light-y: 50%;
  min-height: 545px;
  opacity: 0;
  transform: translate3d(0, 60px, 0) scale(.975);
  transition: opacity 850ms ease, transform 1050ms cubic-bezier(.16, 1, .3, 1);
  grid-column: span 6;
}

.project-portfolio-card:nth-child(4n + 2) { grid-column: span 7; }
.project-portfolio-card:nth-child(4n + 3) { grid-column: span 5; }
.project-portfolio-card.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.project-portfolio-card--featured { min-height: 720px; grid-column: span 12 !important; }

.project-portfolio-card-inner {
  position: relative;
  display: flex;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  justify-content: space-between;
  flex-direction: column;
  border: 1px solid rgba(154, 218, 184, .2);
  background: #08130f;
  color: var(--ivory);
  padding: clamp(26px, 3vw, 48px);
  transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  box-shadow: 0 20px 54px rgba(5, 17, 12, .15);
  transition: transform 280ms ease, box-shadow 500ms ease, border-color 350ms ease;
  isolation: isolate;
}

.project-portfolio-card:hover .project-portfolio-card-inner {
  border-color: rgba(132, 231, 184, .42);
  box-shadow: 0 35px 85px rgba(5, 17, 12, .26);
}

.project-portfolio-card-inner::before,
.project-portfolio-card-inner::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
}

.project-portfolio-card-inner::before {
  background: linear-gradient(180deg, rgba(3, 11, 7, .8) 0%, rgba(3, 11, 7, .14) 36%, rgba(3, 11, 7, .58) 62%, rgba(3, 11, 7, .98) 100%);
}
.project-portfolio-card-inner::after { background: radial-gradient(circle at var(--light-x) var(--light-y), rgba(141, 238, 194, .2), transparent 28%); opacity: 0; transition: opacity 350ms ease; }
.project-portfolio-card:hover .project-portfolio-card-inner::after { opacity: 1; }

.project-portfolio-image {
  position: absolute;
  z-index: 0;
  inset: -2%;
  background-position: center;
  background-size: cover;
  filter: saturate(.88) contrast(1.02);
  transform: scale(1.02);
  transition: filter 900ms ease, transform 1400ms cubic-bezier(.16, 1, .3, 1);
}

.project-portfolio-card:hover .project-portfolio-image { filter: saturate(1.08) contrast(1.02); transform: scale(1.085); }

.project-portfolio-grid-lines {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: .4;
  pointer-events: none;
  transform: translateZ(8px);
}

.project-portfolio-topline {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 18px;
  align-items: center;
  color: rgba(243, 240, 232, .67);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid rgba(217, 244, 230, .12);
  padding: 11px 13px;
  background: rgba(2, 12, 8, .48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(24px);
  grid-template-columns: auto 1fr auto;
}

.project-portfolio-topline > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-live-dot { display: inline-flex; align-items: center; gap: 7px; color: #9ae6c3; }
.project-live-dot i { width: 5px; height: 5px; border-radius: 50%; background: #4ce3a2; box-shadow: 0 0 12px #4ce3a2; animation: project-live-pulse 2.2s ease-in-out infinite; }

.project-portfolio-copy {
  position: relative;
  z-index: 3;
  border: 1px solid rgba(217, 244, 230, .13);
  padding: clamp(20px, 2.2vw, 31px);
  background: linear-gradient(145deg, rgba(3, 15, 10, .79), rgba(3, 12, 8, .62));
  box-shadow: 0 20px 55px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  transform: translateZ(38px);
}

.project-portfolio-copy > p { margin: 0 0 14px; color: #91e0bb; font-size: 9px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }

.project-portfolio-copy h2 {
  max-width: 850px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(55px, 6vw, 102px);
  font-weight: 400;
  letter-spacing: -.062em;
  line-height: .88;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .55);
  transition: transform 650ms cubic-bezier(.16, 1, .3, 1);
}

.project-portfolio-card--featured .project-portfolio-copy h2 { font-size: clamp(82px, 10vw, 155px); }
.project-portfolio-card:hover .project-portfolio-copy h2 { transform: translateY(-7px); }

.project-portfolio-detail {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(243, 240, 232, .2);
  margin-top: 27px;
  padding-top: 19px;
}

.project-portfolio-detail > span { max-width: 560px; color: rgba(243, 240, 232, .82); font-size: 13px; line-height: 1.55; }
.project-portfolio-detail strong { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; color: #a2eacb; font-size: 9px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.project-portfolio-detail strong i { font-size: 19px; font-style: normal; transition: transform 350ms ease; }
.project-portfolio-card:hover .project-portfolio-detail strong i { transform: translate(5px, -5px); }

.project-portfolio-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: clamp(70px, 8vw, 115px);
  color: #6f7772;
  font-size: 9px;
  font-weight: 620;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.project-portfolio-footnote i { width: 42px; height: 1px; background: rgba(14, 109, 75, .3); }

@keyframes project-hero-aura { to { opacity: .72; transform: translate3d(-5%, 5%, 0) scale(1.08); } }
@keyframes project-live-pulse { 50% { opacity: .45; transform: scale(.7); } }

@media (max-width: 900px) {
  .inner-hero--projects { min-height: 86svh; }
  .project-hero-meta { width: 100%; }
  .project-portfolio-intro { gap: 45px; grid-template-columns: 1fr; }
  .project-portfolio-intro > p { margin-left: auto; }
  .project-portfolio-toolbar { top: 68px; }
  .project-portfolio-toolbar-inner { align-items: stretch; flex-direction: column; gap: 0; padding-block: 12px; }
  .project-filter { width: 100%; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .project-filter::-webkit-scrollbar { display: none; }
  .project-portfolio-toolbar-inner > span { align-self: flex-end; margin-top: -2px; }
  .project-portfolio-card,
  .project-portfolio-card:nth-child(4n + 2),
  .project-portfolio-card:nth-child(4n + 3) { min-height: 580px; grid-column: span 12; }
  .project-portfolio-card--featured { min-height: 670px; }
}

@media (max-width: 620px) {
  .inner-hero--projects { min-height: 92svh; }
  .project-hero-meta { margin-top: 35px; }
  .project-hero-meta span { min-height: 62px; gap: 7px; padding-right: 9px; font-size: 7px; }
  .project-hero-meta span + span { padding-left: 9px; }
  .project-hero-meta b { font-size: 22px; }
  .project-portfolio-intro { padding-block: 84px 60px; }
  .project-portfolio-intro .eyebrow { margin-bottom: 24px; }
  .project-portfolio-intro h2 { font-size: clamp(52px, 14.2vw, 72px); }
  .project-portfolio-intro > p { font-size: 14px; }
  .project-filter { margin-right: -14px; }
  .project-filter button { padding-inline: 12px; white-space: nowrap; }
  .project-portfolio-grid { width: 100%; gap: 10px; padding-top: 10px; }
  .project-portfolio-card,
  .project-portfolio-card:nth-child(4n + 2),
  .project-portfolio-card:nth-child(4n + 3) { min-height: 520px; }
  .project-portfolio-card--featured { min-height: 620px; }
  .project-portfolio-card-inner { padding: 23px 20px; }
  .project-portfolio-topline { gap: 10px; font-size: 7px; }
  .project-portfolio-copy h2,
  .project-portfolio-card--featured .project-portfolio-copy h2 { font-size: clamp(54px, 15vw, 78px); }
  .project-portfolio-detail { align-items: flex-start; flex-direction: column; gap: 17px; }
  .project-portfolio-detail > span { font-size: 12px; }
  .project-portfolio-footnote { gap: 10px; text-align: center; }
  .project-portfolio-footnote i { width: 18px; }
}

/* Projects — refined editorial portfolio */
.inner-hero--projects {
  isolation: isolate;
  min-height: 100svh;
  padding-bottom: clamp(76px, 8vw, 112px);
  background:
    radial-gradient(circle at 85% 16%, rgba(108, 126, 228, .24), transparent 31%),
    radial-gradient(circle at 16% 84%, rgba(72, 107, 180, .12), transparent 28%),
    linear-gradient(145deg, #080d1c 0%, #111a31 58%, #0a1020 100%);
}

.inner-hero--projects::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(rgba(174, 192, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 192, 255, .055) 1px, transparent 1px);
  background-size: clamp(82px, 8vw, 126px) clamp(82px, 8vw, 126px);
  content: "";
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .18), #000 65%, rgba(0, 0, 0, .5));
  pointer-events: none;
}

.inner-hero--projects .inner-hero-aura {
  top: -24%;
  right: -10%;
  width: min(820px, 66vw);
  height: min(820px, 66vw);
  background: radial-gradient(circle, rgba(112, 126, 229, .24), rgba(89, 105, 198, .08) 38%, transparent 68%);
  animation: project-hero-aura 11s ease-in-out infinite alternate;
}

.project-hero-grid {
  position: absolute;
  z-index: 0;
  top: 24%;
  right: -12vw;
  width: min(720px, 58vw);
  aspect-ratio: 1;
  border: 1px solid rgba(155, 178, 255, .13);
  border-radius: 50%;
  box-shadow:
    0 0 0 96px rgba(138, 157, 236, .026),
    0 0 0 192px rgba(138, 157, 236, .018);
  pointer-events: none;
}

.project-hero-grid::before,
.project-hero-grid::after {
  position: absolute;
  border: 1px solid rgba(155, 178, 255, .12);
  border-radius: 50%;
  content: "";
}

.project-hero-grid::before { inset: 23%; }
.project-hero-grid::after { inset: 41%; background: rgba(126, 151, 238, .06); }

.inner-hero--projects .inner-hero-content {
  width: 100%;
}

.inner-hero--projects .inner-hero-content h1 {
  max-width: 1260px;
  font-size: clamp(68px, 8.6vw, 138px);
}

.inner-hero--projects .inner-hero-content > p:not(.eyebrow) {
  max-width: 600px;
  margin: clamp(42px, 5vw, 68px) 0 0 auto;
  color: rgba(231, 235, 248, .64);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.64;
}

.project-hero-meta {
  width: min(680px, 64%);
  border-color: rgba(215, 225, 255, .18);
  margin-top: clamp(46px, 6vw, 74px);
}

.project-hero-meta span {
  border-color: rgba(215, 225, 255, .14);
  color: rgba(229, 234, 248, .47);
}

.project-hero-meta b {
  color: var(--ice-300);
}

.project-portfolio {
  padding-top: 0;
  background: #f1eee7;
}

.project-portfolio-aura {
  top: -280px;
  right: -210px;
  width: 660px;
  height: 660px;
  border-color: rgba(72, 87, 160, .11);
}

.project-portfolio-aura::before,
.project-portfolio-aura::after {
  border-color: rgba(72, 87, 160, .1);
}

.project-portfolio-intro {
  min-height: 72svh;
  padding-block: clamp(120px, 13vw, 190px) clamp(78px, 9vw, 128px);
  border-bottom: 1px solid rgba(16, 23, 45, .13);
}

.project-portfolio-intro .eyebrow {
  color: #5265a5;
}

.project-portfolio-intro h2 {
  max-width: 980px;
  color: var(--ink);
  font-size: clamp(62px, 7.4vw, 118px);
  line-height: .9;
}

.project-portfolio-intro > p {
  padding-top: 24px;
  border-top: 1px solid rgba(16, 23, 45, .18);
  color: #5e6577;
  font-size: clamp(15px, 1.15vw, 18px);
}

.project-portfolio-toolbar {
  top: 78px;
  border-color: rgba(16, 23, 45, .13);
  background: rgba(241, 238, 231, .91);
  box-shadow: 0 18px 42px rgba(27, 32, 55, .055);
}

.project-portfolio-toolbar-inner {
  min-height: 76px;
}

.project-filter {
  gap: 0;
}

.project-filter button {
  min-height: 38px;
  border-right: 0;
  border-color: rgba(16, 23, 45, .16);
  border-radius: 0;
  padding: 9px 17px;
  color: #62697a;
}

.project-filter button:last-child {
  border-right: 1px solid rgba(16, 23, 45, .16);
}

.project-filter button:hover {
  background: rgba(66, 82, 155, .06);
  color: #42529b;
  transform: none;
}

.project-filter button.is-active {
  border-color: #10172d;
  background: #10172d;
  color: #f7f4ed;
}

.project-portfolio-toolbar-inner > span {
  color: #5265a5;
}

.project-portfolio-grid {
  gap: 16px;
  padding-top: 28px;
}

.project-portfolio-card {
  min-height: 580px;
}

.project-portfolio-card--featured {
  min-height: 740px;
}

.project-portfolio-card-inner {
  border-color: rgba(146, 163, 224, .2);
  background: #0a1020;
  box-shadow: 0 22px 58px rgba(14, 20, 41, .16);
  transform: none;
  transition: box-shadow 500ms ease, border-color 350ms ease, transform 600ms cubic-bezier(.16, 1, .3, 1);
}

.project-portfolio-card:hover .project-portfolio-card-inner {
  border-color: rgba(159, 185, 255, .42);
  box-shadow: 0 38px 92px rgba(12, 18, 38, .27);
  transform: translateY(-5px);
}

.project-portfolio-card-inner::before {
  background:
    linear-gradient(180deg, rgba(6, 10, 23, .72) 0%, rgba(6, 10, 23, .08) 38%, rgba(6, 10, 23, .48) 64%, rgba(6, 10, 23, .96) 100%);
}

.project-portfolio-card-inner::after {
  background: radial-gradient(circle at var(--light-x) var(--light-y), rgba(131, 173, 255, .16), transparent 29%);
}

.project-portfolio-image {
  background-position: center top;
  filter: saturate(.82) contrast(1.03);
}

.project-portfolio-card:hover .project-portfolio-image {
  filter: saturate(1) contrast(1.03);
  transform: scale(1.06);
}

.project-portfolio-grid-lines {
  background-image:
    linear-gradient(rgba(184, 199, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 199, 255, .035) 1px, transparent 1px);
  opacity: .32;
}

.project-portfolio-topline {
  gap: 18px;
  border: 0;
  border-bottom: 1px solid rgba(225, 232, 255, .2);
  padding: 0 0 15px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.project-live-dot {
  color: var(--ice-300);
}

.project-live-dot i {
  background: var(--ice-400);
  box-shadow: 0 0 12px var(--ice-400);
}

.project-portfolio-copy {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.project-portfolio-copy > p {
  color: var(--ice-300);
}

.project-portfolio-copy h2 {
  font-size: clamp(50px, 5.4vw, 88px);
  text-shadow: 0 3px 28px rgba(0, 0, 0, .58);
}

.project-portfolio-card--featured .project-portfolio-copy h2 {
  font-size: clamp(76px, 8.6vw, 132px);
}

.project-portfolio-detail {
  border-color: rgba(226, 233, 255, .22);
}

.project-portfolio-detail strong {
  color: var(--ice-300);
}

.project-portfolio-footnote {
  color: #697083;
}

.project-portfolio-footnote i {
  background: rgba(66, 82, 155, .3);
}

@media (max-width: 900px) {
  .inner-hero--projects {
    min-height: 92svh;
  }

  .inner-hero--projects .inner-hero-content h1 {
    font-size: clamp(62px, 11vw, 102px);
  }

  .project-hero-meta {
    width: 100%;
  }

  .project-portfolio-intro {
    min-height: auto;
  }

  .project-portfolio-toolbar {
    top: 68px;
  }

  .project-filter button {
    flex: 0 0 auto;
  }

  .project-portfolio-card,
  .project-portfolio-card:nth-child(4n + 2),
  .project-portfolio-card:nth-child(4n + 3) {
    min-height: 590px;
  }

  .project-portfolio-card--featured {
    min-height: 670px;
  }
}

@media (max-width: 620px) {
  .inner-hero--projects {
    min-height: 100svh;
    padding-top: 136px;
    padding-bottom: 54px;
  }

  .project-hero-grid {
    top: 19%;
    right: -62vw;
    width: 132vw;
  }

  .inner-hero--projects .inner-hero-content h1 {
    font-size: clamp(52px, 15vw, 74px);
    line-height: .9;
  }

  .inner-hero--projects .inner-hero-content > p:not(.eyebrow) {
    margin-top: 34px;
    font-size: 15px;
  }

  .project-hero-meta {
    margin-top: 36px;
  }

  .project-portfolio-intro {
    padding-block: 96px 72px;
  }

  .project-portfolio-intro h2 {
    font-size: clamp(48px, 13vw, 66px);
  }

  .project-portfolio-intro > p {
    margin-left: 0;
  }

  .project-portfolio-toolbar-inner {
    min-height: auto;
  }

  .project-filter button {
    min-height: 36px;
  }

  .project-portfolio-card,
  .project-portfolio-card:nth-child(4n + 2),
  .project-portfolio-card:nth-child(4n + 3) {
    min-height: 540px;
  }

  .project-portfolio-card--featured {
    min-height: 620px;
  }

  .project-portfolio-copy h2,
  .project-portfolio-card--featured .project-portfolio-copy h2 {
    font-size: clamp(50px, 14vw, 72px);
  }
}

.project-orbit {
  position: absolute;
  z-index: -1;
  top: 11%;
  right: -10%;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(31, 169, 113, 0.18);
  border-radius: 50%;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-orbit {
  transform: rotate(12deg) scale(1.07);
}

.project-orbit::before,
.project-orbit::after,
.project-orbit i {
  position: absolute;
  border: 1px solid rgba(31, 169, 113, 0.16);
  border-radius: 50%;
  content: "";
}

.project-orbit::before { inset: 14%; }
.project-orbit::after { inset: 31%; }
.project-orbit i:nth-child(1) { top: 2%; left: 48%; width: 9px; height: 9px; background: var(--emerald); box-shadow: 0 0 20px rgba(31, 169, 113, 0.6); }
.project-orbit i:nth-child(2) { right: 9%; bottom: 20%; width: 5px; height: 5px; background: var(--brass); }
.project-orbit i:nth-child(3) { bottom: 22%; left: 18%; width: 60px; height: 60px; backdrop-filter: blur(7px); background: rgba(255, 255, 255, 0.07); }

.section-link {
  margin-top: 64px;
}

/* AI */
.ai-section {
  overflow: hidden;
}

.ai-section::before {
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 216, 156, 0.18), transparent 64%);
  content: "";
}

.ai-grid {
  position: relative;
  display: grid;
  align-items: start;
  gap: 9vw;
  grid-template-columns: 0.9fr 1.1fr;
}

.ai-copy {
  position: sticky;
  top: 150px;
}

.ai-copy .text-link {
  margin-top: 54px;
}

.capability-grid {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  grid-template-columns: repeat(2, 1fr);
}

.capability-item {
  position: relative;
  display: flex;
  min-height: 175px;
  justify-content: space-between;
  flex-direction: column;
  background: #0b4f3a;
  padding: 25px;
  transition: background 300ms, transform 300ms;
}

.capability-item:hover {
  z-index: 1;
  background: #0b5b41;
  transform: scale(1.015);
}

.capability-item > span {
  color: rgba(243, 240, 232, 0.4);
  font-size: 10px;
}

.capability-item strong {
  max-width: 180px;
  font-size: 18px;
  font-weight: 440;
  line-height: 1.25;
}

.capability-item i {
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: #7bd8b0;
  font-style: normal;
  opacity: 0;
  transform: translate(-5px, 5px);
  transition: opacity 300ms, transform 300ms;
}

.capability-item:hover i {
  opacity: 1;
  transform: translate(0);
}

/* Process */
.process-list {
  position: relative;
  margin-left: 22%;
  border-left: 1px solid var(--line);
}

.process-list article {
  position: relative;
  display: grid;
  min-height: 190px;
  align-items: start;
  gap: 40px;
  border-bottom: 1px solid var(--line);
  padding: 32px 0 50px 46px;
  grid-template-columns: 65px 1fr 1fr;
}

.process-number {
  color: var(--emerald-deep);
  font-size: 11px;
  font-weight: 650;
}

.process-list h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
}

.process-list p {
  max-width: 360px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.process-dot {
  position: absolute;
  top: 34px;
  left: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--emerald-deep);
  border-radius: 50%;
  background: var(--paper);
  transition: background 250ms, box-shadow 250ms;
}

.process-list article:hover .process-dot {
  background: var(--emerald);
  box-shadow: 0 0 0 8px rgba(31, 169, 113, 0.1);
}

/* Why */
.why-grid {
  display: grid;
  gap: 11vw;
  grid-template-columns: 1fr 1fr;
}

.why-heading {
  position: sticky;
  top: 140px;
  align-self: start;
}

.why-list > div {
  display: grid;
  gap: 28px;
  border-top: 1px solid var(--line);
  padding: 28px 0 54px;
  grid-template-columns: 42px 1fr;
}

.why-list span {
  color: var(--emerald-deep);
  font-size: 10px;
  font-weight: 650;
}

.why-list p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 2.8vw, 45px);
  letter-spacing: -0.04em;
  line-height: 1.08;
}

/* Blog cards */
.blog-grid {
  display: grid;
  gap: 32px 16px;
  grid-template-columns: repeat(3, 1fr);
}

.blog-card {
  position: relative;
  display: block;
}

.blog-visual {
  position: relative;
  display: grid;
  height: 360px;
  overflow: hidden;
  place-items: center;
  margin-bottom: 26px;
  background: var(--ivory);
  color: var(--emerald-deep);
}

.blog-visual::before,
.blog-visual::after,
.blog-visual i {
  position: absolute;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: 0.2;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-visual::before { width: 68%; aspect-ratio: 1; }
.blog-visual::after { width: 42%; aspect-ratio: 1; }
.blog-visual i:nth-of-type(1) { width: 84%; height: 1px; border-width: 1px 0 0; border-radius: 0; transform: rotate(-28deg); }
.blog-visual i:nth-of-type(2) { width: 16%; aspect-ratio: 1; right: 12%; bottom: 12%; background: rgba(31, 169, 113, 0.11); }
.blog-visual > span { position: relative; z-index: 1; font-family: var(--display); font-size: 52px; letter-spacing: -0.04em; }
.blog-card:hover .blog-visual::before { transform: scale(1.12) rotate(8deg); }
.blog-card:hover .blog-visual::after { transform: scale(0.88) rotate(-8deg); }
.blog-visual--2 { background: #d9ddd6; color: #173f31; }
.blog-visual--3 { background: var(--ink-soft); color: #6dd0a6; }

.blog-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 630;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-card h3 {
  margin: 0 48px 18px 0;
  font-family: var(--display);
  font-size: clamp(29px, 2.45vw, 42px);
  font-weight: 400;
  letter-spacing: -0.042em;
  line-height: 1.07;
}

.blog-card > p {
  margin: 0 44px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.58;
}

.blog-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--emerald-deep);
  transform: translate(-5px, 5px);
  transition: transform 300ms;
}

.blog-card:hover .blog-arrow {
  transform: translate(0);
}

/* Request */
.request-section {
  overflow: hidden;
}

.request-aura {
  position: absolute;
  top: -25%;
  left: -20%;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 169, 113, 0.16), transparent 64%);
}

.request-grid {
  position: relative;
  display: grid;
  gap: 10vw;
  grid-template-columns: 0.8fr 1.2fr;
}

.request-grid > div:first-child {
  position: sticky;
  top: 140px;
  align-self: start;
}

.request-form {
  border: 1px solid rgba(9, 19, 15, 0.14);
  border-radius: 3px;
  padding: clamp(24px, 3.2vw, 46px);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 24px 70px rgba(9, 19, 15, 0.06);
}

.form-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.request-form-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid rgba(9, 19, 15, 0.14);
  padding-bottom: 22px;
}

.request-form-kicker {
  margin: 0 0 10px;
  color: var(--emerald-deep);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.request-form-intro h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.request-form-note {
  flex: 0 0 auto;
  max-width: 180px;
  margin: 5px 0 0;
  color: rgba(9, 19, 15, 0.5);
  font-size: 10px;
  line-height: 1.45;
  text-align: right;
}

.request-form-note strong,
.request-form label > span i {
  color: var(--emerald-deep);
  font-style: normal;
}

.request-form label > span em {
  color: rgba(9, 19, 15, 0.42);
  font-size: 9px;
  font-style: normal;
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
}

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

.request-form label,
.service-fieldset {
  display: flex;
  flex-direction: column;
  border: 0;
  border-bottom: 1px solid var(--line-light);
  margin: 0;
  padding: 24px 0 20px;
}

.request-form label > span,
.service-fieldset legend {
  color: rgba(243, 240, 232, 0.46);
  font-size: 9px;
  font-weight: 630;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.request-form input,
.request-form select,
.request-form textarea {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ivory);
  font-size: 15px;
}

.request-form input::placeholder {
  color: rgba(9, 19, 15, 0.36);
}

.request-form input,
.request-form select {
  height: 40px;
}

.request-form select {
  color: rgba(243, 240, 232, 0.8);
}

.request-form textarea {
  margin-top: 15px;
  resize: vertical;
  line-height: 1.6;
}

.request-form textarea::placeholder {
  color: rgba(243, 240, 232, 0.26);
}

.service-fieldset {
  padding-top: 30px;
}

.service-help {
  max-width: 470px;
  margin: 9px 0 0;
  color: rgba(9, 19, 15, 0.48);
  font-size: 11px;
  line-height: 1.5;
}

.service-options {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.service-options button {
  min-height: 42px;
  border: 1px solid var(--line-light);
  border-radius: 100px;
  padding: 10px 16px;
  background: transparent;
  color: rgba(243, 240, 232, 0.55);
  font-size: 12px;
  cursor: pointer;
  transition: color 250ms, border-color 250ms, background 250ms;
}

.service-options button:hover,
.service-options button:focus-visible {
  border-color: rgba(31, 169, 113, 0.52);
  color: var(--emerald-deep);
}

.service-options button.is-selected {
  border-color: rgba(91, 215, 162, 0.65);
  background: rgba(31, 169, 113, 0.11);
  color: #a4ebcc;
}

.form-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  border-top: 1px solid rgba(9, 19, 15, 0.14);
  margin-top: 25px;
  padding-top: 24px;
}

.form-submit-row .button {
  min-width: 174px;
  min-height: 54px;
}

.form-submit-row p {
  max-width: 310px;
  margin: 0;
  color: rgba(243, 240, 232, 0.34);
  font-size: 10px;
  line-height: 1.5;
}

.form-status {
  min-height: 25px;
  margin: 20px 0 0;
  color: #94e4c2;
  font-size: 12px;
}

.form-status--error {
  color: #e0a79e;
}

/* Homepage contact — one decisive conversion step */
.contact-cta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: auto;
  padding-block: clamp(104px, 9vw, 154px);
  border-top: 1px solid rgba(92, 230, 175, 0.34);
  background:
    linear-gradient(120deg, rgba(7, 46, 32, 0.99) 0%, rgba(6, 35, 25, 0.99) 52%, #031a12 100%);
  color: var(--ivory);
}

.contact-cta-section::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(rgba(84, 222, 165, 0.13) 0.55px, transparent 0.75px);
  background-size: 7px 7px;
  content: "";
  opacity: 0.34;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.contact-cta-aura {
  position: absolute;
  z-index: -1;
  top: -45%;
  right: -18%;
  width: min(900px, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 191, 128, 0.2), rgba(15, 103, 71, 0.06) 37%, transparent 69%);
  filter: blur(12px);
}

.contact-cta-orbit {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -13vw;
  width: min(720px, 58vw);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(-12deg);
  border: 1px solid rgba(67, 209, 151, 0.1);
  border-radius: 50%;
}

.contact-cta-orbit::before,
.contact-cta-orbit i {
  position: absolute;
  border: 1px solid rgba(67, 209, 151, 0.08);
  border-radius: 50%;
  content: "";
  inset: 13%;
}

.contact-cta-orbit i:first-child {
  inset: 29%;
}

.contact-cta-orbit i:last-child {
  top: 18%;
  right: 16%;
  bottom: auto;
  left: auto;
  width: 6px;
  height: 6px;
  border: 0;
  background: #54dba3;
  box-shadow: 0 0 20px rgba(84, 219, 163, 0.75);
}

.contact-cta-shell {
  position: relative;
  max-width: 980px;
}

.contact-cta-heading h2 {
  max-width: 760px;
  margin: 0 0 clamp(42px, 5vw, 64px);
  color: rgba(248, 246, 239, 0.94);
  font-family: var(--display);
  font-size: clamp(50px, 5vw, 84px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.contact-cta-panel {
  position: relative;
  border-top: 1px solid rgba(169, 244, 211, 0.3);
  padding-top: clamp(34px, 4vw, 50px);
}

.contact-lead-form {
  margin-top: 2px;
}

.contact-lead-grid {
  display: grid;
  gap: 10px 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.contact-lead-grid label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(126, 224, 177, 0.28);
  background: rgba(8, 37, 27, 0.34);
  padding: 14px 16px 13px;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.contact-lead-grid label:focus-within {
  border-color: rgba(98, 224, 173, 0.9);
  background: rgba(12, 55, 39, 0.46);
  box-shadow: 0 0 0 3px rgba(66, 213, 155, 0.08);
}

.contact-lead-grid label.contact-lead-field--wide {
  grid-column: 1 / -1;
}

.contact-lead-grid label > span {
  margin-bottom: 9px;
  color: rgba(182, 235, 211, 0.7);
  font-size: 8px;
  font-weight: 630;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contact-lead-grid input,
.contact-lead-grid textarea {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 390;
  line-height: 1.45;
}

.contact-lead-grid textarea {
  min-height: 72px;
  padding: 0;
  resize: vertical;
}

.contact-lead-grid input::placeholder,
.contact-lead-grid textarea::placeholder {
  color: rgba(243, 240, 232, 0.52);
}

.contact-lead-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
}

.contact-lead-submit-row p {
  max-width: 225px;
  margin: 0;
  color: rgba(243, 240, 232, 0.34);
  font-size: 9px;
  line-height: 1.45;
}

.contact-lead-submit-row button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-width: 220px;
  min-height: 56px;
  border: 1px solid rgba(74, 218, 158, 0.42);
  background: #2ac98b;
  color: #03140d;
  cursor: pointer;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.03em;
  transition: background 260ms ease, border-color 260ms ease, transform 260ms ease;
}

.contact-lead-submit-row button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(85, 228, 169, 0.82);
  background: #57dfa7;
}

.contact-lead-submit-row button:disabled {
  cursor: default;
  opacity: 0.72;
}

.contact-lead-submit-row button i {
  color: #45d69c;
  font-size: 18px;
  font-style: normal;
}

.contact-lead-status {
  min-height: 23px;
  margin: 14px 0 0;
  color: #89e3bc;
  font-size: 11px;
  line-height: 1.45;
}

.contact-lead-status--error {
  color: #e0a79e;
}

.contact-cta-meta {
  display: grid;
  align-items: center;
  gap: 12px 24px;
  margin-top: 42px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-cta-meta span {
  position: relative;
  padding-left: 14px;
  color: rgba(243, 240, 232, 0.38);
  font-size: 9px;
  line-height: 1.4;
}

.contact-cta-meta span::before {
  position: absolute;
  top: 0.48em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #42d49a;
  content: "";
}

.contact-cta-meta a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
  margin-top: 16px;
  border-top: 1px solid rgba(243, 240, 232, 0.09);
  padding-top: 20px;
  color: rgba(243, 240, 232, 0.72);
  font-size: 12px;
  letter-spacing: 0.035em;
}

.contact-cta-meta a i {
  color: #43d59a;
  font-size: 17px;
  font-style: normal;
}

.contact-cta-meta .contact-cta-email-secondary {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

/* Footer */
.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(159, 221, 255, .25);
  background:
    linear-gradient(115deg, rgba(62, 83, 165, .17), transparent 45%),
    linear-gradient(245deg, rgba(129, 119, 232, .13), transparent 48%),
    #111a33;
  color: var(--ivory);
}

.footer-cartouche {
  position: absolute;
  top: 50%;
  right: clamp(20px, 4vw, 94px);
  width: min(37vw, 540px);
  aspect-ratio: 1;
  opacity: .62;
  pointer-events: none;
  transform: translateY(-50%);
}

.footer-cartouche::before,
.footer-cartouche::after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.footer-cartouche::before {
  width: 76%;
  height: 76%;
  border: 1px solid rgba(159, 221, 255, .13);
}

.footer-cartouche::after {
  width: 4px;
  height: 4px;
  border: 1px solid rgba(210, 184, 255, .85);
  background: #111a33;
  box-shadow:
    -166px -106px 0 -1px #111a33,
    -166px -106px 0 0 rgba(159, 221, 255, .62),
    166px 106px 0 -1px #111a33,
    166px 106px 0 0 rgba(159, 221, 255, .62),
    119px -151px 0 -1px #111a33,
    119px -151px 0 0 rgba(210, 184, 255, .56),
    -119px 151px 0 -1px #111a33,
    -119px 151px 0 0 rgba(210, 184, 255, .56);
}

.footer-cartouche__grid {
  position: absolute;
  inset: 13%;
  background-image:
    linear-gradient(rgba(159, 221, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164, 154, 245, .07) 1px, transparent 1px);
  background-size: 100% 25%, 25% 100%;
  opacity: .45;
}

.footer-cartouche__eyebrow,
.footer-cartouche__coordinates {
  position: absolute;
  z-index: 2;
  color: rgba(159, 221, 255, .5);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .22em;
}

.footer-cartouche__eyebrow { top: 7%; left: 12%; }
.footer-cartouche__coordinates { right: 10%; bottom: 7%; color: rgba(210, 184, 255, .48); }

.footer-cartouche__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(159, 221, 255, .28);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.footer-cartouche__orbit--one { width: 82%; height: 40%; transform: translate(-50%, -50%) rotate(-27deg); }
.footer-cartouche__orbit--two { width: 64%; height: 64%; border-color: rgba(210, 184, 255, .25); transform: translate(-50%, -50%) rotate(31deg); }
.footer-cartouche__orbit--three { width: 42%; height: 84%; border-color: rgba(159, 221, 255, .2); transform: translate(-50%, -50%) rotate(16deg); }

.footer-cartouche__axis {
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(159, 221, 255, .24);
  transform: translate(-50%, -50%);
}

.footer-cartouche__axis--horizontal { width: 84%; height: 1px; }
.footer-cartouche__axis--vertical { width: 1px; height: 70%; }

.footer-cartouche__node,
.footer-cartouche__core {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(159, 221, 255, .74);
  background: #111a33;
  transform: rotate(45deg);
}

.footer-cartouche__node--one { top: 29%; left: 25%; }
.footer-cartouche__node--two { top: 64%; right: 19%; border-color: rgba(210, 184, 255, .74); }
.footer-cartouche__node--three { bottom: 23%; left: 39%; }

.footer-cartouche__core {
  top: calc(50% - 7px);
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-color: rgba(236, 224, 255, .72);
  box-shadow: 0 0 0 5px rgba(159, 221, 255, .08), 0 0 22px rgba(159, 221, 255, .34);
}

.footer-cartouche__core::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ice-300);
  box-shadow: 0 0 10px rgba(159, 221, 255, .95);
  content: "";
  transform: translate(-50%, -50%) rotate(-45deg);
}

.footer-main {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(70px, 10vw, 180px);
  border-bottom: 1px solid rgba(194, 216, 255, .2);
  padding-block: clamp(82px, 9vw, 132px);
  grid-template-columns: 1.2fr 1fr;
}

.footer-intro { max-width: 690px; }
.footer-intro .eyebrow { color: var(--ice-300); }

.footer-main h2 {
  max-width: 650px;
  margin: 0 0 40px;
  font-family: var(--display);
  font-size: clamp(50px, 6vw, 92px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.92;
}

.footer-intro .text-link {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  gap: 15px;
  border: 1px solid rgba(159, 221, 255, .45);
  padding: 0 19px;
  background: rgba(117, 156, 242, .12);
  color: #f7f8ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color 250ms ease, background 250ms ease, transform 250ms ease;
}

.footer-intro .text-link:hover { border-color: #bcdfff; background: rgba(120, 200, 255, .2); color: #fff; transform: translateY(-3px); }
.footer-intro .text-link span { color: var(--ice-300); font-size: 17px; }

.footer-availability {
  display: flex;
  max-width: 430px;
  align-items: flex-start;
  gap: 10px;
  margin: 31px 0 0;
  color: rgba(232, 239, 255, .69);
  font-size: 12px;
  line-height: 1.58;
}

.footer-availability i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; margin-top: .53em; background: var(--ice-400); box-shadow: 0 0 14px rgba(120, 200, 255, .9); }

.footer-links {
  align-content: start;
  display: grid;
  gap: clamp(20px, 3vw, 45px);
  grid-template-columns: repeat(3, 1fr);
}

.footer-links > div {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(194, 216, 255, .24);
  padding-top: 17px;
}

.footer-links > .footer-service-directory {
  grid-column: 1 / -1;
}

.footer-service-grid {
  display: grid;
  width: 100%;
  gap: 8px clamp(18px, 2vw, 36px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer-service-grid a {
  min-width: 0;
  border-bottom: 1px solid rgba(194, 216, 255, .1);
  padding: 3px 0 8px;
  line-height: 1.35;
}

.footer-label {
  margin: 0 0 14px;
  color: var(--ice-300);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  color: rgba(244, 247, 255, .79);
  font-size: 12px;
  transition: color 250ms, transform 250ms;
}

.footer-links a:hover {
  color: var(--ice-300);
  transform: translateX(3px);
}

.footer-links a span { margin-right: 6px; font-size: 11px; }
.footer-links a i { margin-left: 7px; color: var(--ice-300); font-size: 14px; font-style: normal; }
.footer-location { color: rgba(212, 222, 246, .55); font-size: 11px; line-height: 1.45; }

.footer-base {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding-block: 27px;
  color: rgba(215, 225, 247, .55);
  font-size: 9px;
  letter-spacing: 0.04em;
}

.footer-base p {
  margin: 0;
}

.footer-base p span {
  display: block;
  margin-top: 7px;
  color: rgba(215, 225, 247, .4);
}

.footer-base div {
  display: flex;
  gap: 24px;
}

.footer-base a { color: rgba(224, 233, 252, .75); transition: color 220ms ease; }
.footer-base a:hover { color: var(--ice-300); }

@media (max-width: 1180px) {
  .primary-nav { display: none; }
  .nav-shell { grid-template-columns: 1fr auto; }
  .nav-shell::before { display: none; }
  .menu-button { display: flex; }
  .primary-nav.is-open {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    display: grid;
    width: min(420px, calc(100vw - 40px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    overflow: hidden;
    border: 1px solid rgba(91, 173, 255, 0.3);
    border-radius: 20px;
    padding: 7px;
    background:
      linear-gradient(135deg, rgba(57, 130, 232, 0.11), transparent 42%),
      rgba(8, 13, 27, 0.985);
    box-shadow: inset 0 1px 0 rgba(153, 216, 255, 0.13), 0 22px 54px rgba(1, 2, 6, 0.38);
    backdrop-filter: blur(26px) saturate(108%);
    -webkit-backdrop-filter: blur(26px) saturate(108%);
    animation: nav-menu-reveal 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .primary-nav.is-open a {
    display: grid;
    min-height: 46px;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 13px;
    padding: 10px 11px;
    color: rgba(246, 241, 230, 0.72);
    grid-template-columns: 18px minmax(0, 1fr);
    animation: none;
  }
  .primary-nav.is-open .nav-item-index {
    color: rgba(125, 205, 255, 0.86);
    font-size: 7px;
    transform: none;
  }
  .primary-nav.is-open .nav-item-label {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.035em;
  }
  .primary-nav.is-open a::after {
    display: none;
  }
  .primary-nav.is-open a:hover,
  .primary-nav.is-open a[aria-current="page"] {
    border-color: rgba(99, 184, 255, 0.38);
    background: linear-gradient(135deg, rgba(50, 124, 229, 0.24), rgba(132, 206, 255, 0.055));
    color: #f7fbff;
  }
  .site-header.is-compact .primary-nav.is-open {
    border-color: rgba(91, 173, 255, 0.34);
    background:
      linear-gradient(135deg, rgba(57, 130, 232, 0.12), transparent 42%),
      rgba(8, 13, 27, 0.985);
    box-shadow: inset 0 1px 0 rgba(153, 216, 255, 0.13), 0 22px 54px rgba(1, 2, 6, 0.42);
  }
  .site-header.is-compact .primary-nav.is-open a {
    color: rgba(246, 241, 230, 0.72);
  }
  .site-header.is-compact .primary-nav.is-open a:hover,
  .site-header.is-compact .primary-nav.is-open a[aria-current="page"] {
    color: #fffdf7;
  }
  @keyframes nav-menu-reveal {
    from {
      opacity: 0;
      clip-path: inset(0 0 100% 0);
    }
    to {
      opacity: 1;
      clip-path: inset(0 0 0 0);
    }
  }
  .build-card--1 { grid-column: span 6; }
  .build-card--2 { grid-column: span 6; }
  .build-card--3 { min-height: 430px; grid-column: span 12; }
  .article-hero-grid { grid-template-columns: .25fr 1.25fr; }
  .article-hero-media {
    width: min(100%, 760px);
    margin-top: 10px;
    aspect-ratio: 16 / 9;
    grid-column: 2;
  }
}

@media (max-width: 900px) {
  .footer-cartouche { top: 58%; right: 50%; width: min(68vw, 500px); opacity: .3; transform: translate(50%, -50%); }
  .page-shell { width: min(100% - 40px, 1480px); }
  .section { padding-block: 100px; }
  .display-title { font-size: clamp(47px, 11vw, 80px); }
  .section-heading { margin-bottom: 64px; }
  .hero {
    /* One compact scroll beat is enough to reveal the second chapter. */
    height: calc(100svh + clamp(96px, 13svh, 120px));
    min-height: 0;
  }
  .hero-sticky {
    min-height: 0;
    background:
      linear-gradient(90deg, rgba(8, 13, 28, .9), rgba(8, 13, 28, .36)),
      radial-gradient(circle at 50% 48%, rgba(28, 105, 74, .2), transparent 45%),
      url("/hero-laptop-poster-mobile.webp") 62% center / cover no-repeat,
      #07100c;
  }
  .hero-content h1 { max-width: 90vw; font-size: clamp(62px, 13vw, 102px); }
  .glass-structure { top: 18%; right: -20%; width: 75vw; height: 52%; opacity: .72; }
  .hero-video {
    display: none;
  }
  .hero-scroll-video,
  .hero-scroll-reverse-video {
    display: block;
    object-position: 62% center;
  }
  .hero-concept-title[data-glyph-phase] .hero-glyph,
  .hero-build-title[data-glyph-phase] .hero-glyph {
    opacity: 1;
    animation: none !important;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }
  .hero-concept-inner { width: min(520px, 60vw); }
  .hero-concept-title { font-size: clamp(70px, 10vw, 96px); }
  .hero-concept-description { max-width: 390px; }
  .hero-concept-capabilities > span { padding-inline: 17px; }
  .hero-build-copy { top: 31%; width: 66%; }
  .hero-build-title { font-size: clamp(43px, 6vw, 58px); }
  .hero-build-standards { top: 15%; width: 62%; }
  .hero-build-standards article { padding-right: 8px; }
  .hero-build-tech div { gap: 15px; }
  .hero-build-orbit { left: -18%; width: 88%; }
  .hero-bottom { align-items: flex-start; flex-direction: column; }
  .hero-content { justify-content: flex-end; padding-bottom: 100px; }
  .hero-content .eyebrow { margin-bottom: 18px; }
  .intro-grid { gap: 46px; grid-template-columns: 1fr; }
  .intro-aside { min-height: auto; align-items: center; flex-direction: row; }
  .intro-monogram { font-size: 130px; }
  .intro-aside p { max-width: 180px; text-align: right; }
  .build-card { min-height: 520px; }
  .story-grid, .ai-grid, .why-grid, .request-grid, .footer-main, .contact-grid { gap: 80px; grid-template-columns: 1fr; }
  .ai-copy, .why-heading, .request-grid > div:first-child { position: static; }
  .projects-grid { grid-template-columns: 1fr; }
  .project-card--large { min-height: 620px; grid-row: auto; }
  .projects-grid--archive .project-card--large { grid-column: auto; }
  .process-list { margin-left: 0; }
  .process-list article { gap: 24px; grid-template-columns: 45px 1fr; }
  .process-list p { grid-column: 2; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-card:last-child { display: none; }
  .footer-links { grid-template-columns: repeat(3, 1fr); }
  .editorial-grid { gap: 50px; grid-template-columns: 1fr; }
  .service-detail-list article { grid-template-columns: 55px 1fr; }
  .service-detail-list article > div:last-child { grid-column: 2; }
  .services-paths { gap: 42px; grid-template-columns: 1fr; }
  .service-journey-grid { gap: 52px; padding-left: 54px; grid-template-columns: minmax(220px, .75fr) minmax(0, 1fr); }
  .service-visual-surface { width: min(34vw, 320px); }
  .service-journey-step--2 .service-visual { order: 0; }
  .blog-hero { min-height: auto; padding-bottom: 54px; }
  .blog-hero-content { gap: 28px; grid-template-columns: 1fr; }
  .blog-hero-content > .eyebrow,
  .blog-hero-notes { grid-column: auto; }
  .blog-hero-description { margin-top: 12px; }
  .blog-hero-notes { margin-top: 28px; }
  .blog-archive-heading { gap: 38px; grid-template-columns: 1fr; }
  .blog-archive-heading > p { margin-left: 0; }
  .journal-search { gap: 15px; grid-template-columns: 1fr; }
  .journal-search > label { padding-top: 0; }
  .topic-hub-grid { grid-template-columns: 1fr; }
  .topic-card:nth-child(odd) { border-right: 0; }
  .journal-start-panel { grid-template-columns: .3fr 1.7fr; }
  .journal-start-panel p { grid-column: 2; }
  .featured-article { grid-template-columns: 1fr; }
  .featured-visual { min-height: 500px; }
  .article-hero { min-height: auto; }
  .article-hero-grid { grid-template-columns: 1fr; }
  .article-hero-media {
    width: 100%;
    margin-top: 10px;
    aspect-ratio: 16 / 10;
    grid-column: auto;
  }
  .article-breadcrumb { margin-bottom: 20px; }
  .article-layout { gap: 70px; grid-template-columns: 1fr; }
  .article-toc { position: static; display: none; }
  .topic-article-grid { grid-template-columns: 1fr; }
  .topic-article-grid article:nth-child(odd) { border-right: 0; }
  .topic-explore-grid { grid-template-columns: 1fr; }
  .topic-explore-grid a:not(:last-child) { border-right: 0; }
  .contact-cta-section { min-height: auto; }
  .contact-cta-heading h2 { max-width: 760px; }
  .contact-cta-panel { width: 100%; margin-left: 0; }
  .contact-cta-orbit { right: -32vw; width: 90vw; }
}

@media (max-width: 620px) {
  .footer-cartouche { top: 58%; right: 50%; width: 460px; opacity: .2; transform: translate(50%, -50%); }
  .footer-cartouche__eyebrow,
  .footer-cartouche__coordinates { font-size: 6px; }
  .page-shell { width: min(100% - 28px, 1480px); }
  .section { padding-block: 84px; }
  .nav-shell {
    width: calc(100% - 28px);
    height: 76px;
  }
  .site-header.is-compact .nav-shell {
    width: calc(100% - 20px);
    height: 60px;
    margin-top: 8px;
    border-radius: 30px;
    padding-inline: 11px;
    grid-template-columns: 1fr auto;
  }
  .site-header.is-compact .brand-mark { flex-basis: 46px; width: 46px; height: 32px; }
  .site-header.is-compact .brand-logo { width: 44px; height: 26px; }
  .site-header.is-compact .brand-divider { height: 22px; margin-inline: 9px; }
  .site-header.is-compact .brand-name { font-size: 10px; letter-spacing: .2em; }
  .site-header.is-compact .nav-actions { gap: 10px; }
  .site-header.is-compact .locale-switch { min-height: 34px; gap: 6px; padding: 4px 7px 4px 6px; }
  .site-header.is-compact .locale-current { margin-left: -3px; padding: 3px 5px 3px 4px; }
  .site-header.is-compact .locale-flag { width: 16px; height: 11px; }
  .site-header.is-compact .locale-switch-arrow { font-size: 9px; }
  .site-header.is-compact .menu-button { width: 38px; height: 38px; border-radius: 50%; }
  .site-header.is-compact .header-progress { right: 24px; left: 24px; }
  .brand-name { font-size: 11px; letter-spacing: 0.24em; }
  .brand-divider { height: 26px; margin-inline: 10px; }
  .button--nav { display: none; }
  .nav-actions { gap: 15px; }
  .brand-mark { flex-basis: 54px; width: 54px; height: 36px; }
  .brand-logo { width: 52px; height: 30px; }
  .locale-switch { min-height: 34px; padding-left: 14px; }
  .menu-button { width: 40px; height: 40px; }
  .primary-nav.is-open {
    top: calc(100% + 8px);
    right: -4px;
    left: auto;
    width: min(calc(100vw - 20px), 370px);
    border-radius: 18px;
    padding: 6px;
  }
  .primary-nav.is-open a { min-height: 44px; padding: 9px 10px; }
  .primary-nav.is-open .nav-item-label { font-size: 10px; }
  .hero-content { padding-bottom: 90px; }
  .hero-content h1 { font-size: clamp(57px, 17.2vw, 82px); line-height: .88; }
  .hero-bottom { gap: 28px; margin-top: 34px; }
  .hero-bottom > p { font-size: 15px; line-height: 1.55; }
  .hero-actions { width: 100%; }
  .hero-actions .button { flex: 1; gap: 18px; padding-inline: 16px; }
  .hero-meta > span:first-child { display: none; }
  .hero-meta { justify-content: flex-end; }
  .glass-structure { top: 13%; right: -32%; width: 100vw; height: 42%; opacity: .55; }
  .hero-video { object-position: center center; }
  .hero-scroll-video,
  .hero-scroll-reverse-video { object-position: 62% center; }
  .hero-concept {
    align-items: flex-end;
    padding-top: 110px;
    padding-bottom: 92px;
  }
  .hero-concept-inner { width: 100%; }
  .hero-concept-kicker { margin-bottom: 19px; font-size: 9px; }
  .hero-concept-title { font-size: clamp(62px, 19vw, 78px); }
  .hero-concept-descriptor { margin-top: 28px; font-size: 18px; }
  .hero-concept-description { max-width: 330px; font-size: 13px; }
  .hero-concept-capabilities { margin-top: 22px; }
  .hero-concept-capabilities > span { min-height: 35px; padding: 7px 12px; font-size: 11px; }
  .hero-concept-cta { min-width: 190px; min-height: 50px; margin-top: 26px; }
  .hero-build-concept { padding-top: 78px; }
  .hero-build-copy { top: auto; bottom: 118px; width: 100%; }
  .hero-build-kicker { margin-bottom: 21px; }
  .hero-build-title { font-size: clamp(39px, 11.5vw, 52px); }
  .hero-build-description { max-width: 360px; margin-top: 18px; font-size: 13px; }
  .hero-build-actions { align-items: flex-start; gap: 20px; margin-top: 24px; flex-direction: column; }
  .hero-build-primary { min-width: 190px; min-height: 49px; }
  .hero-build-standards,
  .hero-build-tech { display: none; }
  .hero-build-orbit { top: 20%; left: -42%; width: 145%; }
  .hero-build-wave { right: -35%; bottom: 48px; width: 145%; opacity: .2; }
  .display-title { font-size: 49px; }
  .large-copy { margin-top: 30px; font-size: 17px; }
  .section-heading { gap: 20px; }
  .section-heading .section-index { display: none; }
  .intro-section { padding-block: 10px; }
  .intro-shell { padding: 25px; }
  .intro-topline { gap: 14px; grid-template-columns: auto 1fr; padding-bottom: 22px; }
  .intro-disciplines { display: none; }
  .intro-grid { gap: 42px; padding-top: 52px; }
  .intro-aside { align-items: flex-end; min-height: auto; }
  .intro-aside-line { align-self: flex-start; }
  .intro-monogram { font-size: 112px; }
  .intro-aside p { max-width: 132px; }
  .intro-content .display-title { font-size: clamp(49px, 13.2vw, 72px); }
  .intro-capabilities { grid-template-columns: 1fr; }
  .intro-capabilities > div { min-height: 64px; border-right: 0; padding: 14px 0; }
  .build-grid { display: block; }
  .build-card { min-height: 460px; margin-bottom: 10px; padding: 28px; }
  .build-card--3 { min-height: 460px; }
  .story-timeline { padding-left: 25px; }
  .project-card, .project-card--large { min-height: 520px; padding: 26px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-item { min-height: 130px; }
  .process-list article { min-height: auto; padding: 28px 0 40px 28px; grid-template-columns: 35px 1fr; }
  .process-list h3 { font-size: 36px; }
  .why-list > div { grid-template-columns: 32px 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card:last-child { display: block; }
  .blog-visual { height: 330px; }
  .request-grid { gap: 60px; }
  .request-form-intro { gap: 16px; flex-direction: column; }
  .request-form-note { max-width: none; margin-top: 0; text-align: left; }
  .form-grid { grid-template-columns: 1fr; }
  .form-submit-row { align-items: stretch; flex-direction: column; }
  .contact-cta-section { min-height: auto; padding-block: 92px 100px; }
  .contact-cta-heading h2 { font-size: clamp(48px, 13.4vw, 67px); line-height: 1; }
  .contact-cta-panel { padding-top: 26px; }
  .contact-lead-grid { gap: 0; grid-template-columns: 1fr; }
  .contact-lead-grid label.contact-lead-field--wide { grid-column: auto; }
  .contact-lead-grid label { padding-block: 16px 12px; }
  .contact-lead-grid input,
  .contact-lead-grid textarea { font-size: 15px; }
  .contact-lead-submit-row { align-items: stretch; flex-direction: column; gap: 18px; }
  .contact-lead-submit-row p { max-width: 280px; }
  .contact-lead-submit-row button { width: 100%; min-height: 58px; }
  .contact-cta-meta { gap: 14px; grid-template-columns: 1fr; margin-top: 34px; }
  .contact-cta-meta a { margin-top: 10px; }
  .contact-cta-orbit { top: 30%; right: -68vw; width: 145vw; }
  .footer-main { padding-block: 80px; }
  .footer-links { gap: 48px 24px; grid-template-columns: repeat(2, 1fr); }
  .footer-navigation { grid-row: span 2; }
  .footer-base { gap: 18px; flex-direction: column; }
  .inner-hero { min-height: 82svh; padding-bottom: 65px; }
  .inner-hero-content h1, .blog-hero h1 { font-size: clamp(57px, 15vw, 78px); }
  .inner-hero-content > p:last-child, .blog-hero-content > p:last-child { margin: 40px 0 0; font-size: 16px; }
  .services-experience { padding-top: 76px; }
  .services-paths { gap: 24px; padding-block: 42px 48px; }
  .services-paths-heading > p:last-child { max-width: 480px; margin-bottom: 8px; }
  .mobile-carousel-controls {
    display: grid;
    width: 100%;
    align-items: center;
    gap: 7px 12px;
    grid-template-areas:
      "hint count buttons"
      "meter meter buttons";
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .mobile-carousel-hint {
    grid-area: hint;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.35;
    opacity: .72;
    text-transform: uppercase;
  }
  .mobile-carousel-meter {
    position: relative;
    display: block;
    height: 1px;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 24%, transparent);
    grid-area: meter;
  }
  .mobile-carousel-meter i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    background: currentColor;
    transition: width 420ms cubic-bezier(.16, 1, .3, 1);
  }
  .mobile-carousel-count {
    min-width: 42px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .13em;
    text-align: right;
    grid-area: count;
  }
  .mobile-carousel-buttons { display: flex; gap: 7px; grid-area: buttons; }
  .mobile-carousel-buttons button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid color-mix(in srgb, currentColor 48%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 7%, transparent);
    color: currentColor;
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    transition: opacity 200ms ease, background 200ms ease, transform 200ms ease;
  }
  .mobile-carousel-buttons button:active:not(:disabled) { transform: scale(.92); }
  .mobile-carousel-buttons button:disabled { cursor: default; opacity: .24; }
  .services-path-controls { color: #76d4ad; }
  .services-path-nav {
    display: flex;
    width: calc(100% + 14px);
    max-width: calc(100% + 14px);
    gap: 12px;
    overflow-x: auto;
    margin-right: -14px;
    padding: 0 52px 5px 0;
    scroll-behavior: smooth;
    scroll-padding-left: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .services-path-nav::-webkit-scrollbar { display: none; }
  .services-path-nav a,
  .services-path-nav a:last-child {
    width: min(78vw, 310px);
    min-height: 176px;
    flex: 0 0 min(78vw, 310px);
    border: 1px solid rgba(118, 212, 173, .22);
    padding: 18px 20px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .services-path-nav strong { margin-top: 22px; font-size: 25px; line-height: 1; }
  .services-path-nav small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 11px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .services-path-nav i { right: 18px; bottom: 15px; }
  .services-progress { display: none; }
  .service-journey-step { min-height: auto; padding-block: 56px 64px; }
  .service-journey-grid { width: 100%; gap: 0; padding: 0; grid-template-columns: 1fr; }
  .service-visual {
    display: grid;
    width: calc(100% - 40px);
    height: clamp(240px, 72vw, 320px);
    min-height: 0;
    margin: 0 20px 28px;
    overflow: hidden;
    place-items: center;
  }
  .service-journey-step--2 .service-visual { order: 0; }
  .service-visual--platform,
  .service-visual--ai,
  .service-visual--cyber { min-height: 0; }
  .web-platform-orbit,
  .ai-robot-visual,
  .cyber-hacker-visual { width: min(68vw, 310px); }
  .platform-node-face { width: clamp(46px, 14vw, 62px); }
  .platform-orbit-node > small { margin-top: 7px; font-size: 6px; }
  .ai-robot-visual > img { width: 128%; }
  .cyber-hacker-pet { transform: scale(1.2); }
  .service-journey-copy { position: relative; width: 100%; min-width: 0; max-width: 100vw; overflow-x: clip; padding-inline: 20px; }
  .service-journey-copy::before {
    position: absolute;
    top: 0;
    right: 20px;
    color: currentColor;
    content: "";
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    opacity: .34;
  }
  .service-journey-step--1 .service-journey-copy::before { content: "01 / 03"; }
  .service-journey-step--2 .service-journey-copy::before { content: "02 / 03"; }
  .service-journey-step--3 .service-journey-copy::before { content: "03 / 03"; }
  .service-journey-eyebrow { max-width: calc(100% - 74px); margin-bottom: 16px; font-size: 8px; letter-spacing: .16em; }
  .service-journey-copy h2 { max-width: 100%; font-size: clamp(44px, 12vw, 52px); line-height: .94; }
  .service-journey-step--3 .service-journey-copy h2 { font-size: clamp(41px, 11.4vw, 49px); }
  .service-journey-statement { margin-top: 19px; font-size: 18px; line-height: 1.32; }
  .service-journey-body { margin-top: 15px; font-size: 13px; line-height: 1.62; }
  .web-app-actions { margin-top: 23px; }
  .web-app-contact-button { width: 100%; min-height: 49px; justify-content: space-between; }
  .web-app-capabilities { width: 100%; min-width: 0; max-width: 100%; margin-top: 27px; }
  .web-app-capabilities::before { display: none; }
  .web-app-capability-controls { margin-bottom: 13px; color: #5366cf; }
  .ai-capabilities .web-app-capability-controls { color: #79cfff; }
  .cyber-capabilities .web-app-capability-controls { color: #ff6470; }
  .web-app-capabilities > ul {
    display: flex;
    width: calc(100% + 20px);
    max-width: calc(100% + 20px);
    gap: 12px;
    overflow-x: auto;
    margin-right: -20px;
    padding-right: 54px;
    grid-template-columns: none;
    scroll-behavior: smooth;
    scroll-padding-left: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .web-app-capabilities > ul::-webkit-scrollbar { display: none; }
  .web-app-capabilities > ul > li {
    width: min(78vw, 304px);
    min-height: 214px;
    flex: 0 0 min(78vw, 304px);
    border: 1px solid rgba(24, 36, 65, .16);
    padding-inline: 13px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .ai-capabilities > ul > li { border-color: rgba(210, 218, 255, .18); }
  .cyber-capabilities > ul > li { border-color: rgba(255, 125, 132, .22); }
  .web-app-capabilities > ul > li > button { min-height: 45px; padding-block: 9px; }
  .web-app-capability-inline { min-height: 0; padding-inline: 0; }
  .web-app-capabilities > ul > li.is-active .web-app-capability-inline { padding: 2px 0 17px; }
  .web-app-capability-inline > p { font-size: 11px; line-height: 1.5; }
  .web-app-capability-inline ul { margin-top: 8px; }
  .web-app-capability-inline ul li { font-size: 9px; }
  .web-app-more-button { margin-top: 23px; font-size: 10px; }
  .web-app-delivery-overlay { align-items: start; padding: 0; }
  .web-app-delivery-dialog { width: 100%; min-height: 100svh; max-height: none; border: 0; padding: 66px 20px 30px; }
  .web-app-delivery-close { position: fixed; z-index: 2; top: 14px; right: 14px; background: rgba(246, 241, 232, .92); backdrop-filter: blur(8px); }
  .web-app-delivery-grid { gap: 22px; margin-top: 30px; grid-template-columns: 1fr; }
  .web-app-delivery-list article { padding-block: 15px; }
  .web-app-timeline,
  .web-app-pricing { padding: 17px; }
  .web-app-technology { gap: 20px; margin-top: 30px; padding-top: 27px; grid-template-columns: 1fr; }
  .web-app-technology-list { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .values-grid article { min-height: 250px; padding: 28px; }
  .values-grid h3 { margin-top: 90px; }
  .service-detail-list article { gap: 24px; padding-bottom: 80px; grid-template-columns: 36px 1fr; }
  .service-detail-list h2 { font-size: 55px; }
  .contact-grid { gap: 70px; }
  .blog-hero { padding-top: 142px; }
  .blog-hero h1 { line-height: .86; }
  .blog-hero h1 em { margin-top: 5px; margin-left: 0; }
  .blog-hero-orbit { top: -6%; right: -55%; width: 140vw; opacity: .65; }
  .blog-hero-notes { gap: 8px; grid-template-columns: 1fr; }
  .blog-hero-notes span:not(:first-child) { display: none; }
  .blog-archive-heading { padding-bottom: 38px; }
  .blog-archive-heading h2 { font-size: 55px; }
  .blog-archive-heading > p { font-size: 13px; }
  .topic-index { align-items: flex-start; margin-bottom: 60px; flex-direction: column; }
  .category-row { justify-content: flex-start; }
  .journal-search > div { grid-template-columns: 1fr; }
  .journal-search button { min-height: 48px; }
  .topic-card { min-height: 285px; padding: 24px 20px; grid-template-columns: 28px 1fr; }
  .topic-card h2 { font-size: 39px; }
  .topic-card small { padding-right: 35px; }
  .featured-visual { min-height: 390px; }
  .featured-visual strong { font-size: 60px; }
  .featured-cover-label { top: 22px; left: 22px; }
  .featured-visual small { right: 22px; bottom: 20px; }
  .featured-copy h2 { font-size: 45px; }
  .journal-start-panel { gap: 24px; grid-template-columns: 1fr; }
  .journal-start-panel p { grid-column: auto; }
  .article-list-heading { margin-top: 100px; }
  .article-list article > a { align-items: start; gap: 16px; padding: 32px 0 38px; grid-template-columns: 25px 1fr 18px; }
  .article-row-meta { gap: 5px 12px; }
  .article-row-meta time { display: none; }
  .article-list h3 { font-size: 38px; }
  .article-list article > a > div > p { font-size: 12px; }
  .article-hero { padding-top: 140px; }
  .article-heading h1 { font-size: clamp(51px, 14vw, 75px); }
  .article-heading > p:not(.eyebrow) { margin-top: 28px; font-size: 15px; }
  .article-layout { padding-block: 85px 110px; }
  .article-opening { margin-bottom: 80px; padding-bottom: 52px; }
  .article-opening > span { margin-bottom: 35px; }
  .article-intro { font-size: 31px; }
  .article-takeaways { margin-top: 42px; }
  .article-content h2 { font-size: 42px; }
  .article-content section > p { font-size: 16px; line-height: 1.78; }
  .article-content blockquote { padding: 38px 0 38px 45px; }
  .article-content blockquote::before { top: 30px; font-size: 58px; }
  .article-inline-cta { padding: 30px 24px; }
  .article-author { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .related-grid article:first-child { border-right: 0; }
  .related-grid a { min-height: 250px; padding-inline: 0; }
  .related-grid h3 { margin-top: 80px; }
  .topic-page-hero { min-height: 590px; padding: 145px 0 62px; }
  .topic-page-hero .article-breadcrumb { margin-bottom: 36px; }
  .topic-page-hero h1 { font-size: clamp(58px,16vw,84px); }
  .topic-page-orbit { top: -4%; right: -70%; width: 150vw; opacity: .62; }
  .topic-section-heading { align-items: start; flex-direction: column; }
  .topic-section-heading h2 { font-size: 52px; }
  .topic-article-grid a { min-height: 365px; padding-inline: 0; }
  .topic-article-grid small { right: 0; }
  .topic-approach { gap: 24px; grid-template-columns: 1fr; }
  .topic-explore-grid a { min-height: 210px; padding-inline: 0; }
  .topic-explore-grid h2 { margin-top: 80px; }
}

@media (max-width: 1180px) {
  .intro-main {
    gap: 42px;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  }
  .technology-stack {
    width: min(900px, 100%);
    margin-inline: auto;
    grid-column: 1 / -1;
  }
  .intro-services {
    grid-template-columns: repeat(2, 1fr);
  }
  .intro-services-lead {
    min-height: 260px;
    grid-column: span 2;
  }
  .intro-services-lead > strong {
    max-width: 330px;
  }
  .intro-services-lead > a {
    position: absolute;
    right: 42px;
    bottom: 42px;
  }
}

@media (max-width: 900px) {
  .intro-section {
    padding-block: 0;
  }
  .intro-main {
    min-height: auto;
    gap: 44px;
    padding-block: 54px 65px;
    grid-template-columns: 1fr;
  }
  .intro-heading h2 {
    max-width: 720px;
  }
  .intro-summary {
    max-width: 620px;
    border-top: 1px solid rgba(132, 198, 168, 0.15);
    border-left: 0;
    padding: 32px 0 0;
  }
  .technology-stack {
    width: 100%;
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  .intro-section {
    padding-block: 0;
  }
  .intro-shell {
    padding: 62px 0 0;
  }
  .intro-topline {
    padding-bottom: 0;
    font-size: 8px;
  }
  .intro-main {
    gap: 38px;
    padding: 44px 0 54px;
  }
  .intro-kicker {
    margin-bottom: 20px;
    font-size: 8px;
  }
  .intro-heading h2 {
    font-size: clamp(34px, 10.5vw, 47px);
    letter-spacing: -0.048em;
    line-height: 1.16;
  }
  .intro-heading-rule {
    margin-top: 26px;
  }
  .intro-summary > p {
    font-size: 12px;
  }
  .intro-link {
    margin-top: 32px;
  }
  .technology-stack {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .technology-stack-scene {
    width: min(360px, 100%);
    height: 345px;
    margin-inline: auto;
    grid-column: 1;
    grid-row: 1;
  }
  .technology-stack-layer {
    left: 11%;
    width: 76%;
    height: 128px;
  }
  .technology-stack-connector {
    display: none;
  }
  .technology-stack-labels {
    min-height: auto;
    gap: 23px 14px;
    padding: 0 0 8px;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
  }
  .technology-stack-label {
    min-height: 58px;
    padding-left: 14px;
  }
  .technology-stack-detail {
    min-height: 96px;
    margin-top: 18px;
    grid-column: 1;
    grid-row: 3;
    padding-inline: 0;
  }
  .intro-services {
    grid-template-columns: 1fr;
  }
  .intro-services-lead {
    min-height: 250px;
    grid-column: auto;
  }
  .intro-services-lead > a {
    position: static;
    margin-top: auto;
  }
  .intro-service-card {
    min-height: 270px;
  }
}

@media (max-width: 900px) {
  .form-page-section { min-height: auto; padding-block: 92px; }
  .form-page-shell { grid-template-columns: minmax(0, 720px); }
  .zalo-qr-card {
    display: grid;
    min-height: 0;
    align-items: center;
    grid-template-columns: auto 1fr;
    column-gap: 22px;
    padding: 22px;
    text-align: left;
  }
  .zalo-qr-eyebrow { grid-column: 2; margin: 0 0 4px; }
  .zalo-qr-frame { width: 92px; grid-row: span 3; margin: 0; }
  .zalo-qr-card strong { grid-column: 2; }
  .zalo-qr-card > p:last-child { max-width: none; grid-column: 2; margin: 5px 0 0; }
}

@media (max-width: 620px) {
  .form-page-section { padding-block: 82px; }
  .form-page-section .request-form { padding: 22px 18px; }
  .form-page-section .request-form-intro h2 { font-size: 31px; }
  .zalo-qr-card { column-gap: 16px; padding: 18px; }
  .zalo-qr-frame { width: 78px; font-size: 14px; }
}

/* Homepage colour chapters: each section has its own atmosphere. */
.intro-section {
  background:
    radial-gradient(circle at 84% 18%, rgba(100, 89, 255, .27), transparent 33%),
    radial-gradient(circle at 12% 80%, rgba(47, 195, 236, .16), transparent 35%),
    linear-gradient(135deg, #12172f 0%, #0b1125 56%, #161238 100%);
}

.intro-section::before {
  background-image:
    linear-gradient(rgba(143, 157, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 157, 255, .045) 1px, transparent 1px);
}

.intro-shell::before {
  border-color: rgba(141, 156, 255, .16);
  box-shadow: 0 0 0 86px rgba(101, 111, 255, .038), 0 0 0 172px rgba(64, 201, 243, .022);
}

.intro-aura { background: radial-gradient(ellipse, rgba(103, 92, 255, .27), transparent 69%); }
.intro-topline-rule,
.intro-heading-rule { background: linear-gradient(90deg, #98a7ff, #58d7ff, transparent); }
.intro-kicker,
.intro-link,
.intro-services-lead > p,
.intro-service-card > span,
.intro-service-card > div b { color: #a9b7ff; }
.intro-summary { border-left-color: rgba(169, 183, 255, .2); }
.intro-link { border-bottom-color: rgba(107, 211, 255, .55); }
.intro-link:hover { border-color: #95e8ff; color: #d5dcff; }

.intro-services {
  border-color: rgba(159, 173, 255, .18);
  background: rgba(14, 20, 47, .34);
}
.intro-services-lead,
.intro-service-card { border-right-color: rgba(159, 173, 255, .18); }
.intro-services-mark { border-color: rgba(125, 215, 255, .65); }
.intro-services-mark i { border-color: #86dcff; box-shadow: 0 0 8px rgba(134, 220, 255, .62); }
.intro-service-card:hover { background: linear-gradient(155deg, rgba(77, 72, 182, .42), rgba(15, 25, 62, .6)); }
.intro-service-card > div i { background: rgba(167, 184, 255, .3); }

.intro-section .technology-stack-glow { background: radial-gradient(circle, rgba(116, 105, 255, .48), rgba(72, 207, 255, .14) 38%, transparent 69%); }
.intro-section .technology-stack-layer { border-color: rgba(142, 181, 255, .42); background-image: linear-gradient(rgba(126, 198, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(126, 198, 255, .1) 1px, transparent 1px), radial-gradient(circle at 50% 50%, rgba(97, 87, 237, .4), rgba(13, 24, 61, .28) 47%, rgba(5, 10, 31, .72)); box-shadow: inset 0 0 34px rgba(118, 105, 255, .14), 0 16px 30px rgba(0, 0, 0, .28); }
.intro-section .technology-stack-layer > i,
.intro-section .technology-stack-layer > span,
.intro-section .technology-stack-core { background: #87e0ff; box-shadow: 0 0 14px #87e0ff, 0 0 42px 20px rgba(99, 120, 255, .18); }
.intro-section .technology-stack-connector path { stroke: rgba(135, 224, 255, .62); }
.intro-section .technology-stack-connector circle { fill: #a7b4ff; }
.intro-section .technology-stack-detail { border-top-color: rgba(148, 172, 255, .24); }
.intro-section .technology-stack-detail > span { color: #93dfff; }
.intro-section .technology-stack-label.is-active strong { color: #bcd2ff; }

.solutions-section {
  background:
    radial-gradient(circle at 82% 8%, rgba(116, 148, 255, .12), transparent 29%),
    radial-gradient(circle at 9% 86%, rgba(237, 179, 92, .14), transparent 32%),
    linear-gradient(180deg, #fbf8ef, #f0edf5);
}
.solutions-section::before { border-color: rgba(93, 109, 183, .11); box-shadow: 0 0 0 78px rgba(93, 109, 183, .035), 0 0 0 156px rgba(210, 157, 71, .025); }
.solutions-kicker { border-color: rgba(83, 97, 168, .45); color: #515ca2; }
.solutions-kicker i { background: #6875d5; box-shadow: 0 0 0 4px rgba(104, 117, 213, .1); }
.solutions-copy h2 span { color: #4d5ca9; }
.solutions-cta { border-color: rgba(78, 89, 159, .6); color: #313e86; }
.solutions-cta span,
.solutions-cta:hover { background: #4957a8; }

.solution-card--1 { background: linear-gradient(145deg, #fffdf6, #f3e7c7); border-color: rgba(166, 119, 42, .2); }
.solution-card--2 { background: linear-gradient(145deg, #f8fbff, #dce9fb); border-color: rgba(75, 126, 191, .18); }
.solution-card--3 { background: radial-gradient(circle at 50% 29%, rgba(114, 99, 255, .36), transparent 39%), linear-gradient(145deg, #24204b, #101630 73%); border-color: rgba(138, 158, 255, .3); }
.solution-card--1 .solution-card-topline { color: #9a6823; }
.solution-card--2 .solution-card-topline { color: #3c73b5; }
.solution-card--1 .solution-card-icon { background: rgba(178, 122, 35, .1); color: #976420; }
.solution-card--2 .solution-card-icon { background: rgba(54, 120, 196, .1); color: #3975b7; }
.solution-card--3 .solution-card-topline,
.solution-card--3 .solution-card-topline a,
.solution-card--3 .solution-card-icon { color: #b9c7ff; }
.solution-card--3 .solution-card-icon { border-color: rgba(185, 199, 255, .24); background: rgba(140, 126, 255, .13); }

.contact-cta-section {
  border-top-color: rgba(123, 148, 255, .42);
  background: linear-gradient(120deg, #151a3c 0%, #101632 54%, #1e1640 100%);
}
.contact-cta-section::before { background-image: radial-gradient(rgba(139, 166, 255, .18) .55px, transparent .75px); }
.contact-cta-aura { background: radial-gradient(circle, rgba(108, 93, 255, .32), rgba(58, 160, 255, .08) 38%, transparent 69%); }
.contact-cta-orbit,
.contact-cta-orbit::before,
.contact-cta-orbit i { border-color: rgba(139, 163, 255, .16); }
.contact-cta-orbit i:last-child { background: #85d8ff; box-shadow: 0 0 20px rgba(133, 216, 255, .8); }
.contact-cta-panel { border-top-color: rgba(183, 200, 255, .35); }
.contact-lead-grid label { border-color: rgba(166, 188, 255, .3); background: rgba(21, 29, 68, .38); }
.contact-lead-grid label:focus-within { border-color: rgba(145, 213, 255, .9); background: rgba(28, 42, 94, .55); box-shadow: 0 0 0 3px rgba(112, 157, 255, .11); }
.contact-lead-grid label > span { color: rgba(197, 215, 255, .76); }
.contact-lead-submit-row button { border-color: rgba(143, 213, 255, .65); background: #89d8ff; color: #10162d; }
.contact-lead-submit-row button:hover:not(:disabled) { border-color: #d4d8ff; background: #b9c3ff; }

/* Unified colour system — navy/pearl base with ice and iris accents. */
.brand-logo {
  filter: none;
}

.hero-video,
.hero-scroll-video,
.hero-scroll-reverse-video {
  filter: hue-rotate(160deg) saturate(.76) brightness(1.03);
}

.hero-sticky {
  background-color: var(--night-900);
  background-blend-mode: luminosity;
}

.hero-sticky::before {
  background:
    linear-gradient(90deg, rgba(8, 13, 28, .95) 0%, rgba(8, 13, 28, .78) 39%, rgba(11, 16, 32, .32) 60%, rgba(11, 16, 32, .04) 100%),
    linear-gradient(0deg, rgba(11, 16, 32, .26), transparent 38%);
}

.hero-concept-kicker,
.hero-concept-title > .hero-dissolve-text:last-child,
.hero-build-title-accent,
.hero-build-title em,
.hero-build-standards article > span,
.hero-build-primary span,
.hero-build-secondary span,
.hero-concept-cta span { color: var(--ice-400); }

.hero-concept-title > .hero-dissolve-text:last-child,
.hero-build-title-accent,
.hero-build-title em { text-shadow: 0 0 36px rgba(120, 200, 255, .18); }
.hero-concept-kicker::after { background: linear-gradient(90deg, rgba(120, 200, 255, .9), transparent); }
.hero-concept-capabilities > span.is-active,
.hero-concept-cta,
.hero-build-primary { border-color: rgba(120, 200, 255, .48); color: rgba(248, 248, 246, .94); }
.hero-concept-capabilities > span.is-active { color: var(--ice-300); box-shadow: inset 0 0 22px rgba(120, 200, 255, .055); }
.hero-concept-cta:hover,
.hero-build-primary:hover { border-color: rgba(164, 154, 245, .86); background: rgba(129, 119, 232, .12); }
.hero-build-concept::before { background: radial-gradient(circle at 23% 48%, rgba(129, 119, 232, .19), transparent 34%), linear-gradient(90deg, rgba(8, 13, 28, .78), rgba(8, 13, 28, .2) 62%, transparent); }
.hero-build-kicker { color: rgba(159, 221, 255, .76); }
.hero-build-kicker i,
.hero-build-standards-label span,
.hero-build-orbit i { background: var(--iris-400); box-shadow: 0 0 14px rgba(164, 154, 245, .55); }
.hero-build-standards { border-top-color: rgba(159, 221, 255, .27); }
.hero-build-standards-label { color: rgba(177, 206, 255, .7); }
.hero-build-orbit,
.hero-build-orbit::before,
.hero-build-orbit::after { border-color: rgba(129, 119, 232, .22); }
.hero-build-wave { background-image: radial-gradient(circle, rgba(120, 200, 255, .62) 0 .7px, transparent .9px); }
.scroll-cue i::after { background: var(--ice-400); }

.site-header .button--nav,
.site-header.is-compact .button--nav {
  border-color: rgba(87, 174, 255, .36);
  background: linear-gradient(135deg, rgba(34, 93, 176, .28), rgba(7, 16, 37, .9));
  box-shadow: inset 0 1px 0 rgba(156, 216, 255, .07);
}
.site-header.is-compact .button--nav:hover { border-color: rgba(119, 202, 255, .72); background: rgba(12, 42, 82, .94); }
.nav-cta-arrow,
.site-header.is-compact .nav-cta-arrow { color: #73caff; }
.primary-nav a::after,
.site-header.is-compact .primary-nav a::after { background: linear-gradient(90deg, #3c8dff, rgba(139, 216, 255, .82) 58%, transparent); box-shadow: 0 0 10px rgba(68, 157, 255, .34); }
.nav-item-index { color: rgba(116, 197, 255, .7); }
.primary-nav a:hover .nav-item-index,
.primary-nav a[aria-current="page"] .nav-item-index { color: #8bd8ff; }
.header-progress { background: linear-gradient(90deg, rgba(61, 145, 255, .28), #82d2ff, rgba(171, 222, 255, .78)); box-shadow: 0 0 8px rgba(71, 158, 255, .24); }
.site-header.is-compact .menu-button { border-color: rgba(92, 179, 255, .3); background: rgba(20, 57, 104, .2); }
.site-header .locale-switch,
.site-header.is-compact .locale-switch { border-color: rgba(91, 173, 255, .36); }

.solutions-section .solution-card-visual { filter: hue-rotate(96deg) saturate(.82); }
.solutions-section .solution-card--3 .solution-card-visual { filter: hue-rotate(100deg) saturate(.74) brightness(1.08); }
.solutions-tech-strip > p { color: #5262ad; }
.solutions-tech-strip span i { color: #5262ad; border-color: rgba(82, 98, 173, .2); }

.contact-cta-meta span::before { background: var(--ice-400); }
.contact-cta-meta a i { color: var(--ice-400); }
.contact-lead-status { color: var(--ice-300); }
.contact-cta-meta span { color: rgba(238, 243, 255, .62); }
.contact-lead-grid input::placeholder,
.contact-lead-grid textarea::placeholder { color: rgba(238, 243, 255, .66); }
.contact-lead-submit-row p { color: rgba(238, 243, 255, .58); }

.service-journey-step--2 .service-visual-surface i { background: var(--ice-400); box-shadow: 0 0 16px rgba(120, 200, 255, .82); }
.service-journey-step--2 .service-visual-surface i:nth-child(2) { background: var(--iris-400); box-shadow: 0 0 16px rgba(164, 154, 245, .82); }
.service-journey-step--2 .service-journey-body { color: rgba(243, 246, 255, .68); }
.service-journey-step--2 .service-journey-copy li { color: rgba(243, 246, 255, .78); }

.inner-hero-aura { background: radial-gradient(circle, rgba(129, 119, 232, .24), rgba(120, 200, 255, .08) 38%, transparent 64%); }
.inner-cta { background: var(--night-900); }

/* Brand easter egg: FRIDAY WORKS flips letter-by-letter on hover/focus. */
.hero-easter-egg {
  position: relative;
  display: inline-flex;
  width: max-content;
  align-items: flex-start;
  margin-top: .2em;
  color: var(--ice-400);
  perspective: 900px;
  text-shadow: 0 0 36px rgba(120, 200, 255, .18);
}

.hero-concept-title {
  width: max-content;
  max-width: calc(100% + 36px);
  margin: -14px -58px -14px -18px;
  padding: 14px 58px 14px 18px;
  cursor: pointer;
}

.hero-easter-friday-trigger {
  display: inline-flex;
  width: max-content;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: #f8f6ef;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  text-shadow: 0 0 34px rgba(243, 240, 232, .08);
}

.hero-easter-trigger {
  position: relative;
  display: inline-flex;
  width: max-content;
  min-width: 0;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  perspective: 900px;
}

.hero-easter-default,
.hero-easter-alternate {
  transform-style: preserve-3d;
}

.hero-easter-default {
  align-self: end;
}

.hero-easter-alternate {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-flex;
  color: var(--ice-300);
  font-size: .42em;
  font-weight: 430;
  letter-spacing: .015em;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.hero-easter-default .hero-glyph,
.hero-easter-letter {
  display: inline-block;
  backface-visibility: hidden;
  transform-origin: 50% 62%;
  transition:
    opacity 280ms ease,
    transform 520ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--flip-index) * 28ms);
}

.hero-easter-letter {
  opacity: 0;
  transform: translate3d(0, .26em, 0) rotateX(92deg);
}

.hero-easter-friday-trigger:is(:hover, :focus-visible) + .hero-easter-egg .hero-easter-default .hero-glyph,
.hero-concept-title:hover .hero-easter-default .hero-glyph,
.hero-easter-egg:is(:hover, :focus-within, .is-active) .hero-easter-default .hero-glyph {
  opacity: 0;
  transform: translate3d(0, -.22em, 0) rotateX(-92deg);
}

.hero-easter-friday-trigger:is(:hover, :focus-visible) + .hero-easter-egg .hero-easter-letter,
.hero-concept-title:hover .hero-easter-letter,
.hero-easter-egg:is(:hover, :focus-within, .is-active) .hero-easter-letter {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0deg);
}

.hero-easter-friday-trigger:focus-visible,
.hero-easter-trigger:focus-visible,
.hero-easter-info:focus-visible {
  outline: 1px solid rgba(159, 221, 255, .82);
  outline-offset: 6px;
}

.hero-easter-info {
  position: absolute;
  top: -.3em;
  left: calc(100% + 14px);
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid rgba(159, 221, 255, .34);
  border-radius: 50%;
  padding: 0;
  background: rgba(11, 16, 32, .68);
  color: rgba(207, 232, 255, .86);
  cursor: help;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-6px, 3px, 0) scale(.86);
  transition: opacity 220ms ease 240ms, transform 320ms cubic-bezier(.16, 1, .3, 1) 240ms;
}

.hero-easter-friday-trigger:is(:hover, :focus-visible) + .hero-easter-egg .hero-easter-info,
.hero-concept-title:hover .hero-easter-info,
.hero-easter-egg:is(:hover, :focus-within, .is-active) .hero-easter-info {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.hero-easter-note {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: calc(100% + 44px);
  width: 278px;
  border: 1px solid rgba(159, 221, 255, .2);
  border-radius: 12px;
  padding: 14px 16px;
  background: linear-gradient(145deg, rgba(24, 34, 69, .96), rgba(8, 13, 28, .94));
  box-shadow: 0 18px 48px rgba(3, 7, 19, .32), inset 0 1px rgba(255, 255, 255, .055);
  color: rgba(238, 243, 255, .72);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 380;
  letter-spacing: .015em;
  line-height: 1.65;
  opacity: 0;
  pointer-events: none;
  text-shadow: none;
  transform: translate3d(-8px, -50%, 0);
  transition: opacity 220ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1);
}

.hero-easter-info:is(:hover, :focus-visible) + .hero-easter-note,
.hero-easter-egg.is-note-open .hero-easter-note {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}

/* Mobile is a deliberately shorter editorial cut, not a compressed desktop. */
@media (max-width: 620px) {
  .hero {
    height: calc(100svh + clamp(96px, 13svh, 120px));
    min-height: 0;
  }

  .hero-sticky {
    min-height: 0;
  }

  .hero-concept {
    align-items: flex-start;
    padding-top: clamp(150px, 22svh, 210px);
    padding-bottom: 48px;
    background: linear-gradient(180deg, transparent 28%, rgba(8, 13, 28, .34) 62%, rgba(8, 13, 28, .82));
  }

  .hero-concept-inner {
    max-width: 430px;
  }

  .hero-concept-title {
    font-size: clamp(54px, 17.5vw, 70px);
  }

  .hero-mobile-static-title {
    display: flex;
    flex-direction: column;
    color: #f8f6ef;
    /* Keep the mobile LCP independent from the downloadable display font. */
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    line-height: .78;
  }

  .hero-mobile-static-title > span:last-child {
    margin-top: .2em;
    color: var(--ice-400);
  }

  .hero-concept-title > .hero-easter-friday-trigger,
  .hero-concept-title > .hero-easter-egg {
    display: none;
  }

  .hero-concept-seo-title {
    width: min(300px, 76vw);
    margin-top: .9rem;
    font-size: 13px;
    line-height: 1.45;
  }

  .hero-easter-alternate {
    font-size: .42em;
  }

  .hero-easter-info {
    top: -.15em;
    left: calc(100% + 12px);
  }

  .hero-easter-note {
    top: calc(100% + 22px);
    left: 0;
    width: min(278px, calc(100vw - 44px));
    transform: translate3d(0, -7px, 0);
  }

  .hero-easter-info:is(:hover, :focus-visible) + .hero-easter-note,
  .hero-easter-egg.is-note-open .hero-easter-note {
    transform: translate3d(0, 0, 0);
  }

  .hero-concept-descriptor {
    max-width: 300px;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.35;
  }

  .hero-concept-description,
  .hero-concept-capabilities,
  .hero-meta {
    display: none;
  }

  .hero-concept-cta {
    min-width: 176px;
    min-height: 46px;
    margin-top: 22px;
  }

  .hero-build-copy {
    top: clamp(160px, 23svh, 220px);
    bottom: auto;
    max-width: 430px;
  }

  .hero-build-kicker {
    margin-bottom: 16px;
  }

  .hero-build-title {
    max-width: 340px;
    font-size: clamp(36px, 10.8vw, 47px);
    line-height: 1.04;
  }

  .hero-build-description {
    display: -webkit-box;
    max-width: 330px;
    overflow: hidden;
    margin-top: 15px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.55;
  }

  .hero-build-actions {
    margin-top: 20px;
  }

  .hero-build-secondary {
    display: none;
  }

  .hero-build-primary {
    min-width: 176px;
    min-height: 46px;
  }

  .intro-shell {
    padding-top: 54px;
  }

  .intro-main {
    gap: 26px;
    padding: 34px 0 62px;
  }

  .intro-heading h2 {
    max-width: 390px;
    font-size: clamp(32px, 9.8vw, 43px);
    line-height: 1.12;
  }

  .intro-summary {
    padding-top: 22px;
  }

  .intro-summary > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: 12px;
    line-height: 1.7;
  }

  .intro-link {
    margin-top: 24px;
  }

  .technology-stack,
  .intro-services {
    display: none;
  }

  .solutions-section {
    padding-block: 70px 76px;
  }

  .solutions-layout {
    gap: 34px;
  }

  .solutions-kicker {
    margin-bottom: 22px;
  }

  .solutions-copy h2 {
    max-width: 390px;
    font-size: clamp(34px, 10.4vw, 45px);
  }

  .solutions-description {
    display: -webkit-box;
    max-width: 390px;
    overflow: hidden;
    margin-top: 22px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.65;
  }

  .solutions-cta {
    min-height: 50px;
    margin-top: 28px;
  }

  .solutions-cards {
    gap: 12px;
    margin-right: -14px;
    padding: 4px 40px 14px 0;
    grid-template-columns: repeat(3, calc(100vw - 54px));
    scroll-padding-inline: 0 14px;
  }

  .solution-card {
    min-height: 0;
    border-radius: 15px;
    padding: 18px 17px 20px;
  }

  .solution-card-visual {
    height: 184px;
  }

  .solution-card-copy {
    min-height: 0;
    flex: none;
  }

  .solution-card-icon {
    width: 36px;
    height: 36px;
  }

  .solution-card-copy h3 {
    margin-top: 14px;
    font-size: 24px;
  }

  .solution-card-copy > p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .solution-card-copy ul,
  .solutions-tech-strip {
    display: none;
  }

  .contact-cta-section {
    padding-block: 78px 86px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-video,
  .hero-scroll-video,
  .hero-scroll-reverse-video,
  .hero-dust-canvas { display: none; }
  .hero-sticky { background: linear-gradient(90deg, rgba(7, 16, 12, 0.9), rgba(7, 16, 12, 0.36)), #07100c; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .hero-sticky { background: linear-gradient(90deg, rgba(7, 16, 12, 0.9), rgba(7, 16, 12, 0.36)), url("/hero-laptop-poster.jpg") 72% center / cover no-repeat; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .hero-sticky { background: linear-gradient(90deg, rgba(8, 13, 28, .9), rgba(8, 13, 28, .36)), url("/hero-laptop-poster-mobile.webp") 62% center / cover no-repeat, #07100c; }
}

/* Static service artwork replaces hundreds of animated DOM nodes on low-end devices. */
.solutions-section .solution-card-visual {
  contain: layout paint style;
  filter: none !important;
}

.solution-card-artwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Homepage services — continue the hero's technical, midnight visual language. */
.solutions-section {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 10%, rgba(120, 200, 255, .14), transparent 25%),
    radial-gradient(circle at 10% 86%, rgba(129, 119, 232, .11), transparent 32%),
    linear-gradient(138deg, #0a1022 0%, #101933 54%, #0b1125 100%);
  color: var(--ivory);
}

.solutions-section::before {
  right: -5%;
  bottom: -12%;
  width: min(680px, 54vw);
  height: min(680px, 54vw);
  border-color: rgba(136, 202, 255, .12);
  box-shadow:
    0 0 0 78px rgba(129, 119, 232, .03),
    0 0 0 156px rgba(120, 200, 255, .02);
}

.solutions-section::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(151, 193, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 193, 255, .035) 1px, transparent 1px),
    radial-gradient(rgba(185, 219, 255, .3) .45px, transparent .75px);
  background-size: 82px 82px, 82px 82px, 8px 8px;
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  opacity: .52;
  content: "";
  pointer-events: none;
}

.solutions-copy {
  position: relative;
  align-self: center;
  padding: 28px 0 28px clamp(20px, 2.4vw, 38px);
}

.solutions-copy::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(157, 214, 255, .58) 14%, rgba(129, 119, 232, .28) 78%, transparent);
  content: "";
}

.solutions-kicker {
  min-height: 0;
  border: 0;
  border-radius: 0;
  margin-bottom: 26px;
  padding: 0;
  color: rgba(168, 217, 255, .82);
  font-size: 9px;
  letter-spacing: .19em;
}

.solutions-kicker i {
  width: 20px;
  height: 1px;
  border-radius: 0;
  background: var(--ice-300);
  box-shadow: 0 0 12px rgba(120, 200, 255, .72);
}

.solutions-copy h2 {
  max-width: 550px;
  color: rgba(248, 246, 239, .96);
  font-family: var(--display);
  font-size: clamp(46px, 4vw, 68px);
  font-weight: 520;
  letter-spacing: -.06em;
  line-height: .98;
}

.solutions-copy h2 span {
  color: var(--ice-300);
  text-shadow: 0 0 34px rgba(120, 200, 255, .14);
}

.solutions-description {
  max-width: 465px;
  margin-top: 28px;
  color: rgba(221, 232, 248, .64);
  font-size: 13px;
  line-height: 1.75;
}

.solutions-cta {
  min-width: 205px;
  min-height: 52px;
  border-color: rgba(142, 210, 255, .42);
  border-radius: 0;
  margin-top: 42px;
  color: rgba(244, 248, 255, .9);
}

.solutions-cta span {
  width: 51px;
  height: 100%;
  min-height: 50px;
  border-radius: 0;
  background: rgba(116, 189, 255, .14);
  color: var(--ice-300);
  transition: background 300ms ease, color 300ms ease;
}

.solutions-cta:hover {
  border-color: rgba(181, 224, 255, .8);
  background: rgba(105, 172, 245, .16);
  color: #fff;
  transform: translateY(-2px);
}

.solutions-cta:hover span {
  background: var(--ice-300);
  color: #0b1125;
}

.solutions-cards { gap: 13px; }

.solution-card,
.solution-card--1,
.solution-card--2 {
  border-color: rgba(151, 202, 255, .18);
  border-radius: 4px;
  background:
    linear-gradient(145deg, rgba(32, 48, 83, .75), rgba(11, 20, 43, .92)),
    #101a36;
  box-shadow:
    0 26px 70px rgba(2, 6, 19, .22),
    inset 0 1px rgba(214, 236, 255, .07);
}

.solution-card--2 {
  background:
    linear-gradient(145deg, rgba(35, 49, 89, .82), rgba(12, 19, 48, .94)),
    #101a36;
}

.solution-card--3 {
  border-color: rgba(174, 178, 255, .26);
  background:
    radial-gradient(circle at 50% 26%, rgba(124, 137, 255, .24), transparent 37%),
    linear-gradient(145deg, #1c214b, #0c122d 74%);
  box-shadow:
    0 28px 78px rgba(3, 6, 22, .3),
    inset 0 1px rgba(204, 210, 255, .09);
}

.solution-card:hover {
  border-color: rgba(157, 214, 255, .48);
  box-shadow:
    0 32px 84px rgba(3, 8, 25, .38),
    inset 0 1px rgba(224, 241, 255, .12);
  transform: translateY(-4px);
}

.solution-card--3:hover {
  border-color: rgba(196, 202, 255, .54);
  box-shadow:
    0 32px 86px rgba(6, 8, 29, .46),
    inset 0 1px rgba(214, 218, 255, .14);
}

.solution-card-light,
.solution-card--3 .solution-card-light {
  background: radial-gradient(circle at var(--scene-light-x) var(--scene-light-y), rgba(133, 210, 255, .18), transparent 38%);
}

.solution-card-topline,
.solution-card--1 .solution-card-topline,
.solution-card--2 .solution-card-topline,
.solution-card--3 .solution-card-topline,
.solution-card--3 .solution-card-topline a {
  color: rgba(172, 220, 255, .86);
}

.solution-card-topline a { color: rgba(228, 241, 255, .84); }
.solution-card-topline a:hover { color: var(--ice-300); }

.solutions-section .solution-card-visual,
.solutions-section .solution-card--3 .solution-card-visual {
  filter: hue-rotate(91deg) saturate(.82) brightness(1.18);
}

.solution-card-icon,
.solution-card--1 .solution-card-icon,
.solution-card--2 .solution-card-icon,
.solution-card--3 .solution-card-icon {
  border: 1px solid rgba(163, 213, 255, .2);
  background: rgba(113, 188, 255, .08);
  color: var(--ice-300);
}

.solution-card h3,
.solution-card--3 h3 {
  color: rgba(249, 249, 247, .95);
}

.solution-card-copy > p,
.solution-card--3 .solution-card-copy > p {
  color: rgba(214, 228, 247, .57);
}

.solution-card li,
.solution-card--3 li {
  border-color: rgba(164, 207, 255, .16);
  color: rgba(208, 228, 249, .6);
}

.solutions-tech-strip {
  border-top-color: rgba(156, 202, 255, .16);
}

.solutions-tech-strip > p {
  color: rgba(160, 211, 255, .75);
}

.solutions-tech-strip span { color: rgba(216, 230, 249, .54); }
.solutions-tech-strip i { color: rgba(169, 211, 255, .72); }

@media (max-width: 1280px) {
  .solutions-copy { padding-left: 26px; }
}

@media (max-width: 620px) {
  .solutions-section {
    background:
      radial-gradient(circle at 90% 4%, rgba(120, 200, 255, .12), transparent 28%),
      linear-gradient(150deg, #0a1022, #101933 64%, #0b1125);
  }

  .solutions-section::after { background-size: 54px 54px, 54px 54px, 7px 7px; }
  .solutions-copy { padding: 4px 0 4px 20px; }
  .solutions-copy h2 { font-size: clamp(39px, 11vw, 50px); line-height: 1; }
  .solutions-description { color: rgba(221, 232, 248, .67); }
  .solutions-cta { margin-top: 30px; }
  .solution-card,
  .solution-card--1,
  .solution-card--2,
  .solution-card--3 { border-radius: 3px; }
}

/* Project cards: the image is the showcase; the caption is a stable editorial surface. */
.project-portfolio-card--forest { --project-card-accent: #61d5a4; }
.project-portfolio-card--ivory { --project-card-accent: #e4c17d; }
.project-portfolio-card--stone { --project-card-accent: #a9dcff; }

.project-portfolio-card-inner {
  justify-content: flex-end;
  padding: 0;
  background: #0b1123;
}

.project-portfolio-card:hover .project-portfolio-card-inner {
  transform: translateY(-5px);
}

.project-portfolio-card-inner::before {
  background: linear-gradient(180deg, rgba(7, 11, 24, .7) 0%, rgba(7, 11, 24, .08) 42%, rgba(7, 11, 24, .34) 64%, rgba(7, 11, 24, .64) 100%);
}

.project-portfolio-topline {
  position: absolute;
  top: clamp(20px, 2.4vw, 34px);
  right: clamp(20px, 2.4vw, 34px);
  left: clamp(20px, 2.4vw, 34px);
  z-index: 3;
  border: 0;
  border-bottom: 1px solid rgba(231, 237, 255, .28);
  padding: 0 0 13px;
  background: transparent;
  color: rgba(247, 247, 244, .78);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

.project-live-dot,
.project-portfolio-copy > p,
.project-portfolio-detail strong {
  color: var(--project-card-accent);
}

.project-live-dot i {
  background: var(--project-card-accent);
  box-shadow: 0 0 13px color-mix(in srgb, var(--project-card-accent) 82%, transparent);
}

.project-portfolio-copy {
  position: relative;
  z-index: 3;
  width: 100%;
  border: 0;
  border-top: 2px solid var(--project-card-accent);
  padding: clamp(26px, 3.1vw, 42px) clamp(24px, 3.6vw, 54px) clamp(25px, 2.8vw, 38px);
  background:
    radial-gradient(circle at 91% -26%, color-mix(in srgb, var(--project-card-accent) 26%, transparent), transparent 34%),
    linear-gradient(135deg, #f4f0e8 0%, #e7e2d8 100%);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

.project-portfolio-copy::before {
  position: absolute;
  top: 0;
  right: 0;
  width: min(42%, 500px);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--project-card-accent) 88%, transparent));
  content: "";
}

.project-portfolio-title-lockup {
  border-left: 1px solid color-mix(in srgb, var(--project-card-accent) 88%, #1a2132);
  padding-left: clamp(16px, 1.8vw, 27px);
}

.project-portfolio-copy > .project-portfolio-title-lockup > p {
  margin: 0 0 13px;
  color: color-mix(in srgb, var(--project-card-accent) 62%, #1e273a);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .19em;
}

.project-portfolio-title-row {
  display: grid;
  align-items: end;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.project-portfolio-copy h2 {
  max-width: 900px;
  color: #131b30;
  font-size: clamp(51px, 5.35vw, 90px);
  font-weight: 340;
  letter-spacing: -.07em;
  line-height: .86;
  text-shadow: none;
}

.project-portfolio-card--featured .project-portfolio-copy h2 {
  font-size: clamp(68px, 7.8vw, 120px);
}

.project-portfolio-title-row > span {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--project-card-accent) 64%, #566078);
  color: #222b40;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
}

.project-portfolio-card:hover .project-portfolio-copy h2 {
  transform: translateY(-4px);
}

.project-portfolio-detail {
  border-color: rgba(23, 32, 54, .18);
  margin-top: 22px;
  padding-top: 18px;
}

.project-portfolio-detail > span {
  color: rgba(29, 38, 60, .72);
}

.project-portfolio-detail strong {
  color: #1a2339;
}

@media (max-width: 620px) {
  .project-portfolio-topline {
    top: 20px;
    right: 20px;
    left: 20px;
    gap: 10px;
  }

  .project-portfolio-copy {
    padding: 24px 20px 23px;
  }

  .project-portfolio-copy h2,
  .project-portfolio-card--featured .project-portfolio-copy h2 {
    font-size: clamp(44px, 12vw, 62px);
  }

  .project-portfolio-title-lockup {
    padding-left: 15px;
  }

  .project-portfolio-title-row {
    gap: 14px;
  }

  .project-portfolio-title-row > span {
    min-width: 36px;
    min-height: 36px;
    font-size: 11px;
  }

  .project-portfolio-detail {
    gap: 15px;
    margin-top: 20px;
    padding-top: 16px;
  }
}

/* Projects hero: an architectural signal field, not orbital decoration. */
.inner-page .inner-hero--projects {
  isolation: isolate;
  overflow: clip;
  background:
    linear-gradient(117deg, transparent 0 50.8%, rgba(138, 165, 255, .08) 50.9% 51%, transparent 51.1%),
    linear-gradient(141deg, #070b18 0%, #111b36 55%, #080e1e 100%);
}

.inner-page .inner-hero--projects::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(117deg, transparent 0 62%, rgba(169, 191, 255, .1) 62.08% 62.16%, transparent 62.24%),
    linear-gradient(117deg, transparent 0 73%, rgba(169, 191, 255, .06) 73.08% 73.16%, transparent 73.24%);
  content: "";
  opacity: .75;
  pointer-events: none;
}

.inner-page .inner-hero--projects .inner-hero-aura {
  top: 0;
  right: 0;
  width: min(850px, 64vw);
  height: 100%;
  border: 0;
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, rgba(180, 199, 255, .09) 0 1px, transparent 1px 86px),
    linear-gradient(117deg, transparent 0 20%, rgba(109, 134, 240, .13) 20.1% 20.26%, transparent 20.42%),
    linear-gradient(117deg, transparent 0 63%, rgba(154, 177, 255, .12) 63.1% 63.28%, transparent 63.46%);
  clip-path: polygon(30% 0, 100% 0, 78% 100%, 0 100%);
  opacity: .9;
  animation: none;
}

.project-hero-grid {
  z-index: 1;
  top: 14%;
  right: 5vw;
  width: min(680px, 51vw);
  height: 70%;
  aspect-ratio: auto;
  border: 1px solid rgba(179, 197, 255, .22);
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, rgba(182, 202, 255, .11) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, rgba(182, 202, 255, .08) 0 1px, transparent 1px 76px);
  box-shadow: none;
  opacity: .9;
  transform: skewX(-17deg);
}

.project-hero-grid::before {
  inset: 12% 16%;
  border: 1px solid rgba(178, 198, 255, .2);
  border-radius: 0;
  background: linear-gradient(117deg, transparent 0 49.7%, rgba(188, 208, 255, .2) 49.8% 50%, transparent 50.1%);
}

.project-hero-grid::after {
  top: 50%;
  right: -16%;
  bottom: auto;
  left: -16%;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: rgba(190, 208, 255, .25);
  box-shadow: 0 -126px rgba(190, 208, 255, .14), 0 126px rgba(190, 208, 255, .14);
}

.inner-page .inner-hero--projects .inner-hero-content {
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .inner-page .inner-hero--projects .inner-hero-aura {
    width: 82vw;
  }

  .project-hero-grid {
    top: 12%;
    right: -20vw;
    width: 86vw;
    height: 48%;
  }
}

@media (max-width: 620px) {
  .inner-page .inner-hero--projects::before {
    opacity: .48;
  }

  .inner-page .inner-hero--projects .inner-hero-aura {
    right: -28vw;
    width: 115vw;
    opacity: .66;
  }

  .project-hero-grid {
    top: 11%;
    right: -56vw;
    width: 122vw;
    height: 43%;
    opacity: .7;
  }

  .project-hero-grid::after {
    box-shadow: 0 -88px rgba(190, 208, 255, .14), 0 88px rgba(190, 208, 255, .14);
  }
}

/* Homepage request form — keep this in the stylesheet the homepage actually loads. */
.contact-cta-form-stage {
  position: relative;
  width: 100%;
  border: 1px solid rgba(174, 197, 255, .34);
  padding: 11px;
  background: rgba(7, 12, 34, .5);
  box-shadow: 0 34px 90px rgba(3, 5, 20, .38);
}

.contact-cta-section .request-form--editorial {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(24, 36, 65, .12);
  border-radius: 0;
  padding: clamp(30px, 3.2vw, 42px);
  background:
    radial-gradient(circle at 98% 0%, rgba(133, 216, 255, .18), transparent 27%),
    linear-gradient(145deg, #fffdf8 0%, #f3f1eb 58%, #ecebf1 100%);
  color: #182441;
  box-shadow: inset 0 1px rgba(255, 255, 255, .9);
}

.contact-cta-section .request-form--editorial::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #78c8ff, #8177e8 62%, #a49af5);
  content: "";
}

.contact-cta-section .request-form--editorial .request-form-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid rgba(24, 36, 65, .18);
  padding-bottom: 24px;
}

.contact-cta-section .request-form--editorial .request-form-kicker {
  margin: 0 0 13px;
  color: #4b5fc7;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .2em;
}

.contact-cta-section .request-form--editorial .request-form-title {
  max-width: 520px;
  margin: 0;
  color: #14203d;
  font-family: var(--display);
  font-size: clamp(34px, 3.35vw, 45px);
  font-weight: 540;
  letter-spacing: -.055em;
  line-height: 1;
}

.contact-cta-section .request-form--editorial .request-form-service-select {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid rgba(24, 36, 65, .16);
  margin-top: 16px;
  padding: 13px 16px 11px;
  background: rgba(255, 255, 255, .58);
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.contact-cta-section .request-form--editorial .request-form-service-select:focus-within {
  border-color: rgba(75, 95, 199, .72);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 0 0 3px rgba(83, 102, 207, .09);
}

.contact-cta-section .request-form--editorial .request-form-service-select select {
  min-width: 0;
  height: 39px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: #182441;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
}

.contact-cta-section .request-form-quick-grid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-cta-section .request-form--editorial .request-form-quick-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid rgba(24, 36, 65, .15);
  padding: 13px 16px 11px;
  background: rgba(255, 255, 255, .46);
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.contact-cta-section .request-form--editorial .request-form-quick-grid label:focus-within {
  border-color: rgba(75, 95, 199, .72);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 0 0 3px rgba(83, 102, 207, .09);
  transform: translateY(-1px);
}

.contact-cta-section .request-form--editorial label > span {
  margin-bottom: 8px;
  color: rgba(24, 36, 65, .72);
  font-size: 8px;
  font-weight: 680;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.contact-cta-section .request-form--editorial label > span i {
  color: #4b5fc7;
  font-style: normal;
}

.contact-cta-section .request-form--editorial label > span em {
  color: rgba(24, 36, 65, .5);
  font-size: 8px;
  font-style: normal;
  letter-spacing: .02em;
  text-transform: none;
}

.contact-cta-section .request-form--editorial input,
.contact-cta-section .request-form--editorial select,
.contact-cta-section .request-form--editorial textarea {
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: #14203d;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

.contact-cta-section .request-form--editorial input::placeholder,
.contact-cta-section .request-form--editorial textarea::placeholder {
  color: rgba(24, 36, 65, .5);
  opacity: 1;
}

.contact-cta-section .request-form--editorial select option {
  background: #fffdf8;
  color: #14203d;
}

.contact-cta-section .request-form--editorial .request-form-quick-grid .message-field {
  grid-column: 1 / -1;
  padding-top: 15px;
}

.contact-cta-section .request-form--editorial .message-field textarea {
  min-height: 76px;
  resize: vertical;
}

.contact-cta-section .request-form--editorial .form-submit-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: 0;
  margin-top: 14px;
  padding-top: 0;
}

.contact-cta-section .request-form--editorial .request-submit {
  display: flex;
  min-width: 230px;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border: 1px solid #14203d;
  border-radius: 0;
  padding: 0 19px 0 23px;
  background: #14203d;
  color: #fff;
  box-shadow: 0 18px 38px rgba(20, 32, 61, .2);
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .035em;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.contact-cta-section .request-form--editorial .request-submit:hover:not(:disabled),
.contact-cta-section .request-form--editorial .request-submit:focus-visible {
  border-color: #5366cf;
  background: #5366cf;
  box-shadow: 0 20px 42px rgba(83, 102, 207, .24);
  transform: translateY(-2px);
}

.contact-cta-section .request-form--editorial .request-submit:disabled {
  cursor: default;
  opacity: .68;
}

.contact-cta-section .request-form--editorial .request-submit i {
  color: #9fddff;
  font-size: 18px;
  font-style: normal;
}

.contact-cta-section .request-form--editorial .form-status {
  min-height: 0;
  margin: 12px 0 0;
  color: #4058b0;
  font-size: 11px;
}

.contact-cta-section .request-form--editorial .form-status--idle {
  display: none;
}

.contact-cta-section .request-form--editorial .form-status--error {
  color: #b14c5d;
}

@media (max-width: 620px) {
  .contact-cta-form-stage {
    padding: 7px;
  }

  .contact-cta-section .request-form--editorial {
    padding: 27px 18px 22px;
  }

  .contact-cta-section .request-form--editorial .request-form-intro {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 20px;
  }

  .contact-cta-section .request-form--editorial .request-form-title {
    font-size: clamp(30px, 9.2vw, 38px);
  }

  .contact-cta-section .request-form-quick-grid {
    grid-template-columns: 1fr;
  }

  .contact-cta-section .request-form--editorial .request-form-quick-grid .message-field {
    grid-column: auto;
  }

  .contact-cta-section .request-form--editorial .form-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-cta-section .request-form--editorial .request-submit {
    width: 100%;
    min-width: 0;
  }
}

/* Keep the hovered technology layer unambiguous after the theme overrides. */
.intro-section .technology-stack-layer.is-active {
  border-color: rgba(164, 226, 255, 0.98);
  box-shadow:
    inset 0 0 58px rgba(112, 176, 255, 0.34),
    0 0 42px rgba(109, 117, 255, 0.32);
}

.intro-section .technology-stack-label.is-active strong {
  color: #eef8ff;
}

/* Color Hunt 355872 · 7AAACE · 9CD5FF · F7F8F0.
   One controlled blue system for every homepage chapter. */
.intro-section {
  background:
    radial-gradient(circle at 88% 28%, rgba(156, 213, 255, .28), transparent 31%),
    radial-gradient(circle at 8% 82%, rgba(122, 170, 206, .2), transparent 35%),
    linear-gradient(138deg, #f7f8f0 0%, #edf4f7 58%, #e3eff6 100%);
  color: #355872;
}

.intro-section::before {
  background-image:
    linear-gradient(rgba(53, 88, 114, .052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 88, 114, .052) 1px, transparent 1px);
  opacity: .5;
}

.intro-shell::before {
  border-color: rgba(122, 170, 206, .2);
  box-shadow:
    0 0 0 86px rgba(122, 170, 206, .045),
    0 0 0 172px rgba(156, 213, 255, .03);
}

.intro-aura { background: radial-gradient(ellipse, rgba(156, 213, 255, .26), transparent 69%); }
.intro-topline { color: rgba(53, 88, 114, .7); }
.intro-topline-rule,
.intro-heading-rule { background: linear-gradient(90deg, #7aaace, #9cd5ff, transparent); }
.intro-kicker,
.intro-link,
.intro-services-lead > p,
.intro-service-card > span,
.intro-service-card > div b { color: #4d82a8; }
.intro-heading h2 { color: #29485f; }
.intro-summary { border-left-color: rgba(53, 88, 114, .19); }
.intro-summary > p { color: rgba(41, 72, 95, .68); }
.intro-link { border-bottom-color: rgba(122, 170, 206, .58); }
.intro-link:hover { border-color: #355872; color: #355872; }

.technology-stack {
  border: 1px solid rgba(53, 88, 114, .2);
  border-radius: 3px;
  padding: 8px 12px 5px;
  background:
    radial-gradient(circle at 36% 38%, rgba(156, 213, 255, .15), transparent 36%),
    linear-gradient(145deg, #29485f 0%, #132a3a 74%);
  box-shadow: 0 28px 70px rgba(53, 88, 114, .16), inset 0 1px rgba(247, 248, 240, .08);
}

.intro-section .technology-stack-glow {
  background: radial-gradient(circle, rgba(156, 213, 255, .5), rgba(122, 170, 206, .16) 38%, transparent 69%);
}

.intro-section .technology-stack-layer {
  border-color: rgba(156, 213, 255, .42);
  background-image:
    linear-gradient(rgba(156, 213, 255, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 213, 255, .1) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(122, 170, 206, .42), rgba(53, 88, 114, .3) 47%, rgba(19, 42, 58, .72));
}

.intro-services {
  border-color: rgba(53, 88, 114, .16);
  background: rgba(251, 252, 247, .76);
  box-shadow: 0 28px 90px rgba(53, 88, 114, .08);
}

.intro-services-lead,
.intro-service-card { border-right-color: rgba(53, 88, 114, .14); }
.intro-services-lead > strong { color: rgba(41, 72, 95, .72); }
.intro-service-card > svg { stroke: rgba(41, 72, 95, .76); }
.intro-service-card h3 { color: #29485f; }
.intro-service-card p { color: rgba(53, 88, 114, .65); }
.intro-service-card > div i { background: rgba(122, 170, 206, .28); }
.intro-service-card:hover { background: linear-gradient(155deg, rgba(156, 213, 255, .24), rgba(247, 248, 240, .92)); }

.solutions-section {
  background:
    radial-gradient(circle at 88% 10%, rgba(156, 213, 255, .26), transparent 28%),
    radial-gradient(circle at 10% 86%, rgba(122, 170, 206, .16), transparent 34%),
    linear-gradient(138deg, #edf5f8 0%, #e4eff5 54%, #f7f8f0 100%);
  color: #355872;
}

.solutions-section::before {
  border-color: rgba(53, 88, 114, .14);
  box-shadow:
    0 0 0 78px rgba(122, 170, 206, .04),
    0 0 0 156px rgba(156, 213, 255, .03);
}

.solutions-section::after {
  background-image:
    linear-gradient(rgba(53, 88, 114, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 88, 114, .045) 1px, transparent 1px),
    radial-gradient(rgba(53, 88, 114, .2) .45px, transparent .75px);
  opacity: .44;
}

.solutions-copy::before { background: linear-gradient(transparent, rgba(122, 170, 206, .68) 14%, rgba(53, 88, 114, .28) 78%, transparent); }
.solutions-kicker { color: #527f9f; }
.solutions-kicker i { background: #7aaace; box-shadow: 0 0 12px rgba(122, 170, 206, .38); }
.solutions-copy h2 { color: #29485f; }
.solutions-copy h2 span { color: #527f9f; text-shadow: none; }
.solutions-description { color: rgba(53, 88, 114, .68); }
.solutions-cta { border-color: rgba(53, 88, 114, .46); color: #355872; }
.solutions-cta span { background: rgba(122, 170, 206, .15); color: #355872; }
.solutions-cta:hover { border-color: #355872; background: #355872; color: #f7f8f0; }
.solutions-cta:hover span { background: rgba(156, 213, 255, .18); color: #f7f8f0; }

.solution-card,
.solution-card--1,
.solution-card--2,
.solution-card--3 {
  border-color: rgba(53, 88, 114, .16);
  background: linear-gradient(145deg, rgba(251, 252, 247, .98), rgba(237, 244, 247, .96));
  box-shadow: 0 24px 62px rgba(53, 88, 114, .1), inset 0 1px rgba(255, 255, 255, .92);
}

.solution-card--2 { background: linear-gradient(145deg, #f7f8f0, #e2eef5); }
.solution-card--3 {
  background:
    radial-gradient(circle at 50% 26%, rgba(156, 213, 255, .34), transparent 39%),
    linear-gradient(145deg, #edf5f8, #d7e8f2 74%);
}
.solution-card:hover,
.solution-card--3:hover { border-color: rgba(53, 88, 114, .42); box-shadow: 0 31px 78px rgba(53, 88, 114, .16); }
.solution-card-light,
.solution-card--3 .solution-card-light { background: radial-gradient(circle at var(--scene-light-x) var(--scene-light-y), rgba(255, 255, 255, .86), transparent 38%); }
.solution-card-topline,
.solution-card--1 .solution-card-topline,
.solution-card--2 .solution-card-topline,
.solution-card--3 .solution-card-topline,
.solution-card--3 .solution-card-topline a { color: #527f9f; }
.solution-card-topline a { color: #355872; }
.solution-card-icon,
.solution-card--1 .solution-card-icon,
.solution-card--2 .solution-card-icon,
.solution-card--3 .solution-card-icon { border-color: rgba(53, 88, 114, .17); background: rgba(122, 170, 206, .13); color: #355872; }
.solution-card h3,
.solution-card--3 h3 { color: #29485f; }
.solution-card-copy > p,
.solution-card--3 .solution-card-copy > p { color: rgba(53, 88, 114, .64); }
.solution-card li,
.solution-card--3 li { border-color: rgba(53, 88, 114, .15); color: rgba(53, 88, 114, .72); }
.solutions-tech-strip { border-top-color: rgba(53, 88, 114, .16); }
.solutions-tech-strip > p { color: #527f9f; }
.solutions-tech-strip span { color: rgba(53, 88, 114, .66); }
.solutions-tech-strip i { color: #355872; }

.contact-cta-section {
  border-top-color: rgba(156, 213, 255, .36);
  background: linear-gradient(120deg, #29485f 0%, #355872 54%, #213d51 100%);
}
.contact-cta-aura { background: radial-gradient(circle, rgba(156, 213, 255, .3), rgba(122, 170, 206, .1) 38%, transparent 69%); }

@media (max-width: 620px) {
  .technology-stack { margin-top: 10px; padding-inline: 6px; }
  .solutions-section {
    background:
      radial-gradient(circle at 90% 4%, rgba(156, 213, 255, .22), transparent 28%),
      linear-gradient(150deg, #edf5f8, #e4eff5 64%, #f7f8f0);
  }
}

/* Homepage intro: faster to scan, with an open system map instead of stacked panels. */
.intro-section {
  background:
    radial-gradient(circle at 84% 20%, rgba(156, 213, 255, .34), transparent 31%),
    radial-gradient(circle at 9% 82%, rgba(122, 170, 206, .17), transparent 35%),
    linear-gradient(138deg, #fbfcf7 0%, #edf4f7 58%, #e3eff6 100%);
  color: #355872;
}

.intro-section::before {
  background-image:
    linear-gradient(rgba(53, 88, 114, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 88, 114, .04) 1px, transparent 1px);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 100%);
  opacity: .7;
}

.intro-shell::before {
  border-color: rgba(82, 127, 159, .14);
  box-shadow: 0 0 0 82px rgba(122, 170, 206, .035), 0 0 0 164px rgba(156, 213, 255, .025);
}

.intro-aura {
  background: radial-gradient(ellipse, rgba(122, 170, 206, .24), transparent 69%);
}

.intro-topline { color: rgba(53, 88, 114, .66); }
.intro-topline-rule,
.intro-heading-rule { background: linear-gradient(90deg, #355872, #9cd5ff, transparent); }

.intro-main {
  min-height: auto;
  align-items: center;
  gap: clamp(54px, 6vw, 110px);
  padding: clamp(42px, 4.6vw, 70px) 0 clamp(50px, 5vw, 76px);
  grid-template-columns: minmax(340px, .78fr) minmax(520px, 1.22fr);
}

.intro-copy { max-width: 530px; }
.intro-kicker { margin-bottom: 19px; color: #527f9f; }

.intro-heading h2 {
  max-width: 530px;
  color: #29485f;
  font-size: clamp(44px, 4.5vw, 68px);
  font-weight: 350;
  line-height: 1.01;
}

.intro-heading-rule { margin-top: 24px; }

.intro-summary {
  max-width: 470px;
  margin-top: 27px;
  border: 0;
  padding: 0;
}

.intro-summary > p {
  color: rgba(53, 88, 114, .72);
  font-size: 15px;
  line-height: 1.65;
}

.intro-link {
  width: fit-content;
  min-width: 235px;
  margin-top: 28px;
  border-bottom-color: rgba(53, 88, 114, .34);
  color: #355872;
}

.intro-link:hover { border-color: #355872; color: #29485f; }

.technology-stack {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: auto;
  align-items: stretch;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.technology-stack-orbit {
  position: relative;
  width: 100%;
  height: 430px;
  min-width: 0;
}

.technology-stack-ring {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  display: block;
  border: 1px solid rgba(82, 127, 159, .22);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.technology-stack-ring--outer {
  width: 350px;
  height: 350px;
  border-style: dashed;
}

.technology-stack-ring--inner {
  width: 244px;
  height: 244px;
  border-color: rgba(82, 127, 159, .16);
  box-shadow: 0 0 0 28px rgba(156, 213, 255, .055);
}

.technology-stack-rays {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.technology-stack-rays i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 174px;
  height: 1px;
  background: linear-gradient(90deg, rgba(82, 127, 159, .64), rgba(156, 213, 255, .18));
  transform: rotate(var(--ray-angle));
  transform-origin: 0 50%;
}

.technology-stack-rays i::after {
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border: 2px solid #f7f8f0;
  border-radius: 50%;
  background: #527f9f;
  box-shadow: 0 0 0 4px rgba(122, 170, 206, .14);
  content: "";
}

.technology-stack-core {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  width: 186px;
  height: 186px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(156, 213, 255, .52);
  border-radius: 50%;
  padding: 32px;
  background:
    radial-gradient(circle at 36% 30%, rgba(156, 213, 255, .25), transparent 35%),
    linear-gradient(145deg, #355872, #19384c);
  box-shadow: 0 28px 70px rgba(41, 72, 95, .24), inset 0 0 38px rgba(156, 213, 255, .08);
  color: #f7f8f0;
  flex-direction: column;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.intro-section .technology-stack-core {
  background:
    radial-gradient(circle at 36% 30%, rgba(156, 213, 255, .25), transparent 35%),
    linear-gradient(145deg, #355872, #19384c);
  box-shadow: 0 28px 70px rgba(41, 72, 95, .24), inset 0 0 38px rgba(156, 213, 255, .08);
}

.technology-stack-core::before,
.technology-stack-core::after {
  position: absolute;
  border: 1px solid rgba(156, 213, 255, .24);
  border-radius: 50%;
  content: "";
}

.technology-stack-core::before { inset: 10px; }
.technology-stack-core::after { inset: 19px; border-style: dashed; }

.technology-stack-core > span {
  position: relative;
  z-index: 1;
  color: #9cd5ff;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .18em;
}

.technology-stack-core > strong {
  position: relative;
  z-index: 1;
  margin-top: 11px;
  color: #f7f8f0;
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -.02em;
  line-height: 1.12;
  text-align: center;
}

.technology-stack-core > i {
  position: relative;
  z-index: 1;
  width: 5px;
  height: 5px;
  margin-top: 13px;
  border-radius: 50%;
  background: #9cd5ff;
  box-shadow: 0 0 0 5px rgba(156, 213, 255, .12), 0 0 18px #9cd5ff;
}

.technology-stack-node {
  position: absolute;
  z-index: 3;
  display: flex;
  width: 166px;
  min-height: 74px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(82, 127, 159, .26);
  border-radius: 999px;
  padding: 13px 18px;
  background: rgba(251, 252, 247, .9);
  box-shadow: 0 14px 34px rgba(53, 88, 114, .1);
  color: #355872;
  flex-direction: column;
  cursor: pointer;
  transition: color 260ms ease, background 260ms ease, border-color 260ms ease, box-shadow 300ms ease, transform 300ms cubic-bezier(.16, 1, .3, 1);
  backdrop-filter: blur(12px);
}

.technology-stack-node--1 { top: 0; left: 50%; transform: translateX(-50%); }
.technology-stack-node--2 { top: 50%; right: 0; transform: translateY(-50%); }
.technology-stack-node--3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.technology-stack-node--4 { top: 50%; left: 0; transform: translateY(-50%); }

.technology-stack-node > span {
  color: #527f9f;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .14em;
}

.technology-stack-node > strong {
  margin-top: 5px;
  color: inherit;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .1em;
  line-height: 1.2;
}

.technology-stack-node > small {
  margin-top: 4px;
  color: rgba(53, 88, 114, .6);
  font-size: 8px;
  line-height: 1.25;
}

.technology-stack-node:hover,
.technology-stack-node:focus-visible,
.technology-stack-node.is-active {
  border-color: #355872;
  background: #355872;
  box-shadow: 0 18px 42px rgba(41, 72, 95, .22);
  color: #f7f8f0;
  outline: 0;
}

.technology-stack-node--1:hover,
.technology-stack-node--1:focus-visible,
.technology-stack-node--1.is-active { transform: translateX(-50%) translateY(-4px); }
.technology-stack-node--2:hover,
.technology-stack-node--2:focus-visible,
.technology-stack-node--2.is-active { transform: translateY(-50%) translateX(4px); }
.technology-stack-node--3:hover,
.technology-stack-node--3:focus-visible,
.technology-stack-node--3.is-active { transform: translateX(-50%) translateY(4px); }
.technology-stack-node--4:hover,
.technology-stack-node--4:focus-visible,
.technology-stack-node--4.is-active { transform: translateY(-50%) translateX(-4px); }

.technology-stack-node:is(:hover, :focus-visible, .is-active) > span,
.technology-stack-node:is(:hover, :focus-visible, .is-active) > small { color: rgba(247, 248, 240, .7); }

.technology-stack-detail {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 62px;
  align-items: center;
  gap: 18px;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: 28px minmax(110px, auto) 1fr;
  border-top: 1px solid rgba(53, 88, 114, .18);
  padding: 17px 0 0;
}

.technology-stack-detail > span { color: #527f9f; }
.technology-stack-detail strong { color: #29485f; font-size: 9px; }
.technology-stack-detail p {
  max-width: none;
  margin: 0;
  color: rgba(53, 88, 114, .66);
  font-size: 11px;
  line-height: 1.5;
}

.intro-services {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(53, 88, 114, .16);
  border-radius: 24px 24px 0 0;
  background: rgba(251, 252, 247, .62);
  box-shadow: 0 22px 60px rgba(53, 88, 114, .08);
  grid-template-columns: minmax(220px, .7fr) minmax(0, 2.3fr);
  backdrop-filter: blur(16px);
}

.intro-services-lead {
  min-height: 184px;
  border-right: 1px solid rgba(53, 88, 114, .14);
  padding: 25px 28px;
}

.intro-services-mark { border-color: rgba(82, 127, 159, .48); }
.intro-services-mark i { border-color: #527f9f; box-shadow: 0 0 8px rgba(82, 127, 159, .4); }
.intro-services-lead > p { margin: 18px 0 9px; color: #527f9f; }
.intro-services-lead > strong {
  max-width: 210px;
  color: rgba(41, 72, 95, .76);
  font-size: 13px;
  line-height: 1.5;
}

.intro-services-lead > a {
  width: 36px;
  height: 36px;
  margin-top: 16px;
  border-color: rgba(53, 88, 114, .34);
  color: #355872;
}

.intro-services-lead > a:hover { background: #355872; color: #f7f8f0; }

.intro-service-links {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intro-service-link {
  display: grid;
  min-width: 0;
  min-height: 92px;
  align-items: center;
  gap: 14px;
  grid-template-columns: 24px 1fr 20px;
  border-right: 1px solid rgba(53, 88, 114, .12);
  border-bottom: 1px solid rgba(53, 88, 114, .12);
  padding: 20px 24px;
  color: #29485f;
  transition: background 260ms ease, color 260ms ease;
}

.intro-service-link:nth-child(2n) { border-right: 0; }
.intro-service-link:nth-last-child(-n + 2) { border-bottom: 0; }
.intro-service-link:hover { background: rgba(156, 213, 255, .22); color: #1d3c50; }

.intro-service-link > span {
  color: #527f9f;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .14em;
}

.intro-service-link > strong {
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}

.intro-service-link > i {
  font-size: 16px;
  font-style: normal;
  transition: transform 260ms ease;
}

.intro-service-link:hover > i { transform: translate(3px, -3px); }

@media (max-width: 1050px) {
  .intro-main { grid-template-columns: 1fr; }
  .intro-copy { max-width: 680px; }
  .intro-heading h2 { max-width: 680px; }
  .technology-stack { width: min(680px, 100%); margin-inline: auto; grid-column: auto; }
}

@media (max-width: 700px) {
  .intro-shell { padding: 52px 0 0; }
  .intro-main { gap: 30px; padding: 36px 0 44px; }
  .intro-heading h2 { max-width: 380px; font-size: clamp(38px, 11vw, 48px); }
  .intro-heading-rule { margin-top: 20px; }
  .intro-summary { margin-top: 21px; padding: 0; }
  .intro-summary > p { display: block; font-size: 13px; line-height: 1.6; }
  .intro-link { min-width: 210px; margin-top: 22px; }

  .technology-stack { display: grid; width: 100%; }
  .technology-stack-orbit { height: 330px; }
  .technology-stack-ring--outer { width: 250px; height: 250px; }
  .technology-stack-ring--inner { width: 174px; height: 174px; box-shadow: 0 0 0 20px rgba(156, 213, 255, .05); }
  .technology-stack-rays i { width: 124px; }
  .technology-stack-core { width: 136px; height: 136px; padding: 24px; }
  .technology-stack-core > span { font-size: 6px; }
  .technology-stack-core > strong { margin-top: 8px; font-size: 13px; }
  .technology-stack-core > i { margin-top: 9px; }
  .technology-stack-node { width: 112px; min-height: 58px; padding: 10px 12px; }
  .technology-stack-node > strong { font-size: 8px; }
  .technology-stack-node > small { display: none; }
  .technology-stack-node--2 { right: -4px; }
  .technology-stack-node--4 { left: -4px; }

  .technology-stack-detail {
    min-height: 74px;
    gap: 6px 12px;
    grid-template-columns: 24px 1fr;
    padding-top: 14px;
  }
  .technology-stack-detail p { grid-column: 2; font-size: 10px; }

  .intro-services { display: block; border-radius: 18px 18px 0 0; }
  .intro-services-lead { min-height: 138px; border-right: 0; border-bottom: 1px solid rgba(53, 88, 114, .12); padding: 22px; }
  .intro-services-lead > p { margin-top: 13px; }
  .intro-services-lead > strong { max-width: 240px; }
  .intro-services-lead > a { position: absolute; right: 22px; bottom: 22px; margin: 0; }
  .intro-service-links { grid-template-columns: 1fr; }
  .intro-service-link { min-height: 74px; border-right: 0; border-bottom: 1px solid rgba(53, 88, 114, .12); padding: 16px 19px; }
  .intro-service-link:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(53, 88, 114, .12); }
  .intro-service-link:last-child { border-bottom: 0; }
  .intro-service-link > strong { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .technology-stack-node,
  .intro-service-link,
  .intro-service-link > i { transition: none; }
}

/* Homepage editorial redesign — clean typography and image-led hierarchy */
.home-editorial {
  --home-paper: #f2f0e9;
  --home-ink: #11120f;
  --home-muted: #5f625b;
  background: var(--home-paper);
}

.editorial-hero {
  min-height: 100svh;
  overflow: hidden;
  background: var(--home-paper);
  color: var(--home-ink);
}

.editorial-hero__shell {
  padding-top: clamp(152px, 16vh, 210px);
  padding-bottom: 28px;
}

.editorial-hero__copy {
  border-top: 1px solid rgba(17, 18, 15, .22);
  padding-top: 18px;
}

.editorial-hero__kicker {
  margin: 0 0 clamp(56px, 8vh, 104px);
  color: var(--home-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .13em;
  line-height: 1;
}

.editorial-hero h1 {
  display: grid;
  margin: 0;
  max-width: 1360px;
  color: var(--home-ink);
  font-size: clamp(76px, 10.7vw, 166px);
  font-weight: 420;
  letter-spacing: -.071em;
  line-height: .82;
}

.editorial-hero h1 span:last-child {
  margin-left: clamp(40px, 12.5vw, 210px);
}

.editorial-hero__summary {
  display: grid;
  grid-template-columns: minmax(280px, 560px) auto;
  align-items: end;
  gap: 28px 56px;
  width: min(100%, 920px);
  margin: clamp(54px, 7vw, 96px) 0 clamp(58px, 7vw, 96px) auto;
}

.editorial-hero__summary > p {
  margin: 0;
  color: #32352f;
  font-size: clamp(17px, 1.45vw, 22px);
  letter-spacing: -.022em;
  line-height: 1.42;
}

.editorial-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  min-width: 220px;
}

.editorial-hero__actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(17, 18, 15, .8);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 580;
  letter-spacing: -.01em;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.editorial-hero__actions a:hover { transform: translateY(-2px); }
.editorial-hero__primary { background: var(--home-ink); color: #fff; }
.editorial-hero__primary:hover { background: #2f5cff; }
.editorial-hero__secondary { color: var(--home-ink); }
.editorial-hero__secondary:hover { background: rgba(17, 18, 15, .07); }

.editorial-hero__media {
  position: relative;
  min-height: min(72vh, 840px);
  margin: 0;
  overflow: hidden;
  background: #1b2428;
}

.editorial-hero__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(4, 9, 11, .52));
  content: "";
  pointer-events: none;
}

.editorial-hero__media img {
  width: 100%;
  height: 100%;
  min-height: min(72vh, 840px);
  object-fit: cover;
  object-position: 50% 48%;
  filter: saturate(.84) contrast(1.03);
  transition: transform 900ms cubic-bezier(.2, .75, .2, 1);
}

.editorial-hero__media:hover img { transform: scale(1.012); }

.editorial-hero__media figcaption {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255, 255, 255, .94);
  font-size: 12px;
}

.editorial-hero__media figcaption strong { font-weight: 550; }
.editorial-hero__media figcaption span { color: rgba(255, 255, 255, .62); }

@media (max-width: 900px) {
  .editorial-hero__shell { padding-top: 132px; }
  .editorial-hero__kicker { margin-bottom: 54px; }
  .editorial-hero h1 { font-size: clamp(60px, 13vw, 104px); }
  .editorial-hero h1 span:last-child { margin-left: 8vw; }
  .editorial-hero__summary { grid-template-columns: 1fr; width: min(100%, 620px); }
  .editorial-hero__actions { flex-flow: row wrap; min-width: 0; }
  .editorial-hero__actions a { min-width: 210px; }
  .editorial-hero__media,
  .editorial-hero__media img { min-height: min(64vh, 680px); }
}

@media (max-width: 620px) {
  .editorial-hero__shell { padding-top: 112px; padding-bottom: 14px; }
  .editorial-hero__copy { padding-top: 13px; }
  .editorial-hero__kicker { margin-bottom: 44px; font-size: 9px; }
  .editorial-hero h1 { font-size: clamp(54px, 17.2vw, 76px); line-height: .88; }
  .editorial-hero h1 span:last-child { margin-top: 5px; margin-left: 0; }
  .editorial-hero__summary { gap: 25px; margin: 38px 0 44px; }
  .editorial-hero__summary > p { max-width: 36ch; font-size: 16px; line-height: 1.45; }
  .editorial-hero__actions { display: grid; grid-template-columns: 1fr; }
  .editorial-hero__actions a { min-width: 0; min-height: 49px; }
  .editorial-hero__media,
  .editorial-hero__media img { min-height: 500px; }
  .editorial-hero__media img { object-position: 54% center; }
  .editorial-hero__media figcaption { right: 16px; bottom: 15px; left: 16px; flex-direction: column; gap: 3px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-hero__media img,
  .editorial-hero__actions a { transition: none; }
}

/* Simplified homepage navigation */
.home-editorial > .site-header,
.home-editorial > .site-header.is-compact {
  height: auto;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(17, 18, 15, .96);
  box-shadow: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.home-editorial > .site-header::before,
.home-editorial > .site-header::after { display: none; }

.home-editorial > .site-header .nav-shell,
.home-editorial > .site-header.is-compact .nav-shell {
  width: min(100% - 48px, 1480px);
  height: 78px;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  grid-template-columns: minmax(225px, 310px) 1fr auto;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-editorial > .site-header .brand-mark,
.home-editorial > .site-header.is-compact .brand-mark { flex-basis: 54px; width: 54px; height: 44px; }
.home-editorial > .site-header .brand-logo,
.home-editorial > .site-header.is-compact .brand-logo { width: 52px; height: 40px; }
.home-editorial > .site-header .brand-divider { display: none; }
.home-editorial > .site-header .brand-name,
.home-editorial > .site-header.is-compact .brand-name { margin-left: 13px; font-size: 12px; letter-spacing: .24em; }
.home-editorial > .site-header .primary-nav,
.home-editorial > .site-header.is-compact .primary-nav { gap: clamp(14px, 1.65vw, 28px); }
.home-editorial > .site-header .primary-nav a,
.home-editorial > .site-header.is-compact .primary-nav a {
  min-width: 0;
  align-items: center;
  padding: 30px 0 28px;
  color: rgba(255, 255, 255, .64);
}
.home-editorial > .site-header .nav-item-index { display: none; }
.home-editorial > .site-header .nav-item-label { font-size: 10px; font-weight: 560; letter-spacing: .03em; }
.home-editorial > .site-header .primary-nav a::after,
.home-editorial > .site-header.is-compact .primary-nav a::after { bottom: 20px; background: #fff; box-shadow: none; }
.home-editorial > .site-header .primary-nav a:hover,
.home-editorial > .site-header .primary-nav a[aria-current="page"] { color: #fff; }
.home-editorial > .site-header .nav-actions,
.home-editorial > .site-header.is-compact .nav-actions { gap: 10px; }
.home-editorial > .site-header .locale-switch,
.home-editorial > .site-header.is-compact .locale-switch { min-height: 40px; border-color: rgba(255, 255, 255, .18); background: transparent; }
.home-editorial > .site-header .button--nav,
.home-editorial > .site-header.is-compact .button--nav {
  min-height: 42px;
  gap: 18px;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 0 17px;
  background: #fff;
  color: #11120f;
  clip-path: none;
  box-shadow: none;
  text-transform: none;
}
.home-editorial > .site-header .button--nav:hover,
.home-editorial > .site-header.is-compact .button--nav:hover { border-color: #dfe5ff; background: #dfe5ff; color: #11120f; }
.home-editorial > .site-header .button--nav::before { display: none; }
.home-editorial > .site-header .nav-cta-arrow,
.home-editorial > .site-header.is-compact .nav-cta-arrow { color: #11120f; }
.home-editorial > .site-header .menu-button,
.home-editorial > .site-header.is-compact .menu-button {
  border-color: rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: transparent;
}
.home-editorial > .site-header .menu-button::before { display: none; }
.home-editorial > .site-header .header-progress { display: none; }

/* Shared editorial section hierarchy */
.editorial-services {
  padding: clamp(112px, 12vw, 190px) 0 clamp(128px, 13vw, 210px);
  background: var(--home-paper);
  color: var(--home-ink);
}

.editorial-section-heading {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2.15fr);
  gap: 32px;
  border-top: 1px solid rgba(17, 18, 15, .25);
  padding-top: 18px;
}

.editorial-section-heading > p,
.editorial-approach__shell > p {
  margin: 0;
  color: #666961;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .14em;
}

.editorial-section-heading h2 {
  max-width: 980px;
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(52px, 6vw, 94px);
  font-weight: 430;
  letter-spacing: -.061em;
  line-height: .98;
}

.editorial-section-heading > div > span {
  display: block;
  max-width: 610px;
  margin: 35px 0 0 auto;
  color: #555851;
  font-size: 17px;
  line-height: 1.55;
}

.editorial-services__grid {
  display: grid;
  margin-top: clamp(80px, 9vw, 138px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(70px, 8vw, 124px) 26px;
}

.editorial-service--1 { grid-column: 1 / span 7; }
.editorial-service--2 { grid-column: 9 / span 4; }
.editorial-service--3 { grid-column: 5 / span 6; }

.editorial-service__media,
.editorial-project__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #d9ddd7;
}

.editorial-service__media { aspect-ratio: 16 / 10; }
.editorial-service--2 .editorial-service__media { aspect-ratio: 4 / 5; }

.editorial-service__media img,
.editorial-project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82);
  transition: transform 800ms cubic-bezier(.2, .75, .2, 1), filter 400ms ease;
}

.editorial-service__media:hover img,
.editorial-project__media:hover img { transform: scale(1.022); filter: saturate(1); }

.editorial-service__media > span {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(17, 18, 15, .88);
  color: #fff;
  font-size: 9px;
  place-items: center;
}

.editorial-service__copy,
.editorial-project__copy {
  position: relative;
  display: grid;
  grid-template-columns: minmax(92px, .45fr) minmax(0, 1.35fr) 38px;
  gap: 18px;
  border-top: 1px solid currentColor;
  margin-top: 18px;
  padding-top: 14px;
}

.editorial-service__copy > p,
.editorial-project__copy > p {
  margin: 3px 0 0;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .11em;
  line-height: 1.35;
}

.editorial-service__copy h3,
.editorial-project__copy h3 {
  margin: 0;
  font-size: clamp(25px, 2.2vw, 36px);
  font-weight: 470;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.editorial-service__copy > span,
.editorial-project__copy > span {
  grid-column: 2;
  max-width: 48ch;
  color: #61645d;
  font-size: 13px;
  line-height: 1.5;
}

.editorial-arrow-link {
  display: grid;
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 14px;
  place-items: center;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.editorial-arrow-link:hover { background: var(--home-ink); color: #fff; transform: translateY(-2px); }

.editorial-index-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(17, 18, 15, .28);
  margin-top: clamp(80px, 9vw, 140px);
  padding: 18px 0;
  color: var(--home-ink);
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -.025em;
}

.editorial-index-link span { transition: transform 180ms ease; }
.editorial-index-link:hover span { transform: translate(4px, -4px); }

/* One bold colour block keeps the palette technological without visual noise. */
.editorial-approach { background: #3157f6; color: #fff; }
.editorial-approach__shell { padding-top: clamp(82px, 9vw, 140px); padding-bottom: clamp(88px, 10vw, 160px); }
.editorial-approach__shell > p { color: rgba(255, 255, 255, .7); }
.editorial-approach h2 {
  max-width: 1220px;
  margin: clamp(80px, 11vw, 166px) 0 clamp(82px, 10vw, 150px);
  font-size: clamp(60px, 8.3vw, 126px);
  font-weight: 430;
  letter-spacing: -.066em;
  line-height: .91;
}
.editorial-approach ol {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .45);
  list-style: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.editorial-approach li {
  display: flex;
  min-height: 104px;
  align-items: flex-end;
  justify-content: space-between;
  border-right: 1px solid rgba(255, 255, 255, .25);
  padding: 20px 20px 0 0;
  font-size: 17px;
}
.editorial-approach li + li { padding-left: 20px; }
.editorial-approach li:last-child { border-right: 0; }
.editorial-approach li span { color: rgba(255, 255, 255, .55); font-size: 9px; }

/* Selected work */
.editorial-projects {
  padding: clamp(110px, 12vw, 186px) 0 clamp(120px, 13vw, 210px);
  background: #11120f;
  color: #fff;
}
.editorial-section-heading--dark { border-top-color: rgba(255, 255, 255, .28); }
.editorial-section-heading--dark > p { color: rgba(255, 255, 255, .54); }
.editorial-section-heading--dark h2 { color: #fff; }
.editorial-projects__grid {
  display: grid;
  margin-top: clamp(78px, 9vw, 138px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 92px 26px;
}
.editorial-project--1 { grid-column: 1 / -1; }
.editorial-project--1 .editorial-project__media { aspect-ratio: 16 / 8; }
.editorial-project--2 .editorial-project__media,
.editorial-project--3 .editorial-project__media { aspect-ratio: 4 / 3; }
.editorial-project__media { background: #20231f; }
.editorial-project__copy { border-top-color: rgba(255, 255, 255, .8); }
.editorial-project__copy > p { color: rgba(255, 255, 255, .54); }
.editorial-project__copy > span { color: rgba(255, 255, 255, .58); }
.editorial-project .editorial-arrow-link:hover { background: #fff; color: #11120f; }
.editorial-index-link--dark { border-top-color: rgba(255, 255, 255, .3); color: #fff; }

/* Keep the final form functional, but remove the old decorative layers. */
.home-editorial .contact-cta-section { background: #11120f; }
.home-editorial .contact-cta-section::before,
.home-editorial .contact-cta-aura,
.home-editorial .contact-cta-orbit { display: none; }
.home-editorial .contact-cta-panel { border-top-color: rgba(255, 255, 255, .28); }
.home-editorial .site-footer .footer-cartouche { opacity: .28; }

@media (max-width: 1050px) {
  .home-editorial > .site-header .primary-nav { display: none; }
  .home-editorial > .site-header .nav-shell,
  .home-editorial > .site-header.is-compact .nav-shell { grid-template-columns: 1fr auto; }
  .home-editorial > .site-header .menu-button { display: inline-flex; }

  .editorial-section-heading { grid-template-columns: 1fr; gap: 42px; }
  .editorial-section-heading > div { max-width: 860px; margin-left: auto; }
  .editorial-service--1 { grid-column: 1 / span 8; }
  .editorial-service--2 { grid-column: 9 / span 4; }
  .editorial-service--3 { grid-column: 4 / span 7; }
}

@media (max-width: 700px) {
  .home-editorial > .site-header .nav-shell,
  .home-editorial > .site-header.is-compact .nav-shell { width: calc(100% - 28px); height: 70px; }
  .home-editorial > .site-header .brand-mark,
  .home-editorial > .site-header.is-compact .brand-mark { flex-basis: 42px; width: 42px; }
  .home-editorial > .site-header .brand-logo,
  .home-editorial > .site-header.is-compact .brand-logo { width: 40px; }
  .home-editorial > .site-header .brand-name,
  .home-editorial > .site-header.is-compact .brand-name { margin-left: 8px; font-size: 9px; letter-spacing: .19em; }
  .home-editorial > .site-header .locale-switch { display: none; }
  .home-editorial > .site-header .button--nav,
  .home-editorial > .site-header.is-compact .button--nav { display: none; }

  .editorial-services { padding: 92px 0 110px; }
  .editorial-section-heading { gap: 28px; padding-top: 13px; }
  .editorial-section-heading h2 { max-width: 12ch; font-size: clamp(42px, 12vw, 58px); line-height: 1; }
  .editorial-section-heading > div > span { margin-top: 25px; font-size: 14px; line-height: 1.55; }
  .editorial-services__grid { display: block; margin-top: 68px; }
  .editorial-service + .editorial-service { margin-top: 74px; }
  .editorial-service__media,
  .editorial-service--2 .editorial-service__media { aspect-ratio: 4 / 3; }
  .editorial-service__copy,
  .editorial-project__copy { grid-template-columns: 74px minmax(0, 1fr) 34px; gap: 12px; margin-top: 13px; padding-top: 11px; }
  .editorial-service__copy h3,
  .editorial-project__copy h3 { font-size: 25px; }
  .editorial-service__copy > span,
  .editorial-project__copy > span { font-size: 12px; }
  .editorial-arrow-link { width: 34px; height: 34px; }
  .editorial-index-link { margin-top: 72px; font-size: 19px; }

  .editorial-approach__shell { padding-top: 76px; padding-bottom: 84px; }
  .editorial-approach h2 { margin: 70px 0 78px; font-size: clamp(52px, 14vw, 68px); line-height: .94; }
  .editorial-approach ol { grid-template-columns: 1fr; }
  .editorial-approach li,
  .editorial-approach li + li { min-height: 68px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .25); padding: 16px 0; }
  .editorial-approach li:last-child { border-bottom: 0; }

  .editorial-projects { padding: 92px 0 112px; }
  .editorial-projects__grid { display: block; margin-top: 66px; }
  .editorial-project + .editorial-project { margin-top: 74px; }
  .editorial-project--1 .editorial-project__media,
  .editorial-project--2 .editorial-project__media,
  .editorial-project--3 .editorial-project__media { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-service__media img,
  .editorial-project__media img,
  .editorial-arrow-link,
  .editorial-index-link span { transition: none; }
}

/* Homepage v3 — disciplined OpenAI-inspired grid, compact rhythm, varied product imagery */
.home-editorial {
  --home-paper: #ffffff;
  --home-surface: #ffffff;
  --home-ink: #0b0b0b;
  --home-muted: #666660;
  --home-line: rgba(11, 11, 11, .2);
  --home-blue: #080808;
  --home-blue-soft: #f2f2f2;
  background: var(--home-paper);
  color: var(--home-ink);
}

.home-editorial .page-shell {
  width: min(100% - 64px, 1480px);
}

/* Navigation: one flat surface and one baseline. */
.home-editorial > .site-header,
.home-editorial > .site-header.is-compact {
  border-bottom: 1px solid var(--home-line);
  background: rgba(244, 244, 240, .96);
  color: var(--home-ink);
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.home-editorial > .site-header .nav-shell,
.home-editorial > .site-header.is-compact .nav-shell {
  height: 72px;
  color: var(--home-ink);
}

.home-editorial > .site-header .brand-name,
.home-editorial > .site-header.is-compact .brand-name { color: var(--home-ink); }

.home-editorial > .site-header .primary-nav a,
.home-editorial > .site-header.is-compact .primary-nav a { color: rgba(11, 11, 11, .58); }

.home-editorial > .site-header .primary-nav a:hover,
.home-editorial > .site-header .primary-nav a[aria-current="page"] { color: var(--home-ink); }

.home-editorial > .site-header .primary-nav a::after,
.home-editorial > .site-header.is-compact .primary-nav a::after { background: var(--home-ink); }

.home-editorial > .site-header .locale-switch,
.home-editorial > .site-header.is-compact .locale-switch {
  border-color: var(--home-line);
  background: transparent;
  color: var(--home-ink);
}

.home-editorial > .site-header .button--nav,
.home-editorial > .site-header.is-compact .button--nav {
  border-color: var(--home-ink);
  background: var(--home-ink);
  color: #fff;
}

.home-editorial > .site-header .button--nav:hover,
.home-editorial > .site-header.is-compact .button--nav:hover {
  border-color: var(--home-blue);
  background: var(--home-blue);
  color: #fff;
}

.home-editorial > .site-header .nav-cta-arrow,
.home-editorial > .site-header.is-compact .nav-cta-arrow { color: currentColor; }

.home-editorial > .site-header .menu-button,
.home-editorial > .site-header.is-compact .menu-button {
  border-color: var(--home-line);
  color: var(--home-ink);
}

/* Hero: a strict 7/5 split that fits inside a normal first viewport. */
.editorial-hero {
  min-height: 0;
  background: var(--home-paper);
}

.editorial-hero__shell {
  display: grid;
  align-items: stretch;
  gap: 32px;
  padding-top: clamp(126px, 11vw, 164px);
  padding-bottom: clamp(64px, 6vw, 88px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.editorial-hero__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  grid-column: 1 / span 7;
  border-top: 1px solid var(--home-line);
  padding-top: 14px;
}

.editorial-hero__kicker {
  margin: 0 0 clamp(66px, 8vw, 108px);
  color: var(--home-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
}

.editorial-hero h1 {
  display: block;
  max-width: 850px;
  font-size: clamp(66px, 7.4vw, 112px);
  font-weight: 430;
  letter-spacing: -.066em;
  line-height: .91;
}

.editorial-hero h1 span { display: block; }
.editorial-hero h1 span:last-child { margin: 0; }

.editorial-hero__summary {
  display: block;
  width: 100%;
  margin: clamp(42px, 5vw, 70px) 0 0;
}

.editorial-hero__summary > p {
  max-width: 590px;
  color: #33332f;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.46;
}

.editorial-hero__actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 30px;
}

.editorial-hero__actions a {
  min-width: 0;
  min-height: 46px;
  gap: 30px;
  border-color: var(--home-ink);
  border-radius: 999px;
  padding: 0 16px;
  font-size: 12px;
}

.editorial-hero__primary:hover { background: var(--home-blue); }

.editorial-hero__media {
  grid-column: 8 / -1;
  align-self: stretch;
  min-height: 0;
  aspect-ratio: 4 / 5;
  background: #dfe3e5;
}

.editorial-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  filter: none;
}

.editorial-hero__media::after {
  background: linear-gradient(180deg, transparent 70%, rgba(8, 10, 12, .34));
}

.editorial-hero__media figcaption {
  right: 16px;
  bottom: 14px;
  left: 16px;
  font-size: 10px;
}

/* Section headers mirror OpenAI's compact label + content pattern. */
.editorial-services,
.editorial-projects {
  padding: clamp(72px, 7vw, 104px) 0 clamp(82px, 8vw, 120px);
}

.editorial-services { background: var(--home-surface); }

.editorial-section-heading {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  border-top-color: var(--home-line);
  padding-top: 14px;
}

.editorial-section-heading > p {
  grid-column: 1 / span 3;
  color: var(--home-muted);
  font-size: 9px;
  letter-spacing: .1em;
}

.editorial-section-heading > div {
  display: grid;
  align-items: start;
  grid-column: 4 / -1;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr);
  gap: 32px;
}

.editorial-section-heading h2 {
  max-width: 720px;
  font-size: clamp(36px, 3.7vw, 56px);
  font-weight: 440;
  letter-spacing: -.052em;
  line-height: 1;
}

.editorial-section-heading > div > span {
  max-width: 340px;
  margin: 2px 0 0;
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.5;
}

.editorial-services__grid,
.editorial-projects__grid {
  display: grid;
  margin-top: clamp(46px, 5vw, 72px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.editorial-service,
.editorial-project,
.editorial-service--1,
.editorial-service--2,
.editorial-service--3,
.editorial-project--1 {
  min-width: 0;
  grid-column: auto;
}

.editorial-service__media,
.editorial-service--2 .editorial-service__media,
.editorial-project--1 .editorial-project__media,
.editorial-project--2 .editorial-project__media,
.editorial-project--3 .editorial-project__media {
  aspect-ratio: 4 / 3;
  background: #e2e2de;
}

.editorial-service__media img,
.editorial-project__media img { filter: none; }

.editorial-service__media > span {
  top: 12px;
  left: 12px;
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: rgba(11, 11, 11, .88);
  font-size: 8px;
}

.editorial-service__copy,
.editorial-project__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px 16px;
  border-top: 1px solid var(--home-ink);
  margin-top: 13px;
  padding-top: 11px;
}

.editorial-service__copy > p,
.editorial-project__copy > p {
  grid-column: 1;
  margin: 0 0 12px;
  color: var(--home-muted);
  font-size: 8px;
  letter-spacing: .08em;
}

.editorial-service__copy h3,
.editorial-project__copy h3 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(23px, 2vw, 30px);
  font-weight: 470;
  letter-spacing: -.04em;
  line-height: 1.05;
}

.editorial-service__copy > span,
.editorial-project__copy > span {
  grid-column: 1;
  max-width: 40ch;
  margin-top: 8px;
  color: var(--home-muted);
  font-size: 12px;
  line-height: 1.45;
}

.editorial-arrow-link {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 32px;
  height: 32px;
  align-self: end;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 14px;
}

.editorial-arrow-link:hover {
  background: var(--home-ink);
  color: #fff;
}

.editorial-index-link {
  margin-top: clamp(44px, 5vw, 68px);
  padding: 14px 0 0;
  font-size: 17px;
}

/* A restrained soft-blue process block instead of a full cobalt wall. */
.editorial-approach {
  background: var(--home-blue-soft);
  color: var(--home-ink);
}

.editorial-approach__shell {
  display: grid;
  gap: 24px;
  padding-top: clamp(68px, 6vw, 88px);
  padding-bottom: clamp(68px, 6vw, 88px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.editorial-approach__shell > p {
  grid-column: 1 / span 3;
  color: rgba(11, 11, 11, .55);
  font-size: 9px;
  letter-spacing: .1em;
}

.editorial-approach h2 {
  grid-column: 4 / -1;
  max-width: 850px;
  margin: 0 0 clamp(34px, 4vw, 56px);
  font-size: clamp(38px, 4.2vw, 62px);
  font-weight: 440;
  letter-spacing: -.052em;
  line-height: .98;
}

.editorial-approach ol {
  grid-column: 4 / -1;
  border-top-color: rgba(11, 11, 11, .3);
}

.editorial-approach li {
  min-height: 76px;
  border-right-color: rgba(11, 11, 11, .18);
  padding-top: 16px;
  font-size: 14px;
}

.editorial-approach li span { color: rgba(11, 11, 11, .48); }

/* Projects use the same three-column card grammar instead of another layout system. */
.editorial-projects {
  background: var(--home-paper);
  color: var(--home-ink);
}

.editorial-section-heading--dark { border-top-color: var(--home-line); }
.editorial-section-heading--dark > p { color: var(--home-muted); }
.editorial-section-heading--dark h2 { color: var(--home-ink); }
.editorial-project__media { background: #e6e6e1; }
.editorial-project__copy { border-top-color: var(--home-ink); }
.editorial-project__copy > p,
.editorial-project__copy > span { color: var(--home-muted); }
.editorial-project .editorial-arrow-link:hover { background: var(--home-ink); color: #fff; }
.editorial-index-link--dark { border-top-color: var(--home-line); color: var(--home-ink); }

/* Contact: two aligned columns, no glow, no decorative orbit. */
.home-editorial .contact-cta-section {
  padding-block: clamp(72px, 7vw, 104px);
  border-top: 0;
  background: var(--home-blue-soft);
  color: var(--home-ink);
}

.home-editorial .contact-cta-shell { max-width: 1480px; }

.home-editorial .contact-cta-panel {
  display: grid;
  gap: 24px;
  border-top: 1px solid rgba(11, 11, 11, .24);
  padding-top: 14px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.home-editorial .contact-cta-heading { grid-column: 1 / span 3; }

.home-editorial .contact-cta-heading h2 {
  margin: 0;
  color: var(--home-ink);
  font-family: var(--sans);
  font-size: clamp(38px, 4.2vw, 62px);
  font-weight: 440;
  letter-spacing: -.052em;
  line-height: .98;
}

.home-editorial .contact-cta-form-stage {
  grid-column: 4 / -1;
  grid-row: 1 / span 2;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.home-editorial .contact-cta-section .request-form--editorial {
  border: 1px solid rgba(11, 11, 11, .22);
  padding: clamp(24px, 3vw, 38px);
  background: var(--home-surface);
  color: var(--home-ink);
  box-shadow: none;
}

.home-editorial .contact-cta-section .request-form--editorial::before { display: none; }

.home-editorial .contact-cta-section .request-form--editorial .request-form-kicker,
.home-editorial .contact-cta-section .request-form--editorial label > span,
.home-editorial .contact-cta-section .request-form--editorial label > span i { color: var(--home-muted); }

.home-editorial .contact-cta-section .request-form--editorial .request-form-title,
.home-editorial .contact-cta-section .request-form--editorial input,
.home-editorial .contact-cta-section .request-form--editorial select,
.home-editorial .contact-cta-section .request-form--editorial textarea { color: var(--home-ink); }

.home-editorial .contact-cta-section .request-form--editorial .request-form-title {
  font-family: var(--sans);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 450;
}

.home-editorial .contact-cta-section .request-form--editorial .request-form-service-select,
.home-editorial .contact-cta-section .request-form--editorial .request-form-quick-grid label {
  border-color: rgba(11, 11, 11, .16);
  background: #fff;
  transform: none;
}

.home-editorial .contact-cta-section .request-form--editorial .request-submit {
  min-height: 48px;
  border-color: var(--home-ink);
  background: var(--home-ink);
  box-shadow: none;
}

.home-editorial .contact-cta-section .request-form--editorial .request-submit:hover:not(:disabled),
.home-editorial .contact-cta-section .request-form--editorial .request-submit:focus-visible {
  border-color: var(--home-blue);
  background: var(--home-blue);
  box-shadow: none;
}

.home-editorial .contact-cta-meta {
  display: grid;
  grid-column: 1 / span 3;
  grid-row: 2;
  align-self: end;
  gap: 10px;
  margin: 0;
  grid-template-columns: 1fr;
}

.home-editorial .contact-cta-meta span,
.home-editorial .contact-cta-meta a { color: rgba(11, 11, 11, .62); }

.home-editorial .contact-cta-meta span::before { background: var(--home-blue); }

.home-editorial .contact-cta-meta a {
  grid-column: 1;
  margin-top: 10px;
  border-top-color: rgba(11, 11, 11, .18);
  overflow-wrap: anywhere;
}

.home-editorial .contact-cta-meta a i { color: var(--home-blue); }

.home-editorial .site-footer {
  border-top-color: rgba(255, 255, 255, .16);
  background: #0b0b0b;
}

@media (max-width: 1050px) {
  .editorial-hero__copy { grid-column: 1 / span 7; }
  .editorial-hero__media { grid-column: 8 / -1; }
  .editorial-section-heading { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .editorial-section-heading > div { grid-column: 4 / -1; margin: 0; }
}

@media (max-width: 760px) {
  .home-editorial .page-shell { width: calc(100% - 28px); }

  .home-editorial > .site-header .nav-shell,
  .home-editorial > .site-header.is-compact .nav-shell { height: 68px; }

  .editorial-hero__shell {
    display: block;
    padding-top: 104px;
    padding-bottom: 62px;
  }

  .editorial-hero__kicker { margin-bottom: 48px; }
  .editorial-hero h1 { font-size: clamp(52px, 16vw, 68px); line-height: .91; }
  .editorial-hero__summary { margin-top: 32px; }
  .editorial-hero__actions { display: grid; margin-top: 24px; grid-template-columns: 1fr; }
  .editorial-hero__actions a { min-height: 46px; }

  .editorial-hero__media {
    margin-top: 40px;
    aspect-ratio: 4 / 3;
  }

  .editorial-services,
  .editorial-projects { padding: 62px 0 72px; }

  .editorial-section-heading { display: block; }
  .editorial-section-heading > p { margin-bottom: 34px; }
  .editorial-section-heading > div { display: block; }
  .editorial-section-heading h2 { max-width: 12ch; font-size: 36px; }
  .editorial-section-heading > div > span { margin-top: 18px; font-size: 13px; }

  .editorial-services__grid,
  .editorial-projects__grid {
    display: grid;
    gap: 14px;
    margin-top: 42px;
    padding-bottom: 14px;
    overflow-x: auto;
    grid-auto-columns: min(84vw, 320px);
    grid-auto-flow: column;
    grid-template-columns: none;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .editorial-service + .editorial-service,
  .editorial-project + .editorial-project { margin-top: 0; }

  .editorial-services__grid::-webkit-scrollbar,
  .editorial-projects__grid::-webkit-scrollbar { display: none; }

  .editorial-service,
  .editorial-project { scroll-snap-align: start; }

  .editorial-service__copy,
  .editorial-project__copy { grid-template-columns: minmax(0, 1fr) 32px; }

  .editorial-service__copy h3,
  .editorial-project__copy h3 { font-size: 25px; }

  .editorial-index-link { margin-top: 48px; }

  .editorial-approach__shell {
    display: block;
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .editorial-approach h2 {
    margin: 34px 0 42px;
    font-size: 38px;
  }

  .editorial-approach ol { grid-template-columns: 1fr; }
  .editorial-approach li,
  .editorial-approach li + li { min-height: 58px; padding: 14px 0; }

  .home-editorial .contact-cta-section { padding-block: 62px; }
  .home-editorial .contact-cta-panel { display: block; }
  .home-editorial .contact-cta-heading h2 { max-width: 8ch; font-size: 40px; }
  .home-editorial .contact-cta-form-stage { margin-top: 38px; }
  .home-editorial .contact-cta-meta { margin-top: 32px; }
  .home-editorial .contact-cta-section .request-form--editorial { padding: 24px 18px 20px; }
  .home-editorial .contact-cta-section .request-form-quick-grid { grid-template-columns: 1fr; }
  .home-editorial .contact-cta-section .request-form--editorial .request-form-quick-grid .message-field { grid-column: 1; }
  .home-editorial .contact-cta-section .request-form--editorial .request-submit { width: 100%; min-width: 0; }
}

/* Homepage v4 — monochrome liquid glass and tactile editorial interactions. */
.home-editorial {
  --home-glass: rgba(255,255,255,.66);
  --home-glass-strong: rgba(255,255,255,.84);
  --home-glass-line: rgba(11,11,11,.11);
  --home-glass-shadow: 0 24px 64px rgba(11,11,11,.09);
  background:
    radial-gradient(circle at 8% 8%, rgba(211,228,255,.24), transparent 26%),
    radial-gradient(circle at 94% 28%, rgba(234,224,255,.18), transparent 24%),
    #fff;
}

.editorial-services,
.editorial-projects,
.editorial-approach,
.home-editorial .contact-cta-section { position: relative; overflow: hidden; isolation: isolate; }

.editorial-services::before,
.editorial-projects::before,
.editorial-approach::before,
.home-editorial .contact-cta-section::after {
  position: absolute;
  z-index: -1;
  width: min(58vw,820px);
  aspect-ratio: 1;
  border-radius: 46% 54% 61% 39% / 39% 47% 53% 61%;
  content: "";
  opacity: .7;
  pointer-events: none;
}

.editorial-services::before { top: -40%; right: -24%; background: radial-gradient(circle,rgba(205,225,255,.32),rgba(235,242,255,.1) 47%,transparent 70%); }
.editorial-projects::before { bottom: -48%; left: -26%; background: radial-gradient(circle,rgba(228,218,255,.28),rgba(245,240,255,.08) 48%,transparent 70%); }
.editorial-approach::before { top: -90%; right: -18%; background: radial-gradient(circle,rgba(255,255,255,.82),rgba(214,229,255,.38) 38%,transparent 70%); }
.home-editorial .contact-cta-section::after { right: -20%; bottom: -70%; background: radial-gradient(circle,rgba(205,225,255,.42),rgba(236,243,255,.12) 44%,transparent 70%); }

.editorial-section-heading { position: relative; }
.editorial-section-heading::after { position: absolute; top: -1px; left: 0; width: min(110px,14vw); height: 1px; background: #0b0b0b; content: ""; transform-origin: left center; transition: width 700ms var(--motion-fluid, cubic-bezier(.16,1,.3,1)); }
.editorial-services:hover .editorial-section-heading::after,
.editorial-projects:hover .editorial-section-heading::after { width: min(260px,28vw); }

.editorial-service,
.editorial-project { position: relative; transition: transform 600ms var(--motion-fluid, cubic-bezier(.16,1,.3,1)); }

.editorial-service__media,
.editorial-project__media {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(11,11,11,.08), inset 0 1px 0 rgba(255,255,255,.68);
  transform: translateZ(0);
  transition: border-color 500ms ease, box-shadow 600ms ease, transform 600ms var(--motion-fluid, cubic-bezier(.16,1,.3,1));
}

.editorial-service__media::before,
.editorial-project__media::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg,transparent 18%,rgba(255,255,255,.34) 42%,transparent 61%);
  content: "";
  opacity: .56;
  pointer-events: none;
  transform: translateX(-78%);
  transition: transform 1100ms var(--motion-fluid, cubic-bezier(.16,1,.3,1));
}

.editorial-service__media img,
.editorial-project__media img { transition: transform 1000ms var(--motion-fluid, cubic-bezier(.16,1,.3,1)), filter 500ms ease; }

.editorial-service__media > span {
  z-index: 3;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 999px;
  background: rgba(8,8,8,.62);
  box-shadow: 0 9px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}

.editorial-service__copy,
.editorial-project__copy { transition: border-color 360ms ease, transform 500ms var(--motion-fluid, cubic-bezier(.16,1,.3,1)); }
.editorial-service__copy h3,
.editorial-project__copy h3 { transition: transform 500ms var(--motion-fluid, cubic-bezier(.16,1,.3,1)), letter-spacing 500ms var(--motion-fluid, cubic-bezier(.16,1,.3,1)); }
.editorial-arrow-link {
  border: 1px solid rgba(11,11,11,.13);
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 7px 18px rgba(11,11,11,.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 500ms var(--motion-fluid, cubic-bezier(.16,1,.3,1)), background 300ms ease, color 300ms ease, box-shadow 400ms ease;
}

.editorial-index-link {
  border-radius: 16px;
  padding: 15px 12px 14px;
  transition: background 360ms ease, padding 500ms var(--motion-fluid, cubic-bezier(.16,1,.3,1)), box-shadow 420ms ease;
}
.editorial-index-link:hover { padding-inline: 18px; background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 32px rgba(11,11,11,.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

.editorial-approach { background: linear-gradient(145deg,#f1f4f7 0%,#edf2f8 54%,#f6f3fa 100%); }
.editorial-approach ol { gap: 10px; border-top: 0; }
.editorial-approach li,
.editorial-approach li + li {
  min-height: 94px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  padding: 18px;
  background: rgba(255,255,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 34px rgba(35,48,68,.05);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  transition: transform 500ms var(--motion-fluid, cubic-bezier(.16,1,.3,1)), background 360ms ease, box-shadow 500ms ease;
}

.home-editorial .contact-cta-section { background: linear-gradient(145deg,#f3f5f7,#eef2f7 56%,#f6f3fa); }
.home-editorial .contact-cta-panel { border-top-color: rgba(11,11,11,.15); }
.home-editorial .contact-cta-section .request-form--editorial {
  border-color: rgba(255,255,255,.8);
  border-radius: 28px;
  background: rgba(255,255,255,.6);
  box-shadow: 0 26px 68px rgba(24,35,52,.08), inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
}
.home-editorial .contact-cta-section .request-form--editorial .request-form-service-select,
.home-editorial .contact-cta-section .request-form--editorial .request-form-quick-grid label {
  border-color: rgba(11,11,11,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 300ms ease, background 300ms ease, transform 480ms var(--motion-fluid, cubic-bezier(.16,1,.3,1)), box-shadow 420ms ease;
}
.home-editorial .contact-cta-section .request-form--editorial .request-form-service-select:focus-within,
.home-editorial .contact-cta-section .request-form--editorial .request-form-quick-grid label:focus-within {
  border-color: rgba(11,11,11,.28);
  background: rgba(255,255,255,.86);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(24,35,52,.07);
}
.home-editorial .contact-cta-section .request-form--editorial .request-submit {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: linear-gradient(145deg,#050505,#252525);
  box-shadow: 0 12px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform 480ms var(--motion-fluid, cubic-bezier(.16,1,.3,1)), box-shadow 420ms ease;
}
.home-editorial .contact-cta-section .request-form--editorial .request-submit:hover:not(:disabled),
.home-editorial .contact-cta-section .request-form--editorial .request-submit:focus-visible { transform: translateY(-2px); background: linear-gradient(145deg,#111,#333); box-shadow: 0 18px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.2); }

@media (hover: hover) {
  .editorial-service:hover,
  .editorial-project:hover { transform: translateY(-7px); }
  .editorial-service:hover .editorial-service__media,
  .editorial-project:hover .editorial-project__media { border-color: rgba(255,255,255,.95); box-shadow: 0 30px 72px rgba(11,11,11,.14), inset 0 1px 0 #fff; }
  .editorial-service:hover .editorial-service__media::before,
  .editorial-project:hover .editorial-project__media::before { transform: translateX(78%); }
  .editorial-service:hover .editorial-service__media img,
  .editorial-project:hover .editorial-project__media img { transform: scale(1.045); }
  .editorial-service:hover .editorial-service__copy h3,
  .editorial-project:hover .editorial-project__copy h3 { letter-spacing: -.047em; transform: translateX(4px); }
  .editorial-service:hover .editorial-arrow-link,
  .editorial-project:hover .editorial-arrow-link { background: #0b0b0b; color: #fff; transform: translate(2px,-2px) rotate(4deg); box-shadow: 0 10px 22px rgba(0,0,0,.15); }
  .editorial-approach li:hover { z-index: 1; background: rgba(255,255,255,.78); transform: translateY(-6px); box-shadow: inset 0 1px 0 #fff, 0 22px 48px rgba(35,48,68,.1); }
}

@media (max-width: 760px) {
  .editorial-service__media,
  .editorial-project__media { border-radius: 18px; }
  .editorial-approach ol { gap: 8px; }
  .editorial-approach li,
  .editorial-approach li + li { min-height: 64px; border-bottom: 1px solid rgba(255,255,255,.72); border-radius: 16px; padding: 14px 16px; }
  .home-editorial .contact-cta-section .request-form--editorial { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-section-heading::after,
  .editorial-service,
  .editorial-project,
  .editorial-service__media,
  .editorial-project__media,
  .editorial-service__media::before,
  .editorial-project__media::before,
  .editorial-service__media img,
  .editorial-project__media img,
  .editorial-service__copy,
  .editorial-project__copy,
  .editorial-service__copy h3,
  .editorial-project__copy h3,
  .editorial-arrow-link,
  .editorial-index-link,
  .editorial-approach li,
  .home-editorial .contact-cta-section .request-form--editorial .request-form-service-select,
  .home-editorial .contact-cta-section .request-form--editorial .request-form-quick-grid label,
  .home-editorial .contact-cta-section .request-form--editorial .request-submit { transition: none; }
}

/* Homepage v5 — a purpose-built phone experience, not a shrunken desktop. */
.mobile-home-dock { display: none; }

@media (max-width: 760px) {
  html { scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 86px); }

  .home-editorial {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    background: #f5f6f8;
  }

  .home-editorial .page-shell { width: calc(100% - 24px); }

  .mobile-home-dock {
    position: fixed;
    z-index: 900;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    left: 12px;
    display: grid;
    height: 66px;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 24px;
    padding: 5px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 20px 54px rgba(9,9,9,.18), inset 0 1px 0 #fff;
    grid-template-columns: repeat(4,minmax(0,1fr));
    backdrop-filter: blur(30px) saturate(1.35);
    -webkit-backdrop-filter: blur(30px) saturate(1.35);
  }

  .mobile-home-dock a {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    border-radius: 18px;
    color: #717171;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-home-dock a:active { background: rgba(9,9,9,.06); transform: scale(.96); }
  .mobile-home-dock a span { display: grid; width: 25px; height: 25px; place-items: center; font-size: 18px; line-height: 1; }
  .mobile-home-dock a small { overflow: hidden; max-width: 100%; font-size: 8px; font-weight: 610; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-home-dock a.is-active { background: #0a0a0a; color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.16); }

  .editorial-services,
  .editorial-projects { padding: 56px 0 66px; }

  .editorial-section-heading { display: block; border: 0; padding-top: 0; }
  .editorial-section-heading::after { display: none; }
  .editorial-section-heading > p {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    margin: 0 0 20px;
    border: 1px solid rgba(9,9,9,.09);
    border-radius: 999px;
    padding: 0 11px;
    background: rgba(255,255,255,.66);
    box-shadow: inset 0 1px 0 #fff;
    font-size: 8px;
  }
  .editorial-section-heading > div { display: block; margin: 0; }
  .editorial-section-heading h2 { max-width: 10ch; font-size: clamp(34px,10.3vw,43px); letter-spacing: -.062em; line-height: .95; }
  .editorial-section-heading > div > span { max-width: 31ch; margin-top: 16px; font-size: 12px; line-height: 1.5; }

  .editorial-services__grid,
  .editorial-projects__grid {
    width: calc(100% + 12px);
    gap: 10px;
    margin-top: 32px;
    margin-right: -12px;
    padding: 2px 12px 18px 0;
    grid-auto-columns: min(84vw,340px);
    scroll-padding-inline: 0 12px;
  }

  .editorial-service,
  .editorial-project {
    overflow: hidden;
    border: 1px solid rgba(9,9,9,.08);
    border-radius: 28px;
    padding: 7px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 16px 42px rgba(23,31,45,.09), inset 0 1px 0 #fff;
  }

  .editorial-service:active,
  .editorial-project:active { transform: scale(.985); }

  .editorial-service__media,
  .editorial-project__media { border: 0; border-radius: 22px; box-shadow: none; }
  .editorial-service__media > span { top: 10px; left: 10px; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; }

  .editorial-service__copy,
  .editorial-project__copy {
    gap: 5px 12px;
    border: 0;
    margin-top: 0;
    padding: 15px 10px 11px;
  }
  .editorial-service__copy > p,
  .editorial-project__copy > p { margin-bottom: 8px; font-size: 7px; }
  .editorial-service__copy h3,
  .editorial-project__copy h3 { font-size: 26px; }
  .editorial-service__copy > span,
  .editorial-project__copy > span { margin-top: 7px; font-size: 11px; line-height: 1.45; }
  .editorial-arrow-link { align-self: center; border: 1px solid rgba(9,9,9,.09); background: rgba(255,255,255,.7); }

  .editorial-index-link {
    min-height: 52px;
    align-items: center;
    margin-top: 28px;
    border: 1px solid rgba(9,9,9,.1);
    border-radius: 18px;
    padding: 0 16px;
    background: rgba(255,255,255,.62);
    box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(9,9,9,.05);
    font-size: 13px;
  }

  .editorial-approach { background: linear-gradient(155deg,#e9eef5,#f4f2f7); }
  .editorial-approach__shell { display: block; padding-top: 54px; padding-bottom: 58px; }
  .editorial-approach__shell > p {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    border-radius: 999px;
    padding: 0 11px;
    background: rgba(255,255,255,.58);
    box-shadow: inset 0 1px 0 #fff;
    font-size: 8px;
  }
  .editorial-approach h2 { max-width: 10ch; margin: 21px 0 30px; font-size: 38px; letter-spacing: -.06em; line-height: .96; }
  .editorial-approach ol { display: grid; gap: 8px; border: 0; grid-template-columns: 1fr; }
  .editorial-approach li,
  .editorial-approach li + li {
    position: relative;
    display: flex;
    min-height: 66px;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 20px;
    padding: 10px 48px 10px 12px;
    background: rgba(255,255,255,.56);
    box-shadow: 0 12px 30px rgba(24,35,52,.06), inset 0 1px 0 #fff;
    font-size: 13px;
  }
  .editorial-approach li::after { position: absolute; right: 17px; content: "→"; color: rgba(9,9,9,.48); font-size: 17px; }
  .editorial-approach li span { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 13px; background: #0a0a0a; color: #fff; font-size: 9px; }

  .editorial-projects { background: #0b0b0c; color: #fff; }
  .editorial-projects::before { opacity: .85; background: radial-gradient(circle,rgba(98,115,159,.52),rgba(26,29,39,.18) 46%,transparent 70%); }
  .editorial-section-heading--dark > p { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.08); color: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
  .editorial-section-heading--dark h2 { color: #fff; }
  .editorial-project { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.075); box-shadow: 0 20px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12); }
  .editorial-project__copy > p,
  .editorial-project__copy > span { color: rgba(255,255,255,.58); }
  .editorial-project__copy h3,
  .editorial-project__copy h3 a { color: #fff; }
  .editorial-project .editorial-arrow-link { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.09); color: #fff; }
  .editorial-index-link--dark { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }

  .home-editorial .contact-cta-section { padding-block: 56px 62px; background: #f2f4f7; }
  .home-editorial .contact-cta-panel { display: block; border: 0; padding: 0; }
  .home-editorial .contact-cta-heading h2 { max-width: 7ch; font-size: 42px; letter-spacing: -.065em; }
  .home-editorial .contact-cta-form-stage { margin-top: 26px; }
  .home-editorial .contact-cta-section .request-form--editorial { border-radius: 28px; padding: 20px 15px 16px; background: rgba(255,255,255,.74); box-shadow: 0 20px 52px rgba(24,35,52,.1), inset 0 1px 0 #fff; }
  .home-editorial .contact-cta-section .request-form--editorial .request-form-title { max-width: 10ch; font-size: 31px; letter-spacing: -.055em; }
  .home-editorial .contact-cta-section .request-form--editorial .request-form-service-select,
  .home-editorial .contact-cta-section .request-form--editorial .request-form-quick-grid label { min-height: 64px; border-radius: 18px; background: rgba(255,255,255,.82); }
  .home-editorial .contact-cta-section .request-form--editorial .request-submit { min-height: 54px; border-radius: 18px; }
  .home-editorial .contact-cta-meta { display: grid; gap: 8px; margin-top: 18px; }
  .home-editorial .contact-cta-meta span { border-radius: 13px; padding: 11px 12px; background: rgba(255,255,255,.58); }

  .home-editorial > footer {
    width: calc(100% - 20px);
    margin: 0 10px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 30px;
    background: radial-gradient(circle at 90% 8%,rgba(73,91,131,.56),transparent 30%),#0b0b0c;
    color: #fff;
    box-shadow: 0 24px 60px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .home-editorial > footer h2,
  .home-editorial > footer a { color: #fff; }
  .home-editorial > footer p,
  .home-editorial > footer span { color: rgba(255,255,255,.64); }
  .home-editorial > footer nav { border-radius: 20px; padding: 14px; background: rgba(255,255,255,.055); }
}

@media (max-width: 370px) {
  .mobile-home-dock { right: 8px; left: 8px; }
  .mobile-home-dock a small { font-size: 7px; }
  .editorial-services__grid,
  .editorial-projects__grid { grid-auto-columns: 88vw; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-home-dock a,
  .editorial-service,
  .editorial-project { transition: none; }
  html { scroll-behavior: auto; }
}

/* Homepage v6 — a four-stage product journey inspired by modern AI product systems. */
.editorial-approach {
  background:
    radial-gradient(circle at 72% 18%,rgba(83,112,160,.22),transparent 29%),
    radial-gradient(circle at 94% 88%,rgba(125,94,145,.16),transparent 30%),
    #090a0c;
  color: #fff;
}

.editorial-approach::before {
  top: -38%;
  right: -16%;
  width: min(72vw,980px);
  background: radial-gradient(circle,rgba(127,158,207,.18),rgba(45,52,66,.06) 48%,transparent 72%);
}

.editorial-approach__shell {
  display: grid;
  gap: clamp(48px,8vw,126px);
  padding-block: clamp(86px,10vw,144px);
  grid-template-columns: minmax(240px,.72fr) minmax(0,1.55fr);
}

.editorial-approach__intro > p {
  margin: 0 0 30px;
  color: rgba(255,255,255,.5);
  font-size: 9px;
  font-weight: 680;
  letter-spacing: .12em;
}

.editorial-approach__intro h2 {
  max-width: 9ch;
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(46px,5vw,78px);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .94;
}

.editorial-approach__journey { min-width: 0; }

.editorial-approach__signal {
  position: relative;
  height: clamp(190px,20vw,250px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 34px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.025) 42%,rgba(89,113,153,.1)),
    rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 80px rgba(0,0,0,.28);
  isolation: isolate;
}

.editorial-approach__signal::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size: 38px 38px;
  content: "";
  mask-image: linear-gradient(to bottom,rgba(0,0,0,.8),transparent 82%);
  -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0,.8),transparent 82%);
}

.editorial-approach__signal::after {
  position: absolute;
  top: 50%;
  left: 12%;
  width: 16%;
  height: 2px;
  background: linear-gradient(90deg,transparent,#9fc5ff,transparent);
  box-shadow: 0 0 24px rgba(118,169,255,.72);
  content: "";
  animation: approachScan 4.8s ease-in-out infinite;
}

.editorial-approach__signal-core {
  position: absolute;
  top: 50%;
  right: 10%;
  left: 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(-50%);
}

.editorial-approach__signal-core::before {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg,rgba(255,255,255,.16),rgba(156,193,255,.84),rgba(255,255,255,.16));
  box-shadow: 0 0 26px rgba(93,141,224,.32);
  content: "";
}

.editorial-approach__signal-core i {
  position: relative;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: #0a0b0d;
  box-shadow: 0 0 0 7px rgba(255,255,255,.035), 0 0 24px rgba(124,170,255,.3);
}

.editorial-approach__signal-core i::after {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #dce9ff;
  box-shadow: 0 0 12px #8ab4ff;
  content: "";
}

.editorial-approach__signal > span,
.editorial-approach__signal > b {
  position: absolute;
  bottom: 22px;
  color: rgba(255,255,255,.45);
  font-size: 8px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: .13em;
}

.editorial-approach__signal > span { left: 24px; }
.editorial-approach__signal > b { right: 24px; color: rgba(255,255,255,.78); }

.editorial-approach ol {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  border: 0;
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.editorial-approach li,
.editorial-approach li + li {
  position: relative;
  display: grid;
  min-height: 164px;
  align-items: start;
  gap: 17px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 26px;
  padding: 22px;
  background: rgba(255,255,255,.045);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  grid-template-columns: 40px minmax(0,1fr) 20px;
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}

.editorial-approach li::after { content: none; }

.editorial-approach li > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  font-size: 9px;
}

.editorial-approach li h3 {
  max-width: 16ch;
  margin: 1px 0 10px;
  color: #fff;
  font-size: clamp(18px,1.55vw,24px);
  font-weight: 520;
  letter-spacing: -.035em;
  line-height: 1.06;
}

.editorial-approach li p {
  max-width: 38ch;
  margin: 0;
  color: rgba(255,255,255,.5);
  font-size: 10px;
  line-height: 1.55;
}

.editorial-approach li > i {
  color: rgba(255,255,255,.46);
  font-size: 16px;
  font-style: normal;
  transition: color 320ms ease, transform 480ms var(--motion-fluid, cubic-bezier(.16,1,.3,1));
}

@media (hover: hover) {
  .editorial-approach li:hover {
    z-index: 1;
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.09);
    transform: translateY(-5px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 54px rgba(0,0,0,.22);
  }
  .editorial-approach li:hover > i { color: #fff; transform: translate(3px,-3px); }
}

@media (max-width: 760px) {
  .home-editorial .editorial-approach {
    width: calc(100% - 16px);
    margin: 8px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 34px;
    background:
      radial-gradient(circle at 88% 8%,rgba(83,112,160,.28),transparent 31%),
      #090a0c;
    box-shadow: 0 24px 64px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
  }

  .editorial-approach__shell {
    display: block;
    padding-top: 52px;
    padding-bottom: 58px;
  }

  .editorial-approach__intro > p {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    margin: 0;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    padding: 0 11px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    font-size: 8px;
  }

  .editorial-approach__intro h2 {
    max-width: 9ch;
    margin: 22px 0 30px;
    font-size: 40px;
    letter-spacing: -.065em;
    line-height: .94;
  }

  .editorial-approach__signal { height: 164px; border-radius: 24px; }
  .editorial-approach__signal-core { right: 12%; left: 12%; }
  .editorial-approach__signal-core i { width: 14px; height: 14px; }
  .editorial-approach__signal-core i::after { inset: 3px; }
  .editorial-approach__signal > span { bottom: 18px; left: 18px; max-width: 25ch; font-size: 6px; line-height: 1.5; }
  .editorial-approach__signal > b { right: 18px; bottom: 18px; font-size: 7px; }

  .editorial-approach ol { gap: 8px; margin-top: 8px; grid-template-columns: 1fr; }
  .editorial-approach li,
  .editorial-approach li + li {
    min-height: 126px;
    gap: 13px;
    border-color: rgba(255,255,255,.1);
    border-radius: 22px;
    padding: 18px;
    background: rgba(255,255,255,.055);
    color: #fff;
    grid-template-columns: 36px minmax(0,1fr) 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }
  .editorial-approach li > span { width: 36px; height: 36px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.72); }
  .editorial-approach li h3 { max-width: 18ch; margin-top: 0; font-size: 21px; }
  .editorial-approach li p { font-size: 9.5px; }
}

@keyframes approachScan {
  0%,100% { opacity: .12; transform: translateX(-10%); }
  50% { opacity: 1; transform: translateX(390%); }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-approach__signal::after { animation: none; }
  .editorial-approach li,
  .editorial-approach li > i { transition: none; }
}