/* Landing 2.0: the frontier archive.
   Grainy photographic space beside sharp reading surfaces. Swiss type carries the
   voice; motion is weighted and deliberate. Loaded last, for the landing only. */

html[data-landing-style='photographic'] {
  --f-void: #050506;
  --f-paper: #ffffff;
  --f-ink: #131313;
  --f-ink-2: #2b2b2b;
  --f-muted: #666666;
  --f-rule: rgb(19 19 18 / 0.13);
  --f-rule-dark: rgb(236 232 224 / 0.15);
  --f-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --f-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --f-gutter: var(--pad, clamp(24px, 5vw, 88px));
  --reading-paper: var(--f-paper);
  --paper: var(--f-paper);
  --ink: var(--f-ink);
  --muted: var(--f-muted);
  --ginsi-paper: var(--f-paper);
  --ginsi-ink: var(--f-ink);
  background: var(--f-void);
}
html.has-weighted-scroll {
  scroll-behavior: auto;
}
[data-landing-page] {
  background: var(--f-paper);
  color: var(--f-ink);
  text-rendering: optimizeLegibility;
}
[data-landing-page] ::selection {
  background: rgb(173 157 169 / 0.35);
  color: inherit;
}

/* Film grain belongs to photographs and animation only. It sits inside each visual,
   beneath any text, so reading surfaces and type stay sharp. The hero carries its own
   grain in its shader. */
.workflow-photo::after,
html[data-landing-style='photographic'] [data-landing-page] .os-refined__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--f-grain) 0 0 / 180px 180px;
}
.workflow-photo::after {
  opacity: 0.07;
}
html[data-landing-style='photographic'] [data-landing-page] .os-refined__stage::after {
  opacity: 0.055;
}
html[data-landing-style='photographic'] [data-landing-page] .closing-scene::before {
  content: none;
}
/* ---------- Navigation ---------- */
html[data-landing-style='photographic'] [data-landing-page] .landing-nav {
  height: 76px;
  transition:
    transform 700ms var(--f-ease),
    background-color 450ms ease,
    color 450ms ease,
    border-color 450ms ease,
    backdrop-filter 450ms ease;
}
html[data-landing-style='photographic'] [data-landing-page] .landing-nav[data-at-top='true'] {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .landing-nav:not([data-surface='paper']):not([data-at-top='true']) {
  background: rgb(8 8 10 / 0.72);
  border-color: var(--f-rule-dark);
  backdrop-filter: blur(18px) saturate(1.1);
}
html[data-landing-style='photographic'] [data-landing-page] .landing-nav[data-surface='paper'] {
  background: rgb(255 255 255 / 0.86);
  border-color: var(--f-rule);
  backdrop-filter: blur(18px) saturate(1.2);
}
html[data-landing-style='photographic'] [data-landing-page] .landing-nav[data-hidden='true'] {
  transform: translate3d(0, -100%, 0);
}
/* The header only steps aside on scroll, so Tab can reach it while hidden. A header
   that holds focus stays in view. */
html[data-landing-style='photographic']
  [data-landing-page]
  .landing-nav[data-hidden='true']:focus-within {
  transform: none;
}

/* ---------- Opening ----------
   The approved abstract light and centred headline stay as they are. The headline
   rises out of two line masks while the light develops, then lags as you leave. */
html[data-landing-style='photographic'] #opening {
  --hero-out: 0;
  background: #131316;
}
.hero-atmosphere__fallback img {
  animation: f-develop 2.4s ease 0.1s both;
}
.hero-atmosphere__canvas {
  transform: scale(calc(1 + var(--hero-out, 0) * 0.05));
  transform-origin: 70% 30%;
}
@keyframes f-develop {
  from {
    opacity: 0;
  }
}
[data-hero-heading] {
  will-change: transform;
}
[data-hero-heading] > div {
  overflow: hidden;
  padding: 0 0.06em 0.14em;
  margin: 0 -0.06em -0.14em;
}
[data-hero-heading] > div > span {
  animation: f-rise 1700ms var(--f-ease, ease) 300ms both;
}
[data-hero-heading] > div + div > span {
  animation-delay: 430ms;
}
@keyframes f-rise {
  from {
    transform: translate3d(0, 105%, 0);
  }
  to {
    transform: none;
  }
}
html[data-landing-style='photographic'] #opening .hero-foot {
  animation: f-fade-in 1400ms ease 1400ms both;
}
html[data-landing-style='photographic'] #opening .hero-foot > a .site-link-arrow {
  animation: f-nudge 3.2s var(--f-ease-in-out) 3.4s infinite;
}
@keyframes f-nudge {
  0%,
  55%,
  100% {
    transform: translateY(0);
  }
  27% {
    transform: translateY(4px);
  }
}
@keyframes f-fade-in {
  from {
    opacity: 0;
  }
}

/* ---------- Entrances ---------- */
.f-line {
  display: block;
  overflow: hidden;
  padding: 0 0.04em 0.1em 0;
  margin-bottom: -0.1em;
}
.f-line__inner {
  display: block;
}
.f-motion [data-reveal='lines']:not(.is-revealed) .f-line__inner {
  transform: translate3d(0, 106%, 0) rotate(1.8deg);
}
.f-motion [data-reveal='lines'] .f-line__inner {
  transform-origin: 0 100%;
  transition: transform 1250ms var(--f-ease);
  transition-delay: calc(var(--line, 0) * 90ms + var(--reveal-delay, 0ms));
}
.f-motion [data-reveal='up']:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
.f-motion [data-reveal='up'] {
  transition:
    opacity 1000ms ease,
    transform 1200ms var(--f-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.f-motion [data-reveal='frame']:not(.is-revealed) {
  clip-path: inset(9% 7% 9% 7%);
  transform: scale(0.965);
  opacity: 0.2;
}
.f-motion [data-reveal='frame'] {
  transition:
    clip-path 1500ms var(--f-ease),
    transform 1500ms var(--f-ease),
    opacity 900ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.f-motion [data-reveal='stagger']:not(.is-revealed) > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}
.f-motion [data-reveal='stagger'] > * {
  transition:
    opacity 900ms ease,
    transform 1100ms var(--f-ease);
  transition-delay: calc(var(--stagger, 0) * 110ms + var(--reveal-delay, 0ms));
}

@media (prefers-reduced-motion: reduce) {
  [data-hero-heading] > div > span,
  .hero-atmosphere__fallback img,
  html[data-landing-style='photographic'] #opening .hero-foot,
  html[data-landing-style='photographic'] #opening .hero-foot > a .site-link-arrow {
    animation: none;
  }
  .hero-atmosphere__canvas {
    transform: none;
  }
}

/* ---------- Shared section typography ---------- */
html[data-landing-style='photographic'] [data-landing-page] .section-intro {
  max-width: 1320px;
  margin: 0 auto clamp(56px, 6.4vw, 96px);
  gap: clamp(32px, 6vw, 110px);
}
html[data-landing-style='photographic'] [data-landing-page] .section-intro h2 {
  font-size: clamp(44px, 5.6vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}
html[data-landing-style='photographic'] [data-landing-page] .section-intro > div {
  max-width: 400px;
}
html[data-landing-style='photographic'] [data-landing-page] .section-intro p {
  font-size: 17px;
  line-height: 1.55;
}
html[data-landing-style='photographic'] [data-landing-page] .section-intro .text-link {
  margin-top: 26px;
}

/* ---------- Premise ---------- */
html[data-landing-style='photographic'] [data-landing-page] .thesis {
  padding: clamp(110px, 13vw, 200px) var(--f-gutter) clamp(90px, 10vw, 150px);
  background: var(--f-paper);
}
html[data-landing-style='photographic'] [data-landing-page] .thesis h2 {
  font-size: clamp(56px, 9.2vw, 168px);
  line-height: 0.94;
  letter-spacing: -0.058em;
  max-width: 1440px;
}
[data-landing-page] .thesis .f-line + .f-line .f-line__inner {
  --line: 1.6;
}
@media (max-width: 700px) {
  html[data-landing-style='photographic'] [data-landing-page] .thesis h2 {
    font-size: clamp(38px, 11.4vw, 64px);
    line-height: 0.98;
  }
  html[data-landing-style='photographic'] [data-landing-page] .cap-copy h2 {
    font-size: clamp(34px, 9.6vw, 52px);
  }
}

/* ---------- Capabilities ---------- */
html[data-landing-style='photographic'] [data-landing-page] .loop-scene {
  padding-bottom: clamp(90px, 10vw, 150px);
  background: var(--f-paper);
}
html[data-landing-style='photographic'] [data-landing-page] .cap-row {
  border-top: 0;
  transition: background-color 600ms var(--f-ease);
}
/* The rule runs edge to edge, like the row's band beneath it. */
html[data-landing-style='photographic'] [data-landing-page] .cap-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--f-rule);
  transform: none;
  opacity: 1;
  transform-origin: 0 50%;
  transition: transform 1400ms var(--f-ease);
  animation: none;
}
html[data-landing-style='photographic'] [data-landing-page] .cap-row:last-child {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--f-rule);
}
html[data-landing-style='photographic'] [data-landing-page] .cap-row:hover,
html[data-landing-style='photographic'] [data-landing-page] .cap-row:focus-visible,
html[data-landing-style='photographic'] [data-landing-page] .cap-row[data-selected] {
  background: #f7f7f7;
}
html[data-landing-style='photographic'] [data-landing-page] .cap-copy h2 {
  letter-spacing: -0.052em;
}
.f-motion [data-landing-page] .cap-row[data-reveal='row']:not(.is-revealed)::before {
  transform: scaleX(0);
}
.f-motion [data-landing-page] .cap-row[data-reveal='row'] .cap-copy h2 {
  transition:
    font-size 0.48s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.35s,
    transform 1200ms var(--f-ease),
    clip-path 1200ms var(--f-ease);
}
.f-motion [data-landing-page] .cap-row[data-reveal='row']:not(.is-revealed) .cap-copy h2 {
  transform: translate3d(0, 55%, 0);
  clip-path: inset(0 0 100% 0);
}
.f-motion [data-landing-page] .cap-row[data-reveal='row'] .cap-ghost {
  transition:
    opacity 450ms ease,
    transform 1600ms var(--f-ease);
}
.f-motion [data-landing-page] .cap-row[data-reveal='row']:not(.is-revealed) .cap-ghost {
  opacity: 0;
  transform: translate3d(8%, 0, 0);
}

/* ---------- Security & privacy ----------
   A hard, white page: large type on a strict grid, bold rules and one exact drawing. */
html[data-landing-style='photographic'] [data-landing-page] .privacy-scene {
  --trust-ink: #0d0d0d;
  padding: clamp(110px, 12vw, 190px) var(--f-gutter) clamp(100px, 11vw, 170px);
  background: #fff;
  color: var(--trust-ink);
}
html[data-landing-style='photographic'] [data-landing-page] .privacy-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  align-items: end;
  gap: clamp(32px, 6vw, 110px);
  max-width: 1320px;
  margin: 0 auto clamp(12px, 2vw, 28px);
  text-align: left;
}
html[data-landing-style='photographic'] [data-landing-page] .privacy-heading h2 {
  max-width: 8.4em;
  font-size: clamp(56px, 8vw, 136px);
  font-weight: var(--ginsi-public-display-weight, 400);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
html[data-landing-style='photographic'] [data-landing-page] .privacy-heading p {
  max-width: 360px;
  margin: 0;
  color: #4d4d4d;
  font-size: 17px;
  line-height: 1.5;
}
html[data-landing-style='photographic'] [data-landing-page] .security-instrument {
  position: relative;
  max-width: 1320px;
  height: clamp(420px, 40vw, 580px);
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
}
.security-instrument > .landing-animation {
  display: block;
  width: 100%;
  height: 100%;
}
.trust-instrument {
  position: relative;
  width: 100%;
  height: 100%;
}
.trust-instrument canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
html[data-landing-style='photographic'] [data-landing-page] .privacy-principles {
  max-width: 1320px;
  margin: 0 auto;
  gap: clamp(24px, 3.6vw, 56px);
}
html[data-landing-style='photographic'] [data-landing-page] .privacy-principles > div {
  position: relative;
  padding-top: 26px;
  border-top: 3px solid var(--trust-ink);
  cursor: default;
  transition: opacity 500ms ease;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .privacy-principles:has([data-trust-active])
  > div:not([data-trust-active]) {
  opacity: 0.35;
}
html[data-landing-style='photographic'] [data-landing-page] .privacy-principles h3 {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: var(--ginsi-public-display-weight, 400);
  line-height: 1.1;
  letter-spacing: -0.035em;
}
html[data-landing-style='photographic'] [data-landing-page] .privacy-principles p {
  max-width: 34ch;
  margin-top: 14px;
  color: #4d4d4d;
  font-size: 16px;
  line-height: 1.5;
}
html[data-landing-style='photographic'] [data-landing-page] .security-link {
  max-width: 1320px;
  margin: clamp(48px, 5vw, 72px) auto 0;
  justify-content: flex-start;
}
@media (max-width: 700px) {
  html[data-landing-style='photographic'] [data-landing-page] .privacy-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  html[data-landing-style='photographic'] [data-landing-page] .security-instrument {
    height: 64vw;
    margin-block: 12px;
  }
  html[data-landing-style='photographic'] [data-landing-page] .privacy-principles > div {
    display: block;
    border-bottom: 0;
  }
}

/* ---------- Ginsi OS ----------
   The instrument fills the pinned frame; heading, copy and proof sit above it. */
html[data-landing-style='photographic'] [data-landing-page] .os-scene {
  background: #050507;
}
html[data-landing-style='photographic'] [data-landing-page] .os-sticky {
  background: #050507;
}
html[data-landing-style='photographic'] [data-landing-page] .os-sticky::before,
html[data-landing-style='photographic'] [data-landing-page] .os-sticky::after {
  content: none;
}
html[data-landing-style='photographic'] [data-landing-page] .assembly-stage,
html[data-landing-style='photographic'] [data-landing-page] .assembly-stage .os-refined {
  position: static;
  background: transparent;
}
html[data-landing-style='photographic'] [data-landing-page] .os-refined__stage {
  position: absolute;
  z-index: 0;
  inset: 0;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .os-refined[data-renderer='fallback']
  .os-refined__stage {
  background:
    linear-gradient(180deg, transparent 40%, #050507 85%),
    url('/landing-assets/os-galaxy-photographic-v3.jpg') center 20% / cover no-repeat;
  opacity: 0.7;
}
html[data-landing-style='photographic']
  [data-landing-page]
  :is(.os-heading, .os-progress, .os-proof) {
  position: relative;
  z-index: 2;
}
html[data-landing-style='photographic'] [data-landing-page] .os-refined__copy {
  z-index: 1;
  left: var(--f-gutter);
}
html[data-landing-style='photographic'] [data-landing-page] .os-refined__title {
  font-weight: 400;
  letter-spacing: -0.045em;
}
.os-refined__copy[data-turn='a'] > *,
.os-refined__copy[data-turn='b'] > * {
  animation: os-copy-a 1000ms var(--f-ease, ease) both;
}
.os-refined__copy[data-turn='b'] > * {
  animation-name: os-copy-b;
}
.os-refined__copy > * + * {
  animation-delay: 90ms !important;
}
@keyframes os-copy-a {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
}
@keyframes os-copy-b {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
}
html[data-landing-style='photographic'] [data-landing-page] .os-progress {
  background: rgb(236 233 226 / 0.14);
}
html[data-landing-style='photographic'] [data-landing-page] .os-progress > span {
  height: 1px;
  background: rgb(236 233 226 / 0.8);
}
html[data-landing-style='photographic'] [data-landing-page] .os-proof {
  color: rgb(236 233 226 / 0.58);
  font-size: 13px;
}
html[data-landing-style='photographic'] [data-landing-page] .os-heading > p {
  color: rgb(236 233 226 / 0.62);
}
@media (prefers-reduced-motion: reduce) {
  .os-refined__copy[data-turn] > * {
    animation: none !important;
  }
}

/* ---------- Workflows ----------
   The planetary photograph sits on its own layer and drifts slower than the page. */
html[data-landing-style='photographic'] [data-landing-page] .workflow-scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0f0c0f;
}
.workflow-photo {
  position: absolute;
  z-index: -1;
  inset: -14% 0;
  background:
    linear-gradient(90deg, #0e0b102e, transparent 66%),
    linear-gradient(180deg, #0d090c26 10%, #0d090c10 42%, #0d090c8a 78%, #0d090cb0 100%),
    url('/landing-assets/workflow-planetary.png') center 55% / cover no-repeat;
  will-change: transform;
}
@media (max-width: 700px) {
  .workflow-photo {
    background-position:
      center,
      center,
      60% center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-photo {
    inset: 0;
  }
}

/* ---------- Closing ---------- */
html[data-landing-style='photographic'] [data-landing-page] .contact-invitation > a.closing-link {
  transition: transform 700ms var(--f-ease);
}

/* ---------- Ori in the conversation ----------
   Ori stands in a small pool of light, grounded by a soft floor shadow, and the light
   takes the tint of the chosen finish. Presentation only: the runtime owns the portrait. */
html[data-landing-style='photographic'] [data-landing-page] .voice-identity .ginsi-presence-widget {
  --ori-light: #fffaf2;
  gap: 18px;
}
[data-landing-page]
  .voice-identity
  .ginsi-presence-widget:has([data-presence-finish='moonlight'][aria-pressed='true']) {
  --ori-light: #eaf1f8;
}
[data-landing-page]
  .voice-identity
  .ginsi-presence-widget:has([data-presence-finish='sage'][aria-pressed='true']) {
  --ori-light: #edf2e7;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .voice-conversation
  .voice-identity
  .ginsi-presence-portrait {
  width: 64px;
  height: 84px;
}
[data-landing-page] .voice-identity .ginsi-presence-portrait::before,
[data-landing-page] .voice-identity .ginsi-presence-portrait::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  pointer-events: none;
}
[data-landing-page] .voice-identity .ginsi-presence-portrait::before {
  top: 42%;
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at 50% 50%,
    var(--ori-light) 0%,
    color-mix(in srgb, var(--ori-light) 70%, transparent) 40%,
    transparent 70%
  );
}
[data-landing-page] .voice-identity .ginsi-presence-portrait::after {
  bottom: 1%;
  width: 56%;
  height: 7%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgb(41 38 44 / 0.2), transparent 70%);
}
html[data-landing-style='photographic']
  [data-landing-page]
  .voice-conversation
  .ginsi-presence-widget
  .ginsi-presence-intro {
  font-size: 18px;
  letter-spacing: -0.02em;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .voice-conversation
  .ginsi-presence-appearance
  summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  list-style: none;
  transition: color 200ms ease;
}
[data-landing-page] .voice-identity .ginsi-presence-appearance summary::-webkit-details-marker {
  display: none;
}
[data-landing-page] .voice-identity .ginsi-presence-appearance summary::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 300ms var(--f-ease);
}
[data-landing-page] .voice-identity .ginsi-presence-appearance[open] summary::after {
  transform: translateY(1px) rotate(-135deg);
}
[data-landing-page] .voice-identity .ginsi-presence-appearance summary:hover {
  color: #292622;
}

/* Callouts on the trust drawing: short names on thin leaders, cut out of the lines. */
.trust-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.trust-labels > span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 7px;
  background: #fff;
  color: #1a1a1a;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}
@media (max-width: 640px) {
  .trust-labels > span {
    padding: 2px 4px;
    font-size: 11px;
  }
}

/* ---------- Workflows: three steps on the horizon ----------
   No boxes: one thin line across the landscape, a point of light per step and the
   step's words beneath it. A step that is not open reads as a link: a fine underline
   under its title and a small plus beside it. The chosen step is lit, the line fills up
   to it and its detail opens beneath it, joined by a short tick. Stacked on a phone, the
   detail opens inside the list, directly under its step. */
html[data-landing-style='photographic'] [data-landing-page] .workflow-exhibit {
  --flow-gap: clamp(24px, 4vw, 64px);
  --detail-gap: clamp(48px, 5vw, 72px);
  max-width: 1320px;
}
html[data-landing-style='photographic'] [data-landing-page] .workflow-route {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--flow-gap);
  margin-top: clamp(56px, 8vw, 120px);
  padding: 0;
}
[data-landing-page] .workflow-route::before,
[data-landing-page] .workflow-route::after {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  height: 1px;
  pointer-events: none;
}
[data-landing-page] .workflow-route::before {
  right: 0;
  background: rgb(255 255 255 / 0.26);
}
/* The page script measures the chosen step and sets --workflow-fill. */
[data-landing-page] .workflow-route::after {
  width: var(--workflow-fill, 0px);
  background: rgb(255 255 255 / 0.85);
  transition: width 900ms var(--f-ease);
}
[data-landing-page] .workflow-route[data-touring]::after {
  transition-duration: 1300ms;
}
html[data-landing-style='photographic'] [data-landing-page] .workflow-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: start;
  gap: 10px;
  padding: 36px 0 0;
  text-align: left;
  cursor: pointer;
}
html[data-landing-style='photographic'] [data-landing-page] .workflow-node .node-symbol {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 50%;
  background: #140f12;
  box-shadow: none;
  font-size: 0;
  transition:
    background-color 400ms ease,
    box-shadow 600ms var(--f-ease),
    border-color 400ms ease;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .workflow-node[aria-pressed='true']
  .node-symbol {
  border-color: #fff;
  background: #fff;
  box-shadow:
    0 0 0 6px rgb(255 255 255 / 0.1),
    0 0 24px rgb(255 255 255 / 0.45);
}
html[data-landing-style='photographic'] [data-landing-page] .workflow-node :is(strong, span) {
  align-self: auto;
  text-shadow: 0 1px 14px rgb(12 8 10 / 0.55);
}
html[data-landing-style='photographic'] [data-landing-page] .workflow-node strong {
  display: inline-flex;
  align-items: baseline;
  gap: 0.36em;
  margin: 0;
  color: rgb(255 255 255 / 0.62);
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: color 300ms ease;
}
html[data-landing-style='photographic'] [data-landing-page] .workflow-node > span:last-child {
  margin: 0;
  color: rgb(255 255 255 / 0.5);
  font-size: 15px;
  transition: color 300ms ease;
}
/* The one link anatomy, at the size of a step title. Without the page script the steps
   cannot open anything, so they stay plain titles over the details printed below. */
html[data-landing-style='photographic'] [data-landing-page] .workflow-node-label {
  position: relative;
}
html.js[data-landing-style='photographic'] [data-landing-page] .workflow-node-label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transition: opacity 220ms ease;
}
html[data-landing-style='photographic'] [data-landing-page] .workflow-node .workflow-node-open {
  display: none;
  align-self: center;
  font-size: 0.74em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  transition:
    opacity 220ms ease,
    transform 320ms var(--f-ease);
}
html.js[data-landing-style='photographic'] [data-landing-page] .workflow-node-open {
  display: inline-block;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .workflow-node:is([aria-pressed='true'], :focus-visible)
  strong {
  color: #fff;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .workflow-node:is([aria-pressed='true'], :focus-visible)
  > span:last-child {
  color: rgb(255 255 255 / 0.78);
}
html[data-landing-style='photographic'] [data-landing-page] .workflow-node:focus-visible {
  outline: 2px solid var(--c-earthlight);
  outline-offset: 10px;
}
html.js[data-landing-style='photographic']
  [data-landing-page]
  .workflow-node:focus-visible
  .workflow-node-label::after {
  opacity: 1;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .workflow-node:focus-visible:not([aria-pressed='true'])
  .node-symbol {
  border-color: #fff;
  box-shadow: 0 0 0 6px rgb(255 255 255 / 0.08);
}
@media (hover: hover) and (pointer: fine) {
  html[data-landing-style='photographic'] [data-landing-page] .workflow-node:hover strong {
    color: #fff;
  }
  html[data-landing-style='photographic']
    [data-landing-page]
    .workflow-node:hover
    > span:last-child {
    color: rgb(255 255 255 / 0.78);
  }
  html.js[data-landing-style='photographic']
    [data-landing-page]
    .workflow-node:hover
    .workflow-node-label::after {
    opacity: 1;
  }
  html[data-landing-style='photographic']
    [data-landing-page]
    .workflow-node:hover
    .workflow-node-open {
    transform: rotate(90deg);
  }
  html[data-landing-style='photographic']
    [data-landing-page]
    .workflow-node:hover:not([aria-pressed='true'])
    .node-symbol {
    border-color: #fff;
    box-shadow: 0 0 0 6px rgb(255 255 255 / 0.08);
  }
}
/* The open step needs no invitation. */
html.js[data-landing-style='photographic']
  [data-landing-page]
  .workflow-node[aria-pressed='true']
  .workflow-node-label::after,
html[data-landing-style='photographic']
  [data-landing-page]
  .workflow-node[aria-pressed='true']
  .workflow-node-open {
  opacity: 0;
}
html[data-landing-style='photographic'] [data-landing-page] .workflow-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--flow-gap);
  min-height: 0;
  margin: var(--detail-gap) 0 0;
  padding: 0 0 clamp(36px, 4vw, 56px);
}
/* Each detail sits in its own step's column. */
html[data-landing-style='photographic'] [data-landing-page] .workflow-detail > div {
  position: relative;
  display: block;
  grid-row: 1;
  animation: none;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .workflow-detail
  > [data-workflow-panel='0'] {
  grid-column: 1;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .workflow-detail
  > [data-workflow-panel='1'] {
  grid-column: 2;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .workflow-detail
  > [data-workflow-panel='2'] {
  grid-column: 3;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .workflow-detail
  :is(.detail-caption, .workflow-detail-note) {
  display: block;
}
html[data-landing-style='photographic'] [data-landing-page] .workflow-detail p {
  margin: 14px 0 16px;
  font-size: clamp(20px, 1.65vw, 24px);
}
@media (min-width: 701px) {
  /* A short tick drops from the chosen step to its detail. */
  html[data-landing-style='photographic'] [data-landing-page] .workflow-detail > div::before {
    content: '';
    position: absolute;
    left: 5px;
    top: calc(18px - var(--detail-gap));
    width: 1px;
    height: calc(var(--detail-gap) - 30px);
    background: rgb(255 255 255 / 0.85);
    transform-origin: top;
    transition: transform 700ms var(--f-ease) 180ms;
  }
  /* Every detail keeps its place, so switching never moves the page. A closed detail stays
     hidden from reading and assistive technology through visibility; the important beats
     the sitewide [hidden] rule only here. */
  html.js[data-landing-style='photographic'] [data-landing-page] .workflow-detail > div {
    transition:
      opacity 520ms var(--f-ease) 160ms,
      translate 720ms var(--f-ease) 160ms,
      visibility 0s;
  }
  html.js[data-landing-style='photographic'] [data-landing-page] .workflow-detail > div[hidden] {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    translate: 0 10px;
    transition:
      opacity 200ms ease,
      translate 200ms ease,
      visibility 0s 200ms;
  }
  html.js[data-landing-style='photographic']
    [data-landing-page]
    .workflow-detail
    > div[hidden]::before {
    transform: scaleY(0);
    transition: transform 160ms ease;
  }
}
@media (max-width: 700px) {
  /* The steps and their details share one column of rows: a step, then its detail. */
  html[data-landing-style='photographic'] [data-landing-page] .workflow-exhibit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-landing-style='photographic'] [data-landing-page] .workflow-route,
  html[data-landing-style='photographic'] [data-landing-page] .workflow-detail {
    display: grid;
    grid-row: 1 / 7;
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    gap: 0;
  }
  html[data-landing-style='photographic'] [data-landing-page] .workflow-detail {
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  /* The page script keeps room here for the longest detail, so opening a shorter or longer
     one never moves this link or anything after the section. */
  html[data-landing-style='photographic'] [data-landing-page] .workflow-exhibit > .exhibit-link {
    grid-row: 7;
    grid-column: 1;
    margin-top: calc(48px + var(--workflow-reserve, 0px));
  }
  html[data-landing-style='photographic'] [data-landing-page] [data-workflow-step] {
    grid-column: 1;
    grid-row: 1;
  }
  html[data-landing-style='photographic'] [data-landing-page] [data-workflow-step='1'] {
    grid-row: 3;
    margin-top: 34px;
  }
  html[data-landing-style='photographic'] [data-landing-page] [data-workflow-step='2'] {
    grid-row: 5;
    margin-top: 34px;
  }
  html[data-landing-style='photographic'] [data-landing-page] .workflow-detail > div {
    padding: 20px 0 4px 32px;
    pointer-events: auto;
  }
  html[data-landing-style='photographic']
    [data-landing-page]
    .workflow-detail
    > [data-workflow-panel='0'] {
    grid-column: 1;
    grid-row: 2;
  }
  html[data-landing-style='photographic']
    [data-landing-page]
    .workflow-detail
    > [data-workflow-panel='1'] {
    grid-column: 1;
    grid-row: 4;
  }
  html[data-landing-style='photographic']
    [data-landing-page]
    .workflow-detail
    > [data-workflow-panel='2'] {
    grid-column: 1;
    grid-row: 6;
  }
  html[data-landing-style='photographic'] [data-landing-page] .workflow-detail p {
    font-size: 21px;
  }
  [data-landing-page] .workflow-route::before,
  [data-landing-page] .workflow-route::after {
    top: 6px;
    left: 5px;
    width: 1px;
    height: auto;
  }
  [data-landing-page] .workflow-route::before {
    bottom: 6px;
  }
  [data-landing-page] .workflow-route::after {
    width: 1px;
    height: var(--workflow-fill, 0px);
    transition: height 900ms var(--f-ease);
  }
  html[data-landing-style='photographic'] [data-landing-page] .workflow-node {
    justify-self: stretch;
    padding: 0 0 0 32px;
    gap: 6px;
  }
  html[data-landing-style='photographic'] [data-landing-page] .workflow-node .node-symbol {
    top: 1px;
  }
  /* The lit line runs on from the chosen point, through its words, down its detail. */
  html[data-landing-style='photographic']
    [data-landing-page]
    .workflow-node[aria-pressed='true']::after,
  html[data-landing-style='photographic'] [data-landing-page] .workflow-detail > div::before {
    content: '';
    position: absolute;
    left: 5px;
    width: 1px;
    background: rgb(255 255 255 / 0.85);
    pointer-events: none;
  }
  html[data-landing-style='photographic']
    [data-landing-page]
    .workflow-node[aria-pressed='true']::after {
    top: 12px;
    bottom: 0;
  }
  html[data-landing-style='photographic'] [data-landing-page] .workflow-detail > div::before {
    top: 0;
    bottom: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-landing-page] .workflow-route::after,
  html[data-landing-style='photographic']
    [data-landing-page]
    .workflow-node
    :is(.node-symbol, strong, .workflow-node-open),
  html[data-landing-style='photographic'] [data-landing-page] .workflow-node-label::after,
  html[data-landing-style='photographic'] [data-landing-page] .workflow-node > span:last-child,
  html[data-landing-style='photographic'] [data-landing-page] .workflow-detail > div,
  html[data-landing-style='photographic'] [data-landing-page] .workflow-detail > div::before {
    transition: none !important;
  }
  html[data-landing-style='photographic'] [data-landing-page] .workflow-node-open {
    transform: none !important;
  }
}

/* ---------- Colour, gathered from the photographs ----------
   Forest is Ginsi: its mark, primary actions and focus. Every subject keeps the tone
   sampled from its own photograph (the subpage accents) and carries it wherever that
   subject appears: its landing section, and small details that point to it, such as
   the arrow of a link to its page. Dark photographs take their own light tint. Colour
   stays in details, a few per view; the structure stays black and white. */
[data-landing-page] {
  --c-atmosphere: #9ec3e6;
  --c-dusk: #cdb6c8;
  --tone: var(--c-forest);
  --tone-ink: var(--c-forest);
}
[data-landing-page] :is(#opening, #closing, .site-footer),
[data-landing-page] .landing-nav:not([data-surface='paper']) {
  --tone: var(--c-earthlight);
  --tone-ink: var(--c-earthlight);
}
[data-landing-page] #case-study {
  --tone: var(--t-cases);
  --tone-ink: var(--t-cases);
}
[data-landing-page] #workflow-study {
  --tone: var(--c-dusk);
  --tone-ink: var(--c-dusk);
}
[data-landing-page] #voice-study {
  --tone: var(--t-voice);
  --tone-ink: var(--t-voice);
}
[data-landing-page] #os-study {
  --tone: var(--c-atmosphere);
  --tone-ink: var(--c-atmosphere);
}
[data-landing-page] #privacy-study {
  --tone: var(--t-security);
  --tone-ink: var(--t-security);
}
/* The Workflows landscape lends its own light to the arrows that lead from it. */
[data-landing-page] #workflow-study a[href*='/workflows'] > .site-link-arrow {
  color: var(--c-dusk);
}
[data-landing-page] ::selection {
  background: rgb(168 205 181 / 0.45);
}

/* The logo carries Ginsi's colour in its signal stroke; no greyscale on the landing. */
html[data-landing-style='photographic']
  [data-landing-page]
  .landing-nav
  :is(.nav-logo-on-dark, .nav-logo-on-paper) {
  filter: none;
}

/* Primary actions. */
html[data-landing-style='photographic']
  [data-landing-page]
  .landing-nav
  .nav-contact
  > .site-link-arrow {
  color: var(--c-earthlight);
}
html[data-landing-style='photographic']
  [data-landing-page]
  .landing-nav[data-surface='paper']
  .nav-contact
  > .site-link-arrow {
  color: var(--c-forest);
}
html[data-landing-style='photographic']
  [data-landing-page]
  .contact-invitation
  > a.closing-link
  .site-link-arrow {
  color: var(--c-earthlight);
}

/* Capabilities: each instrument's one lit mark is Ginsi's own Forest (Earth). */
html[data-landing-style='photographic'] [data-landing-page] .li-instrument {
  --li-mark: var(--c-forest);
}

/* Cases: the thread, its steps and the movements that pour into it. */
[data-landing-page] .case-thread > i,
[data-landing-page] .case-story.case-live [data-reached]::before {
  background: var(--t-cases);
}
[data-landing-page]
  .case-story
  :is(.case-opening h3, .case-signals, .case-evidence h4, .case-facts, .case-decided h4)::before,
[data-landing-page] .case-story > .exhibit-link::before {
  border-color: var(--t-cases);
}
[data-landing-page] .case-story.case-live > .exhibit-link[data-reached]::before {
  background: var(--t-cases);
}
[data-landing-page] .case-converge path {
  stroke: var(--t-cases);
  opacity: 0.5;
}

/* Workflows: the lit step, the line that fills up to it and the tick down to its detail. */
html[data-landing-style='photographic']
  [data-landing-page]
  .workflow-node[aria-pressed='true']
  .node-symbol {
  border-color: var(--c-dusk);
  background: var(--c-dusk);
  box-shadow:
    0 0 0 6px rgb(205 182 200 / 0.14),
    0 0 26px rgb(205 182 200 / 0.55);
}
[data-landing-page] .workflow-route::after,
html[data-landing-style='photographic'] [data-landing-page] .workflow-detail > div::before,
html[data-landing-style='photographic']
  [data-landing-page]
  .workflow-node[aria-pressed='true']::after {
  background: var(--c-dusk);
}

/* Voice: the waiting update. */
html[data-landing-style='photographic']
  [data-landing-page]
  .voice-launch
  .voice-update
  .status-dot {
  background: var(--t-voice);
  box-shadow: 0 0 0 4px rgb(130 102 91 / 0.14);
}

/* Ginsi OS: progress through the architecture. */
html[data-landing-style='photographic'] [data-landing-page] .os-progress > span {
  background: var(--c-atmosphere);
}

/* Security: the principle in focus, and the callouts' marks (drawn in Ocean). */
html[data-landing-style='photographic'] [data-landing-page] .privacy-principles > div {
  transition:
    opacity 500ms ease,
    border-color 500ms ease;
}
html[data-landing-style='photographic']
  [data-landing-page]
  .privacy-principles
  > div[data-trust-active] {
  border-top-color: var(--t-security);
}

/* Closing: a quiet dark ground; the manifesto reads from grey to white. The glow
   dies out inside the section, so it meets the footer on the identical ground. */
html[data-landing-style='photographic'] [data-landing-page] .closing-scene {
  background: radial-gradient(62% 44% at 100% 50%, rgb(168 205 181 / 0.07), transparent), #0e0f0f;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-landing-style='photographic'] [data-landing-page] .fill-word {
    background-image: linear-gradient(
      to right,
      #eeece6 0%,
      #eeece6 var(--fill, 0%),
      #5d615e var(--fill, 0%),
      #5d615e 100%
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-landing-style='photographic'] [data-landing-page] .fill-word {
    background: none;
    color: #eeece6;
  }
}
html[data-landing-style='photographic'] [data-landing-page] .site-footer {
  background: #0e0f0f;
}