/* GVD v7 adaptive theme and responsive stability layer.
   Light is the default. Dark mode is an authored palette, never browser inversion. */

:root {
  color-scheme: light;
  --depth-star: #0a0a0b;
  --surface: #f6f5f1;
  --surface-raised: #ffffff;
  --surface-soft: #efeee9;
  --text-primary: #0a0a0b;
  --text-secondary: #5f626a;
  --text-tertiary: #7b7e86;
  --focus-ring: rgba(10,10,11,.12);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0b;
  --ink: #f4f3ef;
  --muted: #b4b7bf;
  --line: rgba(244,243,239,.24);
  --line-soft: rgba(244,243,239,.12);
  --accent: #f4f3ef;
  --type-secondary: #969aa4;
  --gvd-bg: #0a0a0b;
  --gvd-ink: #f4f3ef;
  --gvd-muted: #b4b7bf;
  --gvd-soft: #9296a0;
  --gvd-line: rgba(244,243,239,.24);
  --gvd-title-gray: #969aa4;
  --depth-star: #f4f3ef;
  --surface: #0a0a0b;
  --surface-raised: #121214;
  --surface-soft: #171719;
  --text-primary: #f4f3ef;
  --text-secondary: #b4b7bf;
  --text-tertiary: #969aa4;
  --focus-ring: rgba(244,243,239,.15);
}

html,
body,
input,
textarea,
select,
button { color-scheme: light; }

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] button { color-scheme: dark; }

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] ::selection {
  background: var(--text-primary) !important;
  color: var(--surface) !important;
}

/* ------------------------------------------------------------
   Global contrast
   ------------------------------------------------------------ */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .station,
html[data-theme="dark"] .station-shell,
html[data-theme="dark"] .contact-overlay,
html[data-theme="dark"] .contact-overlay-body,
html[data-theme="dark"] .contact-overlay-header {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .brand-name,
html[data-theme="dark"] .hero-name,
html[data-theme="dark"] .type-primary,
html[data-theme="dark"] .brand-section-title,
html[data-theme="dark"] .work-title,
html[data-theme="dark"] .task-item,
html[data-theme="dark"] .process-step h3,
html[data-theme="dark"] .site-footer strong,
html[data-theme="dark"] .social-links a,
html[data-theme="dark"] .binary-link,
html[data-theme="dark"] .binary-link-header,
html[data-theme="dark"] .language-toggle,
html[data-theme="dark"] .capability-list li span,
html[data-theme="dark"] .technology-flow span,
html[data-theme="dark"] .systems-list li {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .type-secondary,
html[data-theme="dark"] .hero-thesis .type-secondary,
html[data-theme="dark"] .capability-thesis .type-secondary,
html[data-theme="dark"] .impact-item strong {
  color: var(--text-tertiary) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .hero-role,
html[data-theme="dark"] .brand-role,
html[data-theme="dark"] .hero-meta,
html[data-theme="dark"] .site-location,
html[data-theme="dark"] .scene-label,
html[data-theme="dark"] .systems-note,
html[data-theme="dark"] .budget,
html[data-theme="dark"] .work-row-meta,
html[data-theme="dark"] .impact-item p b,
html[data-theme="dark"] .preloader-copy-role,
html[data-theme="dark"] .preloader-copy-location,
html[data-theme="dark"] .form-field > span,
html[data-theme="dark"] .usage-fieldset legend {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .hero-description,
html[data-theme="dark"] .hero-audience,
html[data-theme="dark"] .technology-intro,
html[data-theme="dark"] .capability-intro,
html[data-theme="dark"] .experience-copy p,
html[data-theme="dark"] .collaboration-option p,
html[data-theme="dark"] .process-step p,
html[data-theme="dark"] .contact-main > p,
html[data-theme="dark"] .impact-item p span,
html[data-theme="dark"] .work-row p,
html[data-theme="dark"] .work-row-meta > span,
html[data-theme="dark"] .site-footer span,
html[data-theme="dark"] .form-intro > p:last-child,
html[data-theme="dark"] .form-submit-area > p:not(.form-status),
html[data-theme="dark"] .contact-success p {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* Prevent inherited opacity from making content vanish. */
html[data-theme="dark"] .experience-copy,
html[data-theme="dark"] .experience-column,
html[data-theme="dark"] .collaboration-option,
html[data-theme="dark"] .process-step,
html[data-theme="dark"] .capability-list li,
html[data-theme="dark"] .tasks-list span,
html[data-theme="dark"] .impact-item p,
html[data-theme="dark"] .work-row-meta {
  opacity: 1 !important;
}

/* ------------------------------------------------------------
   Logos, ambient UI and lines
   ------------------------------------------------------------ */
html[data-theme="dark"] .site-header .brand-symbol,
html[data-theme="dark"] .site-header .brand-symbol-echo,
html[data-theme="dark"] #preloader .preloader-logo-base,
html[data-theme="dark"] #preloader .preloader-logo-slice,
html[data-theme="dark"] #site-cursor img {
  filter: brightness(0) invert(1) !important;
}
html[data-theme="dark"] .site-header .brand-symbol { opacity: .96 !important; }
html[data-theme="dark"] .site-header .brand-symbol-echo { opacity: .18 !important; }

html[data-theme="dark"] .depth-nav-track,
html[data-theme="dark"] .depth-nav button i,
html[data-theme="dark"] .scroll-gesture-track,
html[data-theme="dark"] .experience-copy,
html[data-theme="dark"] .collaboration-grid,
html[data-theme="dark"] .process-flow,
html[data-theme="dark"] .impact-grid,
html[data-theme="dark"] .tasks-list,
html[data-theme="dark"] .systems-list,
html[data-theme="dark"] .technology-flow,
html[data-theme="dark"] .capability-list,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .work-row,
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .form-submit-area {
  border-color: var(--line) !important;
}

html[data-theme="dark"] .depth-nav-track i,
html[data-theme="dark"] .depth-nav button.is-active i,
html[data-theme="dark"] .scroll-gesture-track b {
  background: var(--text-primary) !important;
}

html[data-theme="dark"] .depth-nav button span,
html[data-theme="dark"] #site-cursor-label {
  background: var(--text-primary) !important;
  color: var(--surface) !important;
}

html[data-theme="dark"] .global-scroll-cue {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] #scene-flash {
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(244,243,239,.055) 4px 5px) !important;
}

/* ------------------------------------------------------------
   Editorial buttons: no filled backgrounds in either theme
   ------------------------------------------------------------ */
.binary-button,
.binary-button-primary,
.binary-button-large,
.binary-button-submit,
.binary-link,
.binary-link-light,
.overlay-close,
.modal-close,
.security-warning-close {
  background: transparent !important;
  box-shadow: none !important;
}

.binary-button,
.binary-button-primary,
.binary-button-large,
.binary-button-submit {
  color: var(--ink) !important;
  border: 0 !important;
}

.binary-button::before {
  background: currentColor !important;
}

.binary-button:hover,
.binary-button:focus-visible,
.binary-button-primary:hover,
.binary-button-primary:focus-visible,
.binary-button-large:hover,
.binary-button-large:focus-visible,
.binary-button-submit:hover,
.binary-button-submit:focus-visible {
  background: transparent !important;
  color: var(--ink) !important;
}

.binary-link:hover,
.binary-link:focus-visible,
.binary-link-light:hover,
.binary-link-light:focus-visible {
  background: transparent !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .binary-button,
html[data-theme="dark"] .binary-button-primary,
html[data-theme="dark"] .binary-button-large,
html[data-theme="dark"] .binary-button-submit,
html[data-theme="dark"] .binary-link,
html[data-theme="dark"] .binary-link-light {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .binary-button:hover,
html[data-theme="dark"] .binary-button:focus-visible,
html[data-theme="dark"] .binary-button-primary:hover,
html[data-theme="dark"] .binary-button-primary:focus-visible,
html[data-theme="dark"] .binary-link:hover,
html[data-theme="dark"] .binary-link:focus-visible,
html[data-theme="dark"] .binary-link-light:hover,
html[data-theme="dark"] .binary-link-light:focus-visible {
  color: #ffffff !important;
  background: transparent !important;
}

/* Close controls remain visible without slabs. */
.overlay-close,
.modal-close {
  color: var(--ink) !important;
  border-color: currentColor !important;
}
.overlay-close b {
  background: transparent !important;
  color: currentColor !important;
  border: 1px solid currentColor !important;
}
html[data-theme="dark"] .overlay-close,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .overlay-close b {
  color: var(--text-primary) !important;
  background: transparent !important;
  border-color: rgba(244,243,239,.52) !important;
}

/* Hover/focus must never erase labels. */
html[data-theme="dark"] .capability-list li:hover,
html[data-theme="dark"] .capability-list li:focus-within,
html[data-theme="dark"] .tasks-list span:hover,
html[data-theme="dark"] .tasks-list span:focus-visible,
html[data-theme="dark"] .work-row:hover,
html[data-theme="dark"] .work-row:focus-visible,
html[data-theme="dark"] .systems-list li:hover {
  background: transparent !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .capability-list li:hover span,
html[data-theme="dark"] .capability-list li:focus-within span,
html[data-theme="dark"] .tasks-list span:hover,
html[data-theme="dark"] .tasks-list span:focus-visible,
html[data-theme="dark"] .work-row:hover .work-title,
html[data-theme="dark"] .work-row:focus-visible .work-title,
html[data-theme="dark"] .work-row:hover .work-row-meta,
html[data-theme="dark"] .work-row:focus-visible .work-row-meta {
  color: #ffffff !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .tasks-list span::after { color: var(--text-primary) !important; }

/* ------------------------------------------------------------
   Preloader contrast
   ------------------------------------------------------------ */
html[data-theme="dark"] #preloader {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] #preloader::before,
html[data-theme="dark"] #preloader::after {
  background: rgba(244,243,239,.10) !important;
}
html[data-theme="dark"] #preloader .preloader-terminal {
  background: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  border-color: var(--line) !important;
  box-shadow: 0 24px 74px rgba(0,0,0,.48) !important;
}
html[data-theme="dark"] #preloader .terminal-window-bar {
  background: var(--surface-soft) !important;
  color: var(--text-primary) !important;
  border-color: var(--line-soft) !important;
}
html[data-theme="dark"] #preloader .terminal-window-bar > span {
  background: transparent !important;
  border-color: rgba(244,243,239,.55) !important;
}
html[data-theme="dark"] #preloader .terminal-window-bar b,
html[data-theme="dark"] #preloader #preloader-phase,
html[data-theme="dark"] #preloader .terminal-entry.is-complete .terminal-command,
html[data-theme="dark"] #preloader .terminal-output,
html[data-theme="dark"] #preloader .terminal-output.is-visible {
  color: var(--text-secondary) !important;
  -webkit-text-fill-color: var(--text-secondary) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] #preloader .terminal-command,
html[data-theme="dark"] #preloader .terminal-command-text,
html[data-theme="dark"] #preloader .terminal-command.is-active,
html[data-theme="dark"] #preloader .terminal-prompt,
html[data-theme="dark"] #preloader #preloader-progress-label {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] #preloader .terminal-caret,
html[data-theme="dark"] #preloader #preloader-progress-fill {
  background: var(--text-primary) !important;
}
html[data-theme="dark"] #preloader .preloader-progress-track {
  background: rgba(244,243,239,.15) !important;
}
html[data-theme="dark"] #preloader .preloader-progress-ui {
  color: var(--text-primary) !important;
  border-color: var(--line-soft) !important;
}

/* ------------------------------------------------------------
   Content surfaces
   ------------------------------------------------------------ */
html[data-theme="dark"] .work-visual,
html[data-theme="dark"] .work-inline-media,
html[data-theme="dark"] .work-modal-panel {
  background: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  border-color: var(--line-soft) !important;
}
html[data-theme="dark"] .work-visual figcaption,
html[data-theme="dark"] .work-visual-caption {
  background: rgba(10,10,11,.92) !important;
  color: var(--text-primary) !important;
  border-color: var(--line-soft) !important;
}
html[data-theme="dark"] .collaboration-option-dark,
html[data-theme="dark"] .collaboration-option-dark::before {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .social-links svg {
  stroke: currentColor !important;
  color: currentColor !important;
}

/* ------------------------------------------------------------
   Contact overlay and form containment
   ------------------------------------------------------------ */
.contact-overlay {
  overflow-x: hidden !important;
  overflow-x: clip !important;
}
.contact-overlay-body,
.form-intro,
.brand-form-title,
.brand-form-title > span,
.form-intro > p:last-child,
#contact-form,
.form-section,
.form-field {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.form-intro {
  width: min(100%, 1120px) !important;
  margin-inline: auto !important;
}

.form-intro h2.brand-form-title,
.brand-form-title {
  width: 100% !important;
  font-size: clamp(46px, 5.5vw, 82px) !important;
  line-height: .88 !important;
  letter-spacing: -.055em !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.form-intro h2.brand-form-title > span,
.brand-form-title > span {
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
}
.form-intro h2.brand-form-title > span + span,
.brand-form-title > span + span { margin-top: .02em !important; }

html[data-theme="dark"] .contact-overlay,
html[data-theme="dark"] .contact-overlay-body,
html[data-theme="dark"] .contact-overlay-header {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .contact-overlay-header {
  background: rgba(10,10,11,.96) !important;
  border-color: var(--line-soft) !important;
}
html[data-theme="dark"] .form-intro h2.brand-form-title,
html[data-theme="dark"] .brand-form-title { color: var(--text-primary) !important; }

html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .form-field textarea {
  background: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary) !important;
  border-color: rgba(244,243,239,.34) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .form-field input::placeholder,
html[data-theme="dark"] .form-field textarea::placeholder {
  color: #9296a0 !important;
  -webkit-text-fill-color: #9296a0 !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .form-field input:hover,
html[data-theme="dark"] .form-field select:hover,
html[data-theme="dark"] .form-field textarea:hover {
  border-color: rgba(244,243,239,.62) !important;
}
html[data-theme="dark"] .form-field input:focus,
html[data-theme="dark"] .form-field select:focus,
html[data-theme="dark"] .form-field textarea:focus {
  border-color: var(--text-primary) !important;
  outline: 3px solid var(--focus-ring) !important;
}
html[data-theme="dark"] .choice-grid span {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border-color: rgba(244,243,239,.34) !important;
}
html[data-theme="dark"] .choice-grid label:hover span {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
}
html[data-theme="dark"] .choice-grid input:checked + span {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--text-primary) !important;
}
html[data-theme="dark"] .form-status { color: #ff9a8a !important; }

/* Desktop/tablet title and form width stay inside the viewport. */
@media (max-width: 1100px) {
  .contact-overlay-header {
    padding-inline: 16px !important;
  }
  .contact-overlay-body {
    width: 100% !important;
    padding: 34px 17px 72px !important;
  }
  .form-intro {
    width: 100% !important;
    margin-bottom: 30px !important;
  }
  .form-intro h2.brand-form-title,
  .brand-form-title {
    font-size: clamp(30px, 9vw, 46px) !important;
    line-height: .9 !important;
    letter-spacing: -.05em !important;
  }
  .form-intro > p:last-child {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
  .form-section,
  .form-section-wide {
    grid-template-columns: 1fr !important;
  }
  .form-field,
  .form-field-wide {
    grid-column: 1 !important;
  }
  .form-submit-area {
    grid-template-columns: 1fr !important;
  }
  .binary-button-submit {
    width: auto !important;
    justify-self: start !important;
  }
}

@media (max-width: 430px) {
  .form-intro h2.brand-form-title,
  .brand-form-title {
    font-size: clamp(29px, 8.8vw, 36px) !important;
  }
  .form-intro .scene-label { font-size: 10px !important; }
}

/* Security notice stays intentionally black/red. */
html[data-theme="dark"] .security-warning,
html[data-theme="dark"] .security-warning-panel {
  color-scheme: dark !important;
}
.security-warning-close {
  background: transparent !important;
}

/* No-JS fallback. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: #0a0a0b;
    --ink: #f4f3ef;
    --muted: #b4b7bf;
    --line: rgba(244,243,239,.24);
    --line-soft: rgba(244,243,239,.12);
    --accent: #f4f3ef;
  }
}

@media (forced-colors: active) {
  html,
  body { forced-color-adjust: auto !important; }
}


/* ============================================================
   GVD v8 - modal contrast, reliable iOS taps, explicit scroll CTA
   ============================================================ */

/* The work selector uses a dark veil in authored dark mode.
   Light mode keeps the original pale editorial veil. */
html[data-theme="dark"] .modal-backdrop {
  background: rgba(4, 4, 5, .82) !important;
  -webkit-backdrop-filter: blur(10px) saturate(.82) !important;
  backdrop-filter: blur(10px) saturate(.82) !important;
}
html[data-theme="dark"] .work-modal-panel {
  background: #101012 !important;
  color: var(--text-primary) !important;
}

/* External social destinations keep native click/tap semantics.
   SVG artwork never becomes the gesture target itself. */
.station-contact .social-links,
.station-contact .social-links a {
  pointer-events: auto !important;
}
.station-contact .social-links a {
  position: relative !important;
  z-index: 2 !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.station-contact .social-links a svg,
.station-contact .social-links a span {
  pointer-events: none !important;
}
@media (hover: none), (pointer: coarse) {
  .station-contact .social-links a:hover,
  .station-contact .social-links a:active {
    color: inherit !important;
    transform: none !important;
  }
  .station-contact .social-links a:hover svg,
  .station-contact .social-links a:active svg {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* The gesture icon now explains itself instead of relying on convention. */
.global-scroll-cue {
  width: max-content !important;
  min-width: 96px !important;
  height: auto !important;
  min-height: 72px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding: 0 8px !important;
}
.scroll-cue-copy {
  display: block !important;
  min-height: 1.2em !important;
  color: currentColor !important;
  font-family: var(--gvd-meta-font, sans-serif) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  opacity: .86 !important;
}
.scroll-copy-previous { display: none !important; }
.global-scroll-cue[data-direction="previous"] .scroll-copy-next { display: none !important; }
.global-scroll-cue[data-direction="previous"] .scroll-copy-previous { display: inline !important; }

@media (max-width: 1100px) {
  .global-scroll-cue {
    min-width: 88px !important;
    min-height: 66px !important;
    gap: 4px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .scroll-cue-copy {
    font-size: 8px !important;
    letter-spacing: .085em !important;
  }
}

/* ============================================================
   GVD v9 - iPhone short-tap reliability inside depth scenes
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 1100px) {
    html.is-depth,
    html.is-depth body,
    html.is-depth #depth-stage,
    html.is-depth .station {
      touch-action: pan-x pinch-zoom !important;
    }

    html.is-depth .station.is-interactive {
      pointer-events: auto !important;
    }

    html.is-depth #depth-stage a[href],
    html.is-depth #depth-stage button,
    html.is-depth #depth-stage [role="button"],
    .modal-layer a[href],
    .modal-layer button,
    .contact-overlay button,
    .security-warning button {
      pointer-events: auto !important;
      touch-action: manipulation !important;
      -webkit-tap-highlight-color: transparent !important;
    }

    html.is-ios-webkit.is-depth .station.is-active {
      transform: none !important;
      transform-style: flat !important;
      backface-visibility: visible !important;
      will-change: auto !important;
    }

    html.is-ios-webkit #depth-stage a[href] > *,
    html.is-ios-webkit #depth-stage button > *,
    html.is-ios-webkit .modal-layer a[href] > *,
    html.is-ios-webkit .modal-layer button > * {
      pointer-events: none !important;
    }
  }
}


/* ============================================================
   GVD v10 - explicit bilingual, ergonomic scroll cue
   ============================================================ */
.global-scroll-cue {
  min-width: 118px !important;
  min-height: 92px !important;
  gap: 12px !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  opacity: .94 !important;
}
.scroll-cue-copy {
  min-height: 1.25em !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  letter-spacing: .12em !important;
  opacity: 1 !important;
}
html[data-theme="light"] .global-scroll-cue { color: #0a0a0b !important; }
html[data-theme="dark"] .global-scroll-cue { color: #f6f5f1 !important; }

@media (max-width: 1100px) {
  .global-scroll-cue {
    min-width: 116px !important;
    min-height: 88px !important;
    gap: 10px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
  }
  .scroll-cue-copy {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
  }
}


/* ============================================================
   GVD v11 - input-aware gesture direction
   Touch: swipe up to advance, swipe down to go back.
   Mouse/trackpad wheel: scroll down to advance, scroll up to go back.
   ============================================================ */
.global-scroll-cue[data-input="touch"] {
  min-height: 96px !important;
  gap: 14px !important;
}

@media (pointer: coarse), (hover: none) {
  .global-scroll-cue[data-direction="next"] .scroll-gesture-track b {
    animation: gvdWheelPrevious 1.65s var(--ease) infinite !important;
  }
  .global-scroll-cue[data-direction="next"] .scroll-gesture-chevron {
    top: 33px !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(225deg) !important;
  }
  .global-scroll-cue[data-direction="previous"] .scroll-gesture-track b {
    animation: gvdWheelNext 1.65s var(--ease) infinite !important;
  }
  .global-scroll-cue[data-direction="previous"] .scroll-gesture-chevron {
    top: auto !important;
    bottom: 2px !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }
  .scroll-cue-copy {
    font-size: 10px !important;
    line-height: 1.3 !important;
    letter-spacing: .085em !important;
  }
}


/* ============================================================
   GVD v13 - icon-only, input-aware navigation cue
   No directional copy: touch gets a swipe-hand icon, desktop gets a wheel icon.
   ============================================================ */
.global-scroll-cue {
  position: fixed !important;
  z-index: 1100 !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(20px, calc(12px + env(safe-area-inset-bottom))) !important;
  width: 52px !important;
  height: 66px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  opacity: .76 !important;
  pointer-events: none !important;
}
.scroll-cue-copy,
.scroll-gesture { display: none !important; }
.gesture-device {
  width: 40px;
  height: 58px;
  display: grid;
  place-items: center;
  color: currentColor;
}
.gesture-device svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gesture-device-touch { display: none; }
.gesture-mouse-shell { opacity: .72; }
.gesture-mouse-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: gvdMouseWheelForward 1.55s cubic-bezier(.22,.61,.36,1) infinite;
}
.gesture-mouse-arrow {
  opacity: .9;
  transform-box: fill-box;
  transform-origin: center;
}
.global-scroll-cue[data-direction="previous"] .gesture-mouse-wheel {
  animation-name: gvdMouseWheelBack;
}
.global-scroll-cue[data-direction="previous"] .gesture-mouse-arrow {
  transform: rotate(180deg) translateY(-2px);
}
.gesture-touch-hand,
.gesture-touch-arrow {
  transform-box: fill-box;
  transform-origin: center;
}
.gesture-touch-hand {
  animation: gvdFingerForward 1.6s cubic-bezier(.22,.61,.36,1) infinite;
}
.gesture-touch-arrow {
  opacity: .9;
  animation: gvdArrowPulse 1.6s ease-in-out infinite;
}
.global-scroll-cue[data-direction="previous"] .gesture-touch-hand {
  animation-name: gvdFingerBack;
}
.global-scroll-cue[data-direction="previous"] .gesture-touch-arrow {
  transform: translateY(37px) rotate(180deg);
}
.global-scroll-cue.is-pulsing .gesture-device {
  animation: gvdCueIconPulse .42s cubic-bezier(.22,.61,.36,1) 1;
}
html[data-theme="light"] .global-scroll-cue { color: #0a0a0b !important; }
html[data-theme="dark"] .global-scroll-cue { color: #f6f5f1 !important; }

@media (pointer: coarse), (hover: none) {
  .gesture-device-mouse { display: none !important; }
  .gesture-device-touch { display: grid !important; }
  .global-scroll-cue {
    width: 58px !important;
    height: 76px !important;
    bottom: max(24px, calc(16px + env(safe-area-inset-bottom))) !important;
    opacity: .86 !important;
  }
  .gesture-device-touch {
    width: 48px !important;
    height: 68px !important;
  }
}
.global-scroll-cue[data-input="touch"] .gesture-device-mouse { display: none !important; }
.global-scroll-cue[data-input="touch"] .gesture-device-touch { display: grid !important; }
.global-scroll-cue[data-input="wheel"] .gesture-device-mouse { display: grid !important; }
.global-scroll-cue[data-input="wheel"] .gesture-device-touch { display: none !important; }

@keyframes gvdMouseWheelForward {
  0% { transform: translateY(-2px); opacity: 0; }
  20% { opacity: 1; }
  72% { transform: translateY(7px); opacity: .9; }
  100% { transform: translateY(10px); opacity: 0; }
}
@keyframes gvdMouseWheelBack {
  0% { transform: translateY(9px); opacity: 0; }
  20% { opacity: 1; }
  72% { transform: translateY(0); opacity: .9; }
  100% { transform: translateY(-3px); opacity: 0; }
}
@keyframes gvdFingerForward {
  0%, 10% { transform: translateY(5px); opacity: .45; }
  34% { opacity: 1; }
  72% { transform: translateY(-7px); opacity: 1; }
  100% { transform: translateY(-10px); opacity: .1; }
}
@keyframes gvdFingerBack {
  0%, 10% { transform: translateY(-6px); opacity: .45; }
  34% { opacity: 1; }
  72% { transform: translateY(7px); opacity: 1; }
  100% { transform: translateY(10px); opacity: .1; }
}
@keyframes gvdArrowPulse {
  0%, 100% { opacity: .35; }
  45% { opacity: 1; }
}
@keyframes gvdCueIconPulse {
  0% { transform: scale(.9); opacity: .45; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gesture-mouse-wheel,
  .gesture-touch-hand,
  .gesture-touch-arrow,
  .global-scroll-cue.is-pulsing .gesture-device { animation: none !important; }
}


/* ============================================================
   GVD v14 - responsive work navigation, neutral gesture cue,
   frameless preloader and contact form
   ============================================================ */

/* Neutral direction cue: no hand illustration. Touch and tablet users see
   the same restrained rail language as the site navigation, with the arrow
   and moving dot indicating the physical swipe direction. */
.gesture-device-touch {
  width: 38px !important;
  height: 58px !important;
}
.gesture-touch-shell {
  opacity: .46;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
}
.gesture-touch-dot {
  fill: currentColor !important;
  stroke: none !important;
  transform-box: fill-box;
  transform-origin: center;
  animation: gvdTouchRailForward 1.55s cubic-bezier(.22,.61,.36,1) infinite;
}
.gesture-touch-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  opacity: .88;
  transform-box: fill-box;
  transform-origin: center;
  animation: gvdTouchArrowForward 1.55s ease-in-out infinite;
}
.global-scroll-cue[data-direction="previous"] .gesture-touch-dot {
  animation-name: gvdTouchRailBack;
}
.global-scroll-cue[data-direction="previous"] .gesture-touch-arrow {
  transform: translateY(37px) rotate(180deg) !important;
  animation-name: gvdTouchArrowBack;
}
@keyframes gvdTouchRailForward {
  0%, 10% { transform: translateY(1px); opacity: .20; }
  28% { opacity: 1; }
  76% { transform: translateY(-18px); opacity: .92; }
  100% { transform: translateY(-21px); opacity: 0; }
}
@keyframes gvdTouchRailBack {
  0%, 10% { transform: translateY(-20px); opacity: .20; }
  28% { opacity: 1; }
  76% { transform: translateY(0); opacity: .92; }
  100% { transform: translateY(3px); opacity: 0; }
}
@keyframes gvdTouchArrowForward {
  0%, 100% { opacity: .34; transform: translateY(2px); }
  45% { opacity: 1; transform: translateY(-1px); }
}
@keyframes gvdTouchArrowBack {
  0%, 100% { opacity: .34; }
  45% { opacity: 1; }
}

/* Work rows cover most of the mobile screen. They remain tappable, but a
   vertical gesture beginning on any banner/title belongs to scene navigation. */
@media (pointer: coarse), (hover: none) {
  .station-work .work-row,
  .station-work .work-row * {
    touch-action: pan-x pinch-zoom !important;
  }
  .station-work .work-inline-canvas {
    image-rendering: auto !important;
  }
}

/* Frameless preloader: retain hierarchy and progress, remove the UI-card box. */
#preloader .preloader-terminal {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#preloader .terminal-window-bar,
#preloader .preloader-progress-ui {
  border: 0 !important;
  background: transparent !important;
}
html[data-theme="dark"] #preloader .preloader-terminal,
html[data-theme="dark"] #preloader .terminal-window-bar {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Frameless form: editorial underlines instead of rounded input/table cells. */
.form-section,
.form-section-wide,
.form-submit-area,
.usage-fieldset {
  border: 0 !important;
}
.form-section + .form-section,
.form-section + .usage-fieldset,
.usage-fieldset + .form-section,
.conditional-fields {
  margin-top: 20px !important;
}
.form-field input,
.form-field select,
.form-field textarea,
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .form-field textarea {
  min-height: 52px !important;
  padding: 11px 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.form-field textarea,
html[data-theme="dark"] .form-field textarea {
  min-height: 132px !important;
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
html[data-theme="dark"] .form-field input:hover,
html[data-theme="dark"] .form-field select:hover,
html[data-theme="dark"] .form-field textarea:hover,
html[data-theme="dark"] .form-field input:focus,
html[data-theme="dark"] .form-field select:focus,
html[data-theme="dark"] .form-field textarea:focus {
  border-bottom-color: currentColor !important;
  box-shadow: inset 0 -1px 0 currentColor !important;
  outline: 0 !important;
}
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea {
  border-bottom-color: #b32323 !important;
  box-shadow: inset 0 -1px 0 #b32323 !important;
}
.choice-grid {
  gap: 8px 18px !important;
}
.choice-grid span,
html[data-theme="dark"] .choice-grid span {
  position: relative !important;
  min-height: 46px !important;
  padding: 10px 0 10px 20px !important;
  justify-content: start !important;
  place-items: center start !important;
  text-align: left !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.choice-grid span::before {
  content: "◇";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: currentColor;
  opacity: .55;
}
.choice-grid label:hover span,
html[data-theme="dark"] .choice-grid label:hover span {
  color: var(--ink) !important;
  border-bottom-color: var(--line) !important;
  background: transparent !important;
}
.choice-grid input:checked + span,
html[data-theme="dark"] .choice-grid input:checked + span {
  color: var(--ink) !important;
  border-bottom-color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
}
.choice-grid input:checked + span::before {
  content: "◆";
  opacity: 1;
}
html[data-theme="dark"] .choice-grid label:hover span,
html[data-theme="dark"] .choice-grid input:checked + span {
  color: var(--text-primary) !important;
}

@media (max-width: 1100px) {
  .global-scroll-cue {
    width: 48px !important;
    height: 66px !important;
    bottom: max(18px, calc(12px + env(safe-area-inset-bottom))) !important;
  }
  .gesture-device-touch {
    width: 36px !important;
    height: 56px !important;
  }
  .form-section,
  .form-section-wide {
    padding-block: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gesture-touch-dot,
  .gesture-touch-arrow { animation: none !important; }
}

/* ============================================================
   GVD v15 - centered touch cue, tonal/noise preloader,
   replayable mobile work pixels and asynchronous capability signals
   ============================================================ */

/* Touch/tablet cue: always lock to the visual center of the viewport.
   Earlier layers positioned the cue from the left rail and then scaled it,
   which made the icon look optically crooked on narrow screens. */
@media (pointer: coarse), (hover: none) {
  .global-scroll-cue,
  .global-scroll-cue[data-input="touch"] {
    position: fixed !important;
    left: 50% !important;
    inset-inline-start: 50% !important;
    right: auto !important;
    inset-inline-end: auto !important;
    bottom: max(18px, calc(12px + env(safe-area-inset-bottom))) !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: translate3d(-50%, 0, 0) !important;
    transform-origin: 50% 50% !important;
  }
  .global-scroll-cue .gesture-device-touch,
  .global-scroll-cue[data-input="touch"] .gesture-device-touch {
    width: 44px !important;
    height: 62px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
  }
  .gesture-device-touch svg {
    display: block !important;
    width: 44px !important;
    height: 62px !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }
}

/* Preloader: remove accidental horizontal separators. Information zones are
   separated by tone instead of lines, with restrained film-like grain. */
#preloader {
  background: #efeee9 !important;
}
#preloader::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' seed='19' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E") !important;
  background-size: 180px 180px !important;
  background-repeat: repeat !important;
  mix-blend-mode: multiply !important;
  opacity: .035 !important;
  pointer-events: none !important;
}
#preloader::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  background: radial-gradient(circle at 50% 44%, transparent 0 36%, rgba(10,10,11,.035) 100%) !important;
  pointer-events: none !important;
}
#preloader .preloader-terminal {
  border: 0 !important;
  border-radius: 0 !important;
  background: #f5f4ef !important;
  box-shadow: 0 28px 80px rgba(10,10,11,.055) !important;
}
#preloader .terminal-window-bar {
  border: 0 !important;
  background: #e7e6e0 !important;
}
#preloader .terminal-history {
  background: #f5f4ef !important;
}
#preloader .preloader-progress-ui {
  border: 0 !important;
  background: #ecebe5 !important;
}
#preloader .preloader-progress-track {
  background: rgba(10,10,11,.10) !important;
}
#preloader .preloader-copy {
  border: 0 !important;
  background: transparent !important;
}

html[data-theme="dark"] #preloader {
  background: #080809 !important;
}
html[data-theme="dark"] #preloader::before {
  mix-blend-mode: screen !important;
  opacity: .052 !important;
}
html[data-theme="dark"] #preloader::after {
  background: radial-gradient(circle at 50% 44%, transparent 0 34%, rgba(0,0,0,.34) 100%) !important;
}
html[data-theme="dark"] #preloader .preloader-terminal {
  border: 0 !important;
  background: #0f0f11 !important;
  box-shadow: 0 30px 92px rgba(0,0,0,.34) !important;
}
html[data-theme="dark"] #preloader .terminal-window-bar {
  border: 0 !important;
  background: #17171a !important;
}
html[data-theme="dark"] #preloader .terminal-history {
  background: #0f0f11 !important;
}
html[data-theme="dark"] #preloader .preloader-progress-ui {
  border: 0 !important;
  background: #141416 !important;
}
html[data-theme="dark"] #preloader .preloader-progress-track {
  background: rgba(244,243,239,.14) !important;
}

/* While a work canvas is resolving through its five frames, retain crisp
   blocks. The final stage switches back to normal interpolation. */
.station-work .work-row:not([data-pixel-stage="5"]) .work-inline-canvas {
  image-rendering: pixelated !important;
}
.station-work .work-row[data-pixel-stage="5"] .work-inline-canvas {
  image-rendering: auto !important;
}

/* On touch screens every capability item receives its own low-cost,
   independently timed signal. One symbol is enough on narrow two-column
   layouts; reserving a second one would make the typography cramped. */
@media (pointer: coarse), (hover: none) {
  .capability-list li {
    gap: .38em !important;
  }
  .capability-list li > .cap-symbol-left {
    position: static !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 .92em !important;
    width: .92em !important;
    min-width: .92em !important;
    height: .92em !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .86em !important;
    line-height: 1 !important;
    color: transparent !important;
    opacity: 0 !important;
    transform: scale(.72) rotate(-8deg) !important;
    transition: opacity .12s ease, transform .18s ease, color .12s ease !important;
  }
  .capability-list li > .cap-symbol-right {
    display: none !important;
  }
  .capability-list li.is-symbol-active > .cap-symbol-left {
    color: var(--ink) !important;
    opacity: .92 !important;
    transform: scale(1) rotate(0) !important;
  }
  .capability-list li.is-symbol-active > .cap-label {
    opacity: 1 !important;
    transform: translate3d(1px,0,0) !important;
  }
  html[data-theme="dark"] .capability-list li.is-symbol-active > .cap-symbol-left {
    color: var(--text-primary) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #preloader::before { opacity: .02 !important; }
  .capability-list li > .cap-symbol-left { transition: none !important; }
}

/* ========================================================================
   v16 - calm paired capability marks + low-power device tilt parallax
   On touch layouts the marks are part of the composition, not a flicker:
   every line keeps one matching pair and only one visible line changes at a
   time. The text never moves or fades, so reading remains stable.
   ======================================================================== */
@media (hover: none), (pointer: coarse) {
  .capability-list li {
    display: grid !important;
    grid-template-columns: .88em minmax(0, auto) .88em !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: .34em !important;
    width: max-content !important;
    max-width: 100% !important;
  }

  .capability-list li > .cap-label {
    grid-column: 2 !important;
    max-width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .capability-list li > .cap-symbol,
  .capability-list li > .cap-symbol-left,
  .capability-list li > .cap-symbol-right {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    width: .88em !important;
    min-width: .88em !important;
    height: .88em !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .78em !important;
    line-height: 1 !important;
    color: var(--ink) !important;
    opacity: .72 !important;
    transform: scale(.96) !important;
    transition: opacity .34s ease, transform .34s ease !important;
  }

  .capability-list li > .cap-symbol-left { grid-column: 1 !important; }
  .capability-list li > .cap-symbol-right { grid-column: 3 !important; }

  .capability-list li.is-symbol-active > .cap-symbol,
  .capability-list li:hover > .cap-symbol,
  .capability-list li:focus-visible > .cap-symbol {
    color: var(--ink) !important;
    opacity: .72 !important;
    transform: scale(.96) !important;
  }

  html[data-theme="dark"] .capability-list li > .cap-symbol,
  html[data-theme="dark"] .capability-list li.is-symbol-active > .cap-symbol {
    color: var(--text-primary) !important;
  }

  .capability-list li.is-symbol-changing > .cap-symbol {
    animation: gvdCalmPairChange .42s cubic-bezier(.22,.61,.36,1) both !important;
  }

  .capability-list li > .cap-label::after,
  .capability-list li.is-symbol-active > .cap-label::after {
    transform: scaleX(0) !important;
    opacity: 0 !important;
  }
}

@keyframes gvdCalmPairChange {
  0%   { opacity: .72; transform: scale(.96); }
  42%  { opacity: .90; transform: scale(1.02); }
  100% { opacity: .72; transform: scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .capability-list li.is-symbol-changing > .cap-symbol { animation: none !important; }
}