/* ============ Yashasvi Tech ============ */
:root {
  /* home hero and pillars: ink, and one colour per pillar (Secure, Smart, Scalable) */
  --h-ink: #0b1336;
  --p-secure: #2f4ff0;
  --p-smart: #f2a33a;
  --p-scale: #7c8bff;
  /* the home theme's paper, its softer inks for body copy and small print, and its hairline;
     the dark theme swaps these (and the ink) below */
  --paper: #fff;
  --ink-2: #3d4566;
  --ink-3: #66719a;
  --home-line: #e6e9f2;
  --ink: #040a26;
  --ink-2: #0a1442;
  --ink-3: #111d57;
  --canvas: #f5f7fc;
  --canvas-2: #ebf0f9;
  --panel: #ffffff;
  --navy: #012588;
  --blue: #014ffd;
  --blue-soft: #6f9bff;
  --accent: #fe9a01;
  --accent-hover: #ffb238;
  --text-primary: #0b1640;
  --text-secondary: #47537a;
  --text-muted: #66719a;
  --text-on-ink: #eef2fc;
  --text-on-ink-2: #aab6d8;
  --line: #d7deee;
  --line-strong: #7484b0;
  --line-ink: rgba(130, 155, 225, 0.2);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --f-display: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --tshadow:
    0 1px 2px rgba(3, 6, 22, 0.95), 0 3px 12px rgba(3, 6, 22, 0.78), 0 10px 44px rgba(3, 6, 22, 0.8);
  --r: 6px;
  --wrap: min(1200px, 100% - 2 * clamp(20px, 5vw, 64px));
  --header-h: 76px;
}

/* the dark theme (data-theme="dark" on <html>, set before paint from the visitor's choice or the
   browser's appearance setting): the ink becomes a pale ink and the paper a deep navy, so every
   rule written in ink and paper turns over with them; the older page colours follow */
:root[data-theme='dark'] {
  color-scheme: dark;
  --h-ink: #e9edfb;
  --paper: #0a0f23;
  --ink-2: #b4bcd8;
  --ink-3: #8a93b4;
  --home-line: #252d4d;
  --canvas: #0a0f23;
  --canvas-2: #0f1530;
  --panel: #0f1530;
  --text-primary: #e9edfb;
  --text-secondary: #b4bcd8;
  --text-muted: #8a93b4;
  --line: #252d4d;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  animation: pagein 0.7s var(--ease-out) both;
}
@keyframes pagein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}
h1,
h2 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h3,
h4 {
  font-family: var(--f-body);
  font-weight: 700;
  letter-spacing: -0.005em;
}
p {
  margin: 0;
  text-wrap: pretty;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: var(--accent);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 4px;
  font-weight: 600;
  transition: top 0.3s var(--ease-out);
}
.skip:focus {
  top: 16px;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
main:focus {
  outline: none;
}
.wrap {
  width: var(--wrap);
  margin-inline: auto;
}
.center {
  text-align: center;
}

/* page environment */
.env {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.env-glow {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  opacity: 0.6;
}
.env-glow.g1 {
  left: -22vmax;
  top: -12vmax;
  background: radial-gradient(circle, rgba(1, 79, 253, 0.09), transparent 62%);
  animation: glowA 80s var(--ease-io) infinite alternate;
  animation-delay: -30s;
}
.env-glow.g2 {
  right: -26vmax;
  bottom: -22vmax;
  background: radial-gradient(circle, rgba(254, 154, 1, 0.06), transparent 62%);
  animation: glowB 95s var(--ease-io) infinite alternate;
  animation-delay: -50s;
}
@keyframes glowA {
  to {
    transform: translate3d(30vw, 40vh, 0);
  }
}
@keyframes glowB {
  to {
    transform: translate3d(-35vw, -30vh, 0);
  }
}

/* ---------- buttons & links ---------- */
/* buttons: glass pill (translucent fill, light rim brighter at the edges, soft inner glow), gradient label and a sparkle mark */
.btn {
  --fill:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.02) 55%,
      rgba(255, 255, 255, 0.06)
    ),
    linear-gradient(rgba(12, 19, 50, 0.94), rgba(9, 15, 42, 0.96));
  --label: linear-gradient(180deg, #fff 28%, #b3c3ec 92%);
  --label-solid: #e4eaf8;
  --rim: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.1) 32%,
    rgba(255, 255, 255, 0.03) 62%,
    rgba(160, 185, 255, 0.4)
  );
  --spark: linear-gradient(135deg, #fff 20%, #8fb0ff);
  --glow: rgba(111, 155, 255, 0.45);
  --drop: rgba(4, 10, 38, 0.7);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.45em 0.95em 1.65em;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  color: var(--label-solid);
  background: var(--fill);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -12px 22px -14px var(--glow),
    0 14px 30px -16px var(--drop);
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
}
.btn > span {
  background: var(--label);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--rim);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.35s;
}
/* button icons: the sparkle by default; data-icon swaps in one that says what the button does */
.btn {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3.5c.55 4.9 2.6 6.95 7.5 7.5-4.9.55-6.95 2.6-7.5 7.5-.55-4.9-2.6-6.95-7.5-7.5 4.9-.55 6.95-2.6 7.5-7.5Z'/%3E%3Cpath d='M19.5 2c.2 1.6.9 2.3 2.5 2.5-1.6.2-2.3.9-2.5 2.5-.2-1.6-.9-2.3-2.5-2.5 1.6-.2 2.3-.9 2.5-2.5Z'/%3E%3C/svg%3E");
}
.btn[data-icon='calendar'] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}
.btn[data-icon='chat'] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.3 7.6L3.5 21l1.4-4.9A8.5 8.5 0 1 1 21 12z'/%3E%3C/svg%3E");
}
.btn[data-icon='play'] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M10 8.5v7l6-3.5z' fill='black'/%3E%3C/svg%3E");
}
.btn[data-icon='arrow'] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.btn[data-icon='down'] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E");
}
.btn[data-icon='send'] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 10.5 13.5M21.5 2.5l-7 19-4-8-8-4z'/%3E%3C/svg%3E");
}
.btn[data-icon='roles'] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='13.5' rx='2.5'/%3E%3Cpath d='M8.5 7V5a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v2M2.5 13h19'/%3E%3C/svg%3E");
}
.btn[data-icon='team'] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20.5a6.5 6.5 0 0 1 13 0M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.2a6.5 6.5 0 0 1 3.5 6.3'/%3E%3C/svg%3E");
}
.btn[data-icon='home'] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 3.5 21 11M5 9.5V20.5h14V9.5M10 20.5v-5.5h4v5.5'/%3E%3C/svg%3E");
}
.btn::after {
  content: '';
  flex: none;
  width: 1.05em;
  height: 1.05em;
  background: var(--spark);
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
  transition: transform 0.5s var(--ease-out);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -14px 26px -14px var(--glow),
    0 18px 36px -16px var(--drop);
}
.btn:hover::before {
  opacity: 1;
}
.btn:hover::after,
.btn:focus-visible::after {
  transform: rotate(90deg) scale(1.12);
}
.btn[data-icon]:hover::after,
.btn[data-icon]:focus-visible::after {
  transform: scale(1.12);
}
.btn[data-icon='arrow']:hover::after,
.btn[data-icon='arrow']:focus-visible::after {
  transform: translateX(3px);
}
.btn[data-icon='down']:hover::after,
.btn[data-icon='down']:focus-visible::after {
  transform: translateY(2px);
}
.btn[data-icon='send']:hover::after,
.btn[data-icon='send']:focus-visible::after {
  transform: translate(2px, -2px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 3px;
}
.btn-accent {
  --label: linear-gradient(180deg, #fff7ea 22%, #ffb13d 92%);
  --label-solid: #ffc266;
  --rim: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.1) 32%,
    rgba(254, 154, 1, 0.12) 62%,
    rgba(255, 184, 77, 0.6)
  );
  --spark: linear-gradient(135deg, #ffe3b0 15%, #fe9a01);
  --glow: rgba(254, 154, 1, 0.55);
}
.btn-primary {
  --fill:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.02) 55%,
      rgba(255, 255, 255, 0.06)
    ),
    linear-gradient(rgba(1, 30, 112, 0.88), rgba(4, 12, 50, 0.92));
  --glow: rgba(1, 79, 253, 0.6);
}
.btn-outline-light {
  --fill:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.03) 55%,
      rgba(255, 255, 255, 0.07)
    ),
    linear-gradient(rgba(13, 20, 52, 0.35), rgba(13, 20, 52, 0.35));
  --label: linear-gradient(180deg, #fff 28%, #c6d2f2 92%);
  --label-solid: #eef2fc;
}
.btn-outline {
  --fill:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0.5) 60%,
      rgba(255, 255, 255, 0.7)
    ),
    linear-gradient(rgba(235, 240, 249, 0.6), rgba(235, 240, 249, 0.6));
  --label: linear-gradient(180deg, #0b1640 25%, #2450d6 95%);
  --label-solid: var(--navy);
  --rim: linear-gradient(
    165deg,
    #fff,
    rgba(1, 37, 136, 0.12) 35%,
    rgba(1, 37, 136, 0.06) 62%,
    rgba(1, 79, 253, 0.35)
  );
  --spark: linear-gradient(135deg, #2b63ff, #012588);
  --glow: rgba(1, 79, 253, 0.22);
  --drop: rgba(1, 37, 136, 0.4);
}
.btn-sm {
  padding: 0.7em 1.15em 0.7em 1.3em;
  font-size: 0.92rem;
}
/* flat ink button for the light home hero: no glass, rim, glow, or gradient */
.btn-ink {
  --spark: var(--paper);
  background: var(--h-ink);
  color: var(--paper);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition:
    background-color 0.3s,
    transform 0.35s var(--ease-out);
}
.btn-ink::before {
  display: none;
}
.btn-ink > span {
  background: none;
  color: inherit;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.btn-ink:hover,
.btn-ink:focus-visible {
  background: var(--p-secure);
  color: #fff;
  box-shadow: none;
}
/* on a dark background the glass turns light: a bright frosted fill and a white rim; the header button follows the header as it switches between dark and light */
:is(.on-ink, [data-dark-top], .footer, .site-header:not(.solid)) .btn {
  --fill:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.12) 55%,
      rgba(255, 255, 255, 0.2)
    ),
    linear-gradient(rgba(160, 185, 245, 0.16), rgba(160, 185, 245, 0.16));
  --label: linear-gradient(180deg, #fff 30%, #dde6ff 92%);
  --label-solid: #fff;
  --rim: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.28) 35%,
    rgba(255, 255, 255, 0.12) 62%,
    rgba(255, 255, 255, 0.55)
  );
  --spark: linear-gradient(135deg, #fff 20%, #cfdcff);
  --glow: rgba(190, 210, 255, 0.5);
  --drop: rgba(0, 0, 0, 0.45);
}
:is(.on-ink, [data-dark-top], .footer, .site-header:not(.solid)) .btn-accent {
  --fill:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.12) 55%,
      rgba(255, 255, 255, 0.2)
    ),
    linear-gradient(rgba(175, 195, 250, 0.14), rgba(175, 195, 250, 0.14));
  --label: linear-gradient(180deg, #fffaf2 25%, #ffc873 92%);
  --label-solid: #ffd089;
  --rim: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.28) 35%,
    rgba(255, 200, 120, 0.2) 62%,
    rgba(255, 190, 90, 0.75)
  );
  --spark: linear-gradient(135deg, #fff1d6 15%, #ffb13d);
  --glow: rgba(254, 154, 1, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after {
    transition: none;
  }
  .btn:hover,
  .btn:active {
    transform: none;
  }
  .btn:hover::after,
  .btn:focus-visible::after,
  .btn[data-icon]:hover::after,
  .btn[data-icon]:focus-visible::after {
    transform: none;
  }
}
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }
}
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.link-arrow span {
  transition: transform 0.3s var(--ease-out);
}
.link-arrow:hover span {
  transform: translateX(4px);
}
.on-ink .link-arrow {
  color: var(--blue-soft);
}

/* eyebrow labels */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--accent);
}
.center .eyebrow,
.eyebrow.center {
  justify-content: center;
}
.on-ink .eyebrow {
  color: var(--blue-soft);
}
.h-xl {
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  max-width: 20ch;
}
.h-lg {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}
.lede {
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  color: var(--text-secondary);
  max-width: 60ch;
}
.on-ink .lede {
  color: var(--text-on-ink-2);
}

/* ============ HEADER ============ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  pointer-events: none;
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 -24px;
  background: linear-gradient(rgba(4, 10, 38, 0.5), rgba(4, 10, 38, 0));
  pointer-events: none;
  transition: opacity 0.4s;
}
@property --gx {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 22%;
}
/* liquid glass bar: the frosted fill and the specular sheen live on pseudo-elements, so backdrop-filter never traps the dropdowns or the fixed mobile panel */
.header-inner {
  position: relative;
  z-index: 0;
  pointer-events: auto;
  height: calc(100% - 20px);
  margin: 10px auto 0;
  padding: 0 7px 0 18px;
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(1320px, 100% - 2 * clamp(12px, 3vw, 40px));
  border-radius: 999px;
  transition: --gx 0.6s var(--ease-out);
}
.header-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.04) 55%,
      rgba(255, 255, 255, 0.09)
    ),
    rgba(8, 18, 64, 0.26);
  -webkit-backdrop-filter: blur(20px) saturate(185%);
  backdrop-filter: blur(20px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -10px 22px -16px rgba(111, 155, 255, 0.55),
    0 14px 34px -16px rgba(0, 0, 0, 0.6);
  transition:
    background 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}
.header-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      160px 70% at var(--gx) 0%,
      rgba(255, 255, 255, 0.26),
      rgba(255, 255, 255, 0) 72%
    ),
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 32%,
      rgba(255, 255, 255, 0.06) 46%,
      rgba(255, 255, 255, 0) 60%
    );
  transition: opacity 0.5s;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
.brand-mark {
  width: 44px;
  height: auto;
}
.brand-mark .m-navy {
  fill: #3b66e6;
  transition: fill 0.4s;
}
.brand-names {
  position: relative;
  display: block;
  height: 14px;
  width: 158px;
}
.brand-name {
  position: absolute;
  inset: 0;
  height: 14px;
  width: auto;
  transition: opacity 0.4s;
}
.brand-name.on-light {
  opacity: 0;
}
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link,
.nav-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 15px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-on-ink);
  text-decoration: none;
  cursor: pointer;
  border-radius: 999px;
  transition:
    color 0.3s,
    background-color 0.3s,
    box-shadow 0.3s;
}
.nav-btn::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.7;
  transition: transform 0.3s var(--ease-out);
}
.nav-item.open .nav-btn::after {
  transform: translateY(1px) rotate(-135deg);
}
.nav-link:hover,
.nav-btn:hover,
.nav-item.open .nav-btn {
  background: rgba(255, 255, 255, 0.1);
}
.nav-link[aria-current='page'],
.nav-item.current .nav-btn,
.nav-item.current .nav-link {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.nav-item {
  position: relative;
}
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 290px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(4, 10, 38, 0.06),
    0 24px 60px -24px rgba(4, 10, 38, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition:
    opacity 0.25s var(--ease-out),
    transform 0.25s var(--ease-out),
    visibility 0s 0.25s;
}
.dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.nav-item.open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.dropdown a {
  display: block;
  padding: 11px 14px;
  border-radius: 13px;
  text-decoration: none;
  color: var(--text-primary);
}
.dropdown a:hover,
.dropdown a:focus-visible {
  background: rgba(1, 37, 136, 0.06);
}
.dropdown a strong {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
}
.dropdown a span {
  display: block;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}
.dropdown .dd-all {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 13px 13px;
  padding-top: 13px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--blue);
}
.dropdown.wide {
  min-width: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.dropdown.wide .dd-all {
  grid-column: 1 / -1;
}
/* full-width dropdown panels (Header.tsx MegaPanel): as wide as the header bar, the categories
   on the left (the picked one inked, with a chevron), its links in the middle, and a featured
   card with figures on the right, all in the home page's flat white look */
.main-nav .nav-item.has-dd {
  position: static;
}
.dropdown.mega {
  --cats: clamp(230px, 21vw, 300px);
  --feature: clamp(300px, 28vw, 400px);
  --pad: 22px;
  --gap: 32px;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: var(--cats) minmax(0, 1fr) var(--feature);
  gap: var(--gap);
  min-width: 0;
  min-height: 320px;
  padding: var(--pad);
  border: 1px solid var(--home-line);
  border-radius: 16px;
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 30px 60px -30px rgba(11, 19, 54, 0.35);
  color: var(--h-ink);
  transform: translateY(6px);
}
.nav-item.open .dropdown.mega {
  transform: none;
}
.dropdown.mega a {
  padding: 0;
  border-radius: 0;
  color: inherit;
}
.dropdown.mega a:hover,
.dropdown.mega a:focus-visible {
  background: none;
}
/* the categories, with a hairline between them and the links */
.mm-cats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-right: calc(var(--gap) / -2);
  padding-right: calc(var(--gap) / 2);
  border-right: 1px solid var(--home-line);
}
.dropdown.mega .mm-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #f3f5fa;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  transition:
    background-color 0.25s,
    color 0.25s;
}
.dropdown.mega .mm-cat-link:hover {
  background: #e9edf6;
}
.dropdown.mega .mm-cat.on > .mm-cat-link {
  padding-block: 18px;
  background: var(--h-ink);
  color: var(--paper);
  font-size: 18px;
}
.mm-cat.on > .mm-cat-link::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.dropdown.mega .mm-all {
  margin-top: auto;
  padding: 10px 4px 2px;
  font-weight: 700;
  font-size: 15px;
}
.dropdown.mega .mm-all span {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.dropdown.mega .mm-all:hover span {
  transform: translateX(4px);
}
/* the picked category's links fill the middle column, six to a column, with a hairline after */
.mm-links {
  position: absolute;
  top: var(--pad);
  bottom: var(--pad);
  left: calc(var(--pad) + var(--cats) + var(--gap));
  width: calc(100% - 2 * var(--pad) - var(--cats) - var(--feature) - 2 * var(--gap));
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  align-content: start;
  column-gap: 24px;
  padding-right: calc(var(--gap) / 2);
  border-right: 1px solid var(--home-line);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.2s,
    visibility 0s 0.2s;
}
/* inherit, not visible: a closed panel is hidden, and its picked links must stay hidden with it */
.mm-cat.on .mm-links {
  visibility: inherit;
  opacity: 1;
  transition-delay: 0s;
}
.dropdown.mega .mm-links a {
  display: inline-block;
  padding: 10px 0;
  font-weight: 600;
  font-size: 16px;
  transition: color 0.2s;
}
.dropdown.mega .mm-links a:hover,
.dropdown.mega .mm-links a:focus-visible {
  color: var(--p-secure);
}
/* the featured card */
.mm-feature {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: 12px;
  background: #f5f7fc;
}
.mm-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mm-box {
  padding: 16px 18px 8px;
  border: 1px solid var(--home-line);
  border-radius: 8px;
  background: var(--paper);
}
.mm-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.mm-box ul {
  margin-top: 8px;
}
.dropdown.mega .mm-box a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--home-line);
  font-weight: 600;
  font-size: 15px;
  transition: color 0.2s;
}
.dropdown.mega .mm-box a span {
  transition: transform 0.3s var(--ease-out);
}
.dropdown.mega .mm-box a:hover,
.dropdown.mega .mm-box a:focus-visible {
  color: var(--p-secure);
}
.dropdown.mega .mm-box a:hover span {
  transform: translateX(4px);
}
.mm-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.mm-tiles li {
  padding: 12px;
  border: 1px solid var(--home-line);
  border-radius: 8px;
  background: var(--paper);
}
.mm-tiles b {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.mm-tiles span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-2);
}
.header-cta {
  flex: none;
}
/* header button and the main hero button: same glass as the bar (light on the dark bar, frosted white on the light bar); fills yellow on hover. The fill is an inset shadow so it fades in smoothly */
:is(.site-header, .hero, .page-hero) .btn:is(.header-cta, .btn-accent) {
  --cta-ink: #fff;
  --rim: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0.18) 40%,
    rgba(255, 255, 255, 0.08) 65%,
    rgba(255, 255, 255, 0.4)
  );
  color: var(--cta-ink);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.12)
  );
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 60px rgba(255, 200, 40, 0),
    inset 0 -12px 18px -10px rgba(255, 150, 0, 0),
    0 8px 20px -12px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    color 0.3s;
}
:is(.site-header, .hero, .page-hero) .btn:is(.header-cta, .btn-accent) > span {
  background: none;
  color: inherit;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
:is(.site-header, .hero, .page-hero) .btn:is(.header-cta, .btn-accent)::after {
  background: currentColor;
  transition:
    transform 0.5s var(--ease-out),
    background-color 0.3s;
}
.site-header.solid .btn.header-cta {
  --cta-ink: var(--navy);
  --rim: linear-gradient(
    165deg,
    #fff,
    rgba(1, 37, 136, 0.14) 40%,
    rgba(1, 37, 136, 0.08) 65%,
    rgba(1, 79, 253, 0.3)
  );
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    rgba(255, 255, 255, 0.55) 60%,
    rgba(255, 255, 255, 0.75)
  );
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 60px rgba(255, 200, 40, 0),
    inset 0 -12px 18px -10px rgba(255, 150, 0, 0),
    0 8px 20px -12px rgba(1, 37, 136, 0.3);
}
:is(.site-header, .hero, .page-hero) .btn:is(.header-cta, .btn-accent):hover,
:is(.site-header, .hero, .page-hero) .btn:is(.header-cta, .btn-accent):focus-visible {
  --cta-ink: var(--ink);
  --rim: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 220, 120, 0.5) 40%,
    rgba(255, 180, 0, 0.4) 65%,
    rgba(240, 140, 0, 0.8)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 60px #ffc83d,
    inset 0 -12px 18px -10px rgba(255, 150, 0, 0.9),
    0 12px 26px -12px rgba(255, 180, 0, 0.75);
}
/* the header's own button fills black instead (the heroes' accent buttons keep the yellow) */
.site-header .btn.header-cta:hover,
.site-header .btn.header-cta:focus-visible {
  --cta-ink: #fff;
  --rim: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.12) 40%,
    rgba(255, 255, 255, 0.06) 65%,
    rgba(255, 255, 255, 0.3)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 60px var(--h-ink),
    inset 0 -12px 18px -10px rgba(11, 19, 54, 0),
    0 12px 26px -12px rgba(11, 19, 54, 0.6);
}
/* the mobile menu's button wears the header button's yellow for good, since touch has no hover */
.mp-foot .btn-accent {
  --rim: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 220, 120, 0.5) 40%,
    rgba(255, 180, 0, 0.4) 65%,
    rgba(240, 140, 0, 0.8)
  );
  color: var(--ink);
  background: #ffc83d;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -12px 18px -10px rgba(255, 150, 0, 0.9),
    0 12px 26px -12px rgba(255, 180, 0, 0.75);
}
.mp-foot .btn-accent > span {
  background: none;
  color: inherit;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.mp-foot .btn-accent::after {
  background: currentColor;
}
.menu-toggle {
  display: none;
  height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(238, 242, 252, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.site-header.solid .header-inner::before {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.78),
      rgba(255, 255, 255, 0.52) 60%,
      rgba(255, 255, 255, 0.66)
    ),
    rgba(238, 242, 252, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 -10px 22px -16px rgba(1, 79, 253, 0.18),
    0 0 0 1px rgba(4, 10, 38, 0.07),
    0 12px 32px -14px rgba(4, 10, 38, 0.28);
}
.site-header.solid .header-inner::after {
  opacity: 0.55;
}
.site-header.solid::before {
  opacity: 0;
}
.site-header.solid .nav-link,
.site-header.solid .nav-btn {
  color: var(--text-primary);
}
.site-header.solid .nav-link:hover,
.site-header.solid .nav-btn:hover,
.site-header.solid .nav-item.open .nav-btn {
  background: rgba(1, 37, 136, 0.06);
}
.site-header.solid .nav-link[aria-current='page'],
.site-header.solid .nav-item.current .nav-btn,
.site-header.solid .nav-item.current .nav-link {
  color: var(--navy);
  background: rgba(1, 37, 136, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(1, 37, 136, 0.08);
}
.site-header.solid .brand-name.on-dark {
  opacity: 0;
}
.site-header.solid .brand-name.on-light {
  opacity: 1;
}
.site-header.solid .brand-mark .m-navy {
  fill: #012588;
}
.site-header.solid .menu-toggle {
  color: var(--text-primary);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-inner::before {
    background: rgba(7, 17, 64, 0.92);
  }
  .site-header.solid .header-inner::before {
    background: rgba(255, 255, 255, 0.96);
  }
  .dropdown {
    background: var(--panel);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .header-inner::before {
    background: rgba(7, 17, 64, 0.95);
  }
  .site-header.solid .header-inner::before {
    background: #fff;
  }
  .header-inner::after {
    display: none;
  }
  .dropdown {
    background: var(--panel);
  }
}

/* mobile menu */
.mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.3s var(--ease-out),
    visibility 0s 0.3s;
}
.mobile-panel.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.mp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.mp-top img {
  height: 13px;
  width: auto;
}
.mp-close {
  height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
}
.mp-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px 24px;
}
.mp-body details {
  border-bottom: 1px solid var(--line);
}
.mp-body summary,
.mp-body > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 2px;
  font-weight: 700;
  font-size: 1.1rem;
  list-style: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-primary);
}
.mp-body > a {
  border-bottom: 1px solid var(--line);
}
.mp-body summary::-webkit-details-marker {
  display: none;
}
.mp-body summary::after {
  content: '+';
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--blue);
  transition: transform 0.3s;
}
.mp-body details[open] summary::after {
  transform: rotate(45deg);
}
.mp-body details a {
  display: block;
  padding: 10px 2px 10px 14px;
  text-decoration: none;
  color: var(--text-secondary);
  border-left: 2px solid var(--line);
}
.mp-body details div {
  padding-bottom: 14px;
}
.mp-foot {
  padding: 16px 20px 28px;
  border-top: 1px solid var(--line);
}
.mp-foot .btn {
  width: 100%;
}
body.menu-open {
  overflow: hidden;
}
@media (max-width: 1100px) {
  .main-nav,
  .header-cta {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
}

/* ============ HOME HERO ============ */
/* light and static: the Y-mark traced in dots beside three stacked words, then a quiet row of
   client logos. Only a gentle load-in, played once per tab (see BOOT in layout.tsx) */
.t-secure {
  --tone: var(--p-secure);
}
.t-smart {
  --tone: var(--p-smart);
}
.t-scale {
  --tone: var(--p-scale);
}
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  color: var(--h-ink);
  padding: calc(var(--header-h) + clamp(16px, 3vw, 40px)) 0 clamp(28px, 3.5vw, 44px);
}
/* the dotted field behind it all (HeroField.tsx) */
.hh-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hh-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  min-height: calc(85vh - var(--header-h));
}
.hh-mark {
  width: 100%;
  max-width: 360px;
  justify-self: center;
}
/* the mark: the Y on its plate, with the three pillar orbits round it (OrbitMark.tsx) */
.om {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.om-ring {
  fill: none;
  stroke: var(--tone);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  vector-effect: non-scaling-stroke;
  transition:
    opacity 0.35s,
    stroke-opacity 0.35s;
}
.om-shadow {
  fill: var(--h-ink);
}
.om-plate {
  fill: var(--paper);
  stroke: var(--h-ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.om-y {
  overflow: visible;
}
/* the Y's four pieces lock together as the page opens */
.om-pc {
  transform-box: fill-box;
  transform-origin: center;
  animation: omLock 1s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.om-pc:nth-child(2) {
  animation-delay: 0.12s;
}
.om-pc:nth-child(3) {
  animation-delay: 0.24s;
}
.om-pc:nth-child(4) {
  animation-delay: 0.36s;
}
@keyframes omLock {
  from {
    opacity: 0;
    scale: 0.6;
  }
}
.om-dot {
  fill: var(--tone);
  transform-box: fill-box;
  transform-origin: center;
  transition: scale 0.35s;
}
.om-halo {
  fill: var(--tone);
  opacity: 0.18;
}
.om-label {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--h-ink);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 5px;
  stroke-linejoin: round;
}
/* a pillar in focus (its planet or its word): its orbit draws solid, the others step back */
.om[data-on] .om-ring {
  opacity: 0.3;
}
.om[data-on='secure'] .om-ring.t-secure,
.om[data-on='smart'] .om-ring.t-smart,
.om[data-on='scale'] .om-ring.t-scale {
  opacity: 1;
  stroke-opacity: 1;
  stroke-dasharray: none;
}
.om[data-on='secure'] .t-secure .om-dot,
.om[data-on='smart'] .t-smart .om-dot,
.om[data-on='scale'] .t-scale .om-dot {
  scale: 1.35;
}
.hh-w {
  transition: opacity 0.35s;
}
.hh-title[data-on] .hh-w {
  opacity: 0.3;
}
.hh-title[data-on='secure'] .hh-w:has(.t-secure),
.hh-title[data-on='smart'] .hh-w:has(.t-smart),
.hh-title[data-on='scale'] .hh-w:has(.t-scale) {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .om-pc {
    animation: none;
  }
}
/* the background: a blueprint grid, lit round the pointer (HeroGrid.tsx) */
.hg,
.hg > div {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hg {
  z-index: -1;
}
.hg-base,
.hg-hot {
  background-image:
    linear-gradient(var(--g1) 1px, transparent 1px),
    linear-gradient(90deg, var(--g1) 1px, transparent 1px),
    linear-gradient(var(--g2) 1px, transparent 1px),
    linear-gradient(90deg, var(--g2) 1px, transparent 1px);
  background-size:
    160px 160px,
    160px 160px,
    32px 32px,
    32px 32px;
  background-position: -1px -1px;
}
.hg-base {
  --g1: color-mix(in srgb, var(--h-ink) 7%, transparent);
  --g2: color-mix(in srgb, var(--h-ink) 3.5%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent);
}
.hg-hot {
  --g1: color-mix(in srgb, var(--p-secure) 32%, transparent);
  --g2: color-mix(in srgb, var(--p-secure) 18%, transparent);
  -webkit-mask-image: radial-gradient(240px circle at var(--mx, 30%) var(--my, 50%), #000, transparent 72%);
  mask-image: radial-gradient(240px circle at var(--mx, 30%) var(--my, 50%), #000, transparent 72%);
}
.hg-glow {
  background: radial-gradient(
    320px circle at var(--mx, 30%) var(--my, 50%),
    color-mix(in srgb, var(--p-secure) 9%, transparent),
    transparent 70%
  );
}
/* the words size to their column, so "Scalable." always fits on one line */
.hh-copy {
  container-type: inline-size;
}
.hh-eyebrow {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hh-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(44px, 15.4cqi, 128px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--h-ink);
}
.hh-w {
  display: block;
}
/* the full stop drawn as a dot in the pillar's colour; the real "." stays in the text, visually hidden */
.hh-dot {
  display: inline-block;
  width: 0.19em;
  height: 0.19em;
  margin-left: 0.05em;
  border-radius: 50%;
  background: var(--tone);
}
.hh-sub {
  max-width: 520px;
  margin-top: clamp(22px, 2.6vw, 32px);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
}
.hh-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: clamp(24px, 3vw, 34px);
}
.hh-link {
  font-weight: 700;
  color: var(--h-ink);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.3s;
}
.hh-link span {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.hh-link:hover,
.hh-link:focus-visible {
  border-color: currentColor;
}
.hh-link:hover span,
.hh-link:focus-visible span {
  transform: translateX(4px);
}
/* the numbers so far, in their own band under Founder's desk */
.home-proof {
  background: var(--paper);
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.hh-proof {
  margin-top: clamp(20px, 3vw, 36px);
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--home-line);
}
.hh-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  margin: clamp(36px, 4.5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.hh-stats b {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--h-ink);
}
/* the emblem above each number: a small circle in the same style as the founder's mission and
   vision emblems, its accent in the stat's pillar colour */
.hs-emblem {
  display: grid;
  place-items: center;
  width: 58px;
  aspect-ratio: 1;
  margin: 0 auto 18px;
  border: 1.5px solid var(--h-ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: -5px 5px 0 0 var(--h-ink);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.hh-stats li:hover .hs-emblem {
  transform: translate(2px, -2px);
  box-shadow: -7px 7px 0 0 var(--h-ink);
}
.hs-emblem svg {
  display: block;
  width: 64%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--h-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hs-emblem .tone {
  fill: var(--tone);
  stroke: none;
}
.hs-emblem .tone-s {
  stroke: var(--tone);
  stroke-width: 3;
}
@media (prefers-reduced-motion: reduce) {
  .hh-stats li:hover .hs-emblem {
    transform: none;
  }
}
/* the label, after a dot in the pillar colour */
.hh-stats b + span {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}
.hh-stats b + span::before {
  content: '';
  display: inline-block;
  margin-right: 8px;
  vertical-align: 0.1em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone);
}
/* the constellation (Constellation.tsx moves every dot): links dark enough to read the Y, dots in
   the pillar colours plus a few ink ones */
.yc {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transition: opacity 0.3s;
}
/* hidden until the script has placed the dots, so the mark doesn't jump; shown anyway after 2.5s */
.js .yc:not(.live) {
  opacity: 0;
  animation: ycShow 0s linear 2.5s forwards;
}
.yc-links line {
  stroke: #b8c0d6;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.yc-links {
  transition: opacity 0.6s ease-out;
}
.yc.entering .yc-links {
  opacity: 0;
}
/* small dots running along the links, shown once the entrance has settled */
.yc-flow {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.yc.flowing:not(.entering) .yc-flow {
  opacity: 1;
}
.yc-secure {
  fill: var(--p-secure);
}
.yc-smart {
  fill: var(--p-smart);
}
.yc-scale {
  fill: var(--p-scale);
}
.yc-ink {
  fill: var(--h-ink);
}
/* the words rise into place */
.hh-copy > * {
  animation: hhRise 0.8s var(--ease-out) both;
}
.hh-copy > :nth-child(2) {
  animation-delay: 0.08s;
}
.hh-copy > :nth-child(3) {
  animation-delay: 0.16s;
}
.hh-copy > :nth-child(4) {
  animation-delay: 0.24s;
}
@keyframes ycShow {
  to {
    opacity: 1;
  }
}
@keyframes hhRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ============ HOME: statement and three circles ============ */
.stmt {
  background: var(--paper);
  color: var(--h-ink);
}
.stmt-text {
  max-width: 900px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--h-ink);
}
/* three pillar circles on one ink line, each a white plate with an ink edge over a solid ink
   shadow, the colour set into it, so it reads as a disc with depth. On desktop
   the hero's dots fly in and form them (Journey.tsx), then they float and breathe; elsewhere
   they simply fade in */
.stmt-circles {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin-top: clamp(40px, 5vw, 64px);
  /* room for the shadows, down and to the left */
  padding: 0 0 12px 12px;
}
.stmt-circles::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 0;
  top: calc(50% - 6.75px);
  height: 1.5px;
  background: var(--h-ink);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.sc {
  position: relative;
  aspect-ratio: 1;
}
.sc.t-secure {
  --bob: 7px;
  --bob-time: 3.2s;
  --bob-delay: -0.4s;
  width: clamp(40px, 5vw, 64px);
}
.sc.t-smart {
  --bob: 10px;
  --bob-time: 3.8s;
  --bob-delay: -1.9s;
  width: clamp(84px, 11vw, 136px);
}
.sc.t-scale {
  --bob: 8px;
  --bob-time: 3.5s;
  --bob-delay: -1.1s;
  width: clamp(60px, 7.6vw, 96px);
}
.sc-bob,
.sc-ring,
.sc-plate,
.sc-fill {
  position: absolute;
  inset: 0;
}
.sc-ring,
.sc-plate,
.sc-fill {
  border-radius: 50%;
}
/* the shadow: a solid ink disc down and to the left, which the journey nudges away from the
   cursor (--ox, --oy) */
.sc-ring {
  background: var(--h-ink);
  transform: translate(calc(-8% + var(--ox, 0px)), calc(8% + var(--oy, 0px)));
  transition: transform 0.5s var(--ease-out);
}
/* the middle circle's mixed layer: a light blend of the two side colours that builds around its
   own colour as they stream in (--mix, from hidden behind the colour to nearly the plate's edge),
   then drains back step by step; Journey.tsx drives it */
.sc-mix {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(
    in srgb,
    color-mix(in srgb, var(--p-secure), var(--p-scale)) 42%,
    var(--paper)
  );
  transform-origin: 47% 47%;
  scale: var(--mix, 0);
}
/* the plate: white with an ink edge, so the line stops at it */
.sc-plate {
  border: 1.5px solid var(--h-ink);
  background: var(--paper);
}
/* the colour, 62% of the plate and a little up and to the left, as if lit from there
   (Journey.tsx draws the same shape while the circles glide); the side colours shrink as they
   give part of themselves to the middle (--give) */
.sc-fill {
  inset: 16% 22% 22% 16%;
  background: var(--tone);
  scale: calc(1 - 0.28 * var(--give, 0));
}
/* each circle carries its pillar's symbol: the same drawing its card shows, small, in the card's
   type colour, shrinking with the colour as it gives to the middle */
.sc-ic {
  position: absolute;
  inset: 16% 22% 22% 16%;
  display: grid;
  place-items: center;
  scale: calc(1 - 0.28 * var(--give, 0));
  pointer-events: none;
}
.sc-ic svg {
  width: 74%;
  height: auto;
  overflow: visible;
}
.sc-ic :is(path, rect, circle, line) {
  fill: none;
  stroke: var(--sc-ink);
  stroke-width: 1.3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sc-ic .mask {
  fill: var(--tone);
}
.sc-ic .key {
  fill: #fff;
  stroke: none;
}
.sc-ic text {
  display: none;
}
.sc.t-secure {
  --sc-ink: #fff;
}
.sc.t-smart,
.sc.t-scale {
  --sc-ink: #0b1336;
}
.sc-label {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tone);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition:
    opacity 0.3s,
    transform 0.3s var(--ease-out);
  pointer-events: none;
}
.sc:hover .sc-label {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* formed and on screen: each circle bobs and breathes at its own pace */
.stmt-circles.formed.on .sc-bob {
  animation: scBob var(--bob-time) ease-in-out var(--bob-delay) infinite alternate;
}
.stmt-circles.formed.on .sc-fill {
  animation: scBreathe 4s ease-in-out var(--bob-delay) infinite;
}
@keyframes scBob {
  from {
    transform: translateY(calc(var(--bob) / -2));
  }
  to {
    transform: translateY(calc(var(--bob) / 2));
  }
}
@keyframes scBreathe {
  50% {
    transform: scale(1.04);
  }
}
/* with the journey on, the line draws once the circles have formed and pulls back as they leave */
.jn-on .stmt-circles.reveal {
  opacity: 1;
  transform: none;
}
.jn-on .stmt-circles::before,
.jn-on .stmt-circles.formed.leaving::before {
  transform: scaleX(0);
}
.jn-on .stmt-circles.formed::before {
  transform: none;
}
/* without it, the circles fade in once */
.js .stmt-circles.reveal {
  transform: none;
}
.js:not(.jn-on) .stmt-circles .sc {
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.js:not(.jn-on) .stmt-circles .sc:nth-child(2) {
  transition-delay: 0.15s;
}
.js:not(.jn-on) .stmt-circles .sc:nth-child(3) {
  transition-delay: 0.3s;
}
.js:not(.jn-on) .stmt-circles.in .sc {
  opacity: 1;
  transform: none;
}

/* ============ HOME: the three pillars ============ */
/* three cards side by side, each filled with its pillar's colour and no border: the word, its
   line, the services, and the drawing at the foot. On desktop with motion (.jn-on) the cards
   start empty, Journey.tsx pours each circle's colour into its card (--fill) and then builds the
   card; otherwise they are coloured from the start and rise in once */
.pl-sec {
  background: var(--paper);
  color: var(--h-ink);
  padding-top: 0;
}
.pl-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.pl-card {
  --fill: 1;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: clamp(560px, 46vw, 660px);
  padding: clamp(28px, 3vw, 44px) clamp(18px, 2.4vw, 34px) 0;
  overflow: hidden;
  border-radius: 4px;
  color: var(--h-ink);
  text-align: center;
  scroll-margin-top: calc(var(--header-h) + 8px);
}
.pl-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tone);
  opacity: var(--fill);
}
/* white type on the cobalt card; ink stays clearer on the lighter orange and periwinkle */
.pl-card.t-secure {
  color: color-mix(in srgb, #fff calc(var(--fill) * 100%), var(--h-ink));
}
/* the number above the name */
.pl-kicker {
  margin: 0 0 12px;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.pl-card h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: inherit;
}
/* the tagline under the name, small and bold */
.pl-tagline {
  max-width: 30ch;
  margin: 18px 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.35;
}
.pl-desc {
  max-width: 34ch;
  margin-top: 14px;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 500;
  line-height: 1.5;
}
/* the services as a tidy list: one per line, a dot before each, left-aligned in a block that
   sits centred in the card */
.pl-tags {
  display: grid;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 20px auto 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}
.pl-tags li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pl-tags li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-3px);
}
/* the drawing sits at the foot of the card, in the card's type colour, its dot in white */
.pl-art {
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
}
.pl-art svg {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.pl-art :is(path, rect, circle, line) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the shield hides the rack behind it, so it takes the card's own fill: white until the colour
   has poured in */
.pl-art .mask {
  fill: color-mix(in srgb, var(--tone) calc(var(--fill) * 100%), var(--paper));
}
.pl-art .key {
  fill: var(--paper);
  stroke: none;
}
.pl-art text {
  fill: currentColor;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
}
/* the word sits in a mask, so it can wipe up into place */
.pl-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.pl-mask > span {
  display: inline-block;
}
/* with the journey on, the cards wait empty and build as scroll plays them */
.jn-on .pl-card {
  --fill: 0;
}
/* the drawing comes up with the colour, as the symbol carried down from its circle lands on it */
.jn-on .pl-art {
  opacity: var(--fill);
}
.jn-on .pl-card.reveal {
  opacity: 1;
  transform: none;
}

/* the desktop dot journey's canvas (Journey.tsx): over the page, under the header */
.jn {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.jn-on .jn {
  display: block;
}

/* ============ HOME: "Talk to us" badge ============ */
.talk {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  width: 96px;
  height: 96px;
  border: 1.5px solid var(--h-ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--h-ink);
  box-shadow: 4px 4px 0 0 var(--h-ink);
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}
.talk:hover,
.talk:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--h-ink);
}
.talk svg {
  display: block;
  width: 100%;
  height: 100%;
}
.talk text {
  fill: currentColor;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 800;
}
.talk-ring {
  transform-origin: 60px 60px;
  animation: dgSpin 20s linear infinite;
}

/* phones and small tablets */
@media (max-width: 767px) {
  .hh-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: 0;
  }
  .hh-mark {
    max-width: 220px;
  }
  .hh-sub {
    font-size: 16px;
  }
  .hh-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hh-stats b + span {
    font-size: 14px;
  }
  .pl-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .pl-card {
    min-height: 0;
  }
  .talk {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hh-copy > *,
  .talk-ring {
    animation: none;
  }
  .js .pl-card *,
  .js .stmt-circles * {
    transition: none !important;
  }
}

/* ============ HOME: flagship product ============ */
/* Dji Setu on the left; on the right a quiet printed city plan with your office at its heart and
   every part of the business around it, each joined to the office by a dashed route that packets
   run along (Flagship.tsx). FlagshipScene.tsx builds the plan once it is on screen and leaves it
   running; with reduced motion it rests, fully drawn. Below 1200px wide the plan sits between
   the pitch and the list */
.bm {
  --bm-line: #e3e7f0;
  --bm-street: #eef1f6;
  --bm-block: #f1f3f8;
  --bm-river: #e8eefc;
  --node: 44px;
  --office: 72px;
  padding: clamp(56px, 7vw, 104px) 0;
  background: var(--paper);
  color: var(--h-ink);
}
.bm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'copy' 'side' 'list';
  row-gap: clamp(32px, 5vw, 48px);
}
.bm-copy,
.bm-list,
.bm-caption {
  width: var(--wrap);
  margin-inline: auto;
}
.bm-copy {
  grid-area: copy;
}
.bm-eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bm-name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.bm-tagline {
  max-width: 24ch;
  margin-top: 18px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.bm-lede {
  max-width: 44ch;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}
.bm-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 28px;
}
/* what it does: a row each */
.bm-list {
  grid-area: list;
}
.bm-feature {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
}
.bm-ic {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  fill: none;
  stroke: var(--tone);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bm-feature h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 16px;
  line-height: 1.3;
}
.bm-feature p {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}
/* "1 click": a small printed label */
.bm-tag {
  padding: 2px 6px;
  border: 1px solid var(--h-ink);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* the plan and its caption: a 1000 by 1000 box kept whole and centred (--w wide), with the
   streets running on past it to the panel's edges */
.bm-side {
  grid-area: side;
}
.bm-caption {
  margin-bottom: 18px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* the map is the section's whole background: its streets run on past the plan's box under the
   copy and the list, out to the section's edges */
.bm {
  position: relative;
  overflow: hidden;
  overflow: clip;
}
.bm-copy,
.bm-list {
  position: relative;
  z-index: 1;
}
.bm-map {
  container-type: size;
  position: relative;
  height: clamp(340px, 92vw, 620px);
}
.bm-net {
  --w: min(100cqw - 32px, 100cqh - 32px, 860px);
  container: bm-net / inline-size;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  aspect-ratio: 1;
  margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
}
.bm-plan,
.bm-wires,
.bm-live,
.bm-packets {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bm-plan,
.bm-wires {
  overflow: visible;
}
.bm-river {
  fill: none;
  stroke: var(--bm-river);
  stroke-width: 46;
}
.bm-blocks {
  fill: var(--bm-block);
}
.bm-marks {
  fill: var(--bm-line);
}
.bm-streets {
  fill: none;
  stroke: var(--bm-street);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.bm-route {
  fill: none;
  stroke: var(--h-ink);
  stroke-opacity: 0.35;
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}
/* each route draws on through its mask: one solid stroke along it (a mask shows where it is white,
   so this stays white in either theme) */
.bm-reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 12;
}
/* the office and the places: each a point on the map with its circle centred on it, and its name
   beside it (the office's underneath) */
.bm-office,
.bm-node {
  position: absolute;
  width: 0;
  height: 0;
}
.bm-pin {
  --d: var(--node);
  position: absolute;
  left: calc(var(--d) / -2);
  top: calc(var(--d) / -2);
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  border: 1.5px solid var(--h-ink);
  border-radius: 50%;
  background: var(--paper);
}
.bm-office .bm-pin {
  --d: var(--office);
  background: var(--h-ink);
  color: var(--paper);
}
.bm-pin svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bm-node .ac {
  stroke: var(--tone);
}
/* on white, so the street a place sits on doesn't run through its name */
.bm-label {
  position: absolute;
  top: 0;
  left: calc(var(--node) / 2 + 6px);
  padding: 3px 4px;
  background: var(--paper);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-50%);
}
.bm-node.is-left .bm-label {
  left: auto;
  right: calc(var(--node) / 2 + 6px);
}
.bm-office .bm-label {
  top: calc(var(--office) / 2 + 6px);
  left: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
@container bm-net (max-width: 639px) {
  .bm-office,
  .bm-node {
    --node: 36px;
    --office: 60px;
  }
  .bm-label {
    font-size: 13px;
  }
}
/* a small map (phones): smaller circles, and no names, which the list has anyway */
@container bm-net (max-width: 499px) {
  .bm-office,
  .bm-node {
    --node: 30px;
    --office: 48px;
  }
  .bm-node .bm-label {
    display: none;
  }
  .bm-office .bm-label {
    font-size: 10px;
  }
}
/* tablets: the list in two columns under the plan */
@media (min-width: 768px) and (max-width: 1199px) {
  .bm-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
  }
}
/* wide screens: the pitch and the list on the left, and the plan filling the right out to the
   edge of the screen, with its caption in the corner */
@media (min-width: 1200px) {
  .bm-grid {
    grid-template-columns: min(520px, 44%) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: 'copy side' 'list side';
    column-gap: clamp(48px, 5vw, 88px);
    row-gap: 40px;
    padding-left: calc((100% - var(--wrap)) / 2);
  }
  .bm-copy,
  .bm-list,
  .bm-caption {
    width: auto;
    margin-inline: 0;
  }
  .bm-list {
    align-self: start;
  }
  .bm-side {
    position: relative;
    display: flex;
    min-height: 600px;
  }
  .bm-caption {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
    max-width: 18ch;
    margin: 0;
    padding: 10px 12px;
    background: var(--paper);
  }
  .bm-map {
    flex: 1;
    height: auto;
  }
  .bm-net {
    --w: min(100cqw - 48px, 100cqh - 48px, 860px);
  }
}
/* until FlagshipScene.tsx takes over (it adds .bm-on), the plan waits empty, as the build starts; if
   it never does, the places and routes show after 2.5s */
@media (prefers-reduced-motion: no-preference) {
  .js .bm:not(.bm-on) :is(.bm-office, .bm-node) {
    opacity: 0;
    animation: bmShow 0s linear 2.5s forwards;
  }
  .js .bm:not(.bm-on) .bm-reveal {
    stroke-dasharray: var(--len) calc(var(--len) + 2px);
    stroke-dashoffset: var(--len);
    animation: bmShow 0s linear 2.5s forwards;
  }
}
@keyframes bmShow {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* ============ HOME: founder's desk ============ */
/* the founder's letter on the left, opening with a pull quote and closing on its last line;
   the mission and vision beside it, each marked with a pillar-colour dot */
.fd-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: stretch;
}
.fd-letter {
  max-width: 62ch;
}
.fd-letter p {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}
.fd-letter strong {
  color: var(--h-ink);
}
.fd-letter .fd-quote {
  margin: 0 0 8px;
  padding-left: 20px;
  border-left: 3px solid var(--p-smart);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--h-ink);
}
.fd-letter .fd-close {
  font-weight: 700;
  color: var(--h-ink);
}
/* the sign-off: "With gratitude," in italics, then the wordmark, in its dark-page version in the
   dark theme */
.fd-letter .fd-sign {
  margin-top: 28px;
}
.fd-thanks {
  display: block;
  font-size: 19px;
  font-style: italic;
  color: var(--ink-3);
}
.fd-mark {
  display: block;
  width: min(200px, 60%);
  height: auto;
  margin-top: 12px;
}
.fd-mark.on-dark,
:root[data-theme='dark'] .fd-mark.on-light {
  display: none;
}
:root[data-theme='dark'] .fd-mark.on-dark {
  display: block;
}
/* the two cards share the height of the heading and letter beside them */
.fd-aims {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.fd-aim {
  align-content: center;
}
.fd-aim {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 2vw, 26px);
  align-items: start;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--home-line);
  border-radius: 4px;
  background: var(--paper);
}
/* the emblem: one of the home page's circles (a white plate with an ink edge over a solid ink
   shadow, down and to the left) holding a line drawing whose key part is in the aim's colour */
.fd-emblem {
  display: grid;
  place-items: center;
  width: clamp(72px, 6.4vw, 92px);
  aspect-ratio: 1;
  margin: 4px 0 6px 6px;
  border: 1.5px solid var(--h-ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: -6px 6px 0 0 var(--h-ink);
}
.fd-emblem svg {
  display: block;
  width: 68%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--h-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fd-emblem .tone {
  fill: var(--tone);
  stroke: none;
}
.fd-emblem .fd-lane {
  stroke-width: 1.6;
}
/* as the card rises in, the arrow flies into the target and the sun comes up */
.js .fd-aim.reveal .fd-arrow {
  opacity: 0;
  transform: translate(14px, -14px);
}
.js .fd-aim.reveal .fd-sun {
  transform: translateY(14px);
}
.js .fd-aim.reveal.in .fd-arrow {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.2s 0.5s,
    transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25) 0.5s;
}
.js .fd-aim.reveal.in .fd-sun {
  transform: none;
  transition: transform 1.2s var(--ease-out) 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .js .fd-aim.reveal :is(.fd-arrow, .fd-sun) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.fd-aim h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.02em;
  color: var(--h-ink);
}
.fd-aim p {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}
@media (max-width: 860px) {
  .fd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .fd-aims {
    grid-template-rows: none;
  }
}

/* ============ HOME: the rest of the page, in the home theme ============ */
/* The sections after the flagship keep their markup (shared with other pages) and take the home
   page's look here: white, ink type, plain uppercase eyebrows, hairlines, square-ish corners, line
   icons with one accent in a pillar colour, and the flat ink offset shadow of the "Talk to us"
   badge instead of soft shadows. Everything is scoped to .home, the home page's <main>, and .page, every other page's */
:is(.home, .page) :is(.sec, .sec-alt, .cta-band) {
  background: var(--paper);
  color: var(--h-ink);
}
:is(.home, .page) .sec {
  padding: clamp(48px, 6vw, 88px) 0;
}
:is(.home, .page) .sec-tight {
  padding: clamp(32px, 4vw, 56px) 0;
}
:is(.home, .page) .eyebrow {
  gap: 0;
  margin-bottom: 14px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--h-ink);
}
:is(.home, .page) .eyebrow::before {
  display: none;
}
:is(.home, .page) .sec-head :is(.h-xl, .h-lg) {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--h-ink);
}
:is(.home, .page) .lede {
  color: var(--ink-2);
}
:is(.home, .page) .link-arrow {
  color: var(--h-ink);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.3s;
}
:is(.home, .page) .link-arrow:hover,
:is(.home, .page) .link-arrow:focus-visible {
  border-color: currentColor;
}
/* a card picked out: an ink outline with a flat ink shadow, like the "Talk to us" badge */
:is(.home, .page) :is(.client, .ind, .tsph-list li) {
  border: 1px solid var(--home-line);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: none;
  transition:
    border-color 0.3s,
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}
:is(.home, .page)
  :is(
    .client:hover,
    .ind:hover,
    .ind:focus-visible,
    .tsph-list li.hot,
    .tsph-list li:focus-visible
  ) {
  border-color: var(--h-ink);
  color: var(--h-ink);
  box-shadow: 4px 4px 0 0 var(--h-ink);
  transform: translate(-2px, -2px);
}

/* clients: grey logos that come to colour on hover, as in the hero */
:is(.home, .page) .client.logo img {
  filter: grayscale(1);
  opacity: 0.6;
  transition:
    filter 0.3s,
    opacity 0.3s;
}
:is(.home, .page) .client.logo:hover img {
  filter: none;
  opacity: 1;
}
/* while the logos sit still in one row nothing needs clipping, so a lifted card's border and
   shadow show in full at both ends of the row (the scrolling strip on narrow screens still clips) */
@container clients (min-width: 760px) {
  :is(.home, .page) .marquee {
    overflow: visible;
  }
}

/* industries: ink line icons, each with its accent in a pillar colour */
:is(.home, .page) .ind {
  color: var(--h-ink);
}
:is(.home, .page) .ind-ic {
  stroke-width: 1.5;
}
:is(.home, .page) .ind .ac {
  stroke: var(--p-secure);
}
:is(.home, .page) .ind:nth-child(3n + 2) .ac {
  stroke: var(--p-smart);
}
:is(.home, .page) .ind:nth-child(3n + 3) .ac {
  stroke: var(--p-scale);
}

/* technologies: ink tabs, a plain sphere, and logos on white */
:is(.home, .page) .tabs {
  border-color: var(--home-line);
}
:is(.home, .page) .tab {
  color: var(--ink-3);
}
:is(.home, .page) .tab:hover,
:is(.home, .page) .tab[aria-selected='true'] {
  color: var(--h-ink);
}
:is(.home, .page) .tab::after {
  height: 2px;
  background: var(--h-ink);
}
:is(.home, .page) .tsph-list b {
  color: var(--h-ink);
}
:is(.home, .page) .tsph {
  background: none;
}
:is(.home, .page) .tsph::before {
  border-color: color-mix(in srgb, var(--h-ink) 14%, transparent);
}
:is(.home, .page) .tsph-node img {
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--home-line);
}
:is(.home, .page) .tsph-node.hot img {
  box-shadow: 0 0 0 1.5px var(--h-ink);
}
:is(.home, .page) .tsph-node em {
  border-radius: 2px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}
:is(.home, .page) .tsph-node.hot em {
  background: var(--h-ink);
}

/* why: the three principles as flat white cards; the icons in ink with a pillar-colour accent */
:is(.home, .page) .pillar {
  --tone: var(--p-secure);
  border: 1px solid var(--home-line);
  border-radius: 4px;
  background: var(--paper);
}
:is(.home, .page) .pillar[data-p='scalable'] {
  --tone: var(--p-scale);
}
:is(.home, .page) .pillar[data-p='smart'] {
  --tone: var(--p-smart);
}
:is(.home, .page) .pillar::before,
:is(.home, .page) .pillar::after {
  display: none;
}
:is(.home, .page) .pillar-head {
  border-color: var(--home-line);
}
:is(.home, .page) .pillar-ic,
:is(.home, .page) .pillar[data-p='smart'] .pillar-ic {
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--h-ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: none;
  color: var(--h-ink);
}
:is(.home, .page) .pillar-ic svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.6;
}
:is(.home, .page) .pillar-ic .ac,
:is(.home, .page) .pr-ic .ac,
:is(.home, .page) .pillar[data-p='smart'] .pr-ic .ac {
  stroke: var(--tone);
  opacity: 1;
}
:is(.home, .page) .pillar-head h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--h-ink);
}
:is(.home, .page) .promises li + li {
  border-top: 1px solid var(--home-line);
}
:is(.home, .page) .pr-ic {
  border: 1px solid var(--home-line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--h-ink);
}
:is(.home, .page) .promises li:hover .pr-ic {
  background: var(--paper);
}
:is(.home, .page) .pr-n {
  color: var(--ink-3);
}
:is(.home, .page) .promises h4 {
  color: var(--h-ink);
}
:is(.home, .page) .promises p {
  color: var(--ink-2);
}

/* stories: a flat card; the diagram in ink, its wires dashed like the map's routes */
:is(.home, .page) .cs-row {
  --c: var(--h-ink);
  border: 1px solid var(--home-line);
  border-radius: 4px;
  background: var(--paper);
}
:is(.home, .page) .cs-text h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
}
:is(.home, .page) .cs-desc {
  color: var(--ink-2);
}
:is(.home, .page) :is(.cs-pill, .cs-tech li, .cs-kpis li) {
  border-color: var(--home-line);
  border-radius: 2px;
  background: var(--paper);
}
:is(.home, .page) .cs-pill {
  color: var(--h-ink);
}
:is(.home, .page) .cs-pill svg .ac {
  stroke: var(--p-smart);
}
:is(.home, .page) .cs-kpis b {
  font-weight: 800;
}
:is(.home, .page) .cs-read {
  color: var(--h-ink);
}
:is(.home, .page) .fb {
  border-color: var(--home-line);
  border-radius: 4px;
  box-shadow: none;
}
:is(.home, .page) .fb-node {
  border-color: var(--home-line);
  border-radius: 4px;
  background: var(--paper);
}
:is(.home, .page) .fb-node.in::after,
:is(.home, .page) .fb-node.out::before {
  opacity: 0.35;
}
:is(.home, .page) .fb-ic {
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--home-line);
}
:is(.home, .page) .fb-hub {
  color: var(--paper);
  border-radius: 4px;
  background: var(--h-ink);
  box-shadow: none;
}
:is(.home, .page) .fb-hub-ic {
  border-radius: 50%;
  background: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 50%, transparent);
}
:is(.home, .page) .fb-badge span {
  color: color-mix(in srgb, var(--paper) 75%, transparent);
}
:is(.home, .page) .fb-badge {
  color: var(--paper);
  border-radius: 4px;
  background: var(--h-ink);
  box-shadow: 4px 4px 0 0 var(--p-smart);
}
:is(.home, .page) .fb-badge b {
  color: var(--p-smart);
}
/* case study diagram: a heading over each side, one pillar colour per node (icon and wire), a hover
   that traces one node's wire into the hub, the Dji Setu mark in the hub, and the 3 -> 1 badge seated
   inside the frame */
/* the sides dissolve into the diagram grid: headings on the first row, nodes and hub on the second,
   so the hub centres on the nodes themselves and every wire meets it */
.fb-side {
  display: contents;
}
.fb-grid {
  row-gap: 10px;
}
.fb-side:first-child .fb-label {
  grid-area: 1 / 1;
}
.fb-side:first-child .fb-col {
  grid-area: 2 / 1;
}
.fb-hub {
  grid-area: 2 / 2;
  align-self: stretch;
  justify-content: center;
}
.fb-side:last-child .fb-label {
  grid-area: 1 / 3;
}
.fb-side:last-child .fb-col {
  grid-area: 2 / 3;
}
.fb-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
:is(.home, .page) .fb-node:nth-child(1) {
  --c: var(--p-secure);
}
:is(.home, .page) .fb-node:nth-child(2) {
  --c: var(--p-smart);
}
:is(.home, .page) .fb-node:nth-child(3) {
  --c: var(--p-scale);
}
:is(.home, .page) .fb-ic {
  color: var(--c);
}
:is(.home, .page) .fb-node {
  transition:
    opacity 0.3s,
    border-color 0.3s;
}
:is(.home, .page) .fb-node.in::after,
:is(.home, .page) .fb-node.out::before {
  opacity: 0.8;
  transition: opacity 0.3s;
}
:is(.home, .page) .fb:has(.fb-node:hover) .fb-node:not(:hover) {
  opacity: 0.4;
}
:is(.home, .page) .fb-node:hover {
  border-color: var(--c);
}
:is(.home, .page) .fb-node:hover::after,
:is(.home, .page) .fb-node:hover::before {
  opacity: 1;
}
.fb-hub-ic svg.fb-d {
  width: 26px;
  height: auto;
  stroke: none;
}
.fb-hub small {
  display: block;
  margin-top: -4px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.72;
}
:is(.home, .page) .fb {
  padding-bottom: 20px;
}
:is(.home, .page) .fb-badge {
  position: relative;
  right: auto;
  bottom: auto;
  width: fit-content;
  max-width: none;
  margin: 22px auto 0;
  animation: none;
}
.fb-badge b em {
  font: inherit;
  font-style: normal;
  color: inherit;
}
/* the case study page shows the same diagram on its own row: kept to a readable width */
.cs-arch .cs-visual {
  --c: var(--p-secure);
  max-width: 900px;
}
/* phones: the outcomes heading moves under its boxes, out of the wires coming down from the hub,
   and the case study numbers step down a size so the wording stays on one line */
@media (max-width: 560px) {
  /* stacked: inputs heading, inputs, hub, outputs, outputs heading (out of the wires' way) */
  .fb-grid {
    row-gap: var(--g);
  }
  .fb-side:first-child .fb-label {
    grid-area: 1 / 1;
    margin-bottom: calc(10px - var(--g));
  }
  .fb-side:first-child .fb-col {
    grid-area: 2 / 1;
  }
  .fb-hub {
    grid-area: 3 / 1;
  }
  .fb-side:last-child .fb-col {
    grid-area: 4 / 1;
  }
  .fb-side:last-child .fb-label {
    grid-area: 5 / 1;
    margin-top: calc(10px - var(--g));
  }
  :is(.home, .page) .cs-kpis b {
    font-size: 1.12rem;
  }
}

/* reviews: flat cards with a hairline */
/* reviews, as the other cards: flat with a hairline, lifting onto the flat ink shadow; the quote
   mark in one of the home page's circles (a plate with an ink edge over a solid ink shadow), in
   the card's pillar colour, which fills the plate as the card is picked; initials in a disc of
   that colour */
:is(.home, .page) .rw-card {
  --tone: var(--p-secure);
  border-color: var(--home-line);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: none;
  transition:
    border-color 0.3s,
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}
:is(.home, .page) .rw-card.t-smart {
  --tone: var(--p-smart);
}
:is(.home, .page) .rw-card.t-scale {
  --tone: var(--p-scale);
}
:is(.home, .page) .rw-card:hover {
  border-color: var(--h-ink);
  box-shadow: 4px 4px 0 0 var(--h-ink);
  transform: translate(-2px, -2px);
}
:is(.home, .page) .rw-badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 0 20px 4px;
  border: 1.5px solid var(--h-ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: -4px 4px 0 0 var(--h-ink);
  transition: background-color 0.3s;
}
:is(.home, .page) .rw-mark {
  width: 16px;
  margin: 0;
  fill: var(--tone);
  transition: fill 0.3s;
}
:is(.home, .page) .rw-card:hover .rw-badge {
  background: var(--tone);
}
:is(.home, .page) .rw-card:hover .rw-mark {
  fill: var(--h-ink);
}
:is(.home, .page) .rw-card.t-secure:hover .rw-mark {
  fill: #fff;
}
:is(.home, .page) .rw-card blockquote p,
:is(.home, .page) .rw-card figcaption b {
  color: var(--h-ink);
}
:is(.home, .page) .rw-card figcaption {
  padding-top: 18px;
  border-top: 1px solid var(--home-line);
}
:is(.home, .page) .rw-card figcaption small {
  color: var(--ink-3);
}
:is(.home, .page) .rw-avatar {
  border: 1.5px solid var(--h-ink);
  background: var(--tone);
  box-shadow: none;
  font-family: var(--f-mono);
  color: #0b1336;
}
:is(.home, .page) .rw-card.t-secure .rw-avatar {
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  :is(.home, .page) .rw-card:hover {
    transform: none;
  }
}

/* the closing call: white, after a hairline, with the ink button and an ink link */
:is(.home, .page) .cta-band {
  border-top: 1px solid var(--home-line);
}
:is(.home, .page) .cta-band h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
}
:is(.home, .page) .cta-band p {
  color: var(--ink-2);
}
:is(.home, .page) .cta-band .actions {
  align-items: center;
  gap: 14px 28px;
}

/* ============ HOME: the closing call ============ */
/* It starts white; as it comes into view (CtaMix.tsx adds .mixed) three dots in the pillar
   colours pop up on a line, then swell and blur into each other until they mix into a gradient
   across the band. Part way through (.settled) the type turns white and the button white, going black on hover */
.cta-mix {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
:is(.home, .page) .cta-band .wrap {
  z-index: 1;
}
.cta-mix i {
  position: absolute;
  top: 50%;
  left: var(--x0);
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: var(--tone);
  transform: scale(0);
}
/* each starts as a dot in the gap between the words and the buttons, then swells to its own
   size (--grow) and drifts to its own place (--x1, --y1): cobalt under the words, periwinkle
   blending into an orange glow in the open middle, all over a cobalt band, so the white type
   and link stay clear. On phones the words fill the left, so the glows run down the right */
.cta-mix i:nth-child(1) {
  --x0: 54%;
  --x1: 14%;
  --grow: 36;
}
.cta-mix i:nth-child(2) {
  --x0: 60%;
  --x1: 44%;
  --grow: 18;
}
.cta-mix i:nth-child(3) {
  --x0: 66%;
  --x1: 63%;
  --grow: 22;
}
@media (max-width: 767px) {
  .cta-mix i:nth-child(1) {
    --x1: 30%;
    --grow: 30;
  }
  .cta-mix i:nth-child(2) {
    --x1: 98%;
    --y1: 82%;
    --grow: 9;
  }
  .cta-mix i:nth-child(3) {
    --x1: 98%;
    --y1: 18%;
    --grow: 9;
  }
}
.cta-band.mixed .cta-mix i {
  animation: ctaMix 2.4s var(--ease-io) forwards;
}
.cta-band.mixed .cta-mix i:nth-child(2) {
  animation-delay: 0.12s;
}
.cta-band.mixed .cta-mix i:nth-child(3) {
  animation-delay: 0.24s;
}
@keyframes ctaMix {
  0% {
    top: 50%;
    left: var(--x0);
    transform: scale(0);
    filter: blur(0);
  }
  16%,
  36% {
    top: 50%;
    left: var(--x0);
    transform: scale(1);
    filter: blur(0);
  }
  100% {
    top: var(--y1, 50%);
    left: var(--x1);
    transform: scale(var(--grow));
    filter: blur(1.8px);
  }
}
:is(.home, .page) .cta-band {
  transition:
    background-color 0.7s var(--ease-out),
    color 0.6s;
}
:is(.home, .page) .cta-band p,
:is(.home, .page) .cta-band .hh-link {
  transition: color 0.6s;
}
:is(.home, .page) .cta-band.settled {
  border-color: transparent;
  background: var(--p-secure);
  color: #fff;
}
:is(.home, .page) .cta-band.settled p {
  color: rgba(255, 255, 255, 0.86);
}
:is(.home, .page) .cta-band.settled .hh-link {
  color: #fff;
}
:is(.home, .page) .cta-band.settled .btn-ink {
  --spark: #0b1336;
  background: #fff;
  color: #0b1336;
}
:is(.home, .page) .cta-band.settled .btn-ink:hover,
:is(.home, .page) .cta-band.settled .btn-ink:focus-visible {
  --spark: #fff;
  background: #0b1336;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .cta-band.mixed .cta-mix i {
    top: var(--y1, 50%);
    left: var(--x1);
    transform: scale(var(--grow));
    filter: blur(1.8px);
    animation: none;
  }
  :is(.home, .page) .cta-band,
  :is(.home, .page) .cta-band p,
  :is(.home, .page) .cta-band .hh-link {
    transition: none;
  }
}

/* ============ INNER PAGE HERO ============ */
.page-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 90% at 80% 30%, #0f2066 0%, #071140 45%, var(--ink) 85%);
  color: var(--text-on-ink);
  padding: calc(var(--header-h) + clamp(36px, 5vw, 64px)) 0 clamp(56px, 8vw, 96px);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(111, 155, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 155, 255, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 90%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 90%);
}
.ph-mark {
  position: absolute;
  right: -4%;
  top: 50%;
  width: min(520px, 46vw);
  transform: translateY(-42%);
  opacity: 0.14;
  pointer-events: none;
}
.ph-mark use {
  fill: #6f9bff;
}
.page-hero .wrap {
  position: relative;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-on-ink-2);
  margin-bottom: 1.6rem;
}
.crumbs a {
  text-decoration: none;
  color: var(--text-on-ink-2);
}
.crumbs a:hover {
  color: #fff;
}
.crumbs li + li::before {
  content: '/';
  margin-right: 8px;
  opacity: 0.5;
}
.page-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  max-width: 20ch;
}
.page-hero .lede {
  margin-top: 1.2rem;
}
.page-hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2rem;
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-ink);
  font-size: 0.92rem;
  color: var(--text-on-ink-2);
}
.meta-row strong {
  display: block;
  color: var(--text-on-ink);
  font-weight: 700;
  font-size: 1rem;
}

/* in the home theme: white, ink type, the home hero's dash field behind (HeroField.tsx), and
   a hairline to close it */
.page .page-hero {
  isolation: isolate;
  background: var(--paper);
  color: var(--h-ink);
  border-bottom: 1px solid var(--home-line);
}
.page .page-hero::before {
  display: none;
}
.page .page-hero h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--h-ink);
}
.page .page-hero .lede {
  color: var(--ink-2);
}
.page .page-hero .eyebrow {
  color: var(--h-ink);
}
.page .crumbs,
.page .crumbs a {
  color: var(--ink-3);
}
.page .crumbs a:hover {
  color: var(--h-ink);
}
.page .page-hero .actions {
  align-items: center;
  gap: 14px 28px;
}
.page .meta-row {
  border-color: var(--home-line);
  color: var(--ink-3);
}
.page .meta-row strong {
  color: var(--h-ink);
}

/* ============ SECTIONS ============ */
.sec {
  position: relative;
  padding: clamp(36px, 4vw, 56px) 0;
}
.sec-tight {
  padding: clamp(26px, 3vw, 40px) 0;
}
.sec-alt {
  background: var(--canvas-2);
}
.sec-white {
  background: var(--panel);
}
.sec-ink {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  color: var(--text-on-ink);
}
.sec-head {
  margin-bottom: clamp(22px, 2.6vw, 32px);
}
.sec-head .lede {
  margin-top: 1rem;
}
.sec-head.row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.sec-head.center .h-xl,
.sec-head.center .lede {
  margin-inline: auto;
}

/* entrances */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}
.js .reveal.done {
  transition-delay: 0s;
}

/* who we are */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.stat {
  padding: clamp(22px, 3vw, 36px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.stat-num {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1;
  color: var(--navy);
}
.stat-num em {
  font-style: normal;
  color: var(--accent);
}
.stat-label {
  margin-top: 0.6rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.stats.on-ink-stats {
  border-color: var(--line-ink);
}
.stats.on-ink-stats .stat {
  background: transparent;
  border-color: var(--line-ink);
}
.stats.on-ink-stats .stat-num {
  color: #fff;
}
.stats.on-ink-stats .stat-label {
  color: var(--text-on-ink-2);
}
.stats.four {
  grid-template-columns: repeat(4, 1fr);
}
/* home "who we are" stat cards: staggered, tinted, with line icons */
.stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 22px);
}
.stat-card {
  --tint: #e4ecff;
  background: var(--tint);
  border-radius: 16px;
  padding: clamp(22px, 2.6vw, 34px);
  transition:
    transform 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}
.stat-card:nth-child(odd) {
  margin-top: 40px;
}
.stat-card:nth-child(even) {
  margin-bottom: 40px;
}
.stat-card:nth-child(2) {
  --tint: #fff3e2;
}
.stat-card:nth-child(3) {
  --tint: #f0eefb;
}
.stat-card:nth-child(4) {
  --tint: #e8f4fb;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px -18px rgba(1, 37, 136, 0.35);
}
.stat-icon {
  display: block;
  width: clamp(42px, 4vw, 52px);
  height: auto;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat-icon .ac {
  stroke: var(--accent);
}
.stat-icon .teeth {
  stroke-width: 3.2;
  stroke-linecap: butt;
}
.stat-card .stat-num {
  color: var(--text-primary);
}
.stat-card .stat-label {
  margin-top: 0.75rem;
  max-width: 12ch;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.45;
}
.stat-cards.four {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 960px) {
  .stat-cards.four {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .stat-card:nth-child(odd) {
    margin-top: 24px;
  }
  .stat-card:nth-child(even) {
    margin-bottom: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stat-card:hover {
    transform: none;
  }
}

/* Dji Setu showcase (home and product page): the pitch beside a map of the product, the D at its
   heart with a trunk that branches into every module. site.js draws the wires and plays the wiring once */
.setu {
  --c: var(--blue);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 3.6vw, 56px);
  align-items: center;
  padding: clamp(12px, 1.4vw, 18px);
  border: 1px solid #dce4f6;
  border-radius: 28px;
  background: linear-gradient(135deg, #f3f6ff, #e5ecff);
}
.setu-intro {
  padding: clamp(14px, 2vw, 28px) 0 clamp(14px, 2vw, 28px) clamp(10px, 2.4vw, 32px);
}
.setu-intro h3 {
  margin: 16px 0 10px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.setu-lede {
  max-width: 46ch;
  font-size: 1.04rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.setu-lede mark {
  background: none;
  color: var(--c);
  font-weight: 700;
}
.setu .cs-kpis {
  margin-top: 22px;
}
.setu-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 26px;
}
/* the map: a dark screen on the hero's blueprint grid. Rows share one height, so the middle module
   always sits level with the centred D and its wire runs dead straight */
.setu-map {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(36px, 0.26fr) minmax(0, 1.6fr);
  grid-template-areas:
    'title title title'
    'hub . nodes';
  align-items: center;
  row-gap: 20px;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 20px;
  background: radial-gradient(ellipse 70% 80% at 20% 58%, #0f2270 0%, #081448 45%, var(--ink) 100%);
  color: var(--text-on-ink);
  box-shadow: 0 34px 60px -36px rgba(4, 10, 38, 0.75);
}
.setu-map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(111, 155, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 155, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 55%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 80% at 30% 55%, #000 25%, transparent 80%);
}
.setu-map-title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-ink-2);
}
.setu-map-title i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(254, 154, 1, 0.18);
}
.setu-hub {
  grid-area: hub;
  position: relative;
  z-index: 1;
}
/* a soft glow and a slow dashed orbit behind the D, like the technologies globe */
.setu-hub::before,
.setu-hub::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  pointer-events: none;
}
.setu-hub::before {
  width: 170%;
  background: radial-gradient(circle, rgba(30, 123, 255, 0.36), transparent 62%);
}
.setu-hub::after {
  width: 128%;
  border: 1px dashed rgba(111, 155, 255, 0.32);
  animation: dgSpin 60s linear infinite;
}
.setu-hub svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.setu-gap {
  fill: #0b1a5c;
}
.setu-wires {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.setu-wire,
.setu-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len) var(--len);
}
.setu-wire {
  stroke: #4d86ff;
  stroke-width: 2;
}
.setu-glow {
  stroke: #2f6bff;
  stroke-width: 7;
  opacity: 0.22;
}
.setu-wire.acct {
  stroke: #ffb13d;
}
.setu-glow.acct {
  stroke: var(--accent);
}
.setu-port {
  fill: var(--ink);
  stroke: #6f9bff;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}
.setu-port.acct {
  stroke: #ffb13d;
}
.setu-port.hub {
  fill: #fff;
  stroke: #4d86ff;
}
.setu-pulse {
  fill: #fff;
}
.setu-pulse.acct {
  fill: #ffd089;
}
.setu-nodes {
  grid-area: nodes;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.setu-node {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(140, 170, 255, 0.2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}
.setu-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(1, 79, 253, 0.22);
  box-shadow: inset 0 0 0 1px rgba(111, 155, 255, 0.38);
  color: #a9c2ff;
}
.setu-ic svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.setu-node h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.setu-node p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-on-ink-2);
}
.setu-node.is-acct {
  /* clear of the "1 click" badge on its top edge */
  padding-top: 18px;
  border-color: rgba(255, 177, 61, 0.45);
  background: linear-gradient(180deg, rgba(254, 154, 1, 0.14), rgba(254, 154, 1, 0.04));
}
.is-acct .setu-ic {
  background: rgba(254, 154, 1, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 177, 61, 0.5);
  color: #ffb13d;
}
.setu-badge {
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 0.3em 0.65em;
  border-radius: 99px;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px -6px rgba(254, 154, 1, 0.8);
}
/* wiring up (with JS): the D brightens, the trunk and branches draw out, then each module lands */
.js .setu-hub svg {
  opacity: 0.6;
  transform: scale(0.9);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out),
    filter 0.7s var(--ease-out);
}
.js .setu-wire,
.js .setu-glow {
  stroke-dashoffset: var(--len);
}
.js .setu-port {
  transform: scale(0);
}
.js .setu-node {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.setu.linked .setu-hub svg {
  opacity: 1;
  transform: none;
  filter: drop-shadow(0 10px 24px rgba(30, 123, 255, 0.55));
}
.setu.linked .setu-wire,
.setu.linked .setu-glow {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.8s var(--ease-out) calc(0.3s + var(--n) * 110ms);
}
.setu.linked .setu-port {
  transform: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.85s + var(--n) * 110ms);
}
.setu.linked .setu-port.hub {
  transition-delay: 0.2s;
}
.setu.linked .setu-node {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.8s + var(--n) * 110ms);
}
/* already played (a return visit) or reduced motion: straight to the wired-up state */
.setu.instant,
.setu.instant * {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .setu-hub::after {
    animation: none;
  }
}
@media (max-width: 1023px) {
  .setu {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .setu-intro {
    padding: 18px 12px 18px;
  }
}
/* phones: the map turns into a tree, a spine dropping from under the D with a branch into each module */
@media (max-width: 760px) {
  .setu-map {
    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-areas:
      'hub title'
      'nodes nodes';
    column-gap: 16px;
    row-gap: 22px;
  }
  .setu-hub::after {
    display: none;
  }
  .setu-nodes {
    grid-auto-rows: auto;
    margin-left: 42px;
  }
  .setu-node {
    padding: 10px 12px;
  }
}
/* cards */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    box-shadow 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    border-color 0.4s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(1, 37, 136, 0.4);
  border-color: #c3cee8;
}
.card-body {
  padding: clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.card h3 {
  font-size: 1.3rem;
  margin: 0.5rem 0 0.6rem;
}
.card p {
  color: var(--text-secondary);
}
.card .bullets {
  margin: 1.2rem 0 1.4rem;
}
.card .link-arrow {
  margin-top: auto;
}
.bullets li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.96rem;
}
.bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 6px;
  height: 6px;
  background: var(--navy);
}
.on-ink .bullets li {
  border-color: var(--line-ink);
}
.on-ink .bullets li::before {
  background: var(--accent);
}

/* abstract screen (stands in until real screenshots arrive) */
.screen {
  position: relative;
  aspect-ratio: 16/10;
  background: linear-gradient(160deg, #e6ecfa, #f6f8fd);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.screen i {
  position: absolute;
  display: block;
}
.screen .s-bar {
  left: 0;
  right: 0;
  top: 0;
  height: 11%;
  background: var(--navy);
}
.screen .s-side {
  left: 0;
  top: 11%;
  bottom: 0;
  width: 20%;
  background: #dce4f6;
}
.screen .s-a {
  left: 26%;
  top: 19%;
  width: 30%;
  height: 22%;
  background: #fff;
  border: 1px solid var(--line);
}
.screen .s-b {
  left: 60%;
  top: 19%;
  width: 34%;
  height: 22%;
  background: #fff;
  border: 1px solid var(--line);
}
.screen .s-c {
  left: 26%;
  top: 47%;
  width: 68%;
  height: 42%;
  background: #fff;
  border: 1px solid var(--line);
}
.screen .s-k {
  bottom: 16%;
  width: 5%;
  background: rgba(1, 79, 253, 0.3);
}
.screen .s-k.hi {
  background: var(--accent);
}
.screen.v2 .s-side {
  display: none;
}
.screen.v2 .s-a {
  left: 6%;
  width: 42%;
}
.screen.v2 .s-b {
  left: 52%;
  width: 42%;
}
.screen.v2 .s-c {
  left: 6%;
  width: 88%;
}
.screen.v3 .s-a {
  height: 70%;
  width: 30%;
}
.screen.v3 .s-b {
  height: 30%;
}
.screen.v3 .s-c {
  left: 60%;
  top: 55%;
  width: 34%;
  height: 34%;
}

/* clients */
/* clients: endless strip; the second list is an aria-hidden copy so the loop is seamless */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.marquee-list {
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  padding: 0 clamp(12px, 1.6vw, 20px) 0 0;
  list-style: none;
}
.client {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: clamp(170px, 18vw, 230px);
  min-height: 104px;
  padding: 18px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #5b678c;
  text-align: center;
  transition:
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s,
    transform 0.3s var(--ease-out);
}
.client:hover {
  color: var(--navy);
  border-color: #b7caf6;
  box-shadow: 0 14px 30px -18px rgba(1, 37, 136, 0.35);
  transform: translateY(-3px);
}
.client.logo {
  padding: 14px 24px;
}
.client.logo img {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: contain;
}
/* tall, stacked marks need more height to read at the same visual weight */
.client.logo img[src*='harisumiran'] {
  height: 82px;
}
/* hourbee is a wide wordmark, so on narrow cards it gets the side padding back to read larger */
@media (max-width: 640px) {
  .client.logo:has(img[src*='hourbee']) {
    padding-inline: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee-track {
    width: auto;
  }
  .marquee-list {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
  }
  .marquee-list[aria-hidden] {
    display: none;
  }
  .marquee-list li[aria-hidden] {
    display: none;
  }
}
/* while every client fits in one row (4 cards at their 170px minimum plus gaps),
   show them still and full width; the scrolling strip only kicks in when they don't */
#clients .wrap {
  container: clients / inline-size;
}
@container clients (min-width: 760px) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee-track {
    width: auto;
    animation: none;
  }
  .marquee-list {
    flex: 1;
    padding: 0;
  }
  .marquee-list[aria-hidden],
  .marquee-list li[aria-hidden] {
    display: none;
  }
  .client {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}
.wm {
  line-height: 1.05;
}
.wm-a {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.wm-b {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wm-c {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wm-d {
  font-weight: 700;
  font-size: 1.3rem;
  font-style: italic;
  letter-spacing: -0.02em;
}
.wm small {
  display: block;
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.8;
}

/* industries: plain cards, a single-colour line icon centred over the name */
.industries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.ind {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: clamp(136px, 11vw, 160px);
  padding: 24px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text-primary);
  text-align: center;
  text-decoration: none;
  transition:
    border-color 0.3s,
    color 0.3s;
}
.ind-ic {
  flex: none;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ind h3 {
  font-size: 1.05rem;
}
.ind:hover,
.ind:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
}
@media (max-width: 640px) {
  .industries {
    grid-template-columns: 1fr 1fr;
  }
  .ind {
    gap: 12px;
    min-height: 124px;
    padding: 20px 12px;
  }
  .ind-ic {
    width: 38px;
    height: 38px;
  }
  .ind h3 {
    font-size: 0.98rem;
  }
}

/* technologies tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.tab {
  position: relative;
  padding: 12px 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.3s;
}
.tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.tab[aria-selected='true'] {
  color: var(--navy);
}
.tab[aria-selected='true']::after {
  transform: scaleX(1);
}
.tab:hover {
  color: var(--text-primary);
}
.tech-panel {
  animation: panelIn 0.45s var(--ease-out);
}
.tech-panel[hidden] {
  display: none;
}
/* technologies: one rotating 3D sphere holding every logo; the tabs swap the list beside it.
   The list sits at the top of the row so it starts right under the tabs */
.tsph-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.tsph-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tsph-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  cursor: default;
  outline: none;
  transition:
    border-color 0.3s,
    box-shadow 0.3s,
    transform 0.3s var(--ease-out);
}
.tsph-list li img {
  flex: none;
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.tsph-list b {
  display: block;
  font-weight: 700;
  color: var(--text-primary);
}
.tsph-list small {
  display: block;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.tsph-list li.hot,
.tsph-list li:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 14px 30px -18px rgba(1, 79, 253, 0.6);
  transform: translateX(6px);
}
.tsph-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.tsph {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  background: radial-gradient(
    circle at 50% 42%,
    rgba(1, 79, 253, 0.13),
    rgba(1, 79, 253, 0.04) 52%,
    transparent 70%
  );
}
.tsph::before {
  content: '';
  position: absolute;
  inset: 9%;
  border: 1px dashed rgba(1, 79, 253, 0.22);
  border-radius: 50%;
  animation: dgSpin 60s linear infinite;
}
.tsph:active {
  cursor: grabbing;
}
.tsph-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tsph-node {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  will-change: transform, opacity;
}
.tsph-node img {
  width: 56px;
  height: 56px;
  padding: 11px;
  object-fit: contain;
  border-radius: 17px;
  background: var(--panel);
  box-shadow:
    0 0 0 1px var(--line),
    0 12px 26px -12px rgba(1, 37, 136, 0.5);
}
.tsph-node em {
  padding: 2px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-primary);
}
/* logos outside the selected group step back and drop their labels */
.tsph-node img,
.tsph-node em {
  transition:
    opacity 0.35s,
    filter 0.35s,
    box-shadow 0.3s;
}
.tsph-node:not(.on):not(.hot) img {
  opacity: 0.45;
  filter: grayscale(1);
}
.tsph-node:not(.on):not(.hot) em {
  opacity: 0;
}
.tsph-node.hot img {
  box-shadow:
    0 0 0 2px var(--blue),
    0 16px 32px -10px rgba(1, 79, 253, 0.7);
}
.tsph-node.hot em {
  background: var(--blue);
  color: #fff;
}
.tsph-hint {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
@media (hover: none) {
  .tsph-hint {
    font-size: 0;
  }
  .tsph-hint::after {
    content: 'Drag the sphere to spin it';
    font-size: 0.85rem;
  }
}
@media (max-width: 860px) {
  .tsph-panel {
    grid-template-columns: 1fr;
  }
  .tsph-wrap {
    order: -1;
  }
  .tsph {
    width: min(100%, 380px);
  }
  .tsph-node img {
    width: 46px;
    height: 46px;
    padding: 9px;
  }
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* why */
/* why: three principle pillars, each holding two promises */
.on-ink .sec-head.center .lede {
  margin-inline: auto;
  color: var(--text-on-ink-2);
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
.pillar {
  --c: #6f8dff;
  --c2: #012588;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line-ink);
  border-radius: 24px;
  background: linear-gradient(170deg, rgba(111, 155, 255, 0.1), rgba(111, 155, 255, 0.02) 60%);
}
.pillar[data-p='scalable'] {
  --c: #3d8bff;
  --c2: #014ffd;
}
.pillar[data-p='smart'] {
  --c: #ffb238;
  --c2: #d97800;
}
.pillar::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -90px;
  left: 50%;
  width: 280px;
  height: 200px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--c) 35%, transparent),
    transparent
  );
  pointer-events: none;
}
.pillar::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--ang), transparent 0 65%, var(--c) 85%, transparent);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  animation: abBorder 6s linear infinite;
  pointer-events: none;
}
.pillar[data-p='scalable']::after {
  animation-delay: -2s;
}
.pillar[data-p='smart']::after {
  animation-delay: -4s;
}
.pillar-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-ink);
}
.pillar-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  background: linear-gradient(145deg, var(--c), var(--c2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 14px 30px -12px var(--c);
  color: #fff;
}
.pillar-ic svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pillar[data-p='smart'] .pillar-ic {
  color: var(--ink);
}
.pillar-ic .ac {
  stroke: currentColor;
  opacity: 0.75;
}
.pillar-k {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-on-ink-2);
}
.pillar-head h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.55rem;
  color: #fff;
}
.promises {
  margin: 0;
  padding: 0;
  list-style: none;
}
.promises li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 18px 0 4px;
}
.promises li + li {
  margin-top: 12px;
  border-top: 1px dashed rgba(111, 155, 255, 0.2);
}
.pr-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-ink);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--c);
  transition:
    transform 0.4s var(--ease-out),
    background-color 0.3s;
}
.pr-ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pr-ic .ac {
  stroke: var(--accent);
}
.pillar[data-p='smart'] .pr-ic .ac {
  stroke: #fff;
}
.promises li:hover .pr-ic {
  transform: rotate(-8deg) scale(1.08);
  background: rgba(255, 255, 255, 0.09);
}
.pr-n {
  display: block;
  margin-bottom: 4px;
  font-family: var(--f-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c);
}
.promises h4 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 0.35rem;
  color: #fff;
}
.promises p {
  font-size: 0.94rem;
  color: var(--text-on-ink-2);
}
@media (max-width: 960px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .promises li:hover .pr-ic {
    transform: none;
  }
}

/* stories */
.story {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}
.story:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(1, 37, 136, 0.4);
}
.story h3 {
  font-size: 1.2rem;
  margin: 0.6rem 0 1.4rem;
  line-height: 1.3;
}
.story-metric {
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.story-metric b {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 2rem;
  color: var(--navy);
  line-height: 1.1;
}
.story-metric span {
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.story .link-arrow {
  margin-top: 1.2rem;
  font-size: 0.95rem;
}

/* testimonials */
/* reviews: a wall of cards in two rows drifting in opposite directions, faded at both edges.
   Each track holds its cards four times and slides by half, so the loop never shows a seam */
.rw {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rw-row {
  overflow: hidden;
  /* room for the card shadow, which overflow would otherwise clip */
  padding: 6px 0 22px;
  margin-bottom: -16px;
}
.rw-track {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
  width: max-content;
  animation: rwScroll var(--rw-dur, 48s) linear infinite;
}
.rw-track.rev {
  animation-direction: reverse;
}
.rw:hover .rw-track {
  animation-play-state: paused;
}
@keyframes rwScroll {
  to {
    /* half the track plus half a gap, so the second half lands exactly where the first began */
    transform: translateX(calc(-50% - clamp(16px, 2vw, 24px) / 2));
  }
}
.rw-card {
  display: flex;
  flex-direction: column;
  flex: none;
  width: clamp(280px, 30vw, 420px);
  margin: 0;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 16px 34px -26px rgba(1, 37, 136, 0.45);
}
.rw-mark {
  display: block;
  width: 18px;
  height: auto;
  margin-bottom: 14px;
  fill: var(--accent);
}
.rw-card blockquote {
  margin: 0 0 22px;
}
.rw-card blockquote p {
  font-size: 1.04rem;
  line-height: 1.65;
  color: var(--text-primary);
}
.rw-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.rw-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--t1, #eef3ff), #d6e2ff);
  box-shadow: 0 0 0 1px var(--line);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.rw-card figcaption b {
  display: block;
  font-weight: 700;
  color: var(--text-primary);
}
.rw-card figcaption small {
  display: block;
  font-size: 0.86rem;
  color: var(--text-muted);
}
/* few reviews: on wide screens they sit still side by side, without the copies; phones keep the drift */
@media (min-width: 641px) {
  .rw-still {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .rw-still .rw-track {
    width: auto;
    animation: none;
  }
  .rw-still .rw-card {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .rw-still .rw-card[aria-hidden] {
    display: none;
  }
}
/* reduced motion: the rows stand still and scroll sideways by hand; the copies are dropped */
@media (prefers-reduced-motion: reduce) {
  .rw {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .rw-row {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rw-track {
    animation: none;
  }
  .rw-row + .rw-row,
  .rw-card[aria-hidden] {
    display: none;
  }
}
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.quote {
  margin: 0;
  padding: 6px 0 6px 24px;
  border-left: 3px solid var(--accent);
}
.quote blockquote {
  margin: 0 0 1.2rem;
  font-size: 1.06rem;
  line-height: 1.6;
}
.q-name {
  display: block;
  font-weight: 700;
}
.q-role {
  display: block;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

/* process */
.steps {
  display: grid;
  /* four steps unless a page sets --cols */
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  height: 2px;
  background: var(--line);
}
.steps::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  height: 2px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2s var(--ease-io) 0.3s;
}
.steps.in::after {
  transform: scaleX(1);
}
.js .steps.reveal {
  opacity: 1;
  transform: none;
}
.step {
  position: relative;
}
.step-n {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--canvas);
  border: 2px solid var(--navy);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 1.2rem;
  transition:
    background-color 0.5s,
    color 0.5s;
  transition-delay: calc(var(--i) * 420ms + 400ms);
}
.steps.in .step-n {
  background: var(--navy);
  color: #fff;
}
.step h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.step p {
  color: var(--text-secondary);
  font-size: 0.98rem;
}
.sec-alt .step-n {
  background: var(--canvas-2);
}
.sec-white .step-n {
  background: var(--panel);
}

/* release checklist (interactive) */
.release-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.console {
  border-radius: var(--r);
  background: rgba(10, 20, 66, 0.75);
  border: 1px solid var(--line-ink);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
.console-head {
  display: flex;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-ink-2);
}
.console-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px 28px;
  padding: clamp(22px, 3vw, 34px);
  align-items: center;
}
.mini-mark {
  width: clamp(96px, 11vw, 140px);
  height: auto;
  overflow: visible;
  grid-row: span 2;
}
.mm {
  transform-box: fill-box;
  transform-origin: center;
  opacity: calc(0.25 + 0.75 * var(--m, 0));
}
.mm-navy {
  --m: clamp(0, calc(var(--hold, 0) * 2.5), 1);
  transform: translate(calc((1 - var(--m)) * -120px), calc((1 - var(--m)) * 90px));
}
.mm-blue1 {
  --m: clamp(0, calc((var(--hold, 0) - 0.25) * 2.5), 1);
  transform: translate(calc((1 - var(--m)) * 140px), calc((1 - var(--m)) * -60px));
}
.mm-blue2 {
  --m: clamp(0, calc((var(--hold, 0) - 0.35) * 2.5), 1);
  transform: translate(calc((1 - var(--m)) * 60px), calc((1 - var(--m)) * 160px));
}
.mm-orange {
  --m: clamp(0, calc((var(--hold, 0) - 0.6) * 2.5), 1);
  transform: translate(calc((1 - var(--m)) * 40px), calc((1 - var(--m)) * -170px));
}
.checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.42rem 0;
  color: var(--text-on-ink-2);
  font-weight: 600;
  transition: color 0.4s var(--ease-out);
}
.ck {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1.5px solid rgba(170, 182, 216, 0.5);
  transition:
    background-color 0.35s var(--ease-out),
    border-color 0.35s;
}
.ck::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.35s var(--ease-out);
}
.checks li.ok {
  color: var(--text-on-ink);
}
.checks li.ok .ck {
  background: var(--blue-soft);
  border-color: var(--blue-soft);
}
.checks li.ok .ck::after {
  transform: rotate(45deg) scale(1);
}
.ship-status {
  grid-column: 1 / -1;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--text-on-ink-2);
  transition: color 0.5s;
}
.ship-status.shipped {
  color: var(--accent);
}
.hold {
  grid-column: 1 / -1;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
  padding: 8px 22px 8px 8px;
  border-radius: 999px;
  border: 1.5px solid rgba(254, 154, 1, 0.6);
  background: rgba(254, 154, 1, 0.08);
  color: var(--text-on-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition:
    background-color 0.35s var(--ease-out),
    border-color 0.35s,
    transform 0.35s var(--ease-out);
}
.hold:hover {
  background: rgba(254, 154, 1, 0.14);
  border-color: var(--accent);
}
.hold.pressing {
  transform: scale(0.98);
}
.hold-ring {
  width: 40px;
  height: 40px;
  transform: rotate(-90deg);
}
.hold-ring circle {
  fill: none;
  stroke-width: 3.5;
}
.hold-ring .trk {
  stroke: rgba(254, 154, 1, 0.22);
}
.hold-ring .bar {
  stroke: var(--accent);
  stroke-dasharray: 126;
  stroke-dashoffset: calc(126 - 126 * var(--hold, 0));
}
.hold.complete {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}
.hold.complete .hold-ring .bar {
  stroke: var(--ink);
}
.hold.complete .hold-ring .trk {
  stroke: rgba(4, 10, 38, 0.2);
}
.hold-hint {
  grid-column: 1 / -1;
  font-size: 0.86rem;
  color: var(--text-on-ink-2);
  margin-top: -8px;
}

/* cta band */
.cta-band {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 120% at 85% 50%, #13257a, var(--ink) 70%);
  color: var(--text-on-ink);
  padding: clamp(36px, 4vw, 56px) 0;
}
.cta-band .wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  max-width: 20ch;
}
.cta-band p {
  color: var(--text-on-ink-2);
  margin-top: 0.8rem;
  max-width: 48ch;
}
.cta-band .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-band .ph-mark {
  opacity: 0.1;
  right: auto;
  left: -6%;
  width: min(420px, 40vw);
}

/* two column text blocks */
.split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.split .sticky {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}
.prose p + p {
  margin-top: 1rem;
}
.prose p {
  color: var(--text-secondary);
  font-size: 1.06rem;
}
.prose h3 {
  font-size: 1.2rem;
  margin: 2rem 0 0.6rem;
}

/* numbered features */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(28px, 4vw, 56px);
}
.features li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 6px 14px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.features .n {
  font-weight: 800;
  color: var(--accent);
  font-size: 0.95rem;
  padding-top: 2px;
}
.features h3 {
  font-size: 1.1rem;
}
.features p {
  grid-column: 2;
  color: var(--text-secondary);
}

/* service blocks */
.service {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--line);
}
.service:first-child {
  border-top: 0;
  padding-top: 0;
}
.service h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
}
.service .lede {
  margin-top: 1rem;
}
.service .btn {
  margin-top: 1.8rem;
}
/* case studies: a sliding industry filter bar over alternating story rows, each with a "what we built" diagram */
.cs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(28px, 3vw, 40px);
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel);
  box-shadow: 0 14px 30px -24px rgba(1, 37, 136, 0.35);
}
.cs-arr {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--navy);
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    opacity 0.3s;
}
.cs-arr:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.cs-arr:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.cs-arr svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cs-filter {
  position: relative;
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.cs-filter::-webkit-scrollbar {
  display: none;
}
.cs-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}
.cs-chip:hover {
  background: var(--canvas);
  color: var(--navy);
}
.cs-chip[aria-pressed='true'] {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(1, 79, 253, 0.9);
}
.cs-chip-ic svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cs-chip-ic .ac {
  stroke: var(--accent);
}
.cs-list {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
}
.cs-row {
  --c: #014ffd;
  --c1: #012588;
  --c2: #2a66ff;
  --t1: #f3f6ff;
  --t2: #e5ecff;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
  padding: clamp(24px, 3.2vw, 44px);
  border: 1px solid #dce4f6;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--t1), var(--t2));
}
.cs-row[data-ind='healthcare'] {
  --c: #d2601a;
  --c1: #b8430f;
  --c2: #ff8a4c;
  --t1: #fff7f1;
  --t2: #ffeadc;
}
.cs-row[data-ind='retail'] {
  --c: #c46a00;
  --c1: #c46a00;
  --c2: #ffb238;
  --t1: #fff9ee;
  --t2: #ffefd2;
}
.cs-row[data-ind='education'] {
  --c: #5b4bd6;
  --c1: #3b2da8;
  --c2: #7c6cf0;
  --t1: #f6f4ff;
  --t2: #eae5ff;
}
.cs-row[data-ind='finance'] {
  --c: #0e78b8;
  --c1: #0b4f8a;
  --c2: #1496dc;
  --t1: #f1f8fd;
  --t2: #ddeffb;
}
.cs-row[data-ind='realestate'] {
  --c: #1f3fb0;
  --c1: #0a1650;
  --c2: #2b4bc0;
  --t1: #f2f4fa;
  --t2: #e2e7f4;
}
.cs-row[hidden] {
  display: none;
}
.cs-row.flip .cs-text {
  order: 2;
}
.cs-row.pop,
.post-card.pop {
  animation: csPop 0.6s var(--ease-out) both;
  animation-delay: calc(var(--k, 0) * 90ms);
}
.post-card[hidden] {
  display: none;
}
@keyframes csPop {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
.cs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.cs-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid #d6e0f5;
  border-radius: 99px;
  background: var(--panel);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c);
}
.cs-pill svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cs-pill svg .ac {
  stroke: var(--accent);
}
.cs-pill.plain {
  font-weight: 600;
  color: var(--text-secondary);
}
.cs-text h2,
.cs-text h3 {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1.25;
}
/* on the home page the card sits under a section h2, so its title is an h3 dressed as one */
.cs-text h3 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cs-desc {
  margin-top: 0.8rem;
  color: var(--text-secondary);
}
.cs-desc mark {
  background: none;
  color: var(--c);
  font-weight: 700;
}
.cs-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.cs-kpis li {
  flex: 1 1 110px;
  padding: 12px 14px;
  border: 1px solid #dfe6f5;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}
.cs-kpis b {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--c);
}
.cs-kpis span {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.cs-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.cs-tech li {
  padding: 4px 11px;
  border: 1px solid #d3dcef;
  border-radius: 99px;
  background: var(--panel);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.cs-read {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  margin-top: 22px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.cs-read span {
  transition: transform 0.3s var(--ease-out);
}
.cs-read:hover span {
  transform: translateX(4px);
}
/* the diagram: inputs feed the system, the system feeds the results; dashes flow along each wire */
@keyframes fbDash {
  to {
    background-position: 12px 0;
  }
}
@keyframes fbDashRev {
  to {
    background-position: -12px 0;
  }
}
@keyframes fbDashY {
  to {
    background-position: 0 12px;
  }
}
.cs-visual {
  position: relative;
  padding-bottom: 14px;
}
.fb {
  position: relative;
  padding: 20px 20px 56px;
  border: 1px solid #dce4f6;
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 30px 60px -40px rgba(1, 37, 136, 0.5);
}
.fb-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fb-title svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--c);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fb-grid {
  --g: 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: var(--g);
  align-items: center;
}
.fb-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fb-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid #dee5f4;
  border-radius: 12px;
  background: #f7f9fd;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}
.fb-node.in::after,
.fb-node.out::before {
  content: '';
  position: absolute;
  top: 50%;
  width: var(--g);
  height: 2px;
  margin-top: -1px;
  background-image: linear-gradient(90deg, var(--c) 50%, transparent 0);
  background-size: 6px 2px;
  animation: fbDash 0.6s linear infinite;
}
.fb-node.in::after {
  left: 100%;
}
.fb-node.out::before {
  right: 100%;
}
.fb-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 0 0 1px #dee5f4;
  color: var(--c);
}
.fb-ic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fb-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 116px;
  padding: 16px 10px;
  border-radius: 18px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, var(--c2), var(--c1));
  box-shadow: 0 18px 34px -16px var(--c);
}
.fb-hub-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.fb-hub-ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fb-badge {
  position: absolute;
  right: 18px;
  bottom: -14px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 250px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 18px 34px -14px rgba(4, 10, 38, 0.7);
  animation: dgFloat 3.5s var(--ease-io) infinite alternate;
}
.fb-badge b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.3rem;
  white-space: nowrap;
  color: var(--accent);
}
.fb-badge span {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-on-ink-2);
}
@media (max-width: 960px) {
  .cs-row {
    grid-template-columns: 1fr;
  }
  .cs-row.flip .cs-text {
    order: 0;
  }
}
@media (max-width: 560px) {
  .cs-bar {
    border-radius: 18px;
  }
  /* on phones the flow turns vertical: inputs in a row, wires down into the hub, wires down to outputs */
  .fb {
    padding-bottom: 20px;
  }
  .fb-grid {
    --g: 22px;
    grid-template-columns: 1fr;
    row-gap: var(--g);
  }
  .fb-col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .fb-node {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    font-size: 0.74rem;
    text-align: center;
  }
  .fb-node.in::after,
  .fb-node.out::before {
    left: 50%;
    top: auto;
    width: 2px;
    height: var(--g);
    margin: 0 0 0 -1px;
    background-image: linear-gradient(180deg, var(--c) 50%, transparent 0);
    background-size: 2px 6px;
    animation-name: fbDashY;
  }
  .fb-node.in::after {
    top: 100%;
  }
  .fb-node.out::before {
    right: auto;
    bottom: 100%;
  }
  .fb-hub {
    flex-direction: row;
    justify-content: center;
    width: auto;
    padding: 12px 16px;
    font-size: 0.9rem;
  }
  .fb-hub-ic {
    width: 38px;
    height: 38px;
  }
  .fb-badge {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 16px;
    max-width: none;
  }
}

/* ============ Dji Setu product page ============ */
@keyframes dgSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes dgSpinRev {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes dgFloat {
  from {
    transform: translateY(-6px);
  }
  to {
    transform: translateY(8px);
  }
}
@keyframes dgTwinkle {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.45);
    opacity: 0.55;
  }
}
@keyframes dgJitter {
  0%,
  100% {
    transform: rotate(-7deg) translate(-2px, 1px);
  }
  50% {
    transform: rotate(6deg) translate(2px, -2px);
  }
}
@keyframes dgNudge {
  0%,
  100% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(6px);
  }
}
@keyframes dgPacket {
  0% {
    left: 12.5%;
    opacity: 0;
  }
  8%,
  90% {
    opacity: 1;
  }
  100% {
    left: 87.5%;
    opacity: 0;
  }
}
@keyframes dgPipe {
  0% {
    left: 0;
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
/* hero: the D mark floats at the centre while the five modules orbit it */
.dg-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.dg-sub {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-soft);
}
.dg-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.dg-pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-ink);
  border-radius: 99px;
  background: rgba(111, 155, 255, 0.06);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-on-ink-2);
}
.dg-pills svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dg-orbit {
  --R: 43cqw;
  container-type: inline-size;
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.orbit-ring {
  position: absolute;
  inset: 7%;
  border: 1.5px dashed rgba(111, 155, 255, 0.35);
  border-radius: 50%;
  animation: dgSpin 70s linear infinite;
}
.orbit-ring.r2 {
  inset: 22%;
  border: 1px solid rgba(111, 155, 255, 0.14);
  animation-duration: 100s;
  animation-direction: reverse;
}
.orbit-spin {
  position: absolute;
  inset: 0;
  animation: dgSpin 40s linear infinite;
}
.orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--R)));
}
.orb-in {
  position: absolute;
  left: -30px;
  top: -30px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--blue);
  rotate: calc(-1 * var(--a));
  box-shadow:
    0 0 0 6px rgba(1, 79, 253, 0.18),
    0 12px 30px -8px rgba(1, 79, 253, 0.7);
  animation: dgSpinRev 40s linear infinite;
}
.orb.acct .orb-in {
  color: #d97f00;
  box-shadow:
    0 0 0 6px rgba(254, 154, 1, 0.22),
    0 12px 30px -8px rgba(254, 154, 1, 0.7);
}
.orb-in svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dg-mark {
  position: absolute;
  inset: 25%;
  animation: dgFloat 5s var(--ease-io) infinite alternate;
}
.dg-mark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 20px 40px rgba(30, 123, 255, 0.45));
}
.dg-gap {
  fill: #0a1650;
}
.dg-net g circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: dgTwinkle 2.8s var(--ease-io) infinite;
}
.dg-net g circle:nth-child(3n + 1) {
  animation-delay: -0.9s;
}
.dg-net g circle:nth-child(3n + 2) {
  animation-delay: -1.8s;
}
/* before and after */
.ba {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  max-width: 1020px;
  margin: 0 auto;
}
.ba-card {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.ba-card.before {
  background: #f5f6fa;
}
.ba-card.after {
  background: linear-gradient(160deg, #f1f5ff, #e2ebff);
  border-color: #c6d5f4;
  box-shadow: 0 26px 54px -34px rgba(1, 79, 253, 0.5);
}
.ba-label {
  margin-bottom: 18px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.after .ba-label {
  color: var(--blue);
}
.ba ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ba li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
}
.before li {
  color: var(--text-secondary);
}
.ba-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: #8c96b2;
}
.ba-ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.before .ba-ic {
  animation: dgJitter 3s var(--ease-io) infinite;
  animation-delay: calc(var(--j) * -0.75s);
}
.after .ba-ic {
  background: var(--blue);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(1, 79, 253, 0.8);
}
.js .ba .after li {
  opacity: 0;
  transform: translateX(14px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
  transition-delay: calc(0.5s + var(--j) * 0.14s);
}
.js .ba.in .after li {
  opacity: 1;
  transform: none;
}
.ba-arrow svg {
  display: block;
  width: 56px;
  height: 28px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: dgNudge 1.8s var(--ease-io) infinite;
}
/* quote to invoice flow: the line fills, each step lights up, then an order keeps travelling along it */
.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow::before,
.flow::after {
  content: '';
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 35px;
  height: 3px;
  border-radius: 3px;
  background: #d3dcef;
}
.flow::after {
  background: linear-gradient(90deg, var(--blue), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2.4s var(--ease-io) 0.3s;
}
.flow.in::after {
  transform: scaleX(1);
}
.fl-packet {
  position: absolute;
  z-index: 2;
  left: 12.5%;
  top: 29px;
  width: 15px;
  height: 15px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(254, 154, 1, 0.22);
  opacity: 0;
}
.flow.in .fl-packet {
  animation: dgPacket 3.6s var(--ease-io) 3s infinite;
}
.fl-step {
  position: relative;
  text-align: center;
}
.fl-ic {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border: 2px solid #d3dcef;
  border-radius: 22px;
  background: var(--panel);
  color: #9aa5c4;
  transition:
    border-color 0.5s,
    color 0.5s,
    box-shadow 0.5s,
    transform 0.5s var(--ease-out);
  transition-delay: calc(0.4s + var(--s) * 0.6s);
}
.fl-ic svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow.in .fl-ic {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-4px);
  box-shadow:
    0 0 0 7px rgba(1, 79, 253, 0.08),
    0 14px 30px -12px rgba(1, 79, 253, 0.6);
}
.flow.in .fl-step:last-child .fl-ic {
  border-color: var(--accent);
  color: #d97f00;
  box-shadow:
    0 0 0 7px rgba(254, 154, 1, 0.12),
    0 14px 30px -12px rgba(254, 154, 1, 0.65);
}
.fl-n {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.fl-step h3 {
  font-size: 1.15rem;
  margin: 0.3rem 0 0.4rem;
}
.fl-step p {
  max-width: 24ch;
  margin: 0 auto;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
/* Tally sync band */
.sync-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.sync-copy {
  max-width: 44ch;
  margin-top: 1rem;
  color: var(--text-on-ink-2);
}
.sync-vis {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sync-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sync-node strong {
  font-family: var(--f-display);
  font-weight: 600;
}
.sync-node .hub-icon {
  width: 88px;
  height: 88px;
  border-radius: 24px;
}
.sync-node .hub-icon svg {
  width: 40px;
  height: 40px;
}
.hub-icon.tally {
  background: linear-gradient(145deg, #ffb238, #e07a00);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 12px 28px -10px rgba(254, 154, 1, 0.8);
}
.sync-pipe {
  position: relative;
  flex: 1;
  max-width: 220px;
  height: 4px;
  margin: 0 18px 34px;
  border-radius: 4px;
  background: rgba(111, 155, 255, 0.22);
}
.sync-pipe i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(254, 154, 1, 0.85);
  animation: dgPipe 2.4s linear infinite;
}
.sync-pipe i:nth-child(2) {
  animation-delay: -0.6s;
}
.sync-pipe i:nth-child(3) {
  animation-delay: -1.2s;
}
.sync-pipe i:nth-child(4) {
  animation-delay: -1.8s;
}
/* benefits */
.dg-bens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dg-ben {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.dg-ben:hover {
  border-color: #b7caf6;
  box-shadow: 0 18px 38px -24px rgba(1, 37, 136, 0.4);
}
.dg-ben .mod-icon {
  margin-bottom: 18px;
  transition: transform 0.4s var(--ease-out);
}
.dg-ben:hover .mod-icon {
  transform: rotate(-8deg) scale(1.08);
}
.dg-ben:nth-child(2n) .mod-icon {
  background: #fff1e0;
}
.dg-ben h3 {
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
}
.dg-ben p {
  color: var(--text-secondary);
}
@media (max-width: 960px) {
  .dg-hero-grid,
  .sync-grid {
    grid-template-columns: 1fr;
  }
  .dg-orbit {
    width: min(100%, 380px);
  }
  .dg-bens {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .ba {
    grid-template-columns: 1fr;
  }
  .ba-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
  .flow {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }
  .flow::before,
  .flow::after,
  .fl-packet {
    display: none;
  }
}
@media (max-width: 560px) {
  .dg-bens {
    grid-template-columns: 1fr;
  }
  .orb-in {
    width: 48px;
    height: 48px;
    left: -24px;
    top: -24px;
  }
  .orb-in svg {
    width: 22px;
    height: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .ba .after li {
    opacity: 1;
    transform: none;
  }
  .dg-ben:hover .mod-icon {
    transform: none;
  }
}
/* ============ About page: futuristic layer ============ */
@property --ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes abBorder {
  to {
    --ang: 360deg;
  }
}
@keyframes holoAsm {
  0%,
  10% {
    transform: translate(var(--x), var(--y)) rotate(var(--r));
    opacity: 0.5;
  }
  38%,
  78% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) rotate(var(--r));
    opacity: 0.5;
  }
}
@keyframes holoScan {
  to {
    top: 100%;
  }
}
@keyframes abPing {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
/* hero hologram: the logo pieces drift apart and lock together inside spinning light rings */
.ab-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.ab-holo {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.holo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(111, 155, 255, 0.12) 0 58%,
    rgba(111, 155, 255, 0.95) 80%,
    rgba(111, 155, 255, 0.12) 100%
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 1.5px)
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: dgSpin 5s linear infinite;
}
.holo-ring.r2 {
  inset: 11%;
  background: conic-gradient(
    from 90deg,
    rgba(254, 154, 1, 0.1) 0 55%,
    rgba(254, 154, 1, 0.9) 76%,
    rgba(254, 154, 1, 0.1) 100%
  );
  animation-duration: 7s;
  animation-direction: reverse;
}
.holo-ring.r3 {
  inset: 22%;
  animation-duration: 9s;
}
.holo-core {
  position: absolute;
  inset: 25%;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(1, 79, 253, 0.38), rgba(4, 10, 38, 0.25) 72%);
  box-shadow:
    inset 0 0 50px rgba(1, 79, 253, 0.35),
    0 0 90px -10px rgba(1, 79, 253, 0.55);
}
.holo-mark {
  position: absolute;
  left: 11%;
  top: 50%;
  width: 78%;
  height: auto;
  overflow: visible;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 16px rgba(1, 79, 253, 0.75));
}
.hp {
  transform-box: fill-box;
  transform-origin: center;
  animation: holoAsm 6s var(--ease-io) infinite;
}
.hp1 {
  --x: -180px;
  --y: 120px;
  --r: -14deg;
}
.hp2 {
  --x: 60px;
  --y: -200px;
  --r: 20deg;
}
.hp3 {
  --x: 220px;
  --y: -80px;
  --r: 10deg;
}
.hp4 {
  --x: 150px;
  --y: 200px;
  --r: -10deg;
}
.holo-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -22%;
  height: 22%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(111, 155, 255, 0.16) 85%,
    rgba(170, 200, 255, 0.55)
  );
  mix-blend-mode: screen;
  animation: holoScan 3.2s linear infinite;
}
.holo-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(111, 155, 255, 0.35);
  border-radius: 99px;
  background: rgba(7, 17, 64, 0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  animation: dgFloat 3s var(--ease-io) infinite alternate;
}
.holo-tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.holo-tag.t1 {
  top: 9%;
  left: -3%;
}
.holo-tag.t2 {
  top: 46%;
  right: -7%;
  animation-delay: -1s;
}
.holo-tag.t3 {
  bottom: 7%;
  left: 9%;
  animation-delay: -2s;
}
/* story timeline: the rail fills, each chapter arrives in turn */
.ab-tl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ab-tl::before,
.ab-tl::after {
  content: '';
  position: absolute;
  left: 23px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
.ab-tl::after {
  background: linear-gradient(180deg, var(--blue), var(--accent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.8s var(--ease-io) 0.2s;
}
.in .ab-tl::after {
  transform: scaleY(1);
}
.ab-tl li {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
  transition-delay: calc(0.3s + var(--t) * 0.45s);
}
.in .ab-tl li {
  opacity: 1;
  transform: none;
}
.tl-ic {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, #2a66ff, #012588);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(1, 79, 253, 0.75);
}
.tl-ic::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(1, 79, 253, 0.45);
  border-radius: inherit;
  animation: abPing 2.4s var(--ease-out) infinite;
  animation-delay: calc(var(--t) * 0.8s);
}
.tl-ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tl-ic .ac {
  stroke: var(--accent);
}
.ab-tl h3 {
  font-size: 1.1rem;
  margin: 10px 0 0.4rem;
}
.ab-tl p {
  color: var(--text-secondary);
}
/* values: cards with a light that runs around the border */
.features.ab-values {
  gap: clamp(14px, 1.8vw, 22px);
}
.features .ab-val {
  position: relative;
  display: block;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  isolation: isolate;
}
.ab-val::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--ang),
    transparent 0 62%,
    var(--blue) 82%,
    var(--accent) 94%,
    transparent
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  animation: abBorder 5s linear infinite;
  transition: opacity 0.4s;
}
.ab-val:nth-child(2)::before {
  animation-delay: -1.25s;
}
.ab-val:nth-child(3)::before {
  animation-delay: -2.5s;
}
.ab-val:nth-child(4)::before {
  animation-delay: -3.75s;
}
.ab-val:hover::before {
  opacity: 1;
}
.ab-val-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}
.ab-val-ic {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #e6eeff;
  color: var(--navy);
  transition: transform 0.4s var(--ease-out);
}
.ab-val:hover .ab-val-ic {
  transform: rotate(-8deg) scale(1.08);
}
.ab-val-ic svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ab-val-ic .ac {
  stroke: var(--accent);
}
.features .ab-val p {
  grid-column: auto;
  margin-top: 0.4rem;
}
/* steps get icons */
.step-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 0 14px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--blue);
  box-shadow: 0 10px 24px -16px rgba(1, 37, 136, 0.5);
}
.step-ic svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-ic .ac {
  stroke: var(--accent);
}
/* about: the icon is the step's marker on the line (solid fill, so the line never shows through) */
.step-n-ic {
  width: 48px;
  height: 48px;
  margin-top: -4px;
  border-radius: 14px;
  margin-bottom: 1rem;
}
.step-n-ic svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.steps.in .step-n-ic .ac {
  stroke: var(--accent);
}
.step-k {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 960px) {
  .ab-hero {
    grid-template-columns: 1fr;
  }
  .ab-holo {
    width: min(100%, 320px);
  }
}
@media (max-width: 640px) {
  .features.ab-values {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-tl li {
    opacity: 1;
    transform: none;
  }
  .ab-tl::after {
    transform: none;
  }
  .ab-val:hover .ab-val-ic {
    transform: none;
  }
}

/* service pages: module map = the service as a hub, its modules wired in from both sides */
.modmap {
  --gap: clamp(40px, 5vw, 76px);
  display: grid;
  grid-template-columns: 1fr minmax(190px, 230px) 1fr;
  column-gap: var(--gap);
  align-items: stretch;
}
.mod-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mod {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.mod:hover {
  border-color: #b7caf6;
  box-shadow: 0 16px 34px -22px rgba(1, 37, 136, 0.4);
}
.mod.l {
  flex-direction: row-reverse;
  text-align: right;
}
.mod.l::after,
.mod.r::before {
  content: '';
  position: absolute;
  top: 50%;
  width: var(--gap);
  height: 2px;
  pointer-events: none;
}
.mod.l::after {
  left: 100%;
  background: linear-gradient(90deg, #cad7f2, var(--blue));
}
.mod.r::before {
  right: 100%;
  background: linear-gradient(90deg, var(--blue), #cad7f2);
}
.mod h3 {
  font-size: 1.04rem;
  margin: 2px 0 0.3rem;
}
.mod p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text-secondary);
}
.mod-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #e6eeff;
  color: var(--navy);
}
.mod.r .mod-icon {
  background: #fff1e0;
}
.mod-icon svg,
.hub-icon svg,
.chip-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mod-icon .ac,
.chip-icon .ac {
  stroke: var(--accent);
}
.mod-hub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  border-radius: 26px;
  text-align: center;
  color: #fff;
  background: radial-gradient(120% 70% at 50% 0%, #1b4fe0 0%, #0a1a6b 55%, var(--ink) 100%);
  box-shadow:
    0 30px 60px -30px rgba(1, 37, 136, 0.7),
    inset 0 0 0 1px rgba(111, 155, 255, 0.3);
}
.mod-hub strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
}
.mod-hub > span:last-child {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-ink-2);
}
.hub-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(145deg, #2a66ff, #012588);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 12px 28px -10px rgba(1, 79, 253, 0.8);
  color: #fff;
}
.hub-icon svg {
  width: 34px;
  height: 34px;
}
.hub-icon .ac {
  stroke: var(--accent);
}
.mod-proof {
  max-width: 62ch;
  margin: clamp(36px, 4vw, 52px) auto 0;
  padding: 16px 24px;
  border-radius: 14px;
  background: var(--canvas);
  border: 1px solid var(--line);
  text-align: center;
  color: var(--text-secondary);
}
.mod-proof strong {
  color: var(--text-primary);
}
.mod-proof a {
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.other-svc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.other-svc p {
  color: var(--text-secondary);
  margin-top: 0.5rem;
  max-width: 52ch;
}
@media (max-width: 900px) {
  .modmap {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
  .mod-hub {
    order: -1;
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    padding: 18px 20px;
    text-align: left;
  }
  .hub-icon {
    width: 56px;
    height: 56px;
  }
  .mod.l {
    flex-direction: row;
    text-align: left;
  }
  .mod.l::after,
  .mod.r::before {
    display: none;
  }
}
/* services overview: one card per service, its modules listed as icon chips */
.svc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}
.svc-card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(1, 79, 253, 0.08), transparent 55%), var(--panel);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.4s,
    box-shadow 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}
.svc-card:hover {
  border-color: #b7caf6;
  box-shadow: 0 28px 56px -34px rgba(1, 37, 136, 0.5);
}
.js .svc-card.reveal.done {
  transition:
    border-color 0.4s,
    box-shadow 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}
.js .svc-card.reveal.done:hover {
  transform: translateY(-4px);
}
.svc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
}
.svc-top .hub-icon {
  width: 60px;
  height: 60px;
  border-radius: 17px;
}
.svc-top .hub-icon svg {
  width: 28px;
  height: 28px;
}
.svc-n {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.svc-card h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.svc-card > p {
  margin-top: 0.6rem;
  color: var(--text-secondary);
}
.svc-mods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 24px 0 26px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.svc-mods li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-primary);
}
.chip-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e6eeff;
  color: var(--navy);
}
.chip-icon svg {
  width: 18px;
  height: 18px;
}
.svc-card .link-arrow {
  margin-top: auto;
}
.svc-note {
  margin-top: 28px;
  text-align: center;
  color: var(--text-secondary);
}
.svc-note a {
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
@media (max-width: 760px) {
  .svc-cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 420px) {
  .svc-mods {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .svc-card.reveal.done:hover {
    transform: none;
  }
}
.engage .mod-icon {
  margin-bottom: 16px;
}
.engage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.engage li {
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.engage h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.engage p {
  color: var(--text-secondary);
}
.engage .best {
  display: block;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--text-primary);
  font-weight: 600;
}

/* case studies */
.ind-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.ind-nav a {
  padding: 12px 0;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition:
    color 0.3s,
    border-color 0.3s;
}
.ind-nav a:hover {
  color: var(--navy);
  border-color: var(--navy);
}
.case-row {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid var(--line);
}
.case-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.case-row h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}
.case-row .ind-lede {
  color: var(--text-secondary);
  margin-top: 0.6rem;
}
.case-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px 32px;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}
.case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -30px rgba(1, 37, 136, 0.4);
}
.case-card h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}
.case-card p {
  color: var(--text-secondary);
  margin-top: 0.5rem;
}
.case-card .story-metric {
  border: 0;
  padding: 0;
  text-align: right;
  margin: 0;
}
.case-card .link-arrow {
  grid-column: 1 / -1;
}
.results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-ink);
  border-left: 1px solid var(--line-ink);
}
.results li {
  padding: clamp(22px, 3vw, 34px);
  border-right: 1px solid var(--line-ink);
  border-bottom: 1px solid var(--line-ink);
}
.results b {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: #fff;
  line-height: 1.05;
}
.results span {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-on-ink-2);
}
.facts {
  border-top: 1px solid var(--line);
}
.facts div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.facts dd {
  margin: 0;
  font-weight: 600;
}
.pull {
  margin: 2.4rem 0 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--accent);
}
.pull blockquote {
  margin: 0 0 0.8rem;
  font-size: 1.2rem;
  line-height: 1.55;
  font-weight: 500;
}
.pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.pager a {
  text-decoration: none;
  max-width: 46%;
}
.pager small {
  display: block;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.pager strong {
  color: var(--navy);
}
.pager a:hover strong {
  color: var(--blue);
}
.pager .next {
  text-align: right;
  margin-left: auto;
}

/* blog */
.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(1, 37, 136, 0.4);
}
.post-cover {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ink);
}
.post-cover svg {
  position: absolute;
  width: 62%;
  right: -8%;
  bottom: -18%;
  opacity: 0.9;
}
.post-cover.c2 {
  background: #0e2a9e;
}
.post-cover.c3 {
  background: #1b1f3b;
}
.post-cover b {
  position: absolute;
  left: 22px;
  top: 20px;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.post-card .card-body {
  gap: 0.5rem;
}
.post-meta {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 600;
}
.post-card h3 {
  font-size: 1.2rem;
  line-height: 1.35;
}
.post-card p {
  color: var(--text-secondary);
}
.post-card .link-arrow {
  margin-top: auto;
  padding-top: 0.6rem;
}
.article {
  max-width: 720px;
  margin-inline: auto;
}
.article p,
.article li {
  font-size: 1.1rem;
  line-height: 1.75;
  color: #29345c;
}
.article p + p {
  margin-top: 1.1rem;
}
.article h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin: 2.6rem 0 1rem;
}
.article ul,
.article ol {
  margin: 1rem 0 1.2rem;
  padding-left: 1.4rem;
  list-style: disc;
}
.article ol {
  list-style: decimal;
}
.article li {
  margin: 0.45rem 0;
}
.article li::marker {
  color: var(--blue);
}
.article strong {
  color: var(--text-primary);
}
.article .note {
  margin-top: 2.4rem;
  padding: 22px 24px;
  background: var(--canvas-2);
  border-left: 3px solid var(--navy);
}

/* careers */
.roles {
  border-top: 1px solid var(--line);
}
.role {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 16px 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.role h3 {
  font-size: 1.15rem;
}
.role p {
  color: var(--text-secondary);
  font-size: 0.96rem;
  margin-top: 0.3rem;
}
.role .r-meta {
  color: var(--text-secondary);
  font-weight: 600;
}

/* faq */
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list details:first-child {
  border-top: 1px solid var(--line);
}
.faq-list summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.3rem 3rem 1.3rem 0;
  font-weight: 700;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.4;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--blue);
  transition: transform 0.4s var(--ease-out);
}
.faq-list details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq-list .ans p {
  padding: 0 2rem 1.4rem 0;
  color: var(--text-secondary);
  max-width: 62ch;
}
.faq-list details[open] .ans {
  animation: panelIn 0.45s var(--ease-out);
}

/* forms */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.contact-facts {
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}
.contact-facts li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cf-k {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-facts a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -50px rgba(1, 37, 136, 0.45);
}
.form h2 {
  grid-column: 1 / -1;
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field-wide {
  grid-column: 1 / -1;
}
.field label {
  font-weight: 700;
  font-size: 0.92rem;
}
.opt {
  font-weight: 400;
  color: var(--text-secondary);
}
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  padding: 0.8em 0.95em;
  transition:
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
  width: 100%;
}
.field textarea {
  resize: vertical;
  min-height: 120px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #7a85a6;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(1, 79, 253, 0.14);
}
.field .invalid {
  border-color: #c2410c;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.form-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.form-msg {
  font-size: 0.92rem;
  color: #b03a0a;
  font-weight: 600;
}
.form-note {
  grid-column: 1 / -1;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.form.sending button[type='submit'] {
  opacity: 0.7;
  pointer-events: none;
}
.form-done {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 32px;
  border-radius: inherit;
  background: var(--panel);
  animation: panelIn 0.6s var(--ease-out);
}
.form-done[hidden] {
  display: none;
}
.form-done svg {
  width: 120px;
  height: auto;
  margin-bottom: 10px;
}
.done-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.6rem;
}
.done-title:focus {
  outline: none;
}
.form-done p:last-child {
  color: var(--text-secondary);
  max-width: 34ch;
}

/* footer */
.footer {
  background: var(--ink);
  color: var(--text-on-ink-2);
  padding: clamp(56px, 7vw, 88px) 0 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px 32px;
}
.f-brand img {
  width: 230px;
  height: auto;
}
.f-brand p {
  margin-top: 1.4rem;
  max-width: 32ch;
  font-size: 0.96rem;
}
.f-brand address {
  font-style: normal;
  margin-top: 1.2rem;
  font-size: 0.94rem;
  line-height: 1.7;
}
.f-brand address a {
  color: var(--text-on-ink);
  text-decoration: none;
}
.f-col h4 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.f-col li {
  margin: 0.5rem 0;
}
.f-col a {
  color: var(--text-on-ink-2);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s;
}
.f-col a:hover {
  color: #fff;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line-ink);
  font-size: 0.88rem;
}

.nf {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .footer-top {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .f-brand {
    grid-column: 1 / -1;
  }
  .stats.four {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 960px) {
  .split,
  .release-grid,
  .contact-grid,
  .service,
  .case-row {
    grid-template-columns: 1fr;
  }
  .split .sticky {
    position: static;
  }
  .cards-3,
  .posts,
  .quotes,
  .engage {
    grid-template-columns: 1fr 1fr;
  }
  .industries {
    grid-template-columns: 1fr 1fr;
  }
  .why {
    grid-template-columns: 1fr 1fr;
  }
  .features {
    grid-template-columns: 1fr;
  }
  .results {
    grid-template-columns: 1fr;
  }
  .role {
    grid-template-columns: 1fr 1fr;
  }
  .role .btn {
    justify-self: start;
  }
}
@media (max-width: 640px) {
  .cards-3,
  .posts,
  .quotes,
  .engage,
  .why {
    grid-template-columns: 1fr;
  }
  .form {
    grid-template-columns: 1fr;
  }
  .console-body {
    grid-template-columns: 1fr;
  }
  .mini-mark {
    grid-row: auto;
    justify-self: center;
  }
  .hold {
    justify-self: stretch;
    justify-content: center;
  }
  .case-card {
    grid-template-columns: 1fr;
  }
  .case-card .story-metric {
    text-align: left;
  }
  .role {
    grid-template-columns: 1fr;
  }
  .facts div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .contact-facts li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* pause on hidden tab / off-screen */
body.paused *,
body.paused *::before,
body.paused *::after {
  animation-play-state: paused !important;
}
.hero.off .float,
.hero.off .grid,
.hero.off .cue i {
  animation-play-state: paused;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .particles {
    display: none;
  }
}

/* ============ case study: before/after flow, challenge lists, solution cards, screenshots ============ */
@keyframes cfDashY {
  to {
    background-position: 0 12px;
  }
}
.cf {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  max-width: 1080px;
  margin: 0 auto;
}
.cf-stage {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 24px;
}
.cf-stage.before {
  background: #f3f4f8;
}
.cf-stage.after {
  background: linear-gradient(150deg, #f1f5ff, #e0e9ff);
  border-color: #c6d5f4;
  box-shadow: 0 30px 60px -40px rgba(1, 79, 253, 0.55);
}
.cf-label {
  margin-bottom: 18px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.after .cf-label {
  color: var(--blue);
}
/* the second row of the connected flow (the field team), set off from the first */
.cf-label.cf-sub {
  margin-top: 30px;
}
.cf-track {
  position: relative;
}
.cf-steps {
  --g: 34px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--g);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cf-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px 16px;
  border: 1px solid #dde1ec;
  border-radius: 16px;
  background: var(--panel);
  text-align: center;
}
.cf-steps b {
  font-size: 1rem;
  line-height: 1.25;
}
.cf-steps li > span:last-child {
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.cf-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: #eceef4;
  color: #8c96b2;
}
.cf-ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cf-steps li + li::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: var(--g);
  height: 2px;
  margin-top: -1px;
  background-image: linear-gradient(90deg, #a9b1c8 50%, transparent 0);
  background-size: 6px 2px;
}
.cf-steps li + li::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid #a9b1c8;
  border-right: 2px solid #a9b1c8;
  transform: translateX(-1px) rotate(45deg);
}
.before .cf-ic {
  animation: dgJitter 3s var(--ease-io) infinite;
  animation-delay: calc(var(--j) * -0.75s);
}
.cf-note {
  margin-top: 16px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.after .cf-steps li {
  border-color: #c9d7f6;
  box-shadow: 0 14px 30px -22px rgba(1, 79, 253, 0.7);
}
.after .cf-ic {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(1, 79, 253, 0.8);
}
.after .cf-steps li > span:last-child {
  font-weight: 600;
  color: var(--blue);
}
.after .cf-steps li + li::before {
  background-image: linear-gradient(90deg, var(--blue) 50%, transparent 0);
  animation: fbDash 0.6s linear infinite;
}
.after .cf-steps li + li::after {
  border-color: var(--blue);
}
.cf-packet {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 56px;
  height: 6px;
  margin: -3px 0 0 -28px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, var(--accent));
  filter: drop-shadow(0 0 6px rgba(254, 154, 1, 0.8));
  animation: dgPipe 3.2s linear infinite;
}
.cf-base {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--navy), var(--blue));
  color: #fff;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 18px 36px -20px rgba(1, 37, 136, 0.8);
}
.cf-base b {
  color: var(--accent);
}
.cf-base-ic svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the connected flow lights up one step at a time once it scrolls into view */
.js .cf .after .cf-steps li {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
  transition-delay: calc(0.45s + var(--j) * 0.18s);
}
.js .cf .cf-base {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s var(--ease-out) 1.3s,
    transform 0.6s var(--ease-out) 1.3s;
}
.js .cf.in .after .cf-steps li,
.js .cf.in .cf-base {
  opacity: 1;
  transform: none;
}

.cx-steps {
  display: grid;
  gap: 10px;
  margin: 1rem 0 1.4rem;
  padding: 0;
  list-style: none;
}
.cx-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--canvas);
  color: var(--text-secondary);
}
.cx-steps li > span {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--navy);
}
.cx-steps svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cx-problems {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.cx-problems li {
  position: relative;
  padding: 0.8rem 0 0.8rem 2rem;
  border-top: 1px solid var(--line);
  color: var(--text-secondary);
}
.cx-problems li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 1.32rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(254, 154, 1, 0.18);
}
.cx-problems b {
  color: var(--text-primary);
}

.sols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sol {
  position: relative;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}
.js .sol.reveal.done {
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}
.js .sol.reveal.done:hover,
.sol:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(1, 37, 136, 0.4);
}
.sol-n {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--f-display);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #c3d0f0;
}
.sol-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--blue), var(--navy));
  color: #fff;
  box-shadow: 0 12px 24px -12px rgba(1, 79, 253, 0.9);
  transition: transform 0.4s var(--ease-out);
}
.sol-ic svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sol:hover .sol-ic {
  transform: rotate(-6deg) scale(1.06);
}
.sol h3 {
  margin: 18px 0 8px;
  font-size: 1.12rem;
}
.sol p {
  font-size: 0.96rem;
  color: var(--text-secondary);
}

.shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 32px);
}
.shot {
  margin: 0;
}
.shot.wide {
  grid-column: 1/-1;
}
.shot-frame {
  overflow: hidden;
  border: 1px solid #d3dcef;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 40px 80px -50px rgba(1, 37, 136, 0.6);
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid #e3e8f4;
  background: #f6f8fc;
}
.shot-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6159;
}
.shot-bar i:nth-child(2) {
  background: #ffbd2e;
}
.shot-bar i:nth-child(3) {
  background: #28c941;
}
.shot-bar span {
  margin-left: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}
.shot img {
  width: 100%;
  height: auto;
  transition: transform 1.2s var(--ease-out);
}
.shot:hover img {
  transform: scale(1.015);
}
.shot figcaption {
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.shot figcaption b {
  color: var(--text-primary);
}
/* captions under the product screens: the home page's emblem (a white plate with an ink edge and
   a flat ink shadow, its icon in a pillar colour), then the screen's name over a short line */
.shot-cap {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 22px;
  padding-left: 10px;
}
.shot-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--h-ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: -4px 4px 0 0 var(--h-ink);
  color: var(--tone);
}
.shot-ic svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shot-text {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
}
.shot-text b {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--h-ink);
}
.shot-text b::after {
  content: '.';
  color: var(--tone);
}
.shot-text > span {
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.story-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
}
.sf-text {
  display: flex;
  flex-direction: column;
}
.story-feature h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}
.sf-desc {
  margin-top: -0.6rem;
  color: var(--text-secondary);
}
.story-feature .story-metric {
  margin-top: 1.6rem;
}
.sf-shot {
  overflow: hidden;
  border: 1px solid #d3dcef;
  border-radius: 14px;
  box-shadow: 0 30px 60px -36px rgba(1, 37, 136, 0.55);
  transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
  transition: transform 0.8s var(--ease-out);
}
.story-feature:hover .sf-shot {
  transform: none;
}
.sf-shot img {
  width: 100%;
  height: auto;
}

@media (max-width: 960px) {
  .sols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 860px) {
  .story-feature {
    grid-template-columns: 1fr;
  }
  .sf-shot {
    transform: none;
  }
}
@media (max-width: 760px) {
  .cf-steps {
    --g: 22px;
    grid-template-columns: 1fr;
  }
  .cf-steps li {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 14px 16px;
    text-align: left;
  }
  .cf-ic {
    grid-row: span 2;
    margin: 0;
  }
  .cf-steps li + li::before {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 36px;
    width: 2px;
    height: var(--g);
    margin: 0;
    background-image: linear-gradient(180deg, #a9b1c8 50%, transparent 0);
    background-size: 2px 6px;
  }
  .after .cf-steps li + li::before {
    background-image: linear-gradient(180deg, var(--blue) 50%, transparent 0);
    animation-name: cfDashY;
  }
  .cf-steps li + li::after,
  .cf-packet {
    display: none;
  }
  .shots {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .sols {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .cf .after .cf-steps li,
  .js .cf .cf-base {
    opacity: 1;
    transform: none;
  }
  .before .cf-ic,
  .cf-packet,
  .after .cf-steps li + li::before {
    animation: none;
  }
  .sf-shot,
  .story-feature:hover .sf-shot {
    transform: none;
  }
  .js .sol.reveal.done:hover,
  .sol:hover,
  .sol:hover .sol-ic,
  .shot:hover img {
    transform: none;
  }
}

/* ============ INNER PAGES in the home theme ============ */
/* Every page but the home page has <main class="page">. Its sections share the home theme's rules
   above (:is(.home, .page)); here the older components take the home page's look: the blues map to
   ink and the pillar colours, corners square off, soft shadows and glows give way to hairlines and
   the flat ink offset shadow, and icon tiles become white discs with an ink edge */
.page {
  --navy: var(--h-ink);
  --blue: var(--p-secure);
  --blue-soft: var(--p-scale);
  --accent: var(--p-smart);
  --accent-hover: #f5b45c;
  --canvas: var(--paper);
  --line: var(--home-line);
  --text-primary: var(--h-ink);
  --text-secondary: var(--ink-2);
  --r: 4px;
}

/* icon tiles: a white disc with an ink edge and the icon in ink, as on the home page */
.page :is(.sol-ic, .tl-ic, .mod-icon, .ab-val-ic, .ba-ic, .cf-ic, .hub-icon) {
  border: 1.5px solid var(--h-ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--h-ink);
  box-shadow: none;
}
.page :is(.sol-ic, .tl-ic, .mod-icon, .ab-val-ic, .ba-ic, .cf-ic, .hub-icon) .ac {
  stroke: var(--p-secure);
}
.page .before :is(.ba-ic, .cf-ic) {
  border-color: var(--home-line);
  color: var(--ink-3);
}
.page .fl-ic {
  border-radius: 50%;
}

/* cards: flat white with a hairline; the ones you can pick lift onto the flat ink shadow */
.page :is(.svc-card, .ab-val, .ba-card, .cf-stage, .sol, .post-card, .form, .role, .stat-card) {
  border-radius: 4px;
  box-shadow: none;
}
.page :is(.svc-card, .ab-val, .sol, .post-card, .stat-card) {
  border: 1px solid var(--home-line);
  background: var(--paper);
}
.page .ab-val::before {
  display: none;
}
.page :is(.svc-card, .sol, .post-card) {
  transition:
    border-color 0.3s,
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}
.page :is(.svc-card, .sol, .post-card):hover,
.js .page .svc-card.reveal.done:hover {
  border-color: var(--h-ink);
  box-shadow: 4px 4px 0 0 var(--h-ink);
  transform: translate(-2px, -2px);
}
.page .form {
  border: 1px solid var(--h-ink);
  box-shadow: 6px 6px 0 0 var(--h-ink);
}

/* about: the hero mark sits on a white plate with an ink edge and the solid ink shadow of the
   home page's circles, inside plain ink rings, its tags as white chips */
.page .holo-ring {
  background: none;
  border: 1px solid color-mix(in srgb, var(--h-ink) 16%, transparent);
  -webkit-mask: none;
  mask: none;
}
.page .holo-ring.r2 {
  border: 1.5px dashed var(--p-smart);
}
.page .holo-core {
  border: 1.5px solid var(--h-ink);
  background: var(--paper);
  box-shadow: -10px 10px 0 0 var(--h-ink);
}
.page .holo-mark {
  filter: none;
}
.page .holo-scan {
  display: none;
}
.page .holo-tag {
  border: 1px solid var(--h-ink);
  border-radius: 2px;
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--h-ink);
  box-shadow: 3px 3px 0 0 var(--h-ink);
}

/* the page itself is white, so sections without a background of their own read white too */
.page {
  background: var(--paper);
}
/* about: the release checklist as a solid ink panel with the flat offset shadow, in cobalt */
.page .console {
  border: 0;
  background: var(--h-ink);
  box-shadow: 8px 8px 0 0 var(--p-secure);
}

/* products: the hero's orbit in ink, its module stops as white discs with an ink edge and the
   flat ink shadow; the facts under the buttons as plain ink chips */
.page .orbit-ring {
  border-color: color-mix(in srgb, var(--h-ink) 20%, transparent);
}
.page .orb-in {
  border: 1.5px solid var(--h-ink);
  background: var(--paper);
  color: var(--h-ink);
  box-shadow: 3px 3px 0 0 var(--h-ink);
}
.page .dg-pills li {
  border: 1px solid var(--home-line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--h-ink);
}
/* before and after: the "after" card picked out in ink rather than tinted blue */
.page .ba-card {
  border-radius: 4px;
}
.page .ba-card.after {
  border-color: var(--h-ink);
  background: var(--paper);
  box-shadow: 6px 6px 0 0 var(--h-ink);
}
/* the modules: a white card with a hairline; the map stays dark, as one flat ink panel */
.page .setu {
  border-color: var(--home-line);
  border-radius: 4px;
  background: var(--paper);
}
.page .setu-map {
  border-radius: 4px;
  background: var(--h-ink);
  box-shadow: none;
}
/* the accounting sync, now on white */
.page .sync-copy {
  color: var(--ink-2);
}
/* the Dji Setu mark as on light backgrounds: a white ring round the globe, no glow */
.page .dg-mark svg {
  filter: none;
}
.page .dg-gap {
  fill: var(--paper);
}

/* case study: the results as an ink row on white with hairlines, like the home page's numbers */
.page .results,
.page .results li {
  border-color: var(--home-line);
}
.page .results b {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--h-ink);
}
.page .results span {
  color: var(--ink-2);
}
/* the before and after flows: plain panels, the "after" one picked out in ink, its base a solid
   ink bar */
.page .cf-stage {
  border-color: var(--home-line);
  border-radius: 4px;
}
.page .cf-stage.before {
  background: var(--paper);
}
.page .cf-stage.after {
  border-color: var(--h-ink);
  background: var(--paper);
  box-shadow: 6px 6px 0 0 var(--h-ink);
}
.page .cf-base {
  border-radius: 2px;
  background: var(--h-ink);
  box-shadow: none;
}

/* custom software: the hub as one flat ink panel with the cobalt offset shadow */
.page .mod-hub {
  border-radius: 4px;
  background: var(--h-ink);
  color: var(--paper);
  box-shadow: 6px 6px 0 0 var(--p-secure);
}
.page .mod-hub > span:last-child {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}
/* the right-hand modules' icons and the service cards' small icons, as every other icon tile */
.page .mod.r .mod-icon,
.page .chip-icon {
  border: 1.5px solid var(--h-ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--h-ink);
}

/* ============ PRODUCTS: the Dji Setu reel ============ */
/* The reel (DjiReel.tsx) on a phone: a dark rim with a lighter edge, a glass glare, the island,
   and side keys, standing in front of one of the home page's circles (a white plate with an ink
   edge over a solid ink shadow, the cobalt set into it). The chapters beside it show how far into
   each part the reel is (--cp) */
.rl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.rl-copy .lede {
  margin-top: 18px;
}
.rl-chapters {
  display: grid;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  border-top: 1px solid var(--home-line);
  list-style: none;
}
.rl-chapters li {
  border-bottom: 1px solid var(--home-line);
}
.rl-chapters button {
  --cp: 0;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  padding: 15px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.3s;
}
/* how far into this part the reel is, as an ink line along the hairline */
.rl-chapters button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--h-ink);
  transform: scaleX(var(--cp));
  transform-origin: left;
  transition: transform 0.3s linear;
}
.rl-chapters li.on button,
.rl-chapters button:hover,
.rl-chapters button:focus-visible {
  color: var(--h-ink);
}
.rl-t {
  flex: none;
  width: 3.2em;
  font-family: var(--f-mono);
  font-size: 13px;
}
.rl-title {
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 700;
}

.rl-stage {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 26px;
  perspective: 1400px;
}
/* the circle behind, centred on the phone */
.rl-plate {
  position: absolute;
  top: calc(50% - 40px);
  left: 50%;
  width: min(118%, 520px);
  aspect-ratio: 1;
  border: 1.5px solid var(--h-ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: -18px 18px 0 0 var(--h-ink);
  transform: translate(-50%, -50%);
}
.rl-plate-fill {
  position: absolute;
  inset: 9% 13% 13% 9%;
  border-radius: 50%;
  background: var(--p-secure);
}
.rl-phone {
  position: relative;
  width: min(300px, 72vw);
  padding: 11px;
  border-radius: 50px;
  background: linear-gradient(150deg, #3a3f4c 0%, #12141b 28%, #0b0c11 60%, #2a2e39 100%);
  box-shadow:
    inset 0 0 0 1.5px #5b6170,
    inset 0 0 0 4px #0a0b0f,
    0 1px 0 1px rgba(255, 255, 255, 0.06),
    0 60px 80px -40px rgba(11, 19, 54, 0.55),
    0 24px 34px -24px rgba(11, 19, 54, 0.5);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.6s var(--ease-out);
}
.rl-key {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1a1d25, #4a4f5c);
}
.rl-key-1 {
  left: -3px;
  top: 19%;
  height: 34px;
}
.rl-key-2 {
  left: -3px;
  top: 27%;
  height: 56px;
}
.rl-key-3 {
  right: -3px;
  top: 25%;
  height: 76px;
  background: linear-gradient(90deg, #4a4f5c, #1a1d25);
}
.rl-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 464 / 832;
  border-radius: 40px;
  background: #0b1336;
}
.rl-screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.rl-island {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 30%;
  height: 24px;
  border-radius: 99px;
  background: #000;
  transform: translateX(-50%);
  pointer-events: none;
}
/* the glass: a soft reflection across the top corner */
.rl-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 26%,
    rgba(255, 255, 255, 0) 38%
  );
  pointer-events: none;
}
.rl-controls {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rl-ctl,
.rl-sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border: 1.5px solid var(--h-ink);
  border-radius: 99px;
  background: var(--paper);
  font: inherit;
  font-weight: 700;
  color: var(--h-ink);
  cursor: pointer;
  transition:
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}
.rl-ctl {
  width: 44px;
}
.rl-sound {
  padding: 0 18px 0 14px;
}
.rl-ctl:hover,
.rl-sound:hover,
.rl-ctl:focus-visible,
.rl-sound:focus-visible {
  box-shadow: 3px 3px 0 0 var(--h-ink);
  transform: translate(-1.5px, -1.5px);
}
.rl-sound[aria-pressed='true'] {
  background: var(--h-ink);
  color: var(--paper);
}
.rl-controls svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rl-ctl svg path {
  fill: currentColor;
}
.rl-ctl svg path[d^='M8 5v14'] {
  fill: none;
  stroke-width: 2.6;
}
.rl-time {
  min-width: 6.5em;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .rl-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rl-stage {
    order: -1;
    margin-bottom: 8px;
  }
}
@media (max-width: 600px) {
  .rl-phone {
    width: min(260px, 70vw);
    border-radius: 44px;
  }
  .rl-screen {
    border-radius: 34px;
  }
  .rl-plate {
    box-shadow: -12px 12px 0 0 var(--h-ink);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rl-phone,
  .rl-chapters button::after {
    transition: none;
  }
}

/* the map on the product page ("What it does"): a line for the heading rather than a name */
.bm-name.is-long {
  max-width: 13ch;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.02;
}

/* ============ PRODUCTS: how it works and the benefits, in the home theme ============ */
/* How it works: each step is one of the home page's circles (a white plate with an ink edge over a
   solid ink shadow, down and to the left); as the line reaches it, its pillar colour fills in a
   little up and to the left of centre, as if lit from there. The line is a dashed route, as on the
   map, that draws on in solid ink, with an ink packet running along it */
.page .flow {
  --tone: var(--p-secure);
  /* the middle of the first and last of the seven columns */
  --edge: calc(100% / 14);
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}
/* the steps take the pillar colours in turn: cobalt, orange, periwinkle (the packet is the list's
   first child, so the steps start at the second) */
.page .fl-step:nth-child(3n + 3) {
  --tone: var(--p-smart);
}
.page .fl-step:nth-child(3n + 4) {
  --tone: var(--p-scale);
}
.page .flow::before,
.page .flow::after {
  left: var(--edge);
  right: var(--edge);
}
.page .flow::before {
  height: 0;
  border-top: 1.5px dashed color-mix(in srgb, var(--h-ink) 28%, transparent);
  border-radius: 0;
  background: none;
}
.page .flow::after {
  top: 34.5px;
  height: 2px;
  border-radius: 0;
  background: var(--h-ink);
}
.page .fl-packet {
  left: var(--edge);
  top: 31px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: var(--h-ink);
  box-shadow: none;
}
.page .fl-ic {
  width: 72px;
  height: 72px;
  border: 1.5px solid var(--h-ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--h-ink);
  box-shadow: -6px 6px 0 0 var(--h-ink);
  transition: color 0.4s;
  /* each lights as the line (2.4s, after 0.3s) reaches it */
  transition-delay: calc(0.3s + var(--s) * 0.4s);
}
/* the colour, 62% of the plate, set a little up and to the left */
.page .fl-ic::before {
  content: '';
  position: absolute;
  inset: 16% 22% 22% 16%;
  border-radius: 50%;
  background: var(--tone);
  transform: scale(0);
  transition: transform 0.6s var(--ease-out);
  transition-delay: inherit;
}
.page .fl-ic svg {
  position: relative;
  width: 26px;
  height: 26px;
}
.page .flow.in .fl-ic,
.page .flow.in .fl-step:last-child .fl-ic {
  border-color: var(--h-ink);
  color: var(--h-ink);
  box-shadow: -6px 6px 0 0 var(--h-ink);
  transform: none;
}
/* white on the cobalt steps */
.page .flow.in .fl-step:nth-child(3n + 2) .fl-ic {
  color: #fff;
}
.page .flow.in .fl-ic::before {
  transform: scale(1);
}
.page .fl-n {
  margin-top: 4px;
  font-family: var(--f-mono);
  font-weight: 600;
  color: var(--ink-3);
}
.page .fl-step h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--h-ink);
}
.page .flow.in .fl-packet {
  animation-name: flPacket;
}
@keyframes flPacket {
  0% {
    left: var(--edge);
    opacity: 0;
  }
  8%,
  90% {
    opacity: 1;
  }
  100% {
    left: calc(100% - var(--edge));
    opacity: 0;
  }
}
.page .fl-step p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Built for growing businesses: flat white cards with a hairline, lifting onto the flat ink shadow;
   each icon a white disc with an ink edge whose accent takes a pillar colour in turn, and which
   fills with that colour as the card is picked */
.page .dg-ben {
  --tone: var(--p-secure);
  border-color: var(--home-line);
  border-radius: 4px;
  background: var(--paper);
  transition:
    border-color 0.3s,
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}
.page .dg-ben:nth-child(3n + 2) {
  --tone: var(--p-smart);
}
.page .dg-ben:nth-child(3n + 3) {
  --tone: var(--p-scale);
}
.page .dg-ben:hover {
  border-color: var(--h-ink);
  box-shadow: 4px 4px 0 0 var(--h-ink);
  transform: translate(-2px, -2px);
}
.page .dg-ben .mod-icon,
.page .dg-ben:nth-child(2n) .mod-icon {
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--h-ink);
  background: var(--paper);
  color: var(--h-ink);
  transition:
    background-color 0.3s,
    color 0.3s;
}
.page .dg-ben .mod-icon .ac {
  stroke: var(--tone);
  transition: stroke 0.3s;
}
.page .dg-ben:hover .mod-icon {
  background: var(--tone);
  transform: none;
}
.page .dg-ben:hover .mod-icon .ac {
  stroke: currentColor;
}
.page .dg-ben:nth-child(3n + 1):hover .mod-icon {
  color: var(--paper);
}
.page .dg-ben h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--h-ink);
}

/* ============ CASE STUDY: the flows' inner boxes, in the home theme ============ */
/* Each step a flat white box with a hairline and square corners. Before: muted, its icon a grey
   outline disc, joined by grey dashes. With Dji Setu: in ink, each icon filled with a pillar colour
   in turn (cobalt, orange, periwinkle), joined by ink dashes that run, with an ink packet */
.page .cf-steps li {
  border-color: var(--home-line);
  border-radius: 4px;
  box-shadow: none;
}
.page .cf-steps b {
  font-weight: 700;
  color: var(--h-ink);
}
.page .before .cf-steps b {
  color: var(--ink-2);
}
.page .cf-steps li > span:last-child {
  color: var(--ink-3);
}
.page .cf-ic {
  width: 42px;
  height: 42px;
}
.page .before .cf-ic {
  border: 1px solid var(--home-line);
  background: var(--paper);
  color: #8c96b2;
}
.page .after .cf-steps li {
  --tone: var(--p-secure);
  border-color: var(--home-line);
  box-shadow: none;
}
.page .after .cf-steps li:nth-child(3n + 2) {
  --tone: var(--p-smart);
}
.page .after .cf-steps li:nth-child(3n + 3) {
  --tone: var(--p-scale);
}
.page .after .cf-ic {
  border: 1.5px solid var(--h-ink);
  background: var(--tone);
  color: var(--h-ink);
  box-shadow: -3px 3px 0 0 var(--h-ink);
}
.page .after .cf-steps li:nth-child(3n + 1) .cf-ic {
  color: var(--paper);
}
.page .after .cf-steps li > span:last-child {
  font-weight: 600;
  color: var(--ink-2);
}
.page .after .cf-steps li + li::before {
  background-image: linear-gradient(90deg, var(--h-ink) 50%, transparent 0);
}
.page .after .cf-steps li + li::after {
  border-color: var(--h-ink);
}
.page .cf-packet {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--h-ink);
  filter: none;
}
.page .cf-stage .cf-label {
  color: var(--ink-3);
}
.page .cf-stage.after .cf-label {
  color: var(--h-ink);
}

/* ============ CASE STUDY: the solution cards and screens, in the home theme ============ */
/* As the product page's benefit cards: flat white with a hairline, lifting onto the flat ink
   shadow; the number small in mono, top right; each icon a white disc with an ink edge, its accent
   in a pillar colour in turn, filling with that colour as the card is picked */
.page .sol {
  --tone: var(--p-secure);
}
.page .sol:nth-child(3n + 2) {
  --tone: var(--p-smart);
}
.page .sol:nth-child(3n + 3) {
  --tone: var(--p-scale);
}
.js .page .sol.reveal.done {
  transition:
    border-color 0.3s,
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}
.js .page .sol.reveal.done:hover,
.page .sol:hover {
  border-color: var(--h-ink);
  box-shadow: 4px 4px 0 0 var(--h-ink);
  transform: translate(-2px, -2px);
}
.page .sol-n {
  top: 22px;
  right: 24px;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  -webkit-text-stroke: 0;
}
.page .sol-ic {
  width: 52px;
  height: 52px;
  transition:
    background-color 0.3s,
    color 0.3s;
}
.page .sol-ic svg {
  stroke-width: 1.6;
}
.page .sol:hover .sol-ic {
  background: var(--tone);
  transform: none;
}
.page .sol:nth-child(3n + 1):hover .sol-ic {
  color: var(--paper);
}
.page .sol h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--h-ink);
}
/* the screens: square corners, a hairline, and the flat ink shadow instead of a soft one */
.page .shot-frame {
  border-color: var(--h-ink);
  border-radius: 4px;
  box-shadow: 6px 6px 0 0 var(--h-ink);
}
.page .sol-ic .ac {
  stroke: var(--tone);
  transition: stroke 0.3s;
}
.page .sol:hover .sol-ic .ac {
  stroke: currentColor;
}

/* ============ ABOUT: the cards, in the home theme ============ */
/* the numbers: as the home page's row under the hero, no tinted cards and no stagger, each its
   line icon (its accent in a pillar colour), the figure in ink, and the label after a dot in that
   colour */
.page .stat-card {
  --tone: var(--p-secure);
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
  transform: none;
}
.page .stat-card:nth-child(2) {
  --tone: var(--p-smart);
}
.page .stat-card:nth-child(3) {
  --tone: var(--p-scale);
}
.page .stat-card:hover {
  box-shadow: none;
  transform: none;
}
.page .stat-icon {
  margin: 0 auto 18px;
  stroke: var(--h-ink);
  stroke-width: 1.5;
}
.page .stat-icon .ac {
  stroke: var(--tone);
}
.page .stat-num {
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.03em;
  color: var(--h-ink);
}
.page .stat-num em {
  color: var(--h-ink);
}
.page .stat-card .stat-label {
  max-width: none;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}
.page .stat-card .stat-label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  vertical-align: 0.1em;
  border-radius: 50%;
  background: var(--tone);
}

/* the values and the ways to work: flat white cards with a hairline, lifting onto the flat ink
   shadow; the number small in mono; each icon a white disc with an ink edge, its accent in a
   pillar colour in turn, filling with that colour as the card is picked */
.page :is(.ab-val, .engage li) {
  --tone: var(--p-secure);
  border: 1px solid var(--home-line);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: none;
  transition:
    border-color 0.3s,
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}
.page :is(.ab-val, .engage li):nth-child(3n + 2) {
  --tone: var(--p-smart);
}
.page :is(.ab-val, .engage li):nth-child(3n + 3) {
  --tone: var(--p-scale);
}
.page :is(.ab-val, .engage li):hover,
.js .page :is(.ab-val, .engage li).reveal.done:hover {
  border-color: var(--h-ink);
  box-shadow: 4px 4px 0 0 var(--h-ink);
  transform: translate(-2px, -2px);
}
.page .ab-val::before {
  display: none;
}
.page .ab-val .n {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.page :is(.ab-val-ic, .engage .mod-icon) {
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--h-ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--h-ink);
  transition:
    background-color 0.3s,
    color 0.3s;
}
.page :is(.ab-val-ic, .engage .mod-icon) .ac {
  stroke: var(--tone);
  transition: stroke 0.3s;
}
.page :is(.ab-val, .engage li):hover :is(.ab-val-ic, .mod-icon) {
  background: var(--tone);
  transform: none;
}
.page :is(.ab-val, .engage li):hover :is(.ab-val-ic, .mod-icon) .ac {
  stroke: currentColor;
}
.page :is(.ab-val, .engage li):nth-child(3n + 1):hover :is(.ab-val-ic, .mod-icon) {
  color: var(--paper);
}
.page :is(.ab-val, .engage li) h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--h-ink);
}
.page .engage .best {
  border-color: var(--home-line);
  color: var(--h-ink);
}

/* ============ THEME: the light/dark switch, and the dark theme's own touches ============ */
/* the switch (ThemeToggle.tsx): a round glass button like the menu button, a moon in the light
   theme and a sun in the dark one, turning a little as it is pointed at */
.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(238, 242, 252, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-ink);
  cursor: pointer;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.site-header.solid .theme-toggle {
  border-color: rgba(11, 19, 54, 0.16);
  background: rgba(255, 255, 255, 0.6);
  color: var(--h-ink);
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: currentColor;
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s var(--ease-out);
}
.theme-toggle:hover svg {
  transform: rotate(-20deg);
}
.tt-sun,
:root[data-theme='dark'] .tt-moon {
  display: none;
}
:root[data-theme='dark'] .tt-sun {
  display: block;
}
:root[data-theme='dark'] .theme-toggle:hover svg {
  transform: rotate(45deg);
}

/* the dark theme: the mega menu's tinted parts, the map's streets, the hero mark's links, and the
   client logos (light on the dark page, their own colours on hover) */
:root[data-theme='dark'] .dropdown.mega .mm-cat-link {
  background: #121a3b;
}
:root[data-theme='dark'] .dropdown.mega .mm-cat-link:hover {
  background: #19224a;
}
:root[data-theme='dark'] .dropdown.mega .mm-cat.on > .mm-cat-link {
  background: var(--h-ink);
  color: var(--paper);
}
:root[data-theme='dark'] .mm-feature {
  background: #0f1530;
}
:root[data-theme='dark'] .bm {
  --bm-line: #1c2446;
  --bm-street: #151c3a;
  --bm-block: #111836;
  --bm-river: #13204f;
}
:root[data-theme='dark'] .yc-links line {
  stroke: #3a4570;
}
:root[data-theme='dark'] :is(.home, .page) .client.logo img {
  filter: grayscale(1) invert(1) brightness(1.4);
  opacity: 0.7;
}
:root[data-theme='dark'] :is(.home, .page) .client.logo:hover img {
  filter: invert(1) hue-rotate(180deg) brightness(1.2);
  opacity: 1;
}
/* the pillar cards keep dark type on their orange and periwinkle once the colour is in */
:root[data-theme='dark'] .pl-card {
  color: color-mix(in srgb, #0b1336 calc(var(--fill) * 100%), var(--h-ink));
}

/* the technology sphere's logos sit on pale discs, so dark marks still read */
:root[data-theme='dark'] .tsph-node img {
  background: #e9edfb;
}

/* the dark theme on the inner pages: filled step markers take paper type on their ink, the
   "before" card is plain paper, the release checklist stays a dark panel, and the about mark keeps
   a pale plate so its navy piece still shows */
.page .steps.in .step-n {
  color: var(--paper);
}
.page .ba-card.before {
  background: var(--paper);
}
:root[data-theme='dark'] .page .console {
  background: #141c3f;
}
:root[data-theme='dark'] .page .holo-core {
  background: #e9edfb;
}
.page .cf-base {
  color: var(--paper);
}
/* form fields on the dark paper */
:root[data-theme='dark'] .page :is(.field input, .field select, .field textarea) {
  border-color: var(--home-line);
  background: #0f1530;
  color: var(--h-ink);
}

/* the map's routes a little stronger on the dark paper, so they read as pale lines */
:root[data-theme='dark'] .bm-route {
  stroke-opacity: 0.55;
}

/* the product hero's halftone dissolves into the next section, so no hairline between them */
.page .page-hero.dg-hero {
  border-bottom: 0;
}

/* the hero orbit's accounting stop, picked out in orange: its icon, and the flat offset shadow */
.page .orb.acct .orb-in {
  color: #d97f00;
  box-shadow: 3px 3px 0 0 var(--p-smart);
}

/* below 1100px the seven steps sit four, then two, to a row, without the line */
@media (max-width: 1100px) {
  .page .flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 36px;
  }
  .page .flow::before,
  .page .flow::after,
  .page .fl-packet {
    display: none;
  }
}
@media (max-width: 960px) {
  .page .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* while the reviews sit still in one row nothing needs clipping, so a lifted card's border and
   shadow show in full at both ends (the drifting rows on phones still clip) */
@media (min-width: 641px) {
  .rw-still .rw-row {
    overflow: visible;
  }
}

/* phones: the logo, the theme switch, and the menu button share a narrow bar, so the bar's gaps
   and padding tighten and the logo and buttons come down a size, keeping everything inside it */
@media (max-width: 480px) {
  .header-inner {
    gap: 8px;
    padding: 0 6px 0 14px;
  }
  .brand {
    gap: 9px;
  }
  .brand-mark {
    width: 36px;
  }
  .brand-names {
    width: 128px;
    height: 11.5px;
  }
  .brand-name {
    height: 11.5px;
  }
  .theme-toggle {
    width: 40px;
    height: 40px;
  }
  .menu-toggle {
    height: 40px;
    padding: 0 15px;
  }
}
@media (max-width: 350px) {
  .header-inner {
    gap: 6px;
  }
  .menu-toggle {
    padding: 0 12px;
  }
  .brand-names {
    width: 108px;
    height: 9.7px;
  }
  .brand-name {
    height: 9.7px;
  }
}

/* below 960px the steps stack into a vertical timeline: each number down the left, the line
   drawing down through them, and each number filling as the line reaches it */
@media (max-width: 960px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }
  .steps::before,
  .steps::after {
    left: 19px;
    right: auto;
    top: 20px;
    bottom: 20px;
    width: 2px;
    height: auto;
  }
  .steps::after {
    transform: scaleY(0);
    transform-origin: top;
  }
  .steps.in::after {
    transform: scaleY(1);
  }
  .step {
    padding-left: 62px;
  }
  .step-n {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
  }
  .step .step-k {
    margin-top: 0;
  }
  /* the larger icon markers, centred on the line too */
  .step-n-ic {
    left: -4px;
  }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .steps::after {
    transform: none;
    transition: none;
  }
}

/* a product's name keeps its own case inside labels set in capitals ("Dji Setu", never "DJI SETU") */
.name-case {
  text-transform: none;
}

/* ============ HOME: the pillars, each drawn as its own symbol with the content inside ============ */
/* (Pillars.tsx) a shield for Secure, a laptop for Smart, a server block on a rising stack for
   Scalable: outlined in the pillar colour over a light tint of it, no solid block. With the
   journey on, the drawing comes up (--fill) as the symbol carried down from its circle lands on
   the small symbol at the top */
.pl-card {
  --tint: color-mix(in srgb, var(--tone) 7%, var(--paper));
  min-height: 0;
  overflow: visible;
  color: var(--h-ink);
}
.pl-card::before {
  display: none;
}
.pl-card.t-secure,
:root[data-theme='dark'] .pl-card.pl-card {
  color: var(--h-ink);
}
.pl-shape {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--fill);
}
.pl-shape svg {
  position: absolute;
  overflow: visible;
}
.pl-shape :is(path, rect) {
  fill: var(--tint);
  stroke: var(--tone);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pl-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/* the small symbol at the top, where the one carried from the circle lands */
.pl-in .pl-art {
  width: auto;
  margin: 0 0 16px;
  padding: 0;
}
.pl-in .pl-art svg {
  width: clamp(96px, 8.6vw, 124px);
  max-width: none;
}
.pl-in .pl-art :is(path, rect, circle, line) {
  stroke: var(--h-ink);
  stroke-width: 1.4px;
  vector-effect: non-scaling-stroke;
}
.pl-in .pl-art .mask {
  fill: var(--tint);
}
.pl-in .pl-art .key {
  fill: var(--tone);
}
.pl-in .pl-art text {
  display: none;
}
/* Secure: a shield; the text keeps to its broad upper part, clear of the point */
.pl-card.t-secure {
  padding: clamp(52px, 4.6vw, 68px) 13% clamp(112px, 10vw, 150px);
}
.pl-frame:is(svg) {
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Smart: a laptop screen with its window bar, the deck below */
.pl-card.t-smart {
  padding: clamp(66px, 5.6vw, 78px) 11% clamp(92px, 7.4vw, 108px);
}
.pl-screen,
.pl-block {
  position: absolute;
  border: 1.5px solid var(--tone);
  border-radius: 16px;
  background: var(--tint);
}
.pl-screen {
  inset: 0 4% 36px;
}
.pl-screen::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 38px;
  border-top: 1.5px solid var(--tone);
}
.pl-screen i {
  position: absolute;
  top: 14px;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--tone);
  border-radius: 50%;
}
.pl-screen i:nth-child(1) {
  left: 18px;
}
.pl-screen i:nth-child(2) {
  left: 33px;
}
.pl-screen i:nth-child(3) {
  left: 48px;
}
.pl-deck {
  left: 0;
  right: 0;
  bottom: 10px;
  width: 100%;
  height: 26px;
}
/* Scalable: a server block with its status lights, on blocks stacking up towards it */
.pl-card.t-scale {
  padding: clamp(52px, 4.6vw, 68px) 11% clamp(128px, 10.4vw, 148px);
}
.pl-block {
  inset: 0 0 96px;
}
.pl-block::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 24px;
  width: 56px;
  border-top: 1.5px solid var(--tone);
}
.pl-block i {
  position: absolute;
  right: 22px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--tone);
  border-radius: 50%;
}
.pl-block i:nth-child(1) {
  top: 14px;
}
.pl-block i:nth-child(2) {
  top: 30px;
}
.pl-steps {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 84px;
}