/* Shared palette: the renderer reads these four liquid colours directly. */
:root {
  --accent: #ff3d9a;
  --accent2: #3d7bff;
  --accent-hi: #ff7fbd;
  --mid: #b04bff;
  --void-a: #7b3dff;
  --void-b: #18d9c8;
  --void-accent: #8f6bff;
  --void-accent-hi: #b7a0ff;
  --business-base: #f8f7fa;
  --business-ink: #14121a;
  --business-muted: #4d4757;
  --business-line: color-mix(in srgb, var(--business-ink) 22%, transparent);
  /* Keeps secondary text above 4.5:1 even at the shader's conservative colour ceiling. */
  --liquid-opacity: .38;
  --ground: #0d0d10;
  --surface: #09090d;
  --paper: #f4f2f7;
  --white: #faf8ff;
  --muted: #c9c7d2;
  --shade: #b9b6c5;
  --black: #17151e;
  --panel: color-mix(in srgb, var(--surface) 82%, transparent);
  --panel-2: color-mix(in srgb, var(--surface) 90%, transparent);
  --panel2: var(--panel-2);
  --line: color-mix(in srgb, var(--paper) 22%, transparent);
  --line-dark: var(--line);
  --cyan: var(--accent);
  --magenta: var(--accent);
  --tint: color-mix(in srgb, var(--surface) 34%, transparent);
  --tint-clear: color-mix(in srgb, var(--surface) 0%, transparent);
  --void-tint: color-mix(in srgb, var(--surface) 20%, transparent);
  --v-black: var(--panel);
  --v-hull: var(--panel);
  --v-deck: var(--panel-2);
  --v-nebula: var(--void-a);
  --v-lilac: var(--void-accent);
  --v-halo: var(--void-accent);
  --v-moon: var(--paper);
  --v-dust: var(--muted);
  --v-line: var(--line);
  --v-ink: var(--surface);
  --v-pale: var(--paper);
}
html { background: var(--ground); }
body { position: relative; isolation: isolate; background: var(--ground); color: var(--paper); }
#liquid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
  /* Darkening happens before final dithering in the shader, avoiding banding. */
  opacity: 1;
}
html.no-gl #liquid { display: none; }
html.no-gl body {
  background:
    radial-gradient(ellipse at 12% 12%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 66%),
    radial-gradient(ellipse at 88% 84%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 68%),
    var(--ground);
  background-attachment: fixed;
}

/* Only surfaces and colour change; the original dimensions stay in the page. */
.liquid-home .hero,
.liquid-home section.band { background: transparent; color: var(--paper); }
.liquid-home .hero { border-bottom-color: transparent; }
.liquid-home #business {
  background: transparent;
  color: var(--business-ink);
}
.liquid-home #business > .wrap {
  width: calc(100% - 2 * var(--gut));
  max-width: calc(1680px - 2 * var(--gut));
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--business-base) 50%, transparent);
  background: color-mix(in srgb, var(--business-base) 84%, transparent);
}
.liquid-home #business .rail,
.liquid-home #business .lede,
.liquid-home #business .svc { color: var(--business-ink); }
.liquid-home #business .small,
.liquid-home #business .svc-d { color: var(--business-muted); }
.liquid-home #business .services { border-top-color: var(--business-ink); }
.liquid-home #business .svc { border-bottom-color: color-mix(in srgb, var(--business-ink) 22%, transparent); }
.liquid-home #business .svc:hover { background: color-mix(in srgb, var(--business-ink) 5%, transparent); }
.liquid-home #business .facts { border-color: var(--business-ink) !important; }
.liquid-home #business .case,
.liquid-home #business .biz-cta { background: var(--surface); color: var(--paper); }
.liquid-home #business .case .small,
.liquid-home #business .biz-cta .small { color: var(--muted); }
.liquid-home #void {
  background: linear-gradient(180deg, var(--tint-clear), var(--void-tint) 160px, var(--void-tint) calc(100% - 160px), var(--tint-clear));
}
.liquid-home .vd-sky { display: none; }
.liquid-home .ticker,
.liquid-home #contact,
.liquid-home .ftr { background: color-mix(in srgb, var(--surface) 62%, transparent); }
.liquid-home #contact { border-top: 1px solid var(--line); }
.liquid-home .hdr { background: color-mix(in srgb, var(--surface) 88%, transparent); }
@media (max-width:1060px) {
  .liquid-home .nav { background: color-mix(in srgb, var(--surface) 97%, transparent); }
}
.liquid-home .nav a, .liquid-home .ftr ul a { opacity: 1; }
.liquid-home .btn-cyan { background: var(--accent); color: var(--surface); }
.liquid-home .btn-cyan:hover { background: var(--accent-hi); }
.liquid-home .btn-dark { background: var(--panel-2); }
.liquid-home .btn-dark:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.liquid-home .btn-line { background: color-mix(in srgb, var(--surface) 48%, transparent); }
.liquid-home .btn-line:hover { background: var(--paper); color: var(--surface); }
.liquid-home .status,
.liquid-home .es-card.dark,
.liquid-home .case,
.liquid-home .biz-cta,
.liquid-home .brief { background: var(--panel); }
.liquid-home .es-card:not(.dark) { background: color-mix(in srgb, var(--accent) 15%, var(--panel-2)); color: var(--paper); }
.liquid-home .es-photo::after { background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--surface) 94%, transparent)); }
.liquid-home .unit p, .liquid-home .sector p { opacity: 1; }
.liquid-home .unit::after { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 50%, transparent), transparent 30%, color-mix(in srgb, var(--surface) 96%, transparent)); }
.liquid-home .biz .rail,
.liquid-home .biz .lede { color: var(--paper); }
.liquid-home .biz .small,
.liquid-home .svc-d { color: var(--muted); }
.liquid-home .services { border-top-color: var(--paper); }
.liquid-home .svc { border-bottom-color: var(--line); }
.liquid-home .svc:hover { background: color-mix(in srgb, var(--paper) 7%, transparent); }
.liquid-home .biz .facts { border-color: var(--paper) !important; }
.liquid-home .field input,
.liquid-home .field select,
.liquid-home .field textarea { background: var(--panel-2); }
.liquid-home .field input::placeholder,
.liquid-home .field textarea::placeholder { color: var(--muted); opacity: 1; }
.liquid-home .zone.incoming .zh { color: var(--surface); }

/* Preserve the 3D hero. The mask also applies to its existing image fallback. */
.liquid-home #hero3d,
.liquid-home .stage .fallback,
.liquid-home .hero-photo,
.liquid-home .vd-hero img {
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.liquid-home .vd-hero { background: transparent; }
.liquid-home .vd-hero figcaption { background: var(--panel-2); }
.liquid-home #void .v-code,
.liquid-home #void .v-label { color: var(--void-accent); }
.liquid-home #void .v-code { background: var(--panel-2); width: fit-content; max-width: 100%; }
.liquid-home #void .vd-title .pt { color: var(--void-accent); }
.liquid-home #void .lede { opacity: 1; }
.liquid-home .v-btn { background: var(--void-accent); color: var(--surface); }
.liquid-home .v-btn:hover { background: var(--void-accent-hi); }
.liquid-home .v-line { border-color: var(--void-accent); background: var(--panel); color: var(--void-accent-hi); }
.liquid-home .v-line:hover { border-color: var(--void-accent-hi); color: var(--void-accent-hi); }
.liquid-home .vf-card:hover,
.liquid-home .vf-card:focus-visible,
.liquid-home .vt:hover,
.liquid-home .vt:focus-visible { border-color: var(--void-accent-hi); }
.liquid-home .vt { background: var(--panel); }
.liquid-home .vpr b, .liquid-home .vt-ico { color: var(--void-accent-hi); }
.liquid-home #void :focus-visible { outline-color: var(--void-accent-hi); }

/* Detail sheets keep their behaviour and inherit the same dark surfaces. */
.liquid-home .sheet,
.liquid-home .sheet.t-paper,
.liquid-home .sheet.t-void {
  --sh-bg: color-mix(in srgb, var(--surface) 96%, transparent);
  --sh-line: var(--line);
  --sh-card: color-mix(in srgb, var(--paper) 5%, var(--surface));
  --sh-acc: var(--accent);
  --sh-muted: var(--muted);
  background: var(--sh-bg);
  color: var(--paper);
}
.liquid-home .sheet.t-void { --sh-acc: var(--void-accent-hi); }
.liquid-home .sheet.t-paper .sh-sub { color: var(--muted); }
.liquid-home .sheet.t-paper .btn-line { border-color: var(--paper); color: var(--paper); }
.liquid-home .sheet.t-paper .btn-line:hover { background: var(--paper); color: var(--surface); }
.liquid-home .sheet.t-void .sh-in { background: transparent; }
.liquid-home .sheet.t-void .sh-bar { background: linear-gradient(var(--sh-bg) 70%, transparent); }
.liquid-home .vm-nav { background: linear-gradient(var(--sh-bg) 75%, transparent); }
.liquid-home .vm-sec,
.liquid-home .vm-thumb,
.liquid-home .vi-fig { background: var(--sh-card); }
.liquid-home .vm-group, .liquid-home .vm-d { color: var(--muted); }
.liquid-home .vm-ico,
.liquid-home .vm-nav a.on,
.liquid-home .vm-nav a:hover { color: var(--void-accent-hi); }
.liquid-home .vm-nav a.on,
.liquid-home .vm-nav a:hover,
.liquid-home .vm-sec.flash,
.liquid-home .vm-thumb:hover { border-color: var(--void-accent-hi); }