@font-face {
  font-family: "AGF Inter";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f7f5f1;
  --sky: #d9eef3;
  --mint: #dcefdc;
  --violet: #e7dbf1;
  --butter: #f3e5a8;
  --ink: #050a11;
  --edge: rgba(5, 10, 17, 0.88);
  --glint: rgba(64, 213, 223, 0.24);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  background: var(--paper);
  font-family: "AGF Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

.site-header {
  position: fixed;
  top: clamp(0.85rem, 2.6svh, 1.75rem);
  right: clamp(1rem, 3vw, 3rem);
  left: clamp(1rem, 3vw, 3rem);
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 2.6vw, 2.8rem);
  align-items: center;
  min-height: 4.45rem;
  padding: 0.65rem 0.85rem 0.65rem 1.2rem;
  border: 1px solid rgba(5, 10, 17, 0.14);
  border-radius: 1rem;
  color: #050a11;
  background: var(--paper, #f7f5f1);
  box-shadow: 0 0.65rem 1.7rem rgba(5, 10, 17, 0.1);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  pointer-events: auto;
}

.site-header.is-scrolled {
  border-color: rgba(5, 10, 17, 0.14);
  background: var(--paper, #f7f5f1);
  box-shadow: 0 0.65rem 1.7rem rgba(5, 10, 17, 0.1);
  backdrop-filter: none;
}

.site-brand {
  color: inherit;
  font-size: clamp(0.88rem, 1vw, 1rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
}

.global-nav {
  display: flex;
  gap: clamp(0.95rem, 1.7vw, 1.8rem);
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.nav-family {
  position: relative;
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.nav-family .nav-link,
.nav-link--direct {
  position: relative;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  color: inherit;
  font-size: clamp(0.84rem, 0.92vw, 0.96rem);
  font-weight: 680;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}

.nav-family .nav-link::after,
.nav-link--direct::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.38rem;
  left: 0;
  height: 1px;
  border-radius: 999px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.nav-link--direct { padding: 0.65rem 0.12rem; }

.nav-family:hover .nav-link::after,
.nav-family:focus-within .nav-link::after,
.nav-link--direct:hover::after,
.nav-link--direct:focus-visible::after {
  transform: scaleX(1);
}

.nav-toggle,
.mobile-menu-toggle {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.nav-toggle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: rgba(7, 16, 28, 0.08);
}

.nav-toggle svg {
  width: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
  transition: transform 180ms ease;
}

.nav-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.site-header__cta,
.mega-menu__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.15rem;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  color: #fff;
  background: #07101c;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, transform 160ms ease;
}

.site-header__cta:hover,
.site-header__cta:focus-visible,
.mega-menu__cta:hover,
.mega-menu__cta:focus-visible {
  background: #0a5cff;
  transform: translateY(-1px);
}

.mobile-menu-toggle {
  display: none;
  grid-template-columns: auto 1.1rem;
  gap: 0.5rem;
  align-items: center;
  min-height: 3.15rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible {
  background: rgba(7, 16, 28, 0.08);
}

.mobile-menu-toggle svg {
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.mega-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(6, 12, 21, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  backdrop-filter: blur(4px);
}

.mega-menu {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 71;
  min-height: min(72svh, 40rem);
  color: #07101c;
  background: #fff;
  box-shadow: 0 28px 80px rgba(5, 15, 28, 0.25);
  opacity: 0;
  transform: translateY(calc(-100% - 1rem));
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

body.menu-open {
  overflow: hidden;
}

body.menu-open .mega-menu,
body.menu-open .mega-menu-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open .mega-menu {
  transform: translateY(0);
}

.mega-menu__header {
  display: grid;
  grid-template-columns: minmax(11rem, 0.75fr) minmax(30rem, 2.8fr) auto;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
  min-height: 5.1rem;
  padding: 0 3.5vw;
  border-bottom: 1px solid #e3e6eb;
}

.mega-menu__brand {
  color: inherit;
  font-size: clamp(0.82rem, 1vw, 0.96rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
}

.mega-menu__brand span {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mega-menu__tabs {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  align-self: stretch;
}

.mega-menu__tabs a,
.mega-menu__tabs button,
.mega-menu__close {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.mega-menu__tabs a,
.mega-menu__tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 0.15rem;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

.mega-menu__tabs a::after,
.mega-menu__tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: #0a5cff;
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.mega-menu__tabs a.is-current,
.mega-menu__tabs button.is-current {
  font-weight: 750;
}

.mega-menu__tabs a.is-current::after,
.mega-menu__tabs button.is-current::after {
  transform: scaleX(1);
}

.mega-menu__actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.mega-menu__mobile-links {
  display: none;
}

.mega-menu__mobile-directory {
  display: none;
}

.mega-menu__about {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.mega-menu__about:hover,
.mega-menu__about:focus-visible {
  color: #0a5cff;
}

.mega-menu__cta {
  min-height: 2.45rem;
  padding: 0.55rem 0.85rem;
}

.mega-menu__close {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.6rem 0.8rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.mega-menu__close span {
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 0.6;
}

.mega-menu__body {
  display: grid;
  grid-template-columns: minmax(16rem, 0.92fr) minmax(32rem, 2.1fr) minmax(15rem, 0.75fr);
  min-height: calc(min(72svh, 40rem) - 5.1rem);
}

.mega-menu__intro,
.mega-menu__columns,
.mega-menu__feature {
  padding: clamp(2rem, 4vw, 4rem) 3.5vw;
}

.mega-menu__intro {
  border-right: 1px solid #e8eaee;
}

.mega-menu__intro > p:first-child,
.mega-menu__feature > p,
.mega-menu__column > p {
  margin: 0 0 1.15rem;
  color: #607084;
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mega-menu__intro [data-menu-title] {
  max-width: 16ch;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 2.15vw, 2.65rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.mega-menu__intro > p:nth-of-type(2) {
  max-width: 30ch;
  color: #526277;
  font-size: 0.92rem;
  line-height: 1.55;
}

.mega-menu__overview-links {
  margin-top: 1.25rem;
}

.mega-menu__overview-link {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.7rem 1.05rem;
  border-radius: 999px;
  color: #fff;
  background: #0a5cff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: background-color 160ms ease, transform 180ms ease;
}

.mega-menu__overview-link:hover,
.mega-menu__overview-link:focus-visible {
  background: #004fe0;
  transform: translateY(-0.1rem);
}

.mega-menu__overview-link[hidden] {
  display: none;
}

.mega-menu__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
}

.mega-menu__column {
  min-width: 0;
}

.mega-menu__link {
  display: block;
  width: 100%;
  margin: 0 0 1.6rem;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  text-decoration: none;
  transition: color 160ms ease, transform 200ms ease;
}

a.mega-menu__link:hover,
a.mega-menu__link:focus-visible {
  color: #0a5cff;
  transform: translateX(0.25rem);
}

a.mega-menu__link {
  position: relative;
  padding-right: 2rem;
  cursor: pointer;
}

a.mega-menu__link::after {
  position: absolute;
  top: 0.1rem;
  right: 0.15rem;
  color: #0a5cff;
  content: "↗";
  font-size: 1rem;
  opacity: 0;
  transform: translate(-0.25rem, 0.25rem);
  transition: opacity 160ms ease, transform 200ms ease;
}

a.mega-menu__link:hover::after,
a.mega-menu__link:focus-visible::after {
  opacity: 1;
  transform: translate(0, 0);
}

.mega-menu__link strong,
.mega-menu__feature-link strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.98rem;
}

.mega-menu__link span,
.mega-menu__feature-link span {
  display: block;
  color: #59697b;
  font-size: 0.82rem;
  line-height: 1.45;
}

.mega-menu__feature {
  background: #f1f4ff;
}

.mega-menu__feature-links {
  display: grid;
  gap: 1.65rem;
  margin-top: 2.25rem;
}

.mega-menu__feature-link {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease, transform 180ms ease;
}

.mega-menu__feature-link:hover,
.mega-menu__feature-link:focus-visible {
  color: #0a5cff;
  transform: translateX(0.2rem);
}

.mega-menu__feature-link span {
  max-width: 25ch;
}

@media (min-width: 1051px) {
  .mega-menu[data-menu-section="1"] .mega-menu__body {
    grid-template-columns: minmax(42rem, 1.45fr) minmax(27rem, 1.55fr) minmax(15rem, 0.75fr);
  }

  .mega-menu[data-menu-section="1"] .mega-menu__intro {
    padding-right: 2vw;
  }

  .mega-menu[data-menu-section="1"] .mega-menu__intro [data-menu-title] {
    max-width: 29ch;
  }

  .mega-menu[data-menu-section="1"] .mega-menu__intro > p:nth-of-type(2) {
    max-width: 42ch;
  }

  .mega-menu[data-menu-section="0"] .mega-menu__intro,
  .mega-menu[data-menu-section="2"] .mega-menu__intro {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .mega-menu[data-menu-section="1"] .mega-menu__feature {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .mega-menu[data-menu-section="1"] .mega-menu__feature-links {
    gap: 1rem;
    margin-top: 1.25rem;
  }
}

@media (max-width: 1050px) {
  .site-header {
    top: 0.8rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.45rem;
    min-height: 4.1rem;
    padding: 0.5rem 0.65rem 0.5rem 0.9rem;
    border-color: rgba(5, 10, 17, 0.14);
    background: var(--paper, #f7f5f1);
    box-shadow: 0 0.55rem 1.45rem rgba(5, 10, 17, 0.1);
    backdrop-filter: none;
  }

  .global-nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: inline-grid;
  }

  .mega-menu {
    height: 100svh;
    min-height: 0;
    overflow-y: auto;
  }

  .mega-menu__header {
    position: sticky;
    top: 0;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    min-height: auto;
    padding: 1rem 1.1rem 0;
    background: #fff;
  }

  .mega-menu__brand {
    font-size: 0.86rem;
  }

  .mega-menu__tabs {
    grid-column: 1 / -1;
    gap: 1.25rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mega-menu__mobile-links {
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 1.25rem;
    border-bottom: 1px solid #e8eaee;
    background: #f7f5f1;
  }

  .mega-menu__mobile-links a {
    color: #07101c;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
  }

  .mega-menu__mobile-links a:last-child {
    color: #0a5cff;
  }

  .mega-menu__tabs::-webkit-scrollbar {
    display: none;
  }

  .mega-menu__tabs a,
  .mega-menu__tabs button {
    flex: 0 0 auto;
    min-height: 3rem;
  }

  .mega-menu__actions {
    justify-content: flex-end;
  }

  .mega-menu__body {
    display: block;
    min-height: 0;
  }

  .mega-menu__intro,
  .mega-menu__columns,
  .mega-menu__feature {
    padding: 2rem 1.25rem;
  }

  .mega-menu__intro {
    border-right: 0;
    border-bottom: 1px solid #e8eaee;
  }

  .mega-menu__intro [data-menu-title] {
    max-width: 13ch;
  }

  .mega-menu__columns {
    gap: 1.5rem;
  }

  .mega-menu__feature-links {
    margin-top: 1.25rem;
  }
}

.home-ai-solutions--desktop {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 5vw, 6rem);
  background: #e8daf0;
}

.scroll-scene {
  position: relative;
  height: 300svh;
  background: var(--paper);
}

.home-testimonials {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 6rem) clamp(5rem, 9vw, 8rem);
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.7), transparent 22rem),
    linear-gradient(135deg, #e7dbf1 0%, #d9eef3 100%);
}

.home-testimonials::after {
  position: absolute;
  right: -12rem;
  bottom: -15rem;
  width: 38rem;
  height: 38rem;
  border: 1px solid rgba(10, 92, 255, 0.22);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.home-testimonials__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(15rem, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(3rem, 8vw, 8rem);
  max-width: 84rem;
  margin: 0 auto;
}

.home-testimonials__lead {
  align-self: start;
  max-width: 32rem;
}

.home-testimonials__lead h2 {
  max-width: 7ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(3rem, 6vw, 6.3rem);
  font-weight: 820;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.home-testimonials__headline {
  max-width: 17ch;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.home-testimonials__intro {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  color: rgba(5, 10, 17, 0.76);
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  line-height: 1.6;
}

.home-testimonials__link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 820;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
  transition: color 160ms ease, gap 160ms ease;
}

.home-testimonials__link svg {
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.home-testimonials__link:hover,
.home-testimonials__link:focus-visible {
  gap: 0.95rem;
  color: var(--canopy-blue-dark, #0647c8);
}

.home-testimonials__questions {
  align-self: center;
  border-top: 1px solid rgba(5, 10, 17, 0.3);
}

.home-testimonials__question {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.27fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding: clamp(1.6rem, 3vw, 2.65rem) 0;
  border-bottom: 1px solid rgba(5, 10, 17, 0.3);
}

.home-testimonials__question--before {
  border-top: 0.38rem solid var(--canopy-blue, #0a5cff);
}

.home-testimonials__question--shift {
  border-top: 0.38rem solid #3e8f66;
}

.home-testimonials__question--after {
  border-top: 0.38rem solid #bb9419;
}

.home-testimonials__label {
  padding-top: 0.15rem;
  color: rgba(5, 10, 17, 0.6);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-testimonials__question h3 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(1.35rem, 2.3vw, 2.2rem);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.home-testimonials__question p {
  max-width: 42rem;
  margin: 0.75rem 0 0;
  color: rgba(5, 10, 17, 0.74);
  font-size: 0.95rem;
  line-height: 1.55;
}

.home-testimonials__standard {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(9rem, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-top: 1.3rem;
}

.home-testimonials__standard strong {
  font-size: 0.75rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-testimonials__standard p {
  max-width: 45rem;
  margin: 0;
  color: rgba(5, 10, 17, 0.68);
  font-size: 0.88rem;
  line-height: 1.55;
}

.sticky-stage {
  --canopy-edge-opacity: 1;
  --white-edge-opacity: 1;
  --blue-edge-opacity: 0;
  --green-edge-opacity: 0;
  --purple-edge-opacity: 0;
  --yellow-edge-opacity: 0;
  --hero-opacity: 1;
  --white-lock-opacity: 0;
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
  background: var(--paper);
}

.mobile-canopy-journey {
  display: none;
}

.mobile-home {
  display: none;
}

.home-hero-copy {
  position: absolute;
  z-index: 1;
  top: 22%;
  left: 8%;
  width: 84%;
  max-width: 1200px;
  will-change: transform;
}
.home-hero-heading {
  margin: 0;
  color: #09111a;
  font-size: clamp(30px, 4.3vw, 76px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.home-hero-subtext {
  max-width: 65ch;
  margin: 28px 0 0;
  color: #3f5874;
  font-size: clamp(17px, 1.5vw, 24px);
  font-weight: 400;
  line-height: 1.55;
}

.human-handoff-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  margin-top: 0.9em;
  padding: 0.7em 0 0.15em;
  border-top: 1px solid #8aa99a;
  color: #173e32;
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: none;
  pointer-events: auto;
}
.human-handoff-link svg { width: 1.1em; height: 1.1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform 180ms ease; }
.human-handoff-link:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.human-handoff-link:hover svg { transform: translateX(3px); }
.human-handoff-link:focus-visible { outline: 2px solid #173e32; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .human-handoff-link svg { transition: none; } .human-handoff-link:hover svg { transform: none; } }

.hero-word-reveal > span {
  display: inline-block;
  animation: hero-word-arrive 1200ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--word-delay);
}
@keyframes hero-word-arrive {
  from { opacity: 0; transform: translateY(0.08em); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-word-reveal > span { animation: none; }
}

/* The navigation remains a high-contrast control surface over every page. */
.site-header,
.site-header.is-scrolled {
  min-height: 4.45rem !important;
  border-color: rgba(5, 10, 17, 0.14) !important;
  color: #050a11 !important;
  background: #f7f5f1 !important;
  box-shadow: 0 0.65rem 1.7rem rgba(5, 10, 17, 0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header :is(.site-brand, .nav-link, .nav-toggle, .mobile-menu-toggle) {
  color: #050a11 !important;
}

.site-header__cta {
  min-height: 3.15rem !important;
  padding: 0.8rem 1.2rem !important;
  font-size: 0.9rem !important;
}

.nav-family .nav-link,
.nav-link--direct {
  font-size: clamp(0.84rem, 0.92vw, 0.96rem) !important;
}

.nav-toggle {
  width: 2.5rem !important;
  height: 2.5rem !important;
}

@media (max-width: 1050px) {
  .site-header,
  .site-header.is-scrolled {
    min-height: 4.1rem !important;
  }

  .site-header__cta,
  .mobile-menu-toggle {
    min-height: 3rem !important;
  }
}

@media (max-width: 640px) {
  .site-header,
  .site-header.is-scrolled {
    min-height: 3.85rem !important;
  }

  .site-brand { font-size: clamp(0.72rem, 3.4vw, 0.84rem) !important; }

  .site-header__cta {
    min-height: 2.8rem !important;
    padding: 0.65rem 0.8rem !important;
    font-size: 0.76rem !important;
  }

  .mobile-menu-toggle {
    width: 2.8rem !important;
    min-width: 44px !important;
    min-height: 2.8rem !important;
  }
}

@media (max-width: 370px) {
  .site-header {
    padding-right: 0.5rem !important;
    padding-left: 0.7rem !important;
  }

  .site-brand { font-size: 0.68rem !important; }

  .site-header__cta {
    padding-right: 0.65rem !important;
    padding-left: 0.65rem !important;
    font-size: 0.7rem !important;
  }

  .mobile-menu-toggle {
    width: 2.75rem !important;
    min-width: 44px !important;
  }
}

/* Keep the shared navigation surface legible over every page palette. */
@media (max-width: 1050px) {
  .site-header,
  .site-header.is-scrolled {
    background: #f7f5f1 !important;
    border-color: rgba(5, 10, 17, 0.14) !important;
    box-shadow: 0 0.55rem 1.45rem rgba(5, 10, 17, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

.hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--hero-opacity);
  background:
    radial-gradient(ellipse 58% 42% at 50% 102%, rgba(0, 116, 132, 0.66) 0%, rgba(0, 75, 89, 0.3) 24%, transparent 68%),
    radial-gradient(ellipse 74% 70% at 50% 20%, rgba(20, 35, 48, 0.64) 0%, transparent 66%),
    linear-gradient(118deg, #05080e 0%, #09111a 45%, #02050a 100%);
  transition: opacity 80ms linear;
}

/* The site now opens directly on the white canvas and blue arrival. */
.hero-field,
.canopy-pressure-glow,
.surface.surface--canopy,
.rising-sheet--white,
.white-lock-wash {
  display: none;
}

.hero-field::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.22;
  background:
    radial-gradient(circle at 22% 16%, rgba(255, 255, 255, 0.035), transparent 26%),
    radial-gradient(circle at 76% 38%, rgba(255, 255, 255, 0.022), transparent 30%);
  mix-blend-mode: screen;
}

/* A quiet, image-free hero: a static curved plane stays behind the blue sheet,
   so the existing scroll transition physically covers the entire hero. */
.hero-curved-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--paper);
  pointer-events: none;
}

.hero-curved-light__surface,
.hero-curved-light__rim {
  position: absolute;
  display: block;
  pointer-events: none;
}

.hero-curved-light__surface {
  right: -9vw;
  bottom: -37svh;
  width: min(104vw, 104rem);
  height: 69svh;
  border-radius: 54% 46% 0 0 / 72% 58% 0 0;
  background: linear-gradient(164deg, rgba(255, 255, 255, 0.76), rgba(216, 237, 248, 0.68) 48%, rgba(188, 224, 244, 0.9));
  box-shadow:
    inset 0 2px 0 rgba(33, 114, 255, 0.4),
    0 -2.8rem 6rem rgba(39, 109, 176, 0.07);
  transform-origin: 70% 100%;
}

.hero-curved-light__rim {
  right: -5vw;
  bottom: -9svh;
  width: min(88vw, 88rem);
  height: 35svh;
  border-top: 1.5px solid rgba(31, 101, 220, 0.6);
  border-radius: 52% 44% 0 0 / 88% 72% 0 0;
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.92),
    0 -1rem 2.4rem rgba(65, 151, 219, 0.1);
}

.canopy-pressure-glow {
  --glow-x: 50%;
  --glow-y: 8rem;
  position: absolute;
  z-index: 2;
  top: var(--glow-y);
  left: var(--glow-x);
  width: clamp(90px, 12vw, 170px);
  height: clamp(48px, 7vw, 94px);
  border-radius: 50%;
  opacity: var(--canopy-pressure-opacity, 0);
  background: radial-gradient(ellipse, rgba(58, 213, 224, 0.25), rgba(23, 142, 159, 0.08) 42%, transparent 72%);
  filter: blur(8px);
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
  pointer-events: none;
}

.surface,
.rising-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.surface {
  display: block;
  overflow: visible;
}

.surface--canopy {
  z-index: 3;
}

.rising-sheet {
  will-change: transform;
}

.rising-sheet--white {
  z-index: 4;
}

.rising-sheet--blue {
  z-index: 6;
}

.rising-sheet--green {
  z-index: 7;
}

.rising-sheet--purple {
  z-index: 9;
}

.rising-sheet--yellow {
  z-index: 10;
}

.final-blue-cover {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #c7e7f3;
  transform: translate3d(0, var(--final-blue-shift, 100svh), 0);
  will-change: transform;
  pointer-events: none;
}

/* The yellow chapter and final-blue cover are retired; keep their remaining
   decorative artifacts out of the active homepage sequence. */
.rising-sheet--yellow,
.yellow-system-board,
.panel-art--yellow,
.panel-copy[data-copy-motion="yellow"] {
  display: none !important;
}

.yellow-system-board {
  --yellow-board-shift: 0px;
  --yellow-board-opacity: 0;
  --white-yellow-fill: 0%;
  position: absolute;
  /* Full card-stage backing: it begins above every card and runs to the
     bottom edge, matching the block outlined in the reference. */
  top: 113svh;
  right: 5vw;
  left: 5vw;
  z-index: 12;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  /* Keep the white card stage running below the cards, so the yellow field
     does not reappear as a narrow strip at the transition edge. */
  height: 40svh;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: var(--yellow-board-opacity);
  transform: translate3d(0, var(--yellow-board-shift), 0);
  will-change: opacity, transform;
  pointer-events: none;
}

.yellow-system-board__panel {
  --panel-edit-x: 0vw;
  --panel-edit-y: 0svh;
  --panel-scale: 1;
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: clamp(1.2rem, 2vw, 2.4rem);
  isolation: isolate;
  transform: translate3d(var(--panel-edit-x), var(--panel-edit-y), 0) scale(var(--panel-scale));
  transform-origin: center;
  will-change: transform;
}

.yellow-system-board__panel--blue {
  padding: clamp(0.7rem, 1.35vw, 1.3rem);
  color: #fff;
  background:
    linear-gradient(145deg, #2f7ec0 0%, #1551b4 48%, #172586 100%);
}

.yellow-system-board__panel--white {
  padding: clamp(0.7rem, 1.35vw, 1.3rem);
  color: #12172b;
  background: #fff;
}

.yellow-system-board__panel--white::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: var(--white-yellow-fill);
  content: "";
  background: var(--butter);
  will-change: height;
}

.yellow-system-board__panel--sky {
  padding: clamp(0.65rem, 1.2vw, 1.15rem);
  color: #102052;
  background:
    linear-gradient(160deg, #bfe8ff, #81b9ea);
}

.yellow-system-board__eyebrow,
.yellow-system-board__panel small {
  display: block;
  font-size: clamp(0.46rem, 1.15svh, 0.68rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.yellow-system-board__panel > strong {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: clamp(0.4rem, 1svh, 0.75rem);
  font-size: clamp(0.8rem, 2.4svh, 1.45rem);
  font-weight: 720;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.yellow-system-board__orbit {
  position: absolute;
  right: -15%;
  bottom: -10%;
  width: 78%;
  aspect-ratio: 1;
  border: clamp(0.8rem, 1.7vw, 1.8rem) solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
}

.yellow-system-board__brandline {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  color: #1b5fe0;
}

.yellow-system-board__brandline span {
  font-size: clamp(1.2rem, 3.6svh, 2.35rem);
  font-weight: 850;
  letter-spacing: -0.08em;
}

.yellow-system-board__brandline small { color: #64708d; }

.yellow-system-board__chips {
  position: absolute;
  right: clamp(0.7rem, 1.35vw, 1.3rem);
  bottom: clamp(0.55rem, 1.15svh, 0.85rem);
  left: clamp(0.7rem, 1.35vw, 1.3rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.yellow-system-board__chips span {
  display: grid;
  gap: 0.3rem;
  padding: clamp(0.35rem, 0.9svh, 0.6rem);
  border: 1px solid rgba(31, 86, 203, 0.12);
  border-radius: 1rem;
  color: #778198;
  background: #f7f9ff;
  font-size: clamp(0.42rem, 0.9svh, 0.58rem);
  font-weight: 780;
  letter-spacing: 0.06em;
}

.yellow-system-board__chips b {
  color: #10182e;
  font-size: clamp(0.68rem, 1.7svh, 1rem);
  letter-spacing: -0.04em;
}

.yellow-system-board__play {
  display: grid;
  width: min(42%, 10svh);
  aspect-ratio: 1;
  margin: 2% auto 0;
  place-items: center;
  border-radius: 32% 32% 46% 46%;
  background: linear-gradient(155deg, #fff, #d9f3ff);
  box-shadow: 0 1.5rem 2rem rgba(26, 60, 118, 0.2);
}

.yellow-system-board__play span {
  width: 0;
  height: 0;
  margin-left: 0.25rem;
  border-top: 0.75rem solid transparent;
  border-bottom: 0.75rem solid transparent;
  border-left: 1.1rem solid #2673c6;
}

.yellow-system-board__panel--sky small {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  color: rgba(16, 32, 82, 0.66);
}

.panel-art-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.panel-art-stack--blue {
  /* Lift the opening page cluster so its front card settles onto the blue
     seam instead of hanging below it. The shared offset keeps all three
     pages reading as one intentional stack. Keep the cluster above the
     incoming green sheet; the later green content can still layer over it,
     and the purple sheet physically covers it at the next handoff. */
  --blue-art-lift: -54svh;
  z-index: 8;
}

.panel-art {
  --art-opacity: 0;
  --art-scale: 1;
  --art-x: 0px;
  --art-edit-x: 0px;
  --art-edit-y: 0px;
  --art-shift: 0px;
  --art-base: 0svh;
  --art-crop-top: 0%;
  --art-crop-right: 0%;
  --art-crop-bottom: 0%;
  --art-crop-left: 0%;
  position: absolute;
  inset: -1rem;
  display: grid;
  margin: 0;
  opacity: var(--art-opacity);
  transform: translate3d(
    calc(var(--art-x) + var(--art-edit-x)),
    calc(var(--art-shift) + var(--art-base) + var(--art-edit-y)),
    0
  ) scale(var(--art-scale));
  transform-origin: 50% 50%;
  clip-path: inset(
    var(--art-crop-top)
    var(--art-crop-right)
    var(--art-crop-bottom)
    var(--art-crop-left)
  );
  will-change: opacity, transform;
  pointer-events: none;
}

.panel-art--blue {
  z-index: 1;
}

.panel-art--blue {
  --art-opacity: 1;
  --art-base: -18svh;
  --art-x: -16vw;
}

.panel-art--website-builders {
  --art-base: calc(-16svh + var(--blue-art-lift));
  --art-x: 32vw;
}

.panel-art--website-wellness {
  --art-base: calc(4svh + var(--blue-art-lift));
  --art-x: 24vw;
  z-index: 2;
}

.panel-art--website-strategy {
  --art-base: calc(16svh + var(--blue-art-lift));
  --art-x: 4vw;
  z-index: 3;
}

.panel-art--purple {
  --art-base: 20svh;
  --art-x: -5vw;
  z-index: 9;
}

.panel-art--handoff-lifecycle {
  --art-base: 4svh;
  --art-x: -28vw;
}

.panel-art--handoff-agreement {
  --art-base: 31svh;
  --art-x: -30vw;
}

.panel-art--handoff-onboarding {
  --art-base: 26svh;
  --art-x: -8vw;
}

.panel-art--green {
  --art-base: -4svh;
  --art-x: 27vw;
  z-index: 8;
}

.panel-art--automation-landing {
  --art-base: 18svh;
  --art-x: -27vw;
}

.panel-art--automation-dashboard {
  --art-base: 26svh;
  --art-x: -8vw;
}

.panel-art--automation-mobile {
  --art-base: 4svh;
  --art-x: -36vw;
}

.panel-art--automation-founder-woman {
  --art-base: 18svh;
  --art-x: -30vw;
}

.panel-art--automation-founder-man {
  --art-base: 10svh;
  --art-x: -22vw;
  z-index: 7;
}

.panel-art--yellow {
  --art-base: 52svh;
  --art-x: 1vw;
  z-index: 12;
}

.panel-art--command-portrait {
  --art-base: 10svh;
  --art-x: -28vw;
}

.panel-art--command-responsive-site {
  --art-base: 38svh;
  --art-x: -10vw;
}

.panel-art--command-dashboard {
  --art-base: 17svh;
  --art-x: -8vw;
}

.panel-art--command-mobile {
  --art-base: 18svh;
  --art-x: -32vw;
}

.panel-art--command-report {
  --art-base: 18svh;
  --art-x: 8vw;
}

.panel-art--yellow-card {
  --art-base: 71svh;
}

.panel-art--yellow-card-websites { --art-x: -30vw; }
.panel-art--yellow-card-automation { --art-x: -10vw; }
.panel-art--yellow-card-insights { --art-x: 10vw; }
.panel-art--yellow-card-systems { --art-x: 30vw; }
.panel-art--yellow-card-background { z-index: 13; }
.panel-art--yellow-card-foreground { z-index: 14; }
.panel-art--yellow-card-replacement { z-index: 15; }
.panel-art--command-replacement { z-index: 15; }
.panel-art--command-replacement-desktop { z-index: 15; }
.panel-art--command-replacement-phone { z-index: 16; }
.panel-art--command-replacement-portrait { z-index: 16; }

.panel-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
}

/* The opening showcase uses three independent, editor-controlled source
   images. They share the blue panel's motion while retaining their own crop,
   position and scale controls. */
.panel-art--website-builders img,
.panel-art--website-wellness img,
.panel-art--website-strategy img {
  inset: auto;
  top: 50%;
  left: 50%;
  max-width: none;
  object-fit: cover;
  filter:
    drop-shadow(0 2.2rem 2.4rem rgba(8, 22, 31, 0.26))
    drop-shadow(0 0.5rem 0.65rem rgba(8, 22, 31, 0.18));
  transform: translate(-50%, -50%);
}

.panel-art--website-builders img {
  width: auto;
  height: 100svh;
}

.panel-art--website-wellness img {
  width: 78vw;
  height: auto;
}

.panel-art--website-strategy img {
  width: auto;
  height: 90svh;
}

.panel-art--handoff-lifecycle img,
.panel-art--handoff-agreement img,
.panel-art--handoff-onboarding img {
  inset: auto;
  top: 50%;
  left: 50%;
  max-width: none;
  object-fit: cover;
  filter:
    drop-shadow(0 2.2rem 2.4rem rgba(8, 22, 31, 0.26))
    drop-shadow(0 0.5rem 0.65rem rgba(8, 22, 31, 0.18));
  transform: translate(-50%, -50%);
}

.panel-art--handoff-lifecycle img {
  width: 90vw;
  height: auto;
}

.panel-art--handoff-agreement img {
  width: 72vw;
  height: auto;
}

.panel-art--handoff-onboarding img {
  width: auto;
  height: 88svh;
}

.panel-art--automation-landing img,
.panel-art--automation-dashboard img,
.panel-art--automation-mobile img {
  inset: auto;
  top: 50%;
  left: 50%;
  max-width: none;
  object-fit: cover;
  filter:
    drop-shadow(0 2.2rem 2.4rem rgba(8, 22, 31, 0.24))
    drop-shadow(0 0.5rem 0.65rem rgba(8, 22, 31, 0.16));
  transform: translate(-50%, -50%);
}

.panel-art--automation-landing img,
.panel-art--automation-dashboard img {
  width: 82vw;
  height: auto;
}

.panel-art--automation-mobile img {
  width: auto;
  height: 90svh;
}

.panel-art--automation-founder-woman img,
.panel-art--automation-founder-man img {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 72vw;
  height: auto;
  max-width: none;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: clamp(1.25rem, 2.2vw, 2.4rem);
  object-fit: cover;
  filter:
    drop-shadow(0 2rem 2.2rem rgba(8, 22, 31, 0.2))
    drop-shadow(0 0.4rem 0.55rem rgba(8, 22, 31, 0.14));
  transform: translate(-50%, -50%);
}

.panel-art--command-dashboard img,
.panel-art--command-mobile img,
.panel-art--command-report img {
  inset: auto;
  top: 50%;
  left: 50%;
  max-width: none;
  object-fit: cover;
  filter:
    drop-shadow(0 2.2rem 2.4rem rgba(8, 22, 31, 0.24))
    drop-shadow(0 0.5rem 0.65rem rgba(8, 22, 31, 0.16));
  transform: translate(-50%, -50%);
}

.panel-art--command-portrait img {
  inset: auto;
  top: 50%;
  left: 50%;
  width: auto;
  height: 86svh;
  max-width: none;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: clamp(1.6rem, 3vw, 3.4rem);
  object-fit: cover;
  filter:
    drop-shadow(0 2.2rem 2.4rem rgba(8, 22, 31, 0.22))
    drop-shadow(0 0.5rem 0.65rem rgba(8, 22, 31, 0.15));
  transform: translate(-50%, -50%);
}

.panel-art--command-responsive-site img {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 54vw;
  height: auto;
  max-width: none;
  border: 0.65rem solid rgba(255, 255, 255, 0.96);
  border-radius: clamp(1.2rem, 2.3vw, 2.6rem);
  object-fit: cover;
  filter:
    drop-shadow(0 2.1rem 2.3rem rgba(8, 22, 31, 0.21))
    drop-shadow(0 0.45rem 0.6rem rgba(8, 22, 31, 0.14));
  transform: translate(-50%, -50%);
}

/* These rules must come after the generic panel-art image declarations.
   Each card is a complete portrait asset centered within the editable
   full-screen frame; the frame scales and moves, but never crops the asset. */
.panel-art--yellow-card {
  clip-path: none;
  overflow: visible;
}

.panel-art--yellow-card img {
  inset: auto;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100svh;
  max-width: none;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
}

.panel-art--yellow-card-background img {
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: clamp(2.1rem, 4.5vw, 4.5rem);
  box-shadow: 0 1.4rem 3rem rgba(55, 62, 118, 0.15);
}

.panel-art--yellow-card-source {
  --source-clip-bottom: 0%;
  clip-path: inset(0 0 var(--source-clip-bottom) 0);
  will-change: clip-path;
}

.panel-art--yellow-card-replacement,
.panel-art--command-replacement {
  --replacement-clip-top: 100%;
  clip-path: inset(var(--replacement-clip-top) 0 0 0);
  will-change: clip-path;
}

body.layout-preview .panel-art--yellow-card-replacement[data-editor-selected="true"],
body.layout-preview .panel-art--command-replacement[data-editor-selected="true"] {
  clip-path: none;
}

.panel-art--command-dashboard img {
  width: 88vw;
  height: auto;
}

.panel-art--command-mobile img,
.panel-art--command-report img {
  width: auto;
  height: 90svh;
}

.panel-copy {
  --copy-opacity: 0;
  --copy-shift: 0px;
  --copy-edit-x: 0px;
  --copy-edit-y: 0px;
  --copy-scale: 1;
  --copy-width: 40vw;
  position: absolute;
  inset: 0;
  opacity: var(--copy-opacity);
  transform: translate3d(0, var(--copy-shift), 0);
  pointer-events: none;
  will-change: opacity, transform;
}

.panel-copy__box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--copy-width);
  color: #05070a;
  font-family: "Arial Narrow", "Aptos Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(3.25rem, 7.3vw, 8.7rem);
  font-stretch: condensed;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-wrap: balance;
  text-transform: uppercase;
  isolation: isolate;
  text-shadow: 0 0.04em 0.18em rgba(247, 245, 241, 0.2);
  transform: translate3d(
    calc(-50% + clamp(-30vw, var(--copy-edit-x), 30vw)),
    calc(-50% + var(--copy-edit-y)),
    0
  ) scale(var(--copy-scale));
  transform-origin: 50% 50%;
}

.panel-copy--websites { z-index: 9; }
.panel-copy--websites .panel-copy__box,
.panel-copy--generated-subtext[data-copy-motion="blue"] .panel-copy__box {
  pointer-events: auto;
  user-select: text;
}

.websites-heading-line {
  display: block;
  white-space: nowrap;
}

.panel-copy--green { z-index: 8; }
.panel-copy--operations { z-index: 9; }
.panel-copy--command { z-index: 11; }
.panel-copy--final-blue,
.panel-copy--final-blue-subtext,
.panel-copy--final-blue-custom-subtext { z-index: 17; }

/* Custom subtext is a physical part of its selected color sheet. The next
   sheet covers it by stacking above it—there is no opacity departure. */
.panel-copy--generated-subtext[data-copy-motion="hero"] { z-index: 5; }
.panel-copy--generated-subtext[data-copy-motion="blue"] { z-index: 6; }
.panel-copy--generated-subtext[data-copy-motion="green"] { z-index: 8; }
.panel-copy--generated-subtext[data-copy-motion="purple"] { z-index: 9; }
.panel-copy--generated-subtext[data-copy-motion="yellow"] { z-index: 17; }
.panel-copy--generated-subtext[data-copy-motion="final-blue"] { z-index: 17; }

.panel-copy--generated-subtext[data-copy-motion="yellow"] {
  clip-path: inset(0 0 var(--subtext-cover-bottom, 0%) 0);
}

.panel-copy--green .panel-copy__box,
.panel-copy--operations .panel-copy__box,
.panel-copy--command .panel-copy__box {
  font-size: clamp(2.7rem, 5.4vw, 6.4rem);
}

.panel-copy--green .panel-copy__box {
  color: var(--canopy-ink, #050a11);
  font-family: "AGF Inter", Inter, sans-serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-stretch: normal;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-transform: none;
  --copy-edit-y: calc(-151px - max(0px, calc(760px - 100svh))) !important;
}

.panel-copy--generated-subtext[data-copy-motion="green"] .panel-copy__box {
  --copy-edit-y: calc(215px - max(0px, calc(760px - 100svh))) !important;
  font-family: "AGF Inter", Inter, sans-serif;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  letter-spacing: -0.01em;
}

.panel-copy--final-blue .panel-copy__box {
  font-size: clamp(2.65rem, 5.2vw, 6.1rem);
}

.panel-copy--final-blue-subtext .panel-copy__box,
.panel-copy--final-blue-custom-subtext .panel-copy__box,
.panel-copy--generated-subtext .panel-copy__box {
  color: #3f5874;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.2rem, 2.05vw, 2.15rem);
  font-stretch: normal;
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -0.025em;
  text-transform: none;
}

.panel-copy--final-blue-custom-subtext .panel-copy__box {
  color: #243f5d;
}

.panel-copy--generated-subtext .panel-copy__box {
  color: #243f5d;
}

.panel-copy--final-blue-subtext .panel-copy__box::before,
.panel-copy--final-blue-custom-subtext .panel-copy__box::before,
.panel-copy--generated-subtext .panel-copy__box::before {
  position: absolute;
  inset: -0.72em -0.85em;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 0.85em;
  background: var(--copy-safe-surface, rgba(247, 245, 241, 0.88));
  box-shadow: 0 0.55em 1.5em rgba(27, 51, 75, 0.08);
  backdrop-filter: blur(9px);
  content: "";
}

.panel-copy--generated-subtext[data-copy-motion="blue"] { --copy-safe-surface: rgba(217, 238, 243, 0.92); }
.panel-copy--generated-subtext[data-copy-motion="green"] { --copy-safe-surface: rgba(220, 239, 220, 0.92); }
.panel-copy--generated-subtext[data-copy-motion="purple"] { --copy-safe-surface: rgba(231, 219, 241, 0.92); }
.panel-copy--generated-subtext[data-copy-motion="yellow"] { --copy-safe-surface: rgba(243, 229, 168, 0.92); }
.panel-copy--generated-subtext[data-copy-motion="final-blue"],
.panel-copy--final-blue-subtext { --copy-safe-surface: rgba(199, 231, 243, 0.92); }

.panel-copy--generated-subtext[data-copy-id="custom-subcopy-1"] .panel-copy__box {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.panel-copy--generated-subtext[data-copy-id="custom-subcopy-1"] .panel-copy__box::before {
  display: none !important;
}

body.layout-preview .panel-art[data-editor-selected="true"] img {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px rgba(20, 88, 255, 0.92));
}

body.layout-preview .panel-copy[data-editor-selected="true"] .panel-copy__box {
  outline: 3px solid rgba(20, 88, 255, 0.92);
  outline-offset: 10px;
  filter: drop-shadow(0 0 8px rgba(20, 88, 255, 0.4));
}

body.layout-preview .yellow-system-board__panel[data-editor-selected="true"] {
  outline: 3px solid rgba(20, 88, 255, 0.92);
  outline-offset: 4px;
  box-shadow: 0 0 0 1px #fff, 0 0 14px rgba(20, 88, 255, 0.72);
}

.surface--memory-trace {
  z-index: 8;
  pointer-events: none;
}

.memory-trace {
  fill: none;
  stroke: rgba(91, 196, 215, 0.92);
  stroke-width: 1.65px;
  opacity: var(--memory-trace-opacity, 0);
  filter: drop-shadow(0 0 3px rgba(80, 206, 224, 0.78)) drop-shadow(0 0 9px rgba(80, 206, 224, 0.42));
  vector-effect: non-scaling-stroke;
}

.white-lock-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.white-lock-wash {
  z-index: 5;
  opacity: var(--white-lock-opacity);
  background: var(--paper);
}

.surface-fill {
  fill: var(--paper);
}

.edge-shadow,
.edge-outline,
.edge-glint {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.surface--canopy .edge-shadow,
.surface--canopy .edge-outline,
.surface--canopy .edge-glint {
  opacity: var(--canopy-edge-opacity);
}

.surface--sheet-white .edge-shadow,
.surface--sheet-white .edge-outline,
.surface--sheet-white .edge-glint {
  opacity: var(--white-edge-opacity);
}

.surface--sheet-blue .edge-shadow,
.surface--sheet-blue .edge-outline,
.surface--sheet-blue .edge-glint {
  opacity: var(--blue-edge-opacity);
}

.surface--sheet-green .edge-shadow,
.surface--sheet-green .edge-outline,
.surface--sheet-green .edge-glint {
  opacity: var(--green-edge-opacity);
}

.surface--sheet-purple .edge-shadow,
.surface--sheet-purple .edge-outline,
.surface--sheet-purple .edge-glint {
  opacity: var(--purple-edge-opacity);
}

.surface--sheet-yellow .edge-shadow,
.surface--sheet-yellow .edge-outline,
.surface--sheet-yellow .edge-glint {
  opacity: var(--yellow-edge-opacity);
}

.edge-shadow {
  stroke: rgba(0, 0, 0, 0.52);
  stroke-width: 2px;
}

.surface--canopy .edge-shadow {
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.44));
}

.surface--sheet .edge-shadow {
  filter: drop-shadow(0 -12px 18px rgba(0, 0, 0, 0.4));
}

.surface--sheet-blue .surface-fill {
  fill: var(--sky);
}

.surface--sheet-blue .edge-outline {
  stroke: #a8dbe8;
}

.surface--sheet-blue .edge-glint {
  stroke: rgba(255, 254, 250, 0.82);
  filter: drop-shadow(0 0 5px rgba(255, 254, 250, 0.46));
}

.surface--sheet-green .surface-fill {
  fill: var(--mint);
}

.surface--sheet-green .edge-outline {
  stroke: #b9dfbd;
}

.surface--sheet-green .edge-glint {
  stroke: rgba(255, 255, 255, 0.6);
}

/* The blue and green sheets carry a generous handoff cushion. Let their
   actual borders span that cushion so the seam reads as one connected joint
   instead of two floating hairlines. */
.surface--sheet-blue .edge-outline[data-blue-edge],
.surface--sheet-green .edge-outline[data-green-boundary] {
  stroke-width: 30px;
}

.surface--sheet-blue .edge-glint[data-blue-edge],
.surface--sheet-green .edge-glint[data-green-boundary] {
  display: none;
}

/* The trace is a second aqua hairline over the joined borders. The borders
   now carry the seam on their own, so keep this accent out of the handoff. */
.surface--memory-trace {
  display: none;
}

.surface--sheet-purple .surface-fill {
  fill: var(--violet);
}

.surface--sheet-purple .edge-outline {
  stroke: #c9b4dc;
}

.surface--sheet-purple .edge-glint {
  stroke: #b9dfbd;
  filter: none;
}

/* The green-to-purple handoff is a two-tone joint: green occupies the upper
   half and purple carries the lower half, with no charcoal shadow interrupting
   the color relationship. */
.surface--sheet-purple .edge-shadow[data-purple-edge] {
  display: none;
}

.surface--sheet-purple .edge-outline[data-purple-edge] {
  stroke-width: 30px;
}

.surface--sheet-purple .edge-glint[data-purple-edge] {
  display: block;
  stroke-width: 15px;
  transform: translateY(-7.5px);
}

.surface--sheet-yellow .surface-fill {
  fill: var(--butter);
}

.surface--sheet-yellow .edge-outline {
  stroke: rgba(111, 88, 34, 0.48);
}

.surface--sheet-yellow .edge-glint {
  stroke: rgba(143, 100, 177, 0.88);
  filter: drop-shadow(0 0 4px rgba(151, 104, 186, 0.68)) drop-shadow(0 0 9px rgba(151, 104, 186, 0.34));
}

.edge-outline {
  stroke: var(--edge);
  stroke-width: 1.35px;
}

.edge-glint {
  stroke: var(--glint);
  stroke-width: 1px;
  transform: translateY(1.5px);
}

@media (max-width: 640px) {
  .site-header {
    right: 0.65rem;
    left: 0.65rem;
  }

  .site-brand {
    font-size: clamp(0.72rem, 3.4vw, 0.84rem);
  }

  .site-header__cta {
    min-height: 2.8rem;
    padding: 0.65rem 0.8rem;
    font-size: 0.76rem;
  }

  .mobile-menu-toggle {
    width: 2.8rem;
    min-height: 2.8rem;
    padding: 0;
  }

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

  .mega-menu__header {
    padding-right: 0.7rem;
    padding-left: 0.85rem;
  }

  .mega-menu__brand span,
  .mega-menu__about {
    display: none;
  }

  .mega-menu__cta {
    display: none;
  }

  .mega-menu__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
  }

  .mega-menu__tabs a,
  .mega-menu__tabs button {
    min-height: 2.7rem;
    padding: 0.45rem 0.2rem;
    font-size: 0.74rem;
    line-height: 1.15;
    white-space: normal;
  }

  .mega-menu__close {
    padding-right: 0.35rem;
    padding-left: 0.35rem;
  }

  .mega-menu__columns {
    grid-template-columns: 1fr;
  }

  .mega-menu__column + .mega-menu__column {
    padding-top: 0.5rem;
    border-top: 1px solid #e8eaee;
  }

  .scroll-scene {
    height: 300svh;
  }

  .home-testimonials {
    padding: 4.5rem 1.25rem 5rem;
  }

  .home-testimonials__inner {
    display: block;
  }

  .home-testimonials__lead {
    max-width: 35rem;
  }

  .home-testimonials__lead h2 {
    max-width: 8ch;
    font-size: clamp(3.25rem, 15vw, 5.5rem);
  }

  .home-testimonials__headline {
    margin-top: 2rem;
  }

  .home-testimonials__questions {
    margin-top: 4rem;
  }

  .home-testimonials__standard {
    display: block;
    margin-top: 2rem;
  }

  .home-testimonials__standard p {
    margin-top: 0.7rem;
  }

  .panel-art {
    inset: -0.5rem;
  }

  .panel-copy__box {
    width: max(var(--copy-width), 56vw);
    font-size: clamp(2.5rem, 10.8vw, 5rem);
    transform: translate3d(
      calc(-50% + clamp(-30vw, var(--copy-edit-x), 30vw)),
      calc(-50% + var(--copy-edit-y)),
      0
    ) scale(max(var(--copy-scale), 0.76));
  }

  /* Keep the opening copy inside a readable mobile column instead of
     carrying the desktop left offset into the viewport edge. */
  .panel-copy--websites .panel-copy__box,
  .panel-copy--generated-subtext[data-copy-motion="blue"] .panel-copy__box {
    --copy-edit-x: 0px !important;
    --copy-width: 84vw !important;
  }

  .panel-copy--final-blue-subtext .panel-copy__box {
    --copy-edit-x: 24vw !important;
  }

  /* Keep the lifted desktop copy clear of the compact navigation while
     preserving the same heading-to-supporting-text relationship. */
  .panel-copy--final-blue .panel-copy__box {
    --copy-edit-y: -278px !important;
  }

  .panel-copy--final-blue-subtext .panel-copy__box {
    --copy-edit-y: -68px !important;
  }

  .hero-curved-light__surface {
    right: -36vw;
    width: 150vw;
  }

  .hero-curved-light__rim {
    right: -24vw;
    width: 128vw;
  }

  .panel-art--blue {
    --art-x: -18vw;
    --art-base: -14svh;
  }

  .panel-art--website-builders {
    --art-base: calc(-12svh + var(--blue-art-lift));
    --art-x: 34vw;
  }

  .panel-art--website-wellness {
    --art-base: calc(6svh + var(--blue-art-lift));
    --art-x: 25vw;
  }

  .panel-art--website-strategy {
    --art-base: calc(20svh + var(--blue-art-lift));
    --art-x: 8vw;
  }

  .panel-art--website-builders img {
    height: 94svh;
  }

  .panel-art--website-wellness img {
    width: 92vw;
  }

  .panel-art--website-strategy img {
    height: 82svh;
  }

  .panel-art--purple {
    --art-x: -8vw;
    --art-base: 24svh;
  }

  .panel-art--handoff-lifecycle {
    --art-base: 8svh;
    --art-x: -28vw;
  }

  .panel-art--handoff-agreement {
    --art-base: 34svh;
    --art-x: -32vw;
  }

  .panel-art--handoff-onboarding {
    --art-base: 29svh;
    --art-x: -6vw;
  }

  .panel-art--handoff-lifecycle img {
    width: 102vw;
  }

  .panel-art--handoff-agreement img {
    width: 86vw;
  }

  .panel-art--handoff-onboarding img {
    height: 82svh;
  }

  .panel-art--green {
    --art-base: -2svh;
    --art-x: 23vw;
  }

  .panel-art--automation-landing {
    --art-base: 22svh;
    --art-x: -29vw;
  }

  .panel-art--automation-dashboard {
    --art-base: 30svh;
    --art-x: -8vw;
  }

  .panel-art--automation-mobile {
    --art-base: 7svh;
    --art-x: -38vw;
  }

  .panel-art--automation-founder-woman {
    --art-base: 19svh;
    --art-x: -32vw;
  }

  .panel-art--automation-founder-man {
    --art-base: 13svh;
    --art-x: -24vw;
  }

  .panel-art--automation-landing img,
  .panel-art--automation-dashboard img {
    width: 96vw;
  }

  .panel-art--automation-mobile img {
    height: 84svh;
  }

  .panel-art--automation-founder-woman img,
  .panel-art--automation-founder-man img {
    width: 88vw;
  }

  .panel-art--yellow {
    --art-base: 55svh;
    --art-x: 1vw;
  }

  .panel-art--command-portrait {
    --art-base: 10svh;
    --art-x: -30vw;
  }

  .panel-art--command-responsive-site {
    --art-base: 38svh;
    --art-x: -12vw;
  }

  .panel-art--command-dashboard {
    --art-base: 22svh;
    --art-x: -10vw;
  }

  .panel-art--command-mobile {
    --art-base: 23svh;
    --art-x: -34vw;
  }

  .panel-art--command-report {
    --art-base: 23svh;
    --art-x: 10vw;
  }

  .panel-art--command-dashboard img {
    width: 100vw;
  }

  .panel-art--command-mobile img,
  .panel-art--command-report img {
    height: 84svh;
  }

  .panel-art--command-portrait img {
    height: 80svh;
  }

  .panel-art--command-responsive-site img {
    width: 68vw;
  }

}

@media (prefers-reduced-motion: reduce) {
  .rising-sheet {
    will-change: auto;
  }

  .hero-field {
    transition: none;
  }

  .hero-curved-light__surface,
  .hero-curved-light__rim {
    transition: none;
    animation: none;
  }

  .panel-art {
    will-change: auto;
  }

}

/* Keep navigation transparent at every viewport size and scroll position. */
header.site-header,
header.site-header.is-scrolled {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}