/* ═══════════════════════════════════════════════════════════════════════════
   TECH-X — SITE
   Marketing surface components. Tokens come from core.css; nothing here
   carries a raw colour.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════ 1. HEADER ═══ */

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  /* The bar never moves, so it never needs a transform transition or a
     promoted layer — both were paid for on every scrolled frame. */
  transition: background var(--d-slow) var(--ease-soft),
              border-color var(--d-slow) var(--ease-soft);
}

/* Only once the page has moved does the bar acquire material.

   No backdrop-filter here. Now that the bar is pinned it is on screen for
   every frame of every scroll, and the strip behind it changes constantly —
   so its blur was the one effect on the page that could never be cached and
   had to be recomputed from scratch on each frame. --glass-strong is already
   86% opaque, so at that alpha the blur contributed very little; going a few
   points more opaque reads the same and costs nothing. The genuinely glassy
   surfaces (dropdown, drawer, cards) keep their blur — those only render
   while the reader is interacting with them.

   It is fully opaque rather than merely near-opaque: without a blur behind
   it, headings sliding underneath ghosted through as sharp, legible text,
   which reads as a glitch rather than as glass. */
html.is-past .navbar,
.navbar.is-solid {
  background: var(--nav-solid);
  border-bottom-color: var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  width: 100%;
}

/* ── Logo — the mark rotates between code and craft ───────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  margin-right: auto;
}
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--iris-400), var(--iris-700));
  color: #fff;
  box-shadow: 0 8px 22px -10px var(--iris-500);
  overflow: hidden;
  flex: none;
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-out);
}
.brand:hover .brand-mark::after { transform: translateX(120%); }

.brand-text {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.brand-text span { color: var(--brand); }

/* ── Links ────────────────────────────────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
@media (max-width: 1100px) { .nav-links { display: none; } }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--d-fast) var(--ease-soft),
              background var(--d-fast) var(--ease-soft);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }
.nav-link.is-current { color: var(--ink); }
.nav-link.is-current::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}
.nav-link .i { width: 14px; height: 14px; transition: transform var(--d-base) var(--ease-out); }
.nav-link[aria-expanded="true"] .i { transform: rotate(180deg); }

/* ── Mega dropdown ────────────────────────────────────────────────────── */
.nav-drop { position: relative; }

.nav-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: min(560px, 88vw);
  padding: var(--s-4);
  transform: translate(-50%, 10px);
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              visibility var(--d-base);
}
.nav-drop.is-open .nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
@media (max-width: 620px) { .nav-panel-grid { grid-template-columns: 1fr; } }

.nav-panel-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  transition: background var(--d-fast) var(--ease-soft);
}
.nav-panel-item:hover { background: var(--surface-2); }
.nav-panel-item .dot { margin-top: 7px; }
.nav-panel-item strong {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1px;
}
.nav-panel-item span { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.45; }

.nav-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-2);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* ── Nav actions ──────────────────────────────────────────────────────── */
.nav-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  color: var(--ink-2);
  border: 1px solid transparent;
  transition: all var(--d-fast) var(--ease-soft);
}
.icon-btn:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line); }

.theme-toggle .i-sun  { display: none; }
[data-theme="dark"] .theme-toggle .i-sun  { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }

.menu-toggle { display: none; }
@media (max-width: 1100px) { .menu-toggle { display: grid; } }

.menu-toggle-bars { position: relative; width: 18px; height: 12px; }
.menu-toggle-bars span {
  position: absolute;
  left: 0; right: 0;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--d-base) var(--ease-out), opacity var(--d-fast);
}
.menu-toggle-bars span:nth-child(1) { top: 0; }
.menu-toggle-bars span:nth-child(2) { top: 5.2px; }
.menu-toggle-bars span:nth-child(3) { top: 10.4px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); }

/* ── Mobile drawer ────────────────────────────────────────────────────── */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + var(--s-5)) var(--gutter) var(--s-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: circle(0% at calc(100% - 44px) 40px);
  visibility: hidden;
  transition: clip-path 620ms var(--ease-out), visibility 620ms;
}
.drawer.is-open { clip-path: circle(150% at calc(100% - 44px) 40px); visibility: visible; }
body.projectunite-notification-visible .drawer { padding-top: calc(var(--nav-h) + 50px + var(--s-5)); }

.drawer-nav { display: grid; gap: 2px; }

.drawer-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  padding: 0 var(--s-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}
.drawer.is-open .drawer-link { opacity: 1; transform: none; }
.drawer-link .i { color: var(--ink-3); margin-left: auto; }
.drawer-sub {
  display: grid;
  gap: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 460ms var(--ease-out);
}
.drawer-sub.is-open { max-height: 420px; }
.drawer-sub a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  padding-left: var(--s-5);
  font-size: var(--t-sm);
  font-family: var(--font-body);
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.drawer-foot {
  margin-top: auto;
  padding-top: var(--s-7);
  display: grid;
  gap: var(--s-3);
}
.drawer-contact { display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-3); }
.drawer-contact a { display: flex; align-items: center; gap: var(--s-2); }

body.no-scroll, html.no-scroll { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════ 2. HERO ═══ */

.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + var(--s-9));
  padding-bottom: var(--s-10);
  overflow: clip;
  isolation: isolate;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.hero-canvas .aurora--a { width: 62vw; height: 62vw; top: -22%; left: -12%; }
.hero-canvas .aurora--b { width: 48vw; height: 48vw; top: 12%;  right: -14%; animation-delay: -9s; }
.hero-canvas .aurora--c { width: 40vw; height: 40vw; bottom: -20%; left: 34%;  animation-delay: -17s; }

/* The photo bed cross-fades with the active service */
.hero-plates { position: absolute; inset: 0; z-index: -3; }
.hero-plate {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s var(--ease-soft), transform 8s linear;
  filter: saturate(.55);
}
.hero-plate.is-active { opacity: .16; transform: scale(1); }
[data-theme="light"] .hero-plate.is-active { opacity: .1; }
.hero-plates::after { content: ''; position: absolute; inset: 0; background: var(--scrim); }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--s-9); align-items: center; }
@media (max-width: 1080px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); } }

.hero-copy { display: grid; gap: var(--s-5); justify-items: start; }

.hero-title {
  font-size: var(--t-hero);
  /* Was 0.96 with -0.045em: lines overlapped and the tracking pulled the
     words into each other. Anything below 1 needs a reason. */
  line-height: 1.05;
  letter-spacing: -0.022em;
  word-spacing: 0.05em;
  font-weight: 600;
  text-wrap: balance;
}
/* Only the width hint belongs here. This selector outranks [data-rotator],
   so setting display/position again overrode the inline-grid that stacks the
   five service words in one cell — they fell back to static blocks and the
   rotator grew to five lines tall, tearing the headline apart. */
.hero-title .rotator {
  min-width: 5ch;
}
.hero-lede { font-size: var(--t-md); line-height: 1.7; color: var(--ink-2); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Live service ticker — five dots, one lit */
.hero-services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 6px;
  border-radius: var(--r-full);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.hero-service {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  transition: all var(--d-base) var(--ease-out);
}
.hero-service:hover { color: var(--ink-2); background: var(--surface-2); }
.hero-service.is-active { color: var(--ink); background: var(--surface-2); box-shadow: var(--sh-1); }

/* ── Hero side: the live "delivery board" ─────────────────────────────── */
.hero-board {
  position: relative;
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--sh-4);
  display: grid;
  gap: var(--s-4);
}
.hero-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.hero-board-title { display: grid; gap: 2px; }
.hero-board-title strong { font-family: var(--font-display); font-size: var(--t-base); font-weight: 600; }
.hero-board-title span { font-size: var(--t-xs); color: var(--ink-3); }

.board-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.board-row:last-of-type { border-bottom: 0; }
.board-row-name { display: grid; gap: 3px; min-width: 0; }
.board-row-name strong { font-size: var(--t-sm); font-weight: 600; }
.board-row-name span { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); }
.board-row .meter { width: 100%; }

.hero-board-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* Floating stat chips around the board */
.hero-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 14px;
  border-radius: var(--r-full);
  background: var(--glass-strong);
  border: 1px solid var(--line-2);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--sh-3);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}
.hero-chip--a { top: -18px; left: -22px; }
.hero-chip--b { bottom: -20px; right: -16px; }
@media (max-width: 520px) { .hero-chip { display: none; } }

/* ── Trust strip ──────────────────────────────────────────────────────── */
.trust {
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (max-width: 780px) { .trust { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }

.trust-item { display: grid; gap: 4px; }
.trust-num {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
}
.trust-label { font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .02em; }

/* ═════════════════════════════════════════════════════════ 3. SERVICES ═══ */

.svc-list { display: grid; gap: 0; border-top: 1px solid var(--line); }

/* Each service is a full-width row that opens on hover/focus — the editorial
   index pattern, far calmer than five identical cards. */
.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.15fr) auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-3);
  border-bottom: 1px solid var(--line);
  transition: background var(--d-base) var(--ease-soft),
              padding var(--d-base) var(--ease-out);
  isolation: isolate;
}
.svc-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--svc-c) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease-soft);
}
.svc-row:hover::before, .svc-row:focus-within::before { opacity: .07; }
.svc-row:hover, .svc-row:focus-within { padding-left: var(--s-5); }

.svc-index {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--ink-4);
}
.svc-name {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.svc-name .i-tile {
  --tile-bg: color-mix(in srgb, var(--svc-c) 14%, transparent);
  --tile-fg: var(--svc-c);
  border-color: color-mix(in srgb, var(--svc-c) 22%, transparent);
}
.svc-row:hover .i-tile { transform: translateY(-3px) rotate(-4deg); }

.svc-desc { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.65; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.svc-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.svc-go {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  transition: all var(--d-base) var(--ease-out);
}
.svc-row:hover .svc-go {
  background: var(--svc-c);
  border-color: transparent;
  color: #fff;
  transform: rotate(-45deg);
}

@media (max-width: 980px) {
  .svc-row { grid-template-columns: 1fr auto; gap: var(--s-4); padding-inline: 0; }
  .svc-index { display: none; }
  .svc-desc { grid-column: 1 / -1; }
  .svc-row:hover { padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════ 4. SOLUTIONS ═══ */

.pack {
  position: relative;
  display: grid;
  gap: var(--s-5);
  padding: var(--s-7);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.pack:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: var(--sh-3); }

.pack--featured {
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border-color: var(--brand-ring);
  box-shadow: var(--sh-brand);
}
.pack--featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--iris-400), var(--aurum-400), transparent);
}

.pack-flag {
  position: absolute;
  top: var(--s-5); right: var(--s-5);
}
.pack-head { display: grid; gap: var(--s-2); padding-right: 90px; }
.pack-name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; }
.pack-for  { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

.pack-price { display: flex; align-items: baseline; gap: var(--s-2); }
.pack-price b {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}
.pack-price span { font-size: var(--t-xs); color: var(--ink-3); }

.pack-list { display: grid; gap: var(--s-3); }
.pack-list li { display: flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; max-width: none; }
.pack-list .i { color: var(--ok-500); margin-top: 2px; width: 16px; height: 16px; }

.pack-stack { display: flex; gap: 6px; flex-wrap: wrap; }
.pack-stack .dot { width: 7px; height: 7px; }

/* ═════════════════════════════════════════════════════════ 5. PROCESS ═══ */

.process {
  position: relative;
  display: grid;
  gap: var(--s-6);
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--s-6);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }

.step-num {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  transition: color var(--d-slow) var(--ease-out), -webkit-text-stroke-color var(--d-slow);
  line-height: 1;
}
.step:hover .step-num, .step.is-in .step-num { color: var(--brand); -webkit-text-stroke-color: transparent; }

.step-body { display: grid; gap: var(--s-3); }
.step-title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; }
.step-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--t-xs); color: var(--ink-3); }
.step-meta span { display: inline-flex; align-items: center; gap: 6px; }

.step-deliverables { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 700px) {
  .step { grid-template-columns: 1fr; gap: var(--s-3); }
  .step-num { font-size: var(--t-xl); }
}

/* ═══════════════════════════════════════════════════════ 6. PORTFOLIO ═══ */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 6px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  width: fit-content;
  max-width: 100%;
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  transition: all var(--d-base) var(--ease-out);
}
.filter-btn:hover { color: var(--ink); }
.filter-btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: var(--s-5);
}

.work {
  position: relative;
  display: grid;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              opacity 380ms var(--ease-out);
}
.work:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--line-2); }
.work.is-hidden { display: none; }

.work-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
.work-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out), filter var(--d-slow) var(--ease-soft);
  filter: saturate(.82);
}
.work:hover .work-media img { transform: scale(1.06); filter: saturate(1); }
.work-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4,4,10,.72));
  opacity: .9;
}

.work-tag {
  position: absolute;
  top: var(--s-4); left: var(--s-4);
  z-index: 2;
}
.work-open {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line-2);
  color: var(--ink);
  opacity: 0;
  transform: scale(.85);
  transition: all var(--d-base) var(--ease-back);
}
.work:hover .work-open { opacity: 1; transform: scale(1); }

.work-body { padding: var(--s-5); display: grid; gap: var(--s-3); }
.work-title { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; letter-spacing: -0.02em; }
.work-desc  { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.6; }
.work-meta  { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: auto; }

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(3, 3, 8, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--ease-out), visibility var(--d-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-inner {
  position: relative;
  width: min(1040px, 100%);
  max-height: 88vh;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  transform: scale(.96) translateY(14px);
  transition: transform var(--d-slow) var(--ease-out);
}
.lightbox.is-open .lightbox-inner { transform: none; }
.lightbox-close {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--glass-strong);
  border: 1px solid var(--line-2);
  color: var(--ink);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.lightbox-media { aspect-ratio: 16 / 9; background: var(--surface-2); }
.lightbox-media img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-body { padding: var(--s-7); display: grid; gap: var(--s-4); }

/* ═════════════════════════════════════════════════════ 7. TECH STACK ═════ */

.stack-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--s-7);
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
}
@media (max-width: 900px) { .stack-shell { grid-template-columns: 1fr; } }

.stack-nav { display: grid; gap: 4px; align-content: start; }
.stack-nav-btn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-3);
  text-align: left;
  transition: all var(--d-base) var(--ease-out);
}
.stack-nav-btn:hover { color: var(--ink); background: var(--surface-2); }
.stack-nav-btn.is-active {
  color: var(--ink);
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 var(--svc-c, var(--brand));
}
.stack-nav-btn .i { margin-left: auto; opacity: 0; transition: opacity var(--d-fast); }
.stack-nav-btn.is-active .i { opacity: 1; }

.stack-panel { display: none; gap: var(--s-5); }
.stack-panel.is-active { display: grid; animation: panel-in 520ms var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.stack-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.stack-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-2);
  transition: all var(--d-base) var(--ease-out);
}
.stack-chip:hover {
  transform: translateY(-2px);
  border-color: var(--svc-c, var(--brand));
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════ 8. TESTIMONIALS ═══ */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(420px, 84vw);
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: var(--s-4);
  -webkit-overflow-scrolling: touch;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 4px; }

.quote-card {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-7);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  align-content: start;
}
.quote-mark { color: var(--brand); opacity: .5; }
.quote-text { font-size: var(--t-md); line-height: 1.65; color: var(--ink); max-width: none; }
.quote-attrib { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.quote-attrib strong { display: block; font-size: var(--t-sm); font-weight: 600; }
.quote-attrib span { font-size: var(--t-xs); color: var(--ink-3); }
.quote-stars { display: flex; gap: 3px; color: var(--aurum-400); }
.quote-stars .i { width: 14px; height: 14px; fill: currentColor; stroke: none; }

.quote-result {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--ok-bg);
  color: var(--ok-500);
  font-size: var(--t-xs);
  font-weight: 600;
}

/* ═════════════════════════════════════════════════════════ 9. PRICING ═══ */

.tier {
  position: relative;
  display: grid;
  gap: var(--s-5);
  padding: var(--s-7);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  align-content: start;
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.tier:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.tier--best { border-color: var(--brand-ring); box-shadow: var(--sh-brand); }
.tier-head { display: grid; gap: var(--s-2); }
.tier-name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; }
.tier-desc { font-size: var(--t-sm); color: var(--ink-3); }
.tier-price { display: flex; align-items: baseline; gap: 6px; }
.tier-price b { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.012em; font-variant-numeric: tabular-nums; }
.tier-price span { font-size: var(--t-xs); color: var(--ink-3); }
.tier-list { display: grid; gap: var(--s-3); }
.tier-list li { display: flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); max-width: none; }
.tier-list .i { color: var(--brand); margin-top: 3px; width: 15px; height: 15px; }

/* Payment terms strip — the upfront-fee promise, stated in the open */
.terms-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--s-5);
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--gold-soft), transparent 60%);
  border: 1px solid var(--line);
}
.terms-item { display: grid; gap: var(--s-2); }
.terms-item strong {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--gold);
}
.terms-item span { font-size: var(--t-sm); color: var(--ink-2); }

/* ═════════════════════════════════════════════════════════ 10. INQUIRY ═══ */

.inquiry-shell {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--s-9);
  align-items: start;
}
@media (max-width: 980px) { .inquiry-shell { grid-template-columns: 1fr; gap: var(--s-7); } }

.inquiry-aside { display: grid; gap: var(--s-6); position: sticky; top: calc(var(--nav-h) + var(--s-6)); }
@media (max-width: 980px) { .inquiry-aside { position: static; } }

.contact-line {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: all var(--d-base) var(--ease-out);
}
.contact-line:hover { border-color: var(--brand); transform: translateX(4px); }
.contact-line-body { display: grid; gap: 1px; min-width: 0; }
.contact-line-body span { font-size: var(--t-xs); color: var(--ink-3); }
.contact-line-body strong { font-size: var(--t-sm); font-weight: 600; word-break: break-word; }

.form-card {
  display: grid;
  gap: var(--s-5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .span-2 { grid-column: 1 / -1; }

.dropzone {
  display: grid;
  place-items: center;
  gap: var(--s-2);
  padding: var(--s-6);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  transition: all var(--d-base) var(--ease-out);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone .i { color: var(--ink-3); }
.dropzone.is-over .i, .dropzone:hover .i { color: var(--brand); }
.dropzone-text { font-size: var(--t-sm); color: var(--ink-2); }
.dropzone-hint { font-size: var(--t-xs); color: var(--ink-4); }

.form-status {
  display: none;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.form-status.is-shown { display: flex; }
.form-status--ok  { background: var(--ok-bg);  color: var(--ok-500); }
.form-status--err { background: var(--err-bg); color: var(--err-500); }

/* ═══════════════════════════════════════════════════════════ 11. FAQ ═════ */

.faq { display: grid; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  padding: var(--s-5) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--ink);
  transition: color var(--d-fast) var(--ease-soft);
}
.faq-q:hover { color: var(--brand); }
.faq-q .i {
  flex: none;
  color: var(--ink-3);
  transition: transform var(--d-base) var(--ease-out), color var(--d-base);
}
.faq-item.is-open .faq-q .i { transform: rotate(45deg); color: var(--brand); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms var(--ease-out);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner > div { padding-bottom: var(--s-5); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.75; max-width: 74ch; }

/* ═════════════════════════════════════════════════════════ 12. CTA BAND ══ */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  background: linear-gradient(150deg, var(--iris-700) 0%, var(--iris-600) 40%, var(--iris-800) 100%);
  color: #fff;
  isolation: isolate;
  text-align: center;
  display: grid;
  gap: var(--s-5);
  justify-items: center;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 80% at 15% 0%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(50% 70% at 90% 100%, rgba(228,188,118,.28), transparent 65%);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.78); max-width: 56ch; }
.cta-band .btn--solid { --btn-bg: #fff; --btn-fg: var(--iris-700); }
.cta-band .btn--ghost { --btn-fg: #fff; --btn-line: rgba(255,255,255,.35); }
.cta-band .btn--ghost:hover { --btn-bg: rgba(255,255,255,.12); --btn-line: rgba(255,255,255,.6); }

/* ══════════════════════════════════════════════════════════ 13. FOOTER ═══ */

.site-footer {
  position: relative;
  margin-top: var(--s-11);
  padding-top: var(--s-10);
  border-top: 1px solid var(--line);
  background: var(--canvas-deep);
  overflow: clip;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-8) var(--s-6);
  padding-bottom: var(--s-9);
}
@media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-7); } }

.footer-brand { display: grid; gap: var(--s-4); align-content: start; }
.footer-blurb { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.7; max-width: 40ch; }

.footer-col h3 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--s-4);
}
.footer-col ul { display: grid; gap: var(--s-3); }
.footer-col a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
  transition: color var(--d-fast) var(--ease-soft), transform var(--d-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--ink); transform: translateX(3px); }

.footer-news { display: grid; gap: var(--s-3); }
.footer-news-form { display: flex; gap: var(--s-2); }
.footer-news-form .input { min-height: 46px; }

.socials { display: flex; gap: var(--s-2); }
.social {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  color: var(--ink-3);
  transition: all var(--d-base) var(--ease-out);
}
.social:hover { color: var(--ink); border-color: var(--brand); background: var(--brand-soft); transform: translateY(-3px); }

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--ink-4);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-legal a:hover { color: var(--ink-2); }

/* Oversized wordmark bled into the footer floor */
.footer-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4rem, 15vw, 15rem);
  line-height: .8;
  letter-spacing: -0.055em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  user-select: none;
  padding-bottom: .06em;
  margin-bottom: -.14em;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════ 14. MISC ════ */

/* Page hero for interior pages */
.page-head {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--s-9));
  padding-bottom: var(--s-8);
  overflow: clip;
}
.page-head-inner { display: grid; gap: var(--s-4); max-width: 780px; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--ink-4);
  font-family: var(--font-mono);
}
.crumbs a:hover { color: var(--ink-2); }
.crumbs .i { width: 12px; height: 12px; }

/* Long-form legal / doc body */
.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-9); align-items: start; }
@media (max-width: 900px) { .doc { grid-template-columns: 1fr; gap: var(--s-6); } }

.doc-toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-5));
  display: grid;
  gap: var(--s-1);
  max-height: calc(100vh - var(--nav-h) - var(--s-8));
  overflow-y: auto;
  padding-right: var(--s-2);
}
@media (max-width: 900px) {
  .doc-toc {
    position: static;
    max-height: none;
    padding: var(--s-4);
    background: var(--surface-2);
    border-radius: var(--r-lg);
  }
}
.doc-toc h3 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--s-3);
}
.doc-toc a {
  display: block;
  padding: 7px 12px;
  border-left: 2px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.4;
  transition: all var(--d-fast) var(--ease-soft);
}
.doc-toc a:hover { color: var(--ink-2); border-left-color: var(--line-strong); }
.doc-toc a.is-current { color: var(--brand); border-left-color: var(--brand); background: var(--brand-soft); }

.doc-body { display: grid; gap: var(--s-7); }
.doc-body section { display: grid; gap: var(--s-4); scroll-margin-top: calc(var(--nav-h) + var(--s-6)); }
.doc-body h2 {
  font-size: var(--t-xl);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.doc-body h3 { font-size: var(--t-md); color: var(--ink); margin-top: var(--s-3); }
.doc-body p, .doc-body li { color: var(--ink-2); font-size: var(--t-base); line-height: 1.8; max-width: 74ch; }
.doc-body ul, .doc-body ol { display: grid; gap: var(--s-3); padding-left: var(--s-5); }
.doc-body ul li { list-style: disc; }
.doc-body ol li { list-style: decimal; }
.doc-body ul li::marker, .doc-body ol li::marker { color: var(--brand); }
.doc-body a:not(.btn):not(.link) { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.doc-body strong { color: var(--ink); }
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.doc-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* Logo / client marquee */
.logo-strip { display: flex; align-items: center; gap: var(--s-9); padding-inline: var(--s-6); }
.logo-strip span {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-4);
  white-space: nowrap;
  transition: color var(--d-base) var(--ease-soft);
}
.logo-strip span:hover { color: var(--ink-2); }

/* Toast */
.toast-host {
  position: fixed;
  bottom: var(--s-5); right: var(--s-5);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--s-2);
  max-width: min(380px, calc(100vw - var(--s-8)));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-3);
  font-size: var(--t-sm);
  color: var(--ink);
  pointer-events: auto;
  transform: translateY(16px);
  opacity: 0;
  transition: all var(--d-base) var(--ease-out);
}
.toast.is-in { transform: none; opacity: 1; }
.toast--ok .i  { color: var(--ok-500); }
.toast--err .i { color: var(--err-500); }
.toast--info .i{ color: var(--info-500); }

/* Floating WhatsApp / help pin */
.help-pin {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: calc(var(--z-nav) - 1);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 52px;
  padding: 0 20px 0 16px;
  border-radius: var(--r-full);
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-3);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  transform: translateY(90px);
  opacity: 0;
  transition: all 520ms var(--ease-out);
}
html.is-past .help-pin { transform: none; opacity: 1; }
.help-pin:hover { border-color: var(--sig-mobile); color: var(--sig-mobile); }
.help-pin .i { color: var(--sig-mobile); }
@media (max-width: 560px) {
  .help-pin { padding: 0; width: 52px; justify-content: center; }
  .help-pin span { display: none; }
}

/* 404 */
.notfound {
  min-height: 72svh;
  display: grid;
  place-items: center;
  text-align: center;
  gap: var(--s-5);
}
.notfound-code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 22vw, 16rem);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
}

/* ── Hero rotator — words swap on a mask, the line never reflows ───────── */
[data-rotator] {
  position: relative;
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
[data-rotator] > span {
  grid-area: 1 / 1;
  display: block;
  color: var(--word-c, var(--brand));
  transform: translate3d(0, 104%, 0);
  opacity: 0;
  transition: transform 760ms var(--ease-out), opacity 420ms var(--ease-soft);
  white-space: nowrap;
}
[data-rotator] > span.is-active { transform: none; opacity: 1; }
[data-rotator] > span.is-out { transform: translate3d(0, -104%, 0); opacity: 0; }

[data-rotator] > span[data-service="web"]    { --word-c: var(--sig-web); }
[data-rotator] > span[data-service="mobile"] { --word-c: var(--sig-mobile); }
[data-rotator] > span[data-service="ai"]     { --word-c: var(--sig-ai); }
[data-rotator] > span[data-service="design"] { --word-c: var(--sig-design); }
[data-rotator] > span[data-service="uiux"]   { --word-c: var(--sig-uiux); }