/*
  Element color system: every color on the page and in the hero logo, in OKLCH.
  oklch(lightness 0–1  chroma 0–0.37  hue 0–360 / alpha)

  Stylesheets use these through var(); the hero logo reads them through src/element/colors.js.
  Unlayered, so these definitions win over the Tailwind theme in Trionn's stylesheets.
*/
:root {
  /* Hue dials. Every blue, copper and blue-tinted gray on the page and in the hero logo takes its hue
     from one of these (some as an offset, like calc(var(--hue-copper) - 6)), so one change turns the whole family. */
  --hue-cobalt: 268;
  --hue-copper: 55;
  --hue-slate: 268;

  /* Page colors. The Tailwind class names in Trionn's stylesheets use these (text-light-font, bg-black). */
  --color-white: oklch(1 0 0);
  --color-light-font: oklch(0.882 0 0);
  --color-cream: oklch(0.92 0.003 67.8);
  --color-cream-line: oklch(0.882 0 0);
  --color-grey-light: oklch(0.693 0 0);
  --color-grey-line: oklch(0.383 0 0);
  --color-dark-font: oklch(0.383 0 0);
  --color-black: oklch(0.273 0 0);
  --color-ink: oklch(0.182 0.004 var(--hue-slate));
  --color-hero: oklch(0.154 0 0);
  --color-night: oklch(0.115 0.009 var(--hue-slate));
  /* The near-black the entrance film plays on, with the hero art held faintly over it until the hero comes in. */
  --color-entrance: oklch(0.1 0.004 var(--hue-slate));
  --color-slate-line: oklch(0.318 0.017 var(--hue-slate));
  --color-cobalt: oklch(0.735 0.118 var(--hue-cobalt));
  --color-copper: oklch(0.792 0.105 var(--hue-copper));

  /* App-icon tile behind the cut-out bars in the logo lockup (ElementLogo.jsx), dark and light mode, and its chrome border.
     Primary buttons (element-button.css) wear the same border: --logo-chrome-glint over --logo-chrome-stops. */
  --logo-tile-top: oklch(0.214 0.008 var(--hue-slate));
  --logo-tile-bottom: oklch(0.128 0.006 var(--hue-slate));
  --logo-tile-light-top: oklch(0.988 0.002 var(--hue-slate));
  --logo-tile-light-bottom: oklch(0.918 0.006 var(--hue-slate));
  --logo-chrome-stops:
    oklch(0.98 0.006 var(--hue-slate)), oklch(0.915 0.01 var(--hue-slate)) 20%, oklch(0.44 0.01 var(--hue-slate)) 46%,
    oklch(0.3 0.008 var(--hue-slate)) 62%, oklch(0.8 0.01 var(--hue-slate)) 86%, oklch(0.93 0.008 var(--hue-slate));
  --logo-chrome-cobalt: oklch(0.603 0.215 calc(var(--hue-cobalt) - 3));
  --logo-chrome-copper: oklch(0.6 0.11 calc(var(--hue-copper) - 6));
  /* Cobalt glint on the left, copper on the right, laid over the bright-dark-bright chrome rim. */
  --logo-chrome-glint: linear-gradient(
    90deg,
    oklch(from var(--logo-chrome-cobalt) l c h / 0.42),
    oklch(from var(--logo-chrome-cobalt) l c h / 0) 32%,
    oklch(from var(--logo-chrome-copper) l c h / 0) 68%,
    oklch(from var(--logo-chrome-copper) l c h / 0.42)
  );
  --logo-tile-edge: oklch(0.1 0.004 var(--hue-slate) / 0.85);

  /* Hero logo: the three smoked-glass bars. Each face is a --logo-glass pane in a --logo-frame band; the chrome edge lines
     are --logo-edge, turning --logo-edge-cobalt toward each bar's left end and --logo-edge-copper toward its right. */
  --logo-glass: oklch(0.4 0.008 var(--hue-slate));
  --logo-frame: oklch(0.16 0.004 var(--hue-slate));
  --logo-edge: oklch(0.915 0.01 var(--hue-slate));
  --logo-edge-cobalt: oklch(0.603 0.215 calc(var(--hue-cobalt) - 3));
  --logo-edge-copper: oklch(0.6 0.11 calc(var(--hue-copper) - 6));
  /* The entrance laser's molten tip and sparks (src/element/entrance/EntranceScene.js); the engraved line cools behind
     the tip into the edge colours above. */
  --logo-laser-hot: oklch(0.86 0.14 calc(var(--hue-copper) + 4));
  /* A laser spark at the end of its life, cooling past copper toward dark red. */
  --logo-laser-ember: oklch(0.42 0.12 calc(var(--hue-copper) - 22));

  /* Hero logo: the studio the metal reflects. Each softbox strip is this color at its own share of its lightness. */
  --logo-studio-wall-top: oklch(0.238 0.011 var(--hue-slate));
  --logo-studio-wall-bottom: oklch(0.145 0.005 var(--hue-slate));
  --logo-studio-floor: oklch(0.139 0.005 var(--hue-slate));
  --logo-studio-ceiling: oklch(0.3 0.014 var(--hue-slate));
  --logo-softbox: oklch(0.897 0.015 var(--hue-slate));

  /* Hero logo: lights. The two orbiting lights circle the logo. */
  --logo-light-ambient: oklch(0.311 0.03 var(--hue-slate));
  --logo-light-key: oklch(1 0 0);
  --logo-light-fill: oklch(0.675 0.032 calc(var(--hue-slate) - 20));
  --logo-light-under: oklch(0.89 0.03 calc(var(--hue-slate) - 20));
  --logo-light-top: oklch(0.784 0.031 calc(var(--hue-slate) - 20));
  --logo-light-rim: oklch(0.577 0.081 var(--hue-cobalt));
  --logo-orbit-light-1: oklch(0.93 0.01 var(--hue-slate));
  --logo-orbit-light-2: oklch(0.856 0.025 calc(var(--hue-slate) - 14));

  /* Hero logo: the electric bolts. Each bolt flashes one color from --logo-bolt-colors, wrapped in glow lines and halo
     layers listed from the outer glow inward. */
  --logo-bolt: oklch(0.819 0.1 calc(var(--hue-cobalt) - 26));
  --logo-bolt-light: oklch(0.838 0.081 calc(var(--hue-cobalt) - 10));
  --logo-bolt-colors:
    oklch(1 0 0), oklch(0.856 0.095 calc(var(--hue-cobalt) - 42)), oklch(0.717 0.155 calc(var(--hue-cobalt) - 21)),
    oklch(0.563 0.241 calc(var(--hue-cobalt) - 7)), oklch(0.786 0.148 calc(var(--hue-cobalt) - 44)),
    oklch(0.874 0.071 calc(var(--hue-cobalt) - 30)), oklch(0.454 0.217 calc(var(--hue-cobalt) - 6));
  --logo-bolt-glow:
    oklch(0.426 0.235 calc(var(--hue-cobalt) - 4)), oklch(0.676 0.176 calc(var(--hue-cobalt) - 16)),
    oklch(0.864 0.083 calc(var(--hue-cobalt) - 37));
  --logo-bolt-halo:
    oklch(0.178 0.079 calc(var(--hue-cobalt) - 7)), oklch(0.267 0.136 calc(var(--hue-cobalt) - 5)),
    oklch(0.389 0.195 calc(var(--hue-cobalt) - 5)), oklch(0.517 0.24 calc(var(--hue-cobalt) - 6)),
    oklch(0.717 0.155 calc(var(--hue-cobalt) - 21)), oklch(0.884 0.059 calc(var(--hue-cobalt) - 20));

  /* Hero logo: the circuit lines drawn over it. A pulse's trail runs from hot to hot-end, then cool to cool-end. */
  --logo-trace: oklch(0.391 0.034 calc(var(--hue-slate) - 10));
  --logo-node: oklch(0.738 0 0);
  --logo-node-hot: oklch(0.838 0.018 calc(var(--hue-copper) + 13));
  --logo-node-ring: oklch(0.797 0.018 calc(var(--hue-slate) - 20));
  --logo-trail-hot: oklch(0.735 0.185 calc(var(--hue-copper) - 1));
  --logo-trail-hot-end: oklch(0.639 0.247 calc(var(--hue-copper) - 24));
  --logo-trail-cool: oklch(0.812 0.1 calc(var(--hue-cobalt) - 21));
  --logo-trail-cool-end: oklch(0.662 0.187 calc(var(--hue-cobalt) - 18));
}
/*
  Element type kit: every text style on the page is one of these roles, and every corner one of these radii.

  Role             Face          Use
  Headline         display       h2 (section headlines; the hero h1 takes class "h2")
  Big caps         display       marquee and services words (their own classes)
  Subhead          display       h3
  Caps label       display       .title
  Body             body          .small
  Lead             body          .type-lead: the larger intro copy in the hero and About
  Link             utility       .button-text, inside the underlined ghost link (WordShiftButton)
  Small label      utility       .type-label: eyebrows, lists and captions
  Button           body          the primary button, ElementButton.jsx

  Headline, subhead, caps label, body and link come from the original stylesheet's classes in
  public/_next/static/chunks/, which scale with the screen; this file adds the roles it lacks.
  The logo lockup keeps its own face (element-logo.css), and the Connor card's role line its own small label
  (element-hero.css), so the card stays compact.
*/
/* The font files' variables are set on <body> (index.html), so the faces are named there. */
body {
  --font-display: var(--font-familjen), sans-serif;
  --font-body: var(--font-neue), Arial, sans-serif;
  --font-utility: var(--font-martian), monospace;
}
:root {
  /* Utility type runs tight in links and wide in small labels. */
  --tracking-link: -0.06em;
  --tracking-label: 0.08em;

  /* Corners: hairline bars and chips, inner tiles and photos, buttons and panels, cards. Circles stay 50%, and app-icon tiles
     (the logo tile, the workflow hub) keep corners proportional to their size. */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
}

.type-lead {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.42;
  letter-spacing: -0.025em;
}
.type-label {
  font-family: var(--font-utility);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
@media (min-width: 1800px) {
  .type-lead { font-size: 25px; }
  .type-label { font-size: 13px; }
}
@media (max-width: 1050px) {
  .type-lead { font-size: 19px; }
}
@media (max-width: 700px) {
  .type-lead { font-size: 14px; line-height: 1.4; }
  .type-label { font-size: 8px; }
}

/* Marquee words run at -0.08em tracking, which closes the gap inside multi-word items. */
.mrquee-text .marquee-text-item { word-spacing: 0.2em; }
/* The About marquee carries two-word items, so it runs smaller than the single-word ticker. */
#vision-section .mrquee-text { font-size: clamp(3.5rem, 6.4vw, 7rem); }
/* The entrance film, backdrop and counter (EntranceLoader.jsx). Linked from index.html so the backdrop shows before any script
   runs. The film's canvas is transparent and plays over the hero art, which element-hero.css holds almost black until
   the reveal; the hero art, mark and copy states live there. */
html[data-entrance="build"] body,
html[data-entrance="build"] #hero-section,
html[data-entrance="reveal"] #hero-section {
  background-color: var(--color-entrance);
}
.entrance-film {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9300;
  pointer-events: none;
}
/* The film ends on the hero mark's exact frame, so it hands over in a single frame: a cross-fade would stack the two
   marks' glass. */
html:not([data-entrance="build"]) .entrance-film {
  visibility: hidden;
}
html[data-entrance="done"] .entrance-film {
  display: none;
}
.entrance-counter {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  z-index: 9400;
  translate: -50% 0;
  display: flex;
  gap: 1px;
  font-size: 1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-light-font);
  pointer-events: none;
  transition: opacity 1.2s ease-in-out;
}
html[data-entrance-counter-fading="true"] .entrance-counter,
html:not([data-entrance="build"]) .entrance-counter {
  opacity: 0;
}
html[data-entrance="done"] .entrance-counter {
  visibility: hidden;
}
.entrance-reel {
  width: 0.75em;
  height: 1em;
  overflow: hidden;
  text-align: center;
}
.entrance-strip {
  display: block;
  transition: transform 0.2s ease-out;
}
.entrance-strip > span {
  display: block;
  height: 1em;
}
/* Hero-only art direction; the recovered sections retain their styles. */
#hero-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 100svh;
  min-height: 680px;
  background:
    linear-gradient(
      180deg,
      oklch(0.196 0.008 var(--hue-slate) / 0.42),
      oklch(0.218 0.008 var(--hue-slate) / 0.2) 50%,
      oklch(0 0 0 / 0.2) 70%,
      var(--color-hero) 100%
    ),
    url("/brand/hero-rocky-valley.png") center center/cover no-repeat;
  pointer-events: none;
  z-index: 0;
}
#sticky-wrap {
  z-index: 2;
  pointer-events: none;
}
#sticky-wrap .home-about {
  pointer-events: auto;
}
.element-hero-active #nav {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
/* The scrolled nav and its menu panel share one gutter from the top and sides of the screen. */
@media (min-width: 768px) {
  :root {
    --nav-gutter: 20px;
  }
  #nav.site-header {
    padding-block: var(--nav-gutter);
  }
  #nav > .tr__container {
    max-width: none;
    padding-inline: var(--nav-gutter);
  }
  .menu-wrapper {
    padding: var(--nav-gutter);
  }
  /* The panel opens out of the menu button in its corner, so it shares that button's radius. */
  .menu-wrapper > .menu-block {
    border-radius: var(--radius-md);
    transform-origin: 100% 0;
  }
}
/* Past the hero the scrolled nav slides in from the sides: logo from the left, call and menu from the right. */
#nav .logo,
#nav .scroll-nav-actions {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.element-hero-active #nav .logo {
  transform: translateX(calc(-100% - 48px));
}
.element-hero-active #nav .scroll-nav-actions {
  transform: translateX(calc(100% + 48px));
}
@media (prefers-reduced-motion: reduce) {
  #nav .logo,
  #nav .scroll-nav-actions {
    transition: none;
  }
}
.element-hero {
  --hero-inset: clamp(24px, 8.9vw, 190px);
  height: 100svh;
  min-height: 680px;
  position: relative;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.035em;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.element-hero button,
.element-hero a {
  pointer-events: auto;
  cursor: pointer;
}
.element-hero a:focus-visible,
.element-hero button:focus-visible {
  outline: 2px solid white;
  outline-offset: 6px;
}
.element-hero-header {
  height: 88px;
  flex-shrink: 0;
  padding: 0 var(--hero-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-bottom: 1px solid oklch(1 0 0 / 0.149);
  position: relative;
  z-index: 5;
}
.element-hero-logo .element-logo {
  --logo-size: 40px;
}
.element-hero-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 17px;
  letter-spacing: -0.025em;
}
.element-hero-nav a,
.element-hero-nav button {
  transition: opacity 0.2s;
}
.element-hero-nav a:hover,
.element-hero-nav button:hover {
  opacity: 0.65;
}
.element-hero-talk {
  flex-shrink: 0;
}

.element-hero-menu {
  display: none;
}
.element-hero-intro {
  padding: 38px var(--hero-inset) 0;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.element-hero-services {
  margin: 0;
  list-style: none;
  line-height: 2;
}
.element-hero-services li::before {
  content: "/";
  margin-right: 13px;
  opacity: 0.6;
}
.element-hero-overview {
  width: max-content;
  text-align: right;
  word-spacing: normal;
  text-indent: 0;
  text-wrap: wrap;
  margin: 0;
}
.element-hero-bottom {
  margin-top: auto;
  padding: 0 var(--hero-inset) 65px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-end;
}
.element-hero-eyebrow {
  display: table;
  border-left: 2px solid oklch(1 0 0 / 0.439);
  background: oklch(1 0 0 / 0.063);
  padding: 5px 10px;
  margin: 0 0 18px;
}
.element-hero h1 {
  margin: 0;
}
.element-hero-person {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 9px 16px 9px 9px;
  border: 1px solid oklch(1 0 0 / 0.149);
  border-radius: var(--radius-lg);
  background: oklch(0.244 0.004 286.1 / 0.859);
  box-shadow: 0 12px 35px oklch(0 0 0 / 0.267);
  backdrop-filter: blur(14px);
  letter-spacing: -0.025em;
}
.element-hero-person > img {
  width: 91px;
  height: 124px;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--radius-sm);
  filter: saturate(0.5);
}
.element-hero-person-name {
  font-size: 21px;
  line-height: 1.2;
  margin: 0 0 7px;
}
.element-hero-person-role {
  font: 8px/1.5 var(--font-utility);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: oklch(0.768 0.004 var(--hue-slate));
  margin: 0 0 16px;
}
.element-hero-person .ea-button {
  width: 100%;
}

@media (min-width: 1800px) {
  .element-hero-header {
    height: 100px;
  }
  .element-hero-nav {
    font-size: 21px;
    gap: 50px;
  }
  .element-hero-intro {
    padding-top: 48px;
  }
  .element-hero-person {
    transform: scale(1.12);
    transform-origin: right bottom;
  }
  .element-hero-bottom {
    padding-bottom: 95px;
  }
}
@media (max-width: 1050px) {
  .element-hero {
    --hero-inset: 32px;
  }
  .element-hero-header {
    gap: 20px;
  }
  .element-hero-nav {
    gap: 24px;
    font-size: 15px;
  }
  .element-hero-logo .element-logo {
    --logo-size: 34px;
  }
  .element-hero-talk {
    font-size: 12px;
  }
  .element-hero-bottom {
    gap: 24px;
  }
  .element-hero-person {
    gap: 12px;
    padding-right: 12px;
  }
  .element-hero-person > img {
    width: 70px;
    height: 110px;
  }
  .element-hero-person-name {
    font-size: 18px;
  }
  .element-hero-person-role {
    font-size: 7px;
  }
  .element-hero-person .ea-button {
    width: 100%;
  }
}
@media (max-width: 700px) {
  #hero-section::before {
    min-height: 780px;
    background-position: 50% center;
  }
  .element-hero {
    --hero-inset: 22px;
    min-height: 780px;
  }
  .element-hero-header {
    height: 76px;
    gap: 14px;
  }
  .element-hero-logo .element-logo {
    --logo-size: 33px;
  }
  .element-hero-talk {
    margin-left: auto;
    font-size: 11px;
  }
  .element-hero-menu {
    display: block;
    font-size: 12px;
    white-space: nowrap;
  }
  .element-hero-nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 22px;
    right: 22px;
    padding: 22px;
    background: oklch(0.245 0.008 var(--hue-slate) / 0.961);
    border: 1px solid oklch(1 0 0 / 0.188);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
    font-size: 19px;
    align-items: flex-start;
  }
  .element-hero-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 22px;
    pointer-events: auto;
  }
  .element-hero-intro {
    padding-top: 24px;
    flex-direction: column;
    gap: 16px;
  }
  .element-hero-services {
    line-height: 2.2;
  }
  .element-hero-services li::before {
    margin-right: 7px;
  }
  .element-hero-overview {
    align-self: flex-end;
  }
  .element-hero-bottom {
    padding-bottom: 28px;
    align-items: stretch;
    gap: 22px;
    flex-direction: column;
  }
  .element-hero-eyebrow {
    margin-bottom: 12px;
  }
  .element-hero-person {
    max-width: 340px;
    align-self: flex-end;
    width: 100%;
    padding: 8px 13px 8px 8px;
    gap: 14px;
  }
  .element-hero-person > img {
    width: 65px;
    height: 81px;
  }
  .element-hero-person > div {
    flex: 1;
  }
  .element-hero-person-name {
    font-size: 17px;
    margin-bottom: 4px;
  }
  .element-hero-person-role {
    font-size: 6.5px;
    margin-bottom: 9px;
  }
  .element-hero-person .ea-button {
    width: 100%;
  }
}

@media (min-width: 701px) {
  .element-hero-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Each span is one line; the widest sets both edges, the lines above it sit flush right and the last flush left. */
.element-hero-overview > span { display: block; text-align: right; white-space: nowrap; }
.element-hero-overview > .element-hero-overview-ending { text-align: left; }

.home-about .element-about-headline { text-indent: 8.333%; }
.home-about .element-about-headline * { text-indent: 0; }

/* Keep the contact action and both hero blocks on the same right edge. */
.element-hero-talk { order: 2; }
.element-hero-menu { order: 1; }
.element-hero-overview, .element-hero-person { margin-right: 0; }

/* Entrance (src/element/entrance.js). While the film plays the hero art shows faintly over the near-black backdrop, the
   hero mark stays hidden under the film's identical one, and the copy waits off-stage: the nav above the top edge, the
   services list past the left edge, the overview past the right edge, and the headline, its eyebrow and the Connor card
   below the bottom edge. The mark settles, and the moment the counter shows 100 it fades away
   while the spotlight fades, the art brightens and the copy eases in. The film drives the art and spotlight from one
   reveal value, then the hero takes over in one frame; the copy finishes within that group. The headline moves by its children:
   HeroSymbol writes its own transition onto #s1-headline when it shakes the hero copy. */
html[data-entrance="build"]:not([data-entrance-revealing="true"]) #hero-section::before {
  opacity: 0.08;
}
html[data-entrance="build"] #trionn-symbol-canvas-wrap {
  visibility: hidden;
}
html[data-entrance="build"]:not([data-entrance-revealing="true"]) .element-hero-header {
  translate: 0 -100%;
  opacity: 0;
}
html[data-entrance="build"]:not([data-entrance-revealing="true"]) .element-hero-services {
  translate: calc(-100% - var(--hero-inset)) 0;
  opacity: 0;
}
html[data-entrance="build"]:not([data-entrance-revealing="true"]) .element-hero-overview {
  translate: calc(100% + var(--hero-inset)) 0;
  opacity: 0;
}
html[data-entrance="build"]:not([data-entrance-revealing="true"]) #s1-headline > *,
html[data-entrance="build"]:not([data-entrance-revealing="true"]) .element-hero-person {
  translate: 0 50svh;
  opacity: 0;
}
html[data-entrance-revealing="true"]:not([data-entrance="done"]) #hero-section::before {
  opacity: calc(0.08 + 0.92 * var(--entrance-reveal, 0));
}
html[data-entrance-revealing="true"]:not([data-entrance="done"]) .element-hero-header,
html[data-entrance-revealing="true"]:not([data-entrance="done"]) .element-hero-services,
html[data-entrance-revealing="true"]:not([data-entrance="done"]) #s1-headline > *,
html[data-entrance-revealing="true"]:not([data-entrance="done"]) .element-hero-overview,
html[data-entrance-revealing="true"]:not([data-entrance="done"]) .element-hero-person {
  transition:
    translate 2.4s cubic-bezier(0.35, 0, 0.15, 1) 0.8s,
    opacity 1.8s cubic-bezier(0.4, 0, 0.3, 1) 0.8s;
}
@media (prefers-reduced-motion: reduce) {
  html[data-entrance] .element-hero-header,
  html[data-entrance] .element-hero-services,
  html[data-entrance] #s1-headline > *,
  html[data-entrance] .element-hero-overview,
  html[data-entrance] .element-hero-person {
    translate: none;
  }
}
/* Phone layout overrides for the recovered template. Keep desktop's layout and scroll timelines intact. */
@media (max-width: 767px) {
  .tr__container { padding-inline: 16px; }
  /* Keep scrolling text from colliding with the transparent navigation. */
  #nav.site-header { padding-block: 16px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  #nav .logo, .element-hero-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .ea-button.ea-button, .scroll-nav-actions .scroll-menu-icon { min-height: 44px; }
  .scroll-menu-icon { min-width: 44px; }

  #hero-section::before, .element-hero { min-height: 100svh; }
  .element-hero { --hero-inset: 16px; }
  .element-hero-header { gap: 12px; }
  .element-hero-menu { min-width: 44px; min-height: 44px; }
  .element-hero-nav { left: 16px; right: 16px; top: 76px; padding: 12px 20px; }
  .element-hero-nav.is-open { gap: 0; align-items: stretch; }
  .element-hero-nav a, .element-hero-nav button { display: flex; align-items: center; min-height: 44px; text-align: left; }
  .element-hero-person { max-width: none; }
  .home-about { mix-blend-mode: normal; background: var(--color-hero); }
  #keyfacts-section { padding-top: 96px; }
  .ea-faq > .tr__container, .ea-approach > .tr__container:first-child { padding-top: 96px; }
  /* Cards travel through the middle, clear of the pinned heading and bottom link. */
  #trionn-services .service-cards { clip-path: inset(168px 0 196px); }

  /* The template gives these links a fixed width, clipping longer labels into their arrows. */
  .button_wrapper { width: max-content; max-width: 100%; }
  .button_wrapper .btn { min-height: 44px; padding-right: 32px; }
  .button_wrapper .word { flex: none; }
  .ea-approach .approach-arrows button { height: 44px; }

  /* Keep menu content below the fixed header, even when its own panel is scrolled. */
  div:has(> .mobile-menu-inner)::before { content: ""; display: block; position: sticky; top: 0; height: 76px; background: inherit; z-index: 10; }
  .mobile-menu-inner { min-height: calc(100dvh - 76px); padding: 24px 16px max(24px, env(safe-area-inset-bottom)); gap: 28px; }
  .mobile-menu-inner > .flex { gap: 28px; }
  .mobile-menu-inner a { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .mobile-menu-inner .menu { min-height: 44px; }
  .mobile-menu-inner p:has(> a) { align-items: center; margin-bottom: 0; }

  .contact-popup-inner { padding: 16px 16px max(24px, env(safe-area-inset-bottom)); }
  .contact-popup-panel::before { content: ""; display: block; position: sticky; top: 0; height: 68px; margin-bottom: -68px; background: inherit; z-index: 19; pointer-events: none; }
  .contact-popup-panel > button { position: sticky; top: 12px; width: 44px; height: 44px; margin: 12px 16px 0 auto; background: var(--color-white); }
  .contact-popup-panel > button svg { width: 16px; height: 16px; }
  .contact-popup-inner input, .contact-popup-inner textarea,
  .contact-popup-inner button[aria-haspopup] { min-height: 44px; font-size: 16px; }
  .contact-popup-inner [role="option"] { min-height: 44px; }
  .contact-popup-inner a { display: inline-flex; align-items: center; min-height: 44px; }
  .contact-popup-inner p:has(> a) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 4px; }

  #site-footer.site-footer > .relative.z-20 > .tr__container { display: flex; justify-content: space-between; padding-top: 96px; padding-bottom: max(32px, env(safe-area-inset-bottom)); gap: 48px; }
  #site-footer a:not(.btn):not(.ea-button) { min-height: 44px; display: inline-flex; align-items: center; }
  #site-footer p:has(> a) { align-items: center; margin-bottom: 0; }
}
.ea-button {
  --button-radius: var(--radius-md);
  --button-icon-radius: var(--radius-sm);
  --button-icon-size: 2.2em;
  --button-gap: 0.85em;
  box-sizing: border-box;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--button-gap);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 3.2em;
  height: auto;
  padding: 0.35em 1.15em 0.35em 0.35em;
  /* The logo tile's chrome border (colors.css). */
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  background:
    linear-gradient(180deg, oklch(0.375 0 0) 0%, oklch(0.097 0 0) 100%) padding-box,
    var(--logo-chrome-glint) border-box,
    linear-gradient(158deg, var(--logo-chrome-stops)) border-box;
  box-shadow:
    inset 0 1px 1px oklch(1 0 0 / 0.071),
    0 5px 12px oklch(0 0 0 / 0.125);
  color: oklch(1 0 0);
  font-family: var(--font-neue), Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: left;
  text-transform: none;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.ea-button__icon {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: 0 0 var(--button-icon-size);
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  align-self: center;
  border: 1px solid oklch(1 0 0 / 0.251);
  border-radius: var(--button-icon-radius);
  background: linear-gradient(180deg, oklch(1 0 0), oklch(0.931 0 0));
  box-shadow: 0 2px 4px oklch(0 0 0 / 0.133);
  color: oklch(0.173 0 0);
}
.ea-button__icon > svg {
  display: block;
  flex: none;
  width: 1.3em;
  height: 1.3em;
  transition: transform 0.2s ease;
}
.ea-button__label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
/* The light button: flat white inside the chrome border. Its icon sits as far from the left edge as from the top and bottom. */
.ea-button--light {
  padding-left: calc((3.2em - var(--button-icon-size)) / 2 - 1px);
  background:
    linear-gradient(oklch(1 0 0), oklch(1 0 0)) padding-box,
    var(--logo-chrome-glint) border-box,
    linear-gradient(158deg, var(--logo-chrome-stops)) border-box;
  color: oklch(0.134 0 0);
  box-shadow: 0 2px 4px oklch(0 0 0 / 0.031);
}
.ea-button--light > .ea-button__icon {
  border: 0;
  background: linear-gradient(180deg, oklch(0.36 0 0), oklch(0.14 0 0));
  box-shadow:
    inset 0 1px 1.5px oklch(1 0 0 / 0.251),
    0 4px 8px oklch(0 0 0 / 0.133);
  color: oklch(1 0 0);
}
.ea-button--small {
  font-size: 13px;
  --button-icon-size: 2.1em;
  --button-gap: 0.7em;
  --button-radius: var(--radius-md);
  --button-icon-radius: var(--radius-sm);
}
.ea-button:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 1px oklch(1 0 0 / 0.071),
    0 7px 16px oklch(0 0 0 / 0.2);
}
.ea-button:hover:not(:disabled):not([aria-disabled="true"])
  > .ea-button__icon
  > svg {
  transform: translate(1px, -1px);
}
.ea-button:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.133);
}
.ea-button:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 4px;
}
.ea-button:disabled,
.ea-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .ea-button,
  .ea-button__icon > svg {
    transition: none;
  }
}

/* The scrolling menu sits after the CTA at the same height, on the light button's surface. */
.scroll-nav-actions { align-items: stretch; }
.scroll-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 3.2em;
  min-height: 3.2em;
  font-size: 13px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background:
    linear-gradient(oklch(1 0 0), oklch(1 0 0)) padding-box,
    var(--logo-chrome-glint) border-box,
    linear-gradient(158deg, var(--logo-chrome-stops)) border-box;
  box-shadow: 0 2px 4px oklch(0 0 0 / 0.031);
  color: oklch(0.134 0 0);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.scroll-menu-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px oklch(0 0 0 / 0.2);
}
.scroll-menu-icon:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.133);
}
.scroll-menu-icon:focus-visible { outline: 2px solid var(--color-cobalt); outline-offset: 4px; }
.scroll-menu-icon > svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
  .scroll-menu-icon { transition: none; }
}
/* The nav blends with difference, so over light sections it inverts. There the CTA turns dark and the menu takes the
   dark surface, both pre-inverted like the logo tile so they show dark with the chrome border's true colors. */
.scroll-nav-actions.is-on-light > * { filter: invert(1); }
.scroll-nav-actions.is-on-light > .scroll-menu-icon {
  background:
    linear-gradient(180deg, oklch(0.375 0 0) 0%, oklch(0.097 0 0) 100%) padding-box,
    var(--logo-chrome-glint) border-box,
    linear-gradient(158deg, var(--logo-chrome-stops)) border-box;
  color: oklch(1 0 0);
}
/* Element lockup. --logo-size is the icon tile's height; everything else scales from it. */
.element-logo {
  --logo-size: 32px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-size) * 0.22);
  color: var(--color-white);
}
.element-logo-icon {
  flex: none;
  width: var(--logo-size);
  height: var(--logo-size);
  box-sizing: border-box;
  /* Chrome border (--logo-chrome-glint in colors.css). */
  border: 1px solid transparent;
  border-radius: calc(var(--logo-size) * 0.225);
  background:
    linear-gradient(oklch(1 0 0 / 0.11), oklch(1 0 0 / 0.04) 30%, oklch(1 0 0 / 0) 62%) padding-box,
    linear-gradient(var(--logo-tile-top), var(--logo-tile-bottom)) padding-box,
    var(--logo-chrome-glint) border-box,
    linear-gradient(158deg, var(--logo-chrome-stops)) border-box;
  box-shadow: inset 0 0 0 0.5px var(--logo-tile-edge);
  overflow: hidden;
}
.element-logo-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Over light sections the nav blends with difference, so the light-mode tile is inverted here and flips back on screen. */
.element-logo.is-on-light .element-logo-icon {
  background:
    linear-gradient(var(--logo-tile-light-top), var(--logo-tile-light-bottom)) padding-box,
    var(--logo-chrome-glint) border-box,
    linear-gradient(158deg, var(--logo-chrome-stops)) border-box;
  filter: invert(1);
}
.element-logo-name {
  display: inline-grid;
  row-gap: calc(var(--logo-size) * 0.09);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 0.75;
  text-transform: uppercase;
}
.element-logo-element {
  font-size: calc(var(--logo-size) * 0.47);
  font-weight: 400;
  letter-spacing: -0.025em;
}
.element-logo-automation {
  display: flex;
  justify-content: space-between;
  font-size: calc(var(--logo-size) * 0.28);
  font-weight: 300;
}
/* Solution slide visuals: a card holding a landscape from the hero's world,
   with a graphite app window that stays on screen and layered pop-ups on top.
   Greys and blacks carry every surface; warm orange and periwinkle blue only
   appear as light: glows, chrome lines and shine. */
@property --sx-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.sx {
  --ink: oklch(0.961 0.001 286.4);
  --ink-2: oklch(0.653 0.011 var(--hue-slate));
  --ink-3: oklch(0.485 0.012 var(--hue-slate));
  --warm: var(--color-copper);
  --blue: var(--color-cobalt);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --glide: cubic-bezier(0.65, 0, 0.35, 1);
  position: relative;
  width: 100%;
  max-width: calc((100dvh - 250px) * 600 / 468);
  aspect-ratio: 600 / 468;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: oklch(0.205 0.01 var(--hue-slate));
  box-shadow:
    0 0 0 1px oklch(0.187 0.011 var(--hue-slate) / 0.141),
    0 30px 60px oklch(0.187 0.011 var(--hue-slate) / 0.18);
  color: var(--ink);
  font-family: var(--font-neue), Arial, sans-serif;
  font-size: 9px;
  letter-spacing: -0.01em;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 767px) {
  .sx {
    max-width: none;
  }
}
/* The copy under each card keeps one height, so every card sits at the same spot however its text wraps. */
@media (min-width: 768px) {
  .solution-copy {
    height: 8rem;
  }
}
.sx-scene {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  animation: sx-drift 24s ease-in-out infinite alternate;
}
.sx::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.102);
  pointer-events: none;
}
.sx-stage {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 600px;
  height: 468px;
  transform-origin: 0 0;
}
.sx-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 80% at 50% 55%, oklch(0.155 0.007 var(--hue-slate) / 0.6), oklch(0.155 0.007 var(--hue-slate) / 0.251));
}

/* Graphite surface: lit top edge, faint grain, deep soft shadow */
.sx-win,
.sx-ghost {
  position: absolute;
  border-radius: var(--radius-md);
  background:
    radial-gradient(110% 60% at 18% 0%, oklch(1 0 0 / 0.059), transparent 62%),
    linear-gradient(201deg, oklch(0.228 0.01 var(--hue-slate)) 12%, oklch(0.164 0.007 var(--hue-slate)));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.141),
    inset 0 0 0 1px oklch(1 0 0 / 0.051),
    0 0 0 1px oklch(0 0 0 / 0.651),
    0 34px 70px -12px oklch(0 0 0 / 0.78),
    0 12px 24px oklch(0 0 0 / 0.361);
}
.sx-win {
  overflow: hidden;
}
.sx-win::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* The window that stays put, sized to sit inside the card with the landscape
   showing on every side, and the scrim it gets under a modal */
.sx-base {
  left: 70px;
  top: 56px;
  width: 460px;
  height: 356px;
}
.sx-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: oklch(0.134 0.005 var(--hue-slate) / 0.651);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  transition: opacity 0.9s var(--glide);
}
.sx-scrim.is-on {
  opacity: 1;
}

/* Pop-ups rise into place; content swaps by fading, the window never leaves */
.sx-stackwrap,
.sx-palette,
.sx-launch,
.sx-agentpop {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition:
    opacity 0.6s var(--glide),
    transform 0.9s var(--ease);
}
.sx-stackwrap.is-on,
.sx-palette.is-on,
.sx-launch.is-on,
.sx-agentpop.is-on {
  opacity: 1;
  transform: none;
}
.sx-swap {
  transition: opacity 0.6s var(--glide);
  animation: sx-fade 0.7s var(--glide);
}
.sx-swap.is-out {
  opacity: 0;
}

/* A stack: copies of a panel peeking out behind it */
.sx-stackwrap {
  position: absolute;
}
.sx-stackwrap > .sx-win {
  position: relative;
}
.sx-ghost {
  inset: 0;
  opacity: calc(0.75 - var(--i) * 0.25);
  transform: translate(calc(var(--i) * 9px), calc(var(--i) * -9px))
    scale(calc(1 - var(--i) * 0.04));
  transform-origin: 100% 0;
}
.sx-ghost.is-below {
  transform: translateY(calc(var(--i) * 9px)) scale(calc(1 - var(--i) * 0.05));
  transform-origin: 50% 100%;
}

/* Shared parts */
.sx-tile,
.sx-btn {
  background: linear-gradient(180deg, oklch(0.266 0.009 var(--hue-slate)), oklch(0.214 0.008 var(--hue-slate)));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.09),
    inset 0 0 0 1px oklch(1 0 0 / 0.043),
    0 1px 2px oklch(0 0 0 / 0.502);
}
.sx-tile {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  color: oklch(0.928 0.004 var(--hue-slate));
}
.sx-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 16px;
  border-bottom: 1px solid oklch(1 0 0 / 0.051);
  font-size: 10px;
  font-weight: 500;
}
.sx-head small {
  color: var(--ink-3);
  font-size: inherit;
  font-weight: 400;
}
.sx-head-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 9px;
  font-weight: 400;
}
.sx-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-3);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 24px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: oklch(0.889 0.006 var(--hue-slate));
  font-size: 9.5px;
  white-space: nowrap;
  transition:
    transform 0.15s var(--ease),
    filter 0.15s;
}
.sx-btn.is-small {
  height: 21px;
  padding: 0 10px;
  font-size: 9px;
}
.sx-btn.is-silver {
  background: linear-gradient(180deg, oklch(0.979 0.001 286.4), oklch(0.823 0.009 var(--hue-slate)));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0),
    0 0 0 1px oklch(0 0 0 / 0.502),
    0 2px 8px oklch(0 0 0 / 0.502),
    0 0 18px -4px oklch(1 0 0 / 0.251);
  color: oklch(0.183 0.008 var(--hue-slate));
  font-weight: 500;
}
.sx-btn.is-silver::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, oklch(1 0 0 / 0.902) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: sx-shine 3.2s 1s var(--ease) infinite;
}
.sx-btn.is-pressed,
kbd.is-pressed {
  transform: scale(0.93);
  filter: brightness(0.85);
}
.sx-spin {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border: 1.5px solid oklch(1 0 0 / 0.122);
  border-top-color: oklch(0.948 0.005 var(--hue-slate));
  border-radius: 50%;
  animation: sx-rotate 0.8s linear infinite;
}
.sx-idle {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border: 1px dashed oklch(1 0 0 / 0.18);
  border-radius: 50%;
}
.sx-done {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, oklch(1 0 0), oklch(0.795 0.01 var(--hue-slate)));
  box-shadow: 0 0 10px -1px oklch(1 0 0 / 0.451);
  color: oklch(0.183 0.008 var(--hue-slate));
  animation: sx-pop 0.45s var(--ease);
}
.sx-done svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sx-led {
  display: inline-block;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: oklch(0.485 0.012 var(--hue-slate));
}
.sx-led.is-blue {
  background: oklch(0.867 0.059 var(--hue-cobalt));
  box-shadow:
    0 0 4px var(--blue),
    0 0 10px oklch(from var(--color-cobalt) l c h / 0.667);
}
.sx-led.is-warm {
  background: oklch(0.91 0.057 var(--hue-copper));
  box-shadow:
    0 0 4px var(--warm),
    0 0 12px oklch(from var(--color-copper) l c h / 0.8);
  animation: sx-breathe 1.6s ease-in-out infinite;
}
.sx-led.is-white {
  background: oklch(1 0 0);
  box-shadow: 0 0 8px oklch(1 0 0 / 0.667);
}
.sx-shimmer {
  color: transparent;
  background: linear-gradient(90deg, oklch(0.549 0.013 var(--hue-slate)) 30%, oklch(0.973 0.001 286.4) 50%, oklch(0.549 0.013 var(--hue-slate)) 70%) 0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sx-shimmer 1.6s linear infinite;
}
.sx-line {
  display: block;
  height: 4px;
  margin-top: 7px;
  border-radius: var(--radius-xs);
  background: oklch(1 0 0 / 0.059);
}
.sx-doc-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid oklch(1 0 0 / 0.051);
  color: oklch(0.919 0.004 var(--hue-slate));
  font-size: 9.5px;
}
.sx-doc-head small {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 8.5px;
}
.sx-step {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
  font-size: 9px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.5s var(--glide),
    transform 0.6s var(--ease);
}
.sx-step.is-on {
  opacity: 1;
  transform: none;
}
.sx-roll {
  display: inline-flex;
  font-variant-numeric: tabular-nums;
}
.sx-roll-digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  text-align: center;
}
.sx-roll-digit > span {
  display: flex;
  flex-direction: column;
  transition: transform 0.18s var(--ease);
}
.sx-roll-digit > span > span {
  height: 1em;
}
.sx-cursor {
  position: absolute;
  z-index: 8;
  width: 14px;
  opacity: 0;
  transition:
    left 1.4s cubic-bezier(0.45, 0.05, 0.2, 1),
    top 1.4s cubic-bezier(0.45, 0.05, 0.2, 1),
    transform 1.4s cubic-bezier(0.45, 0.05, 0.2, 1),
    opacity 0.3s;
}
.sx-cursor svg {
  display: block;
  width: 14px;
  overflow: visible;
  filter: drop-shadow(0 2px 3px oklch(0 0 0 / 0.702));
  transition: transform 0.12s;
}
.sx-cursor path {
  fill: oklch(1 0 0);
  stroke: oklch(0.178 0 0);
  stroke-width: 1;
  stroke-linejoin: round;
}
.sx-cursor.is-in {
  opacity: 1;
}
.sx-cursor.is-click svg {
  transform: scale(0.8);
}
.sx-cursor.is-stage,
.sx-cursor.is-free {
  left: 600px;
  top: 470px;
}
.sx-cursor.is-stage.is-in {
  left: 496px;
  top: 72px;
}

/* Prompt row: the edge lights up and orbits while the agent works */
.sx-prompt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 8px 0 11px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, oklch(0.245 0.01 var(--hue-slate)), oklch(0.196 0.008 var(--hue-slate)));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.11),
    inset 0 0 0 1px oklch(1 0 0 / 0.071),
    0 0 0 1px oklch(0 0 0 / 0.6);
  color: oklch(0.928 0.004 var(--hue-slate));
  font-size: 10px;
  transition: box-shadow 0.8s var(--ease);
}
.sx-prompt::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--sx-a),
    transparent 0deg 200deg,
    var(--color-cobalt) 260deg,
    oklch(1 0 0) 300deg,
    var(--color-copper) 335deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(oklch(0 0 0) 0 0) content-box,
    linear-gradient(oklch(0 0 0) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.6s;
  animation: sx-orbit 2s linear infinite;
}
.sx-prompt.is-thinking {
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.11),
    inset 0 0 0 1px oklch(1 0 0 / 0.071),
    0 0 0 1px oklch(0 0 0 / 0.6),
    0 0 30px -6px oklch(from var(--color-copper) l c h / 0.349),
    0 0 60px -20px oklch(from var(--color-cobalt) l c h / 0.502);
}
.sx-prompt.is-thinking::before {
  opacity: 1;
}
.sx-placeholder {
  color: var(--ink-3);
}
.sx-typed {
  white-space: nowrap;
}
.sx-typed.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--ink);
  animation: sx-blink 0.9s steps(1) infinite;
}
.sx-status {
  margin-left: auto;
  font-size: 8.5px;
  white-space: nowrap;
  animation:
    sx-fade 0.4s var(--ease),
    sx-shimmer 1.6s linear infinite;
}
.sx kbd {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 20px;
  margin-left: auto;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, oklch(0.29 0.009 var(--hue-slate)), oklch(0.231 0.008 var(--hue-slate)));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.11),
    0 0 0 1px oklch(0 0 0 / 0.651);
  color: var(--ink-2);
  font: inherit;
  font-size: 9px;
  transition:
    transform 0.15s var(--ease),
    filter 0.15s;
}

/* 1 · Memory: a knowledge library, a command palette, the answer as widgets */
.sx-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 4px 0 9px;
  border-radius: var(--radius-sm);
  background: oklch(1 0 0 / 0.031);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.071);
  color: var(--ink-3);
  font-size: 9px;
  font-weight: 400;
}
.sx-search kbd {
  margin-left: 14px;
}
.sx-table {
  padding: 6px 16px;
}
.sx-table-head,
.sx-table-row {
  display: grid;
  grid-template-columns: 1fr 110px 60px;
  align-items: center;
}
.sx-table-head {
  height: 28px;
  color: var(--ink-3);
  font-size: 8.5px;
}
.sx-table-row {
  height: 38px;
  border-top: 1px solid oklch(1 0 0 / 0.035);
  color: var(--ink-2);
  font-size: 9px;
}
.sx-table-row > span:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
  color: oklch(0.898 0.004 var(--hue-slate));
  font-size: 9.5px;
}
.sx-palette {
  left: 44px;
  top: 84px;
  z-index: 7;
  width: 320px;
  padding: 6px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(100% 50% at 20% 0%, oklch(1 0 0 / 0.071), transparent 60%),
    linear-gradient(190deg, oklch(0.261 0.009 var(--hue-slate)), oklch(0.192 0.008 var(--hue-slate)));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.169),
    inset 0 0 0 1px oklch(1 0 0 / 0.059),
    0 0 0 1px oklch(0 0 0 / 0.702),
    0 40px 80px -10px oklch(0 0 0 / 0.851);
}
/* The answer rolls down under the prompt: its real height animates, so the
   motion runs the whole duration instead of snapping open */
.sx-palette-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 1.2s var(--glide),
    opacity 0.7s var(--glide);
}
.sx-palette-body.is-on {
  grid-template-rows: 1fr;
  opacity: 1;
}
.sx-palette-body > div {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0 10px;
}
.sx-palette-body > div > :first-child {
  margin-top: 12px;
}
.sx-palette-body > div > :last-child {
  margin-bottom: 8px;
}
.sx-headline {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.sx-fact {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 27px;
  border-top: 1px solid oklch(1 0 0 / 0.043);
  font-size: 10px;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 0.6s var(--glide),
    transform 0.7s var(--ease);
}
.sx-fact.is-on {
  opacity: 1;
  transform: none;
}
.sx-fact small {
  color: var(--ink-2);
  font-size: 9px;
}
.sx-fact::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 1.5px;
  border-radius: var(--radius-xs);
  background: oklch(0.853 0.077 calc(var(--hue-copper) + 3));
  box-shadow: 0 0 8px var(--warm);
  opacity: 0;
  transition: opacity 0.5s;
}
.sx-fact.is-lit::after {
  opacity: 1;
}
.sx-chips {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.5s;
}
.sx-chips.is-on {
  opacity: 1;
}
.sx-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  background: oklch(1 0 0 / 0.031);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.071);
  color: oklch(0.842 0.007 var(--hue-slate));
  font-size: 8.5px;
}
.sx-source {
  left: 338px;
  top: 142px;
  z-index: 6;
  width: 210px;
}
.sx-doc {
  padding: 13px 14px 16px 44px;
}
.sx-clause {
  position: relative;
  margin: 9px 0 2px;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 9.5px;
  line-height: 1.45;
  transition: color 0.6s;
}
.sx-clause::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, oklch(from var(--color-copper) l c h / 0.22), oklch(from var(--color-copper) l c h / 0.031));
  box-shadow: inset 1.5px 0 0 oklch(0.853 0.077 calc(var(--hue-copper) + 3));
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.9s var(--ease);
}
.sx-clause.is-lit {
  color: oklch(1 0 0);
  text-shadow: 0 0 12px oklch(from var(--color-copper) l c h / 0.502);
}
.sx-clause.is-lit::before {
  transform: none;
}

/* 2 · Loop: a request's timeline, paused for one approval */
.sx-flow {
  left: 62px;
  top: 54px;
  width: 330px;
  height: 360px;
}
.sx-timeline {
  margin: 0;
  padding: 20px 24px;
  list-style: none;
}
.sx-event {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 70px;
  padding-left: 30px;
  opacity: 0.35;
  transition: opacity 0.6s var(--ease);
}
.sx-event.is-on {
  opacity: 1;
}
.sx-event-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: 8.5px;
}
.sx-event b {
  font-size: 11.5px;
  font-weight: 500;
}
.sx-event small {
  color: var(--ink-2);
  font-size: 9.5px;
}
.sx-event:not(.is-on) > :not(.sx-node):not(.sx-rail) {
  visibility: hidden;
}
.sx-node {
  position: absolute;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  border: 1px dashed oklch(1 0 0 / 0.2);
  border-radius: 50%;
}
.sx-node::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(1 0 0), oklch(0.74 0.012 var(--hue-slate)));
  transform: scale(0);
  transition: transform 0.45s var(--ease);
}
.sx-event.is-on .sx-node {
  border: 1.5px solid oklch(0.885 0.007 var(--hue-slate));
  box-shadow: 0 0 10px oklch(1 0 0 / 0.18);
}
.sx-event.is-on .sx-node::after {
  transform: none;
}
.sx-event.is-waiting .sx-node {
  border-color: oklch(0.895 0.066 var(--hue-copper));
  animation: sx-halo 1.6s ease-in-out infinite;
}
.sx-rail {
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: 4px;
  width: 1.5px;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: oklch(1 0 0 / 0.051);
}
.sx-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(1 0 0), oklch(0.699 0.013 var(--hue-slate)) 45%, oklch(0.853 0.077 calc(var(--hue-copper) + 3)));
  box-shadow: 0 0 6px var(--color-copper);
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: transform 0.9s var(--ease);
}
.sx-event.is-lit .sx-rail {
  overflow: visible;
  box-shadow: 0 0 8px oklch(from var(--color-copper) l c h / 0.4);
}
.sx-event.is-lit .sx-rail::after {
  transform: none;
}
.sx-approval {
  left: 312px;
  top: 192px;
  z-index: 3;
  width: 236px;
}
.sx-pop {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  overflow: visible;
  background:
    radial-gradient(100% 60% at 20% 0%, oklch(1 0 0 / 0.071), transparent 60%),
    linear-gradient(190deg, oklch(0.274 0.011 var(--hue-slate)), oklch(0.205 0.008 var(--hue-slate)));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.169),
    inset 0 0 0 1px oklch(1 0 0 / 0.059),
    0 0 0 1px oklch(0 0 0 / 0.702),
    0 28px 56px oklch(0 0 0 / 0.761),
    0 0 50px -14px oklch(from var(--color-copper) l c h / 0.4);
}
.sx-pop-title {
  font-size: 11px;
  font-weight: 500;
}
.sx-pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: var(--radius-sm);
  background: oklch(1 0 0 / 0.031);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.039);
  font-size: 9.5px;
}
.sx-pop-row b {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.sx-pop-note {
  color: var(--ink-2);
  font-size: 9px;
}
.sx-pop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.sx-cursor.is-pop {
  right: 46px;
  bottom: 6px;
  transform: translate(170px, 150px);
}
.sx-cursor.is-pop.is-in {
  transform: none;
}

/* 3 · Team: one brief, five specialist agents, six deliverables, one launch */
.sx-campaign {
  left: 46px;
  top: 52px;
  width: 508px;
  height: 364px;
}
.sx-campaign .sx-prompt {
  margin: 12px 14px 14px;
}
.sx-cols {
  display: grid;
  grid-template-columns: 214px 1fr;
  gap: 14px;
  padding: 0 14px;
}
.sx-agent {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  border-top: 1px solid oklch(1 0 0 / 0.035);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease);
}
.sx-agent.is-on {
  opacity: 1;
  transform: none;
}
.sx-agent-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 104px;
}
.sx-agent-text b {
  font-size: 9.5px;
  font-weight: 500;
}
.sx-agent-text small {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  animation: sx-fade 0.4s var(--ease);
}
.sx-track {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: var(--radius-xs);
  background: oklch(1 0 0 / 0.063);
}
.sx-track i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, oklch(from var(--color-cobalt) l c h / 0.102), oklch(0.84 0.071 var(--hue-cobalt)));
  box-shadow: 0 0 8px oklch(from var(--color-cobalt) l c h / 0.667);
  transform-origin: 0 0;
  transition: transform 0.3s linear;
}
.sx-agent.is-done .sx-track i {
  background: linear-gradient(90deg, oklch(1 0 0 / 0.122), oklch(0.939 0.005 var(--hue-slate)));
  box-shadow: 0 0 6px oklch(1 0 0 / 0.302);
}
.sx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sx-deliverable {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 62px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: oklch(1 0 0 / 0.02);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.051);
  opacity: 0.18;
  transition:
    opacity 0.5s var(--ease),
    background 0.5s,
    box-shadow 0.5s;
}
.sx-deliverable.is-on {
  opacity: 1;
  background: linear-gradient(180deg, oklch(0.249 0.01 var(--hue-slate)), oklch(0.205 0.008 var(--hue-slate)));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.078),
    inset 0 0 0 1px oklch(1 0 0 / 0.051),
    0 1px 2px oklch(0 0 0 / 0.502);
  animation: sx-arrive 1.1s var(--ease);
}
.sx-deliverable > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sx-deliverable b {
  font-size: 9.5px;
  font-weight: 500;
}
.sx-deliverable small {
  color: var(--ink-2);
  font-size: 8px;
}
.sx-thumb {
  position: relative;
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  width: 40px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: oklch(0.262 0.011 var(--hue-slate));
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.071),
    0 2px 6px oklch(0 0 0 / 0.502);
}
.sx-thumb.is-doc {
  width: 28px;
  margin: 0 6px;
  background:
    linear-gradient(oklch(0.288 0.05 var(--hue-cobalt)), oklch(0.288 0.05 var(--hue-cobalt))) 5px 6px / 12px 2px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 4px, oklch(0.845 0.01 var(--hue-slate)) 4px 5px) 5px 12px / 20px 20px no-repeat,
    oklch(0.976 0.003 106.4);
}
.sx-thumb.is-sheet {
  background:
    repeating-linear-gradient(90deg, oklch(1 0 0 / 0.09) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(180deg, oklch(1 0 0 / 0.09) 0 1px, transparent 1px 7px),
    oklch(0.236 0.01 var(--hue-slate));
}
.sx-thumb.is-mail {
  flex-direction: column;
  gap: 3px;
  padding: 5px;
}
.sx-thumb.is-mail i {
  height: 6px;
  border-radius: var(--radius-xs);
  background: oklch(1 0 0 / 0.102);
}
.sx-thumb.is-mail i:first-child {
  background: oklch(1 0 0 / 0.239);
}
.sx-thumb.is-web {
  background:
    linear-gradient(oklch(1 0 0 / 0.122), oklch(1 0 0 / 0.122)) 0 0 / 100% 5px no-repeat,
    radial-gradient(60% 60% at 70% 60%, oklch(from var(--color-copper) l c h / 0.333), transparent 70%) 0 5px / 100% 18px no-repeat,
    linear-gradient(oklch(1 0 0 / 0.078), oklch(1 0 0 / 0.078)) 5px 26px / 22px 3px no-repeat,
    oklch(0.223 0.01 var(--hue-slate));
}
.sx-thumb.is-ads {
  align-items: flex-end;
  gap: 3px;
  padding: 4px;
}
.sx-thumb.is-ads i {
  flex: 1;
  height: 100%;
  border-radius: var(--radius-xs);
  background: linear-gradient(160deg, oklch(0.354 0.012 var(--hue-slate)), oklch(0.201 0.008 var(--hue-slate)) 60%, oklch(from var(--color-copper) l c h / 0.4));
}
.sx-thumb.is-ads i:nth-child(2) {
  height: 70%;
}
.sx-thumb.is-ads i:nth-child(3) {
  height: 50%;
}
.sx-thumb.is-chart {
  align-items: flex-end;
  gap: 3px;
  padding: 5px;
}
.sx-thumb.is-chart i {
  flex: 1;
  border-radius: var(--radius-xs);
  background: linear-gradient(180deg, oklch(0.84 0.071 var(--hue-cobalt)), oklch(from var(--color-cobalt) l c h / 0.102));
}
.sx-thumb.is-chart i:last-child {
  box-shadow: 0 0 6px var(--color-cobalt);
}
.sx-run-done {
  display: flex;
  align-items: center;
  gap: 8px;
  animation: sx-fade 0.5s var(--ease);
}
.sx-done-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-size: 9.5px;
  font-weight: 400;
}

/* Launch: each deliverable goes live in turn under one progress bar */
.sx-launch {
  position: absolute;
  left: 160px;
  top: 92px;
  z-index: 7;
  width: 280px;
}
.sx-launch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sx-launch-track {
  flex: none;
  height: 3px;
  margin-bottom: 2px;
}
.sx-launch-track.is-done i {
  background: linear-gradient(90deg, oklch(1 0 0 / 0.122), oklch(0.939 0.005 var(--hue-slate)));
  box-shadow: 0 0 6px oklch(1 0 0 / 0.302);
}
.sx-launch-row {
  padding: 6px 8px 6px 6px;
  opacity: 0.35;
  transition: opacity 0.4s var(--ease);
}
.sx-launch-row.is-on,
.sx-launch-row.is-done {
  opacity: 1;
}
.sx-launch-row .sx-agent-text {
  flex: 1;
  width: auto;
}
.sx-launch-row .sx-agent-text b {
  margin-left: 0;
  font-size: 9.5px;
  letter-spacing: normal;
}
.sx-launch-row > .sx-spin,
.sx-launch-row > .sx-idle,
.sx-launch-row > .sx-done {
  margin-left: auto;
}

/* 4 · Insights: one live dashboard, and an agent that reads any chart on request */
.sx-dash {
  left: 40px;
  top: 44px;
  width: 520px;
  height: 380px;
}
.sx-dash .sx-head-status {
  font-size: 8.5px;
}
.sx-kpi-row {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sx-kpi,
.sx-panel {
  position: relative;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, oklch(0.232 0.01 var(--hue-slate)), oklch(0.192 0.008 var(--hue-slate)));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.071),
    inset 0 0 0 1px oklch(1 0 0 / 0.043),
    0 1px 2px oklch(0 0 0 / 0.502);
}
.sx-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 56px;
  padding: 8px 10px;
}
.sx-kpi small {
  color: var(--ink-2);
  font-size: 8px;
}
.sx-kpi b {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.sx-kpi em {
  color: oklch(0.867 0.059 var(--hue-cobalt));
  font-size: 7.5px;
  font-style: normal;
}
.sx-kpi em.is-warm {
  color: oklch(0.853 0.077 calc(var(--hue-copper) + 3));
}
.sx-spark {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 50px;
  height: 20px;
  overflow: visible;
}
.sx-spark path {
  fill: none;
  stroke: oklch(0.867 0.059 var(--hue-cobalt));
  stroke-width: 1.2;
  filter: drop-shadow(0 0 3px var(--color-cobalt));
}
.sx-spark.is-warm path {
  stroke: oklch(0.853 0.077 calc(var(--hue-copper) + 3));
  filter: drop-shadow(0 0 3px var(--color-copper));
}
.sx-panel {
  position: absolute;
  padding: 9px 12px;
  transition: box-shadow 0.7s var(--glide);
}
.sx-panel.is-cash {
  left: 14px;
  top: 110px;
  width: 300px;
  height: 124px;
}
.sx-panel.is-jobs {
  left: 322px;
  top: 110px;
  width: 184px;
  height: 124px;
}
.sx-panel.is-service {
  left: 14px;
  top: 242px;
  width: 244px;
  height: 126px;
}
.sx-panel.is-clients {
  left: 266px;
  top: 242px;
  width: 240px;
  height: 126px;
}
.sx-panel.is-focus {
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.11),
    inset 0 0 0 1px oklch(0.853 0.077 calc(var(--hue-copper) + 3) / 0.4),
    0 0 0 1px oklch(0 0 0 / 0.651),
    0 0 30px -6px oklch(from var(--color-copper) l c h / 0.4);
}
.sx-panel.is-scanning::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  background: linear-gradient(90deg, transparent, oklch(from var(--color-copper) l c h / 0.078) 40%, oklch(1 0 0 / 0.161) 50%, oklch(from var(--color-cobalt) l c h / 0.078) 60%, transparent);
  animation: sx-sweep 1.4s var(--ease) infinite;
}
.sx-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 18px;
  color: var(--ink-2);
  font-size: 8.5px;
}
.sx-panel-head > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.sx-panel-head b {
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
}
.sx-star {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  background: oklch(1 0 0 / 0.031);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.071);
  color: oklch(0.889 0.006 var(--hue-slate));
  transition:
    box-shadow 0.4s,
    color 0.4s;
}
.sx-star.is-on {
  color: oklch(0.91 0.057 var(--hue-copper));
  box-shadow:
    inset 0 0 0 1px oklch(0.853 0.077 calc(var(--hue-copper) + 3) / 0.6),
    0 0 14px oklch(from var(--color-copper) l c h / 0.667);
}
.sx-chart {
  display: block;
  width: 100%;
  height: 80px;
  margin-top: 6px;
  overflow: visible;
}
.sx-gridline {
  stroke: oklch(1 0 0 / 0.051);
  stroke-dasharray: 2 4;
}
.sx-floorline {
  stroke: oklch(from var(--color-copper) l c h / 0.451);
  stroke-dasharray: 3 4;
}
.sx-floortext {
  fill: oklch(0.853 0.077 calc(var(--hue-copper) + 3));
  font-size: 7px;
  text-anchor: end;
}
.sx-glow-line {
  fill: none;
  stroke: oklch(0.9 0.044 var(--hue-cobalt));
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px var(--color-cobalt)) drop-shadow(0 0 9px oklch(from var(--color-cobalt) l c h / 0.6));
}
.sx-forecast {
  fill: none;
  stroke: oklch(0.9 0.044 var(--hue-cobalt));
  stroke-width: 1.3;
  stroke-dasharray: 3 4;
  opacity: 0.7;
  filter: drop-shadow(0 0 4px var(--color-cobalt));
}
.sx-today {
  fill: oklch(1 0 0);
  filter: drop-shadow(0 0 4px var(--color-cobalt));
}
.sx-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 80px;
  margin-top: 8px;
}
.sx-bars i {
  flex: 1;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: linear-gradient(180deg, oklch(0.357 0.012 var(--hue-slate)), oklch(0.236 0.01 var(--hue-slate)));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18);
}
.sx-bars i.is-last {
  background: linear-gradient(180deg, oklch(0.867 0.059 var(--hue-cobalt)), oklch(from var(--color-cobalt) l c h / 0.122));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0),
    0 0 14px -2px var(--color-cobalt);
}
.sx-hbar {
  display: grid;
  grid-template-columns: 64px 1fr 28px;
  align-items: center;
  gap: 8px;
  height: 21px;
  color: var(--ink-2);
  font-size: 8.5px;
}
.sx-hbar:first-of-type {
  margin-top: 6px;
}
.sx-hbar > span {
  height: 5px;
  border-radius: var(--radius-xs);
  background: oklch(1 0 0 / 0.039);
}
.sx-hbar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, oklch(0.418 0.013 var(--hue-slate)), oklch(0.891 0.007 var(--hue-slate)));
}
.sx-hbar b {
  color: var(--ink);
  font-weight: 400;
  text-align: right;
}
.sx-hbar.is-low i {
  background: linear-gradient(90deg, oklch(from var(--color-copper) l c h / 0.2), oklch(0.895 0.066 var(--hue-copper)));
  box-shadow: 0 0 10px oklch(from var(--color-copper) l c h / 0.667);
}
.sx-hbar.is-low b {
  color: oklch(0.853 0.077 calc(var(--hue-copper) + 3));
}
.sx-client {
  display: grid;
  grid-template-columns: 1fr 48px 34px;
  align-items: center;
  height: 21px;
  border-top: 1px solid oklch(1 0 0 / 0.035);
  color: var(--ink-2);
  font-size: 8.5px;
}
.sx-client:first-of-type {
  margin-top: 6px;
}
.sx-client > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  color: oklch(0.898 0.004 var(--hue-slate));
}
.sx-client > span:first-child::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: oklch(0.867 0.059 var(--hue-cobalt));
  box-shadow: 0 0 6px var(--blue);
}
.sx-client.is-down > span:first-child::before {
  background: oklch(0.895 0.066 var(--hue-copper));
  box-shadow: 0 0 6px var(--warm);
}
.sx-client b {
  color: var(--ink);
  font-weight: 400;
  text-align: right;
}
.sx-agentpop {
  z-index: 7;
  width: 250px;
  padding: 12px 13px 13px;
  background:
    radial-gradient(100% 50% at 20% 0%, oklch(1 0 0 / 0.078), transparent 60%),
    linear-gradient(190deg, oklch(0.274 0.011 var(--hue-slate)), oklch(0.196 0.008 var(--hue-slate)));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.169),
    inset 0 0 0 1px oklch(1 0 0 / 0.059),
    0 0 0 1px oklch(0 0 0 / 0.702),
    0 36px 70px -8px oklch(0 0 0 / 0.851),
    0 0 50px -14px oklch(from var(--color-copper) l c h / 0.502);
}
.sx-agentpop-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  border-bottom: 1px solid oklch(1 0 0 / 0.051);
  font-size: 9.5px;
}
.sx-agentpop-head small {
  color: var(--ink-3);
  font-size: 8.5px;
}
.sx-agentpop-body {
  display: grid;
}
.sx-agentpop-body > * {
  grid-area: 1 / 1;
  transition: opacity 0.6s var(--glide);
}
.sx-agentpop-body > :not(.is-on) {
  opacity: 0;
}
.sx-agentpop-head > svg:last-child {
  margin-left: auto;
  color: var(--ink-3);
}
.sx-orbit-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: oklch(0.232 0.01 var(--hue-slate));
  color: oklch(0.91 0.057 var(--hue-copper));
  box-shadow: 0 0 14px oklch(from var(--color-copper) l c h / 0.4);
}
.sx-orbit-icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--sx-a), transparent 0 50%, var(--color-cobalt) 70%, oklch(1 0 0) 82%, var(--color-copper) 94%, transparent);
  -webkit-mask:
    linear-gradient(oklch(0 0 0) 0 0) content-box,
    linear-gradient(oklch(0 0 0) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: sx-orbit 2s linear infinite;
}
.sx-analyzing {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 11px;
}
.sx-analyzing > b {
  font-size: 11px;
  font-weight: 500;
}
.sx-output {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 11px;
  padding: 11px;
  border-radius: var(--radius-sm);
  background: oklch(1 0 0 / 0.024);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.071);
}
.sx-output > b {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.sx-output p {
  min-height: 40px;
  margin: 0;
  color: var(--ink-2);
  font-size: 8.5px;
  line-height: 1.55;
}
.sx-output p span {
  animation: sx-fade 0.5s var(--glide);
}
.sx-impact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid oklch(1 0 0 / 0.051);
  opacity: 0;
  transition: opacity 0.6s var(--glide);
}
.sx-impact.is-on {
  opacity: 1;
}
.sx-impact > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sx-impact b {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-shadow: 0 0 14px oklch(1 0 0 / 0.349);
}
.sx-impact small {
  color: var(--ink-3);
  font-size: 7.5px;
}

@keyframes sx-drift {
  to {
    transform: scale(1.1) translate(-1.5%, -1%);
  }
}
@keyframes sx-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes sx-orbit {
  to {
    --sx-a: 360deg;
  }
}
@keyframes sx-fade {
  from {
    opacity: 0;
  }
}
@keyframes sx-pop {
  from {
    transform: scale(0.4);
  }
}
@keyframes sx-blink {
  50% {
    opacity: 0;
  }
}
@keyframes sx-shimmer {
  to {
    background-position: -220% 0;
  }
}
@keyframes sx-shine {
  0% {
    transform: translateX(-120%);
  }
  40%,
  100% {
    transform: translateX(120%);
  }
}
@keyframes sx-breathe {
  50% {
    opacity: 0.55;
  }
}
@keyframes sx-halo {
  0%,
  100% {
    box-shadow: 0 0 6px oklch(from var(--color-copper) l c h / 0.4);
  }
  50% {
    box-shadow:
      0 0 14px var(--color-copper),
      0 0 26px oklch(from var(--color-copper) l c h / 0.4);
  }
}
@keyframes sx-arrive {
  from {
    box-shadow:
      inset 0 0 0 1px oklch(0.853 0.077 calc(var(--hue-copper) + 3)),
      0 0 26px oklch(from var(--color-copper) l c h / 0.667);
  }
}
@keyframes sx-sweep {
  from {
    transform: translateX(-60px);
  }
  to {
    transform: translateX(330px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx *,
  .sx *::before,
  .sx *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* Built for you map: a landscape card like the AI solutions cards, holding the
   departments of a business on either side of the Element tile; the open
   department shows the flows Element runs there. Surfaces come from solution-visual.css (.sx-win, .sx-tile,
   .sx-led, .sx-done); blue and warm only ever appear as light. */
.wf {
  --ink: oklch(0.961 0.001 286.4);
  --ink-2: oklch(0.653 0.011 var(--hue-slate));
  --ink-3: oklch(0.485 0.012 var(--hue-slate));
  --warm: var(--color-copper);
  --blue: var(--color-cobalt);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --glide: cubic-bezier(0.65, 0, 0.35, 1);
  position: relative;
  max-width: 1120px;
  aspect-ratio: 1120 / 540;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: oklch(0.205 0.01 var(--hue-slate));
  box-shadow:
    0 0 0 1px oklch(0.187 0.011 var(--hue-slate) / 0.141),
    0 30px 60px oklch(0.187 0.011 var(--hue-slate) / 0.18);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: -0.01em;
  user-select: none;
}
.wf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.102);
  pointer-events: none;
}
.wf-scene {
  position: absolute;
  inset: 0;
  background: url(/brand/hero-rocky-valley.png) center 62% / cover;
  transform: scale(1.04);
  animation: sx-drift 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.wf.is-live .wf-scene {
  animation-play-state: running;
}
.wf-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 60% at 45% 48%, oklch(0.155 0.007 var(--hue-slate) / 0.25), transparent),
    radial-gradient(90% 90% at 50% 50%, oklch(0.155 0.007 var(--hue-slate) / 0.6), oklch(0.155 0.007 var(--hue-slate) / 0.85));
}
.wf-stage {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transform-origin: 0 0;
}

/* Wires: hairlines that carry a short comet of light */
.wf-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.wf-line {
  fill: none;
  stroke: oklch(1 0 0 / 0.11);
  stroke-width: 1;
  transition: stroke 0.6s var(--glide);
}
.wf-wire.is-in .wf-line {
  stroke: oklch(from var(--color-cobalt) l c h / 0.38);
}
.wf-port {
  fill: oklch(0.36 0.01 var(--hue-slate));
  stroke: oklch(1 0 0 / 0.16);
  stroke-width: 1;
  transition: fill 0.5s var(--glide);
}
.wf-wire.is-in .wf-port {
  fill: oklch(0.867 0.059 var(--hue-cobalt));
}
.kb-light {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 14 100;
  stroke-dashoffset: 14;
  animation: kb-travel 2.6s var(--glide) infinite both;
  animation-play-state: paused;
}
.wf.is-live .kb-light {
  animation-play-state: running;
}
.kb-light.is-in {
  stroke: oklch(0.93 0.05 var(--hue-cobalt));
  filter: drop-shadow(0 0 3px var(--blue)) drop-shadow(0 0 8px oklch(from var(--color-cobalt) l c h / 0.7));
}
/* The Element tile in its framed wrapper */
.kb-hub {
  position: absolute;
  translate: -50% -50%;
  --s: 0.86;
}
.kb-hub-wrap {
  position: relative;
  width: calc(204px * var(--s));
  height: calc(204px * var(--s));
  padding: calc(35px * var(--s));
  border: 2px solid oklch(0.662 0.016 var(--hue-slate));
  border-radius: calc(54px * var(--s));
  background: radial-gradient(ellipse at 70% 20%, oklch(0.422 0.027 var(--hue-slate)), oklch(0.187 0.011 var(--hue-slate)) 68%);
  box-shadow:
    inset 0 0 30px oklch(1 0 0 / 0.031),
    0 0 0 calc(10px * var(--s)) oklch(0.832 0.057 calc(var(--hue-copper) + 14) / 0.043),
    0 0 0 calc(21px * var(--s)) oklch(0.742 0.09 var(--hue-copper) / 0.063),
    0 0 0 calc(33px * var(--s)) oklch(0.742 0.09 var(--hue-copper) / 0.039),
    22px -15px 60px oklch(0.722 0.107 var(--hue-copper) / 0.32),
    -15px 8px 45px oklch(0.704 0.109 calc(var(--hue-cobalt) - 3) / 0.267),
    0 30px 60px -10px oklch(0 0 0 / 0.7);
}
.kb-hub-wrap::before {
  content: "";
  position: absolute;
  inset: calc(-42px * var(--s));
  border-radius: 50%;
  background: conic-gradient(
    from 25deg,
    transparent,
    oklch(0.722 0.107 var(--hue-copper) / 0.125),
    transparent,
    oklch(0.727 0.137 calc(var(--hue-cobalt) + 6) / 0.094),
    transparent
  );
  filter: blur(14px);
  z-index: -1;
  animation: kb-halo 12s linear infinite;
  animation-play-state: paused;
}
.wf.is-live .kb-hub-wrap::before {
  animation-play-state: running;
}
.kb-hub-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(28px * var(--s));
  border: 1px solid oklch(0.643 0.03 var(--hue-slate) / 0.267);
}
/* Departments: three a side, each opening to the flows Element runs there */
.dp-col {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 352px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.dp-col.is-left {
  left: 32px;
}
.dp-col.is-right {
  right: 32px;
}
.dp {
  position: relative;
  flex: none;
  transition: box-shadow 0.6s var(--glide);
}
.dp.is-open {
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.141),
    inset 0 0 0 1px oklch(from var(--color-cobalt) l c h / 0.4),
    0 0 0 1px oklch(0 0 0 / 0.651),
    0 0 28px -6px oklch(from var(--color-cobalt) l c h / 0.4),
    0 34px 70px -12px oklch(0 0 0 / 0.78);
}
.dp-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 66px;
  padding: 0 18px 0 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dp-head:focus-visible {
  outline: 1px solid oklch(from var(--color-cobalt) l c h / 0.8);
  outline-offset: -3px;
  border-radius: var(--radius-md);
}
.dp-head > span {
  opacity: 0.66;
  transition: opacity 0.4s var(--glide);
}
.dp-head:hover > span,
.dp.is-open .dp-head > span {
  opacity: 1;
}
.dp-name {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.dp-name b {
  font-size: 14px;
  font-weight: 500;
}
.dp-name small {
  color: var(--ink-3);
  font-size: 11px;
  white-space: nowrap;
}
.dp.is-open .kb-chev {
  rotate: -135deg;
  margin-top: 4px;
}
.dp-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--glide);
}
.dp.is-open .dp-body {
  grid-template-rows: 1fr;
}
.dp-flows {
  min-height: 0;
  overflow: hidden;
  margin: 0 14px;
  padding: 0;
  list-style: none;
}
.dp-flows li {
  padding: 12px 2px;
  border-top: 1px solid oklch(1 0 0 / 0.06);
  opacity: 0;
}
.dp-flows li:last-child {
  padding-bottom: 16px;
}
.dp.is-open .dp-flows li {
  animation: kb-arrive 0.55s var(--ease) forwards;
  animation-delay: calc(0.18s + var(--j) * 0.12s);
}
.dp-flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dp-flow-top b {
  font-size: 12.5px;
  font-weight: 500;
}
.dp-flow-top .kb-tag {
  flex: none;
}
.dp-flows p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.4;
}

/* A quiet prompt under the tile that the map responds to clicks */
.kb-hint {
  position: absolute;
  left: 50%;
  top: calc(100% + 26px);
  margin: 0;
  translate: -50% 0;
  color: var(--ink-2);
  font-family: var(--font-utility);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: sx-breathe 3.2s ease-in-out infinite;
  animation-play-state: paused;
}
.wf.is-live .kb-hint {
  animation-play-state: running;
}
.kb.is-tall .kb-hint {
  top: calc(100% + 14px);
  font-size: 9px;
}
.kb-icon {
  width: 34px;
  height: 34px;
}
.kb-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 19px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: oklch(1 0 0 / 0.035);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.07);
  color: var(--ink-2);
  font-family: var(--font-utility);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kb-chev {
  flex: none;
  width: 7px;
  height: 7px;
  margin: -4px 4px 0;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  rotate: 45deg;
  transition:
    rotate 0.5s var(--ease),
    margin 0.5s var(--ease);
}

/* Phone: the tile above one column of departments */
@media (max-width: 700px) {
  .wf {
    aspect-ratio: 360 / 830;
  }
}
.kb.is-tall .dp-col {
  left: 12px;
  right: 12px;
  top: 170px;
  bottom: 12px;
  width: auto;
  justify-content: flex-start;
  gap: 8px;
}
.kb.is-tall .dp-head {
  height: 58px;
}
.kb.is-tall .kb-hub {
  --s: 0.5;
}

@keyframes kb-travel {
  0% {
    stroke-dashoffset: 14;
  }
  45%,
  100% {
    stroke-dashoffset: -100;
  }
}
@keyframes kb-halo {
  to {
    transform: rotate(360deg);
  }
}
@keyframes kb-arrive {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wf-scene,
  .kb-hub-wrap::before,
  .kb-hint {
    animation: none;
  }
  .kb-light {
    display: none;
  }
  .dp.is-open .dp-flows li {
    animation: none;
    opacity: 1;
  }
}
.integrations-carousel {
  position: relative;
  max-width: 960px;
  margin: 45px auto 0;
  padding: 0 20px 96px;
  color: var(--color-black);
  overflow: hidden;
}
.integrations-eyebrow {
  margin: 0 0 26px;
  text-align: center;
  color: var(--color-black);
}
.integrations-window {
  width: min(50%, 440px);
  margin: 0 auto;
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent,
    oklch(0 0 0) 30%,
    oklch(0 0 0) 70%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    oklch(0 0 0) 30%,
    oklch(0 0 0) 70%,
    transparent
  );
}
.integrations-track {
  display: flex;
  width: max-content;
  animation: integration-scroll 48s linear infinite;
  animation-play-state: paused;
}
.integrations-track-1 {
  margin-top: 2px;
  animation-duration: 55s;
  animation-direction: reverse;
}
.integrations-carousel.is-visible .integrations-track {
  animation-play-state: running;
}
.integrations-group {
  display: flex;
  gap: 2px;
  padding-right: 2px;
  flex: none;
}
.integration-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 70px;
  height: 70px;
  border: 1px solid oklch(0.757 0.007 var(--hue-slate));
  border-radius: var(--radius-md);
  background: radial-gradient(ellipse at 70% 20%, oklch(0.375 0.018 var(--hue-slate)), oklch(0.187 0.011 var(--hue-slate)) 78%);
  box-shadow: inset 0 1px 1px oklch(1 0 0 / 0.094);
}
.integration-tile img {
  width: 33px;
  height: 33px;
  object-fit: contain;
  filter: invert(1);
  opacity: 0.72;
  user-select: none;
}
@keyframes integration-scroll {
  to {
    transform: translateX(-25%);
  }
}
@media (max-width: 700px) {
  .integrations-carousel {
    margin-top: 28px;
    padding: 0 0 64px;
  }
  .integrations-eyebrow {
    margin-bottom: 20px;
  }
  .integrations-group {
    gap: 2px;
    padding-right: 2px;
  }
  .integrations-track-1 {
    margin-top: 2px;
  }
  .integration-tile {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-sm);
  }
  .integration-tile img {
    width: 27px;
    height: 27px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .integrations-track {
    animation: none;
  }
  .integrations-track-1 {
    transform: translateX(-100px);
  }
}
/* The approach rises a full screen over the end of the solutions pin. ServicesSection.js also sets this margin when its
   timeline first runs; setting it here gives the page its final length from the first frame. */
.ea-approach { color: var(--color-black); overflow: hidden; margin-top: -100dvh; }
.approach-stage { align-items: stretch; }
.approach-controls { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.approach-index { display: flex; flex-direction: column; gap: 16px; }
.approach-index button { display: flex; align-items: center; gap: 16px; color: var(--color-black); opacity: .35; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; transition: opacity .5s; }
.approach-index button > svg { flex: none; width: 1em; height: 1em; opacity: 0; }
.approach-index button[aria-selected="true"], .approach-index button:hover { opacity: 1; }
.approach-index button[aria-selected="true"] > svg { opacity: 1; }
.approach-index button:focus-visible, .approach-arrows button:focus-visible { outline: 1px solid var(--color-black); outline-offset: 6px; }
/* Previous and next take the ghost link's form: a bare arrow over an underline. */
.approach-arrows { display: flex; gap: 20px; }
.approach-arrows button { display: grid; place-items: center; width: 44px; height: 40px; padding: 0; border: 0; border-bottom: 1px solid var(--color-black); background: transparent; color: var(--color-black); cursor: pointer; transition: opacity .3s; }
.approach-arrows button:hover { opacity: .6; }
.approach-arrows svg { width: 18px; height: 18px; }
.approach-panels { display: grid; }
.approach-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s, visibility .6s; }
.approach-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.approach-step-label { margin: 0 0 28px; opacity: .6; }
.approach-statement { margin: 0 0 48px; }
.approach-outcome .title { opacity: .55; margin: 0 0 12px; }
.approach-outcome .small { margin: 0; max-width: 420px; }
.approach-contact { margin-top: 56px; }
@media (max-width: 767px) {
  .approach-index { display: none; }
  .approach-step-label { margin-bottom: 24px; }
  .approach-statement { margin-bottom: 34px; }
  .approach-contact { margin-top: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .approach-panel, .approach-index button { transition: none; }
}
#site-footer {
  min-height: 100svh;
  isolation: isolate;
  background: oklch(0 0 0);
}
.footer-landscape {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg, oklch(0 0 0) 0%, oklch(0 0 0 / 0) 45%, oklch(0 0 0 / 0.133) 100%), url('/brand/footer-rocks.webp') center bottom / cover no-repeat;
  mask-image: linear-gradient(transparent, oklch(0 0 0) 27%);
}
#site-footer > .relative.z-20 { min-height: 100svh; }
#site-footer > .relative.z-20 > .tr__container {
  padding-top: clamp(88px, 12svh, 128px);
  padding-bottom: clamp(140px, 22svh, 230px);
  justify-content: space-between;
  gap: clamp(30px, 6svh, 60px);
}
#site-footer .tr__container > .grid:first-child { margin-bottom: 0; }
#site-footer .tr__container > .grid:last-child { margin-top: 0; margin-bottom: 0; }
#site-footer h2.big { font-size: clamp(48px, 5.8vw, 88px); line-height: 1.04; }
#site-footer .tr__container > .grid { column-gap: 40px; }
#site-footer .tr__container > .grid:first-child > div:last-child { justify-content: flex-start; }
#site-footer .tr__container > .grid:first-child > div:last-child > div:first-child { margin-bottom: 24px; }
#site-footer .tr__container > .grid:last-child > div:first-child { justify-content: flex-end; }
@media (max-width: 767px) {
  #site-footer > .relative.z-20 > .tr__container { padding-top: 82px; padding-bottom: 100px; gap: 24px; }
  #site-footer .tr__container > .grid { gap: 24px; }
  #site-footer h2.big { font-size: clamp(42px, 9vw, 60px); }
  #site-footer .tr__container > .grid:first-child > div:last-child > div:first-child { display: none; }
  #site-footer .tr__container > .grid:first-child > div:last-child > .flex { gap: 14px; }
  #site-footer .tr__container > .grid:last-child > div:last-child > .flex { gap: 20px; flex-wrap: nowrap; }
  #site-footer .tr__container > .grid:last-child > div:last-child .title { margin-bottom: 12px; }
  #site-footer .tr__container > .grid:last-child > div:last-child .max-w-52 { width: 42%; }
  #site-footer .tr__container > .grid:last-child p { font-size: 13px; }
  .footer-landscape { height: 74%; background-size: auto 100%; background-position: 65% bottom; }
}
@media (max-height: 740px) and (min-width: 768px) {
  #site-footer > .relative.z-20 > .tr__container { padding-top: 78px; padding-bottom: 85px; gap: 30px; }
  #site-footer h2.big { font-size: 60px; }
}

#site-footer .tr__container > .grid:last-child { text-shadow: 0 1px 6px oklch(from var(--color-night) l c h / 0.8); }
#site-footer .tr__container > .grid:last-child .text-light-font\/50 { color: oklch(0.811 0.007 var(--hue-slate)); }

.footer-smoke { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Preserve the original columns, with the final CTA centered vertically. */
#site-footer > .relative.z-20 > .tr__container {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  padding-top: 88px;
  padding-bottom: 88px;
  row-gap: 32px;
}
#site-footer .tr__container > .grid:first-child {
  grid-row: 2;
  align-items: center;
}
#site-footer .tr__container > .grid:last-child {
  grid-row: 3;
  align-self: end;
}
#site-footer .tr__container > .grid:first-child > div:last-child > div:first-child {
  position: absolute;
  top: 96px;
  right: var(--container-padding, 36px);
  width: auto;
  margin: 0;
}
@media (max-width: 767px) {
  #site-footer > .relative.z-20 > .tr__container {
    padding-top: 82px;
    padding-bottom: 64px;
    row-gap: 28px;
  }
}
/* The FAQ rises a full screen over the end of the work gallery's pin; OrbitGallerySection.js sets the same margin when
   its pin is created, and setting it here gives the page its final length from the first frame. */
.ea-faq { color: var(--color-black); margin-top: -100dvh; min-height: 100dvh; background: linear-gradient(180deg, #C3C3C3 0%, #FFFFFF 100%); }
/* The FAQ holds its last screen as the footer rises through the pin's extra screen. */
@media (min-width: 768px) {
  #site-footer { margin-top: -100dvh; }
}
.faq-intro { display: flex; flex-direction: column; gap: 28px; }
.faq-intro .small { margin: 0; }
.faq-contact { margin-top: 12px; }
.faq-list { border-top: 1px solid color-mix(in oklch, var(--color-black) 15%, transparent); }
.faq-item { border-bottom: 1px solid color-mix(in oklch, var(--color-black) 15%, transparent); }
.faq-item summary { display: grid; grid-template-columns: 56px 1fr 20px; align-items: center; gap: 16px; padding: 28px 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 1px solid var(--color-black); outline-offset: 6px; }
.faq-index { opacity: .45; }
.faq-question { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.25; letter-spacing: -0.01em; }
.faq-toggle { position: relative; width: 20px; height: 20px; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; translate: -50% -50%; transition: rotate .4s; }
.faq-toggle::after { rotate: 90deg; }
.faq-item[open] .faq-toggle::after { rotate: 0deg; }
.faq-answer { margin: 0; padding: 0 36px 32px 72px; max-width: 640px; opacity: .8; }
@media (max-width: 1023px) {
  .faq-list { margin-top: 48px; }
}
@media (max-width: 767px) {
  .faq-item summary { grid-template-columns: 36px 1fr 20px; padding: 22px 0; }
  .faq-answer { padding: 0 0 26px 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-toggle::before, .faq-toggle::after { transition: none; }
}