/* vantaindustries.io
   Tokens, the ambient field, layout, frames, the message thread,
   and every scroll state. One family (Geist). No container lines. */

:root {
  --ground: #f4f4f2;
  --ground-2: #ebebe8;
  --ink: #0e0f0e;
  --ink-2: #232423;
  --text: #26272a;
  --text-soft: #5b5c5a;
  --line: #e2e2de;
  --line-strong: #cfcfca;
  --slab: #0b0b0c;
  --slab-2: #17181b;
  --slab-text: #ececea;
  --slab-soft: #a8a9a6;

  /* The spectrum the hero gives back, reused everywhere colour appears. */
  --cobalt: #2749e9;
  --violet: #7b3fe4;
  --rose: #e2417f;
  --amber: #f0a020;
  --teal: #12b5b0;
  --accent: var(--cobalt);
  --focus: 0 0 0 3px rgba(39, 73, 233, 0.30);

  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --w: 1200px;
  --gutter: 24px;
  --section: clamp(88px, 10vw, 144px);

  --r-img: 28px;
  --r-input: 14px;

  --reveal-dur: 1100ms;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-stagger: 200ms;
}
@media (min-width: 760px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (min-width: 760px) { body { font-size: 18px; } }
html.nav-open { overflow: hidden; }

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

.wrap { width: min(var(--w), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-wide { width: min(1440px, 100% - var(--gutter) * 2); margin-inline: auto; }

/* ---- the ambient field ----------------------------------------------------
   Three very soft washes of the hero's own spectrum, drifting behind the whole
   page. At this opacity none of them reads as a colour on its own; together
   they keep the white from being flat and dead. Fixed, so the page moves and
   the light does not. */
.ambient { position: fixed; inset: -25vh -25vw; z-index: -1; pointer-events: none; overflow: clip; contain: strict; }
.ambient i {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform;
  animation: drift 1s linear infinite alternate;
}
.ambient i:nth-child(1) {
  width: 48vw; height: 48vw; left: -6vw; top: -4vh;
  background: radial-gradient(circle, rgba(39,73,233,.085), rgba(39,73,233,0) 66%);
  animation-duration: 46s;
}
.ambient i:nth-child(2) {
  width: 42vw; height: 42vw; right: -4vw; top: 10vh;
  background: radial-gradient(circle, rgba(226,65,127,.062), rgba(226,65,127,0) 66%);
  animation-duration: 61s; animation-direction: alternate-reverse;
}
.ambient i:nth-child(3) {
  width: 54vw; height: 54vw; left: 22vw; bottom: -14vh;
  background: radial-gradient(circle, rgba(18,181,176,.07), rgba(18,181,176,0) 68%);
  animation-duration: 73s;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6vw, 7vh, 0) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) { .ambient i { animation: none; } }

/* ---- type ------------------------------------------------------------- */
.h1 { font-size: clamp(38px, 6vw, 84px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--ink); text-wrap: balance; }
.h2 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; color: var(--ink); text-wrap: balance; }
.h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--text); max-width: 34em; }
.soft { color: var(--text-soft); }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--ink); color: var(--ground);
  font-weight: 500; font-size: 16px; letter-spacing: -0.01em;
  border: 1px solid var(--ink); cursor: pointer; white-space: nowrap;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: rgba(14, 15, 14, 0.05); border-color: var(--ink); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 15px; }
.btn-light { background: #fff; color: var(--slab); border-color: #fff; }
.btn-light:hover { background: var(--slab-text); border-color: var(--slab-text); }

/* ---- nav ------------------------------------------------------------------
   A wordmark, four items, one mega-menu and a call to action. The menu is
   anchored to the content column rather than to its own trigger, so it can
   never hang off the side of a narrow window: left edge under the wordmark,
   fixed width, always inside the wrap. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 72px;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), background-color 240ms ease,
              border-color 240ms ease, height 460ms cubic-bezier(0.32, 0.72, 0, 1);
  border-bottom: 1px solid transparent;
}
/* The bar grows to hold the panel, and clips it until it does, so the menu is
   revealed by the material rather than laid on top of it. Only above the
   breakpoint: below it the mobile sheet is a full screen overlay and must not
   be clipped. */
@media (min-width: 900px) {
  .nav { overflow: clip; }
  .nav.has-menu { height: calc(72px + var(--menu-h, 0px)); }
}
.nav.is-scrolled, .nav:has(.nav-item.is-open) { background: rgba(244, 244, 242, 0.72); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom-color: var(--line); }
.nav.is-hidden { transform: translateY(-110%); }
.nav-inner { position: relative; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-brand { display: inline-flex; align-items: center; color: var(--ink); min-height: 32px; padding-block: 6px; }
.nav-brand svg { width: 104px; height: auto; }

.nav-links { display: none; align-items: center; gap: 30px; font-size: 15px; font-weight: 500; color: var(--ink); }
.nav-item { display: inline-flex; align-items: center; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 2px; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: -0.01em;
  border-bottom: 1px solid transparent; transition: border-color 160ms ease, opacity 160ms ease;
}
.nav-link:hover, .nav-item.is-open > .nav-link { border-bottom-color: var(--ink); }
.nav-link[data-current] { border-bottom-color: var(--ink); }
.nav-link .chev { width: 10px; height: auto; opacity: 0.55; transition: transform 200ms ease; }
.nav-item.is-open .chev { transform: rotate(180deg); }
.nav-cta { display: none; }

/* the mega-menu */
/* Fixed rather than absolute so it escapes .nav-inner, which is the page
   column and was capping the panel at 760px. The nav carries a backdrop
   filter whenever the menu is open, which makes it the containing block, and
   it is full width and 72px tall, so top/left/right land in the same place
   either way. */
.mega {
  position: absolute; top: 72px; left: 0; right: 0; z-index: 2;
  opacity: 0; visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.nav-item.is-open .mega { opacity: 1; visibility: visible; transition-delay: 0s; }
.mega-inner { padding: 30px 0 36px; }
/* the contents rise into place a beat after the bar has started opening */
.mega-lead, .mega-grid > li, .mega-foot {
  opacity: 0; transform: translateY(10px);
  transition: opacity 300ms ease, transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}
.nav-item.is-open .mega-lead, .nav-item.is-open .mega-grid > li, .nav-item.is-open .mega-foot { opacity: 1; transform: none; }
.nav-item.is-open .mega-lead { transition-delay: 90ms; }
.nav-item.is-open .mega-grid > li:nth-child(1) { transition-delay: 130ms; }
.nav-item.is-open .mega-grid > li:nth-child(2) { transition-delay: 160ms; }
.nav-item.is-open .mega-grid > li:nth-child(3) { transition-delay: 190ms; }
.nav-item.is-open .mega-grid > li:nth-child(4) { transition-delay: 150ms; }
.nav-item.is-open .mega-grid > li:nth-child(5) { transition-delay: 180ms; }
.nav-item.is-open .mega-grid > li:nth-child(6) { transition-delay: 210ms; }
.nav-item.is-open .mega-foot { transition-delay: 240ms; }
/* the panel is full bleed; what is inside it is not */
.mega-lead, .mega-grid, .mega-foot { width: min(var(--w), 100% - var(--gutter) * 2); margin-inline: auto; }
.mega-lead { font-size: 14px; line-height: 1.5; color: var(--text-soft); max-width: 52em; margin-bottom: 22px; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 20px; }
.mega-grid a { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; transition: background-color 160ms ease; }
.mega-grid a:hover { background: rgba(14, 15, 14, 0.045); }
.mega-t { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.mega-d { font-size: 13.5px; line-height: 1.45; color: var(--text-soft); }
.mega-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 22px; padding: 18px 14px 0;
  border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink);
}
.mega-foot svg { width: 13px; height: auto; transition: transform 200ms ease; }
.mega-foot:hover svg { transform: translateX(3px); }
@media (max-width: 1199px) { .mega-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1023px) {
  .mega-grid { grid-template-columns: 1fr; }
  .mega-lead { display: none; }
}

/* the phone sheet */
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; background: none; border: 0; border-radius: 12px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform 240ms ease, background-color 240ms ease; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 240ms ease, top 240ms ease; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav.is-open .nav-toggle span { background: transparent; }
.nav.is-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }
.nav-sheet { display: none; }
.nav.is-open { background: var(--ground); border-bottom-color: var(--line); }
.nav.is-open .nav-sheet {
  display: flex; flex-direction: column; position: fixed; inset: 72px 0 0 0;
  background: var(--ground); padding: 12px var(--gutter) 48px;
  overflow-y: auto; overscroll-behavior: contain;
}
.sheet-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; font: 600 26px/1.2 var(--font); letter-spacing: -0.025em;
  color: var(--ink); text-align: left; cursor: pointer;
}
.sheet-link .chev { width: 14px; height: auto; opacity: 0.5; transition: transform 240ms ease; }
.sheet-acc.is-open .sheet-link .chev { transform: rotate(180deg); }
.sheet-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.sheet-acc.is-open .sheet-sub { grid-template-rows: 1fr; }
.sheet-sub > div { overflow: hidden; display: flex; flex-direction: column; }
.sheet-sub a { padding: 13px 0 13px 2px; font-size: 16px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--line); }
.sheet-sub a:last-child { border-bottom: 0; }
.sheet-sub .sheet-all { color: var(--ink); font-weight: 600; }
.nav-sheet .btn { margin-top: 28px; align-self: flex-start; }
.sheet-reach { margin-top: 20px; font-size: 15px; color: var(--text-soft); }
.sheet-reach a { border-bottom: 1px solid var(--line-strong); }
@media (min-width: 900px) {
  .nav-links, .nav-cta { display: inline-flex; }
  .nav-toggle, .nav-sheet { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mega, .sheet-sub, .nav-link .chev, .sheet-link .chev { transition: none; }
}

/* how far down the page you are, drawn on the nav's own edge */
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--cobalt), var(--violet), var(--rose), var(--amber), var(--teal)); opacity: 0; transition: opacity 240ms ease; }
.nav.is-scrolled .progress { opacity: 1; }

/* ---- hero ------------------------------------------------------------------ */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: center;
  padding: 120px 0 72px;
  overflow: clip; isolation: isolate;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-inner { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; }
.hero-mark { width: min(1400px, 100% - var(--gutter) * 2); height: auto; color: var(--ink); margin-inline: auto; transition: opacity 200ms ease; }
.hero.is-live .hero-mark { opacity: 0; }
.hero-copy { display: grid; justify-items: center; gap: 22px; margin-top: clamp(40px, 6vw, 72px); max-width: 860px; padding: 0 var(--gutter); }
.hero-copy > * { transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); }
html.js .hero:not(.is-ready) .hero-copy > * { opacity: 0; transform: translateY(60px); }
.hero-copy > :nth-child(2) { transition-delay: calc(var(--reveal-stagger) * 0.5); }
.hero-copy > :nth-child(3) { transition-delay: var(--reveal-stagger); }
.hero-copy > :nth-child(4) { transition-delay: calc(var(--reveal-stagger) * 1.5); }
.hero-title { font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; color: var(--ink); text-wrap: balance; }
.hero-sub { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--text); max-width: 40em; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.hero-cta .btn { min-width: 232px; }
.hero-proof { font-size: 14px; color: var(--text-soft); margin-top: 8px; }
.hero-proof a { border-bottom: 1px solid var(--line-strong); }
.hero-proof a:hover { border-bottom-color: var(--ink); color: var(--ink); }
.hero.is-live .hero-copy { transform: translateY(calc(var(--hero-scroll, 0) * -22vh)); opacity: calc(1 - var(--hero-scroll, 0) * 2); }
.hero-hint { position: absolute; left: 50%; bottom: 26px; z-index: 2; transform: translateX(-50%); font-size: 13px; color: var(--text-soft); letter-spacing: 0.01em; opacity: calc(1 - var(--hero-scroll, 0) * 3); transition: opacity 300ms ease; pointer-events: none; }
@media (max-width: 599px) { .hero { padding-top: 104px; } .hero-copy { gap: 18px; } .hero-hint { display: none; } }

/* ---- ticker ---------------------------------------------------------------- */
.ticker { overflow: clip; }
.ticker-track { display: flex; white-space: nowrap; }
.ticker-strip { display: flex; animation: ticker var(--ticker-dur, 40s) linear infinite; will-change: transform; }
@keyframes ticker { to { transform: translateX(calc(var(--ticker-w) * -1)); } }
@media (prefers-reduced-motion: reduce) { .ticker-strip { animation: none; } }

/* ---- the tools strip --------------------------------------------------------
   Real marks rather than a list of our own words, because a row of adjectives
   proves nothing and a row of logos people recognise does. */
.logos { padding: 40px 0 44px; }
.logo { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0 clamp(26px, 3.4vw, 54px); }
/* wordmarks and square marks need different heights to carry the same
   visual weight in a row */
.logo svg { width: auto; height: clamp(20px, 1.7vw, 24px); }
.logo.is-mid svg { height: clamp(24px, 2vw, 28px); }
.logo.is-mark svg { height: clamp(30px, 2.7vw, 38px); }

/* ---- the promises ------------------------------------------------------------ */
.promises { display: grid; }
@media (min-width: 760px) { .promises { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 88px); } }
.promise { display: grid; gap: 10px; align-content: start; padding: 30px 0 34px; border-top: 1px solid var(--line); }
.promise-n { font-size: 13px; font-weight: 500; color: var(--n, var(--text-soft)); font-variant-numeric: tabular-nums; }
.promise:nth-child(1) { --n: var(--cobalt); }
.promise:nth-child(2) { --n: var(--violet); }
.promise:nth-child(3) { --n: var(--rose); }
.promise:nth-child(4) { --n: var(--amber); }
.promise:nth-child(5) { --n: var(--teal); }
.promise:nth-child(6) { --n: var(--cobalt); }

/* Each number and rule starts at its own point in the spectrum, and the whole
   set rotates through it as the page scrolls, so the column is never the same
   two colours twice. One keyframe does all twelve of them. */
@keyframes hue-cycle { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll(root block)) {
    .promise-n, .promise::before, .more-grid span {
      animation: hue-cycle linear both;
      animation-timeline: scroll(root block);
    }
  }
}
.promise::before { content: ""; display: block; height: 2px; width: 34px; background: var(--n, var(--line-strong)); margin-bottom: 16px; }
.promise p { max-width: 32em; }

/* ---- sections ----------------------------------------------------------------- */
.section { padding: var(--section) 0; }
.section-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .lead { max-width: 30em; }

/* ---- a browser window with a real site inside it -------------------------------
   The screenshot is taller than the window, and pans as the window crosses the
   viewport, so the site appears to scroll while you scroll. */
.browser {
  border-radius: 16px; overflow: clip; background: #fff;
  border: 1px solid var(--line-strong);
  box-shadow: 0 34px 70px -34px rgba(12, 14, 20, 0.42), 0 2px 8px -4px rgba(12, 14, 20, 0.16);
}
.browser { transition: transform 380ms cubic-bezier(.2,.8,.2,1), box-shadow 380ms cubic-bezier(.2,.8,.2,1); }
.case-media:hover .browser { box-shadow: 0 46px 96px -38px rgba(12, 14, 20, 0.52), 0 2px 8px -4px rgba(12, 14, 20, 0.2); }
.browser-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: #eeeeeb; border-bottom: 1px solid var(--line); }
.browser-dots { display: flex; gap: 7px; flex: none; }
.browser-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.browser-url { flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; padding: 0 12px; background: #fff; border-radius: 999px; font-size: 12px; color: var(--text-soft); border: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-shot { position: relative; aspect-ratio: 16 / 10; overflow: clip; background: var(--ground-2); }
.browser-shot.is-flat { aspect-ratio: auto; }
.browser-shot.is-flat img { position: static; width: 100%; height: auto; transform: none; animation: none; }
.browser-shot img { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; transform: translateY(calc(var(--p, 0.15) * -42%)); }

/* ---- the framed media column, now holding the page wireframe ------------- */
.case-media { position: relative; perspective: 1700px; perspective-origin: 50% 25%; }

/* ---- services ------------------------------------------------------------- */
.lane { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .lane { grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 88px); } }
.lane-copy { display: grid; gap: 20px; }
.lane-copy .h3 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1.08; }
.lane-copy p { max-width: 30em; }
.lane-list { display: grid; gap: 12px; margin-top: 6px; }
.lane-list li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; }
.lane-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: translateY(-2px); }

/* three phones, each drifting at its own rate */
.phone-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 20px); align-items: start; }
.phone-row > * { transform: translateY(calc(var(--p, 0.4) * var(--lift, -28px))); }
.phone-row > :nth-child(1) { --lift: -16px; }
.phone-row > :nth-child(2) { --lift: -44px; }
.phone-row > :nth-child(3) { --lift: -26px; }

/* It sat almost against the section above it and read as a continuation of
   it. A soft panel and real space around it make it a thing of its own,
   without a border, which is what the rest of the page avoids too. */
.ai {
  margin-top: clamp(72px, 9vw, 128px);
  padding: clamp(44px, 5.5vw, 84px) clamp(24px, 4vw, 64px);
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--r-img);
}
@media (max-width: 599px) { .ai { padding: 40px 20px; margin-top: 64px; border-radius: 20px; } }
/* the AI copy needs a wider column than the other lane before it will sit
   beside anything, so it stacks later */
.lane-voice { align-items: center; }
@media (min-width: 900px) and (max-width: 1059px) { .lane-voice { grid-template-columns: 1fr; gap: 36px; } }

/* ---- the voice ---------------------------------------------------------------
   A ring with lines coming off it. The drawing is all in voice.js; this only
   gives the canvas a square box to live in and keeps the captions under it. */
.orb-stage { display: grid; justify-items: center; align-content: center; gap: 20px; padding: 8px 0; }
.voice { width: min(430px, 100%); aspect-ratio: 5 / 2; }
.voice canvas { display: block; width: 100%; height: 100%; }

.orb-caption { text-align: center; display: grid; gap: 8px; align-content: start; max-width: 30em; min-height: 104px; }
.orb-who { font-size: 12px; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-soft); transition: color 300ms ease; }
.orb-stage.is-ai .orb-who { color: var(--cobalt); }
.orb-line { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; transition: opacity 220ms ease, transform 220ms ease; }
.orb-line.is-out { opacity: 0; transform: translateY(6px); }
.orb-foot { font-size: 13px; color: var(--text-soft); text-align: center; max-width: 32em; margin-top: 2px; }
.orb-script { display: none; }
@media (max-width: 899px) { .orb-caption { min-height: 132px; } }
@media (prefers-reduced-motion: reduce) { .orb-line { transition: none; } }

/* ---- the rest of what we do ------------------------------------------------- */
.more { margin-top: clamp(56px, 7vw, 96px); display: grid; gap: 32px; }
@media (min-width: 900px) { .more { grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 6vw, 88px); align-items: start; } }
.more-head { display: grid; gap: 14px; }
.more-head::before { content: ""; display: block; width: 64px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--cobalt), var(--violet), var(--rose), var(--amber), var(--teal)); margin-bottom: 6px; }
.more-head p { max-width: 30em; }
.more-grid { display: grid; }
.more-grid li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); font-size: 17px; }
.more-grid li:last-child { border-bottom: 1px solid var(--line); }
.more-grid span { font-size: 14px; font-weight: 500; color: var(--n, var(--text-soft)); font-variant-numeric: tabular-nums; }
.more-grid li:nth-child(1) { --n: var(--cobalt); }
.more-grid li:nth-child(2) { --n: var(--violet); }
.more-grid li:nth-child(3) { --n: var(--rose); }
.more-grid li:nth-child(4) { --n: var(--amber); }
.more-grid li:nth-child(5) { --n: var(--teal); }
.more-grid li:nth-child(6) { --n: var(--cobalt); }

/* ---- how it works ----------------------------------------------------------- */
.steps { display: grid; gap: 48px; }
@media (min-width: 900px) { .steps { grid-template-columns: 1fr 1.2fr; gap: clamp(48px, 8vw, 120px); align-items: start; } .steps-head { position: sticky; top: 112px; } }
.step-list { position: relative; display: grid; padding-left: 0; }
.step-rail, .step-rail-fill { position: absolute; left: 5px; top: 34px; bottom: 34px; width: 2px; }
.step-rail { background: var(--line); }
.step-rail-fill { background: linear-gradient(180deg, var(--cobalt), var(--violet), var(--rose)); transform: scaleY(var(--p, 0)); transform-origin: top; }
.step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 30px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n { position: relative; z-index: 1; font-size: 14px; font-weight: 500; color: var(--text-soft); padding-top: 5px; font-variant-numeric: tabular-nums; }
.step-n::before { content: ""; position: absolute; left: -1px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--ground); border: 2px solid var(--line-strong); }
.step.is-in .step-n::before { border-color: var(--ink); background: var(--ink); }
.step-n em { position: relative; left: 24px; font-style: normal; }
.step-body { display: grid; gap: 10px; }
.step-body p { max-width: 30em; }
@media (max-width: 599px) { .step { grid-template-columns: 40px 1fr; gap: 10px; padding: 24px 0; } .step-n em { left: 18px; } }

/* ---- closing call ------------------------------------------------------------- */
.close { text-align: center; padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px); display: grid; justify-items: center; gap: 26px; }
.close-mark { width: min(760px, 100%); color: var(--ink); opacity: 0.09; }
.close .h2 { max-width: 16em; }

/* ---- contact -------------------------------------------------------------------- */
.contact { display: grid; gap: 40px; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1.15fr; gap: clamp(48px, 8vw, 120px); align-items: start; } }
.contact-head { display: grid; gap: 18px; }
.contact-detail { display: grid; gap: 6px; margin-top: 12px; font-size: 16px; }
.contact-detail a { color: var(--ink); border-bottom: 1px solid var(--line-strong); width: fit-content; }
.contact-detail a:hover { border-bottom-color: var(--ink); }
.form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 18px; }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-size: 14px; font-weight: 500; color: var(--ink); padding: 0; }
.field input, .field textarea {
  width: 100%; height: 56px; padding: 0 18px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-input);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { height: auto; min-height: 132px; padding: 16px 18px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent); box-shadow: var(--focus); border-radius: var(--r-input); }
.field input::placeholder, .field textarea::placeholder { color: #9a9b98; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; font-size: 15px; font-weight: 500; color: var(--ink); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.pill input:focus-visible + span { box-shadow: var(--focus); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
.form-note { font-size: 15px; }
.form-note.is-error { color: #a33f3a; }
.form-done { display: grid; gap: 12px; padding: 32px; border-radius: var(--r-img); background: #fff; border: 1px solid var(--line); }
.form-done:focus-visible { box-shadow: var(--focus); border-radius: var(--r-img); }

/* ---- footer ----------------------------------------------------------------------- */
.footer { padding: 72px 0 40px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: 40px; }
@media (min-width: 620px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr 1.1fr 0.8fr 0.9fr; gap: 32px; } }
.footer-brand { display: grid; gap: 14px; align-content: start; }
.footer-brand svg { width: 120px; height: auto; color: var(--ink); }
.footer-brand a { display: inline-flex; min-height: 28px; align-items: center; }
.footer-brand p { font-size: 15px; color: var(--text-soft); max-width: 24em; }
.footer-col { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.footer-col strong { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.footer-col a { color: var(--text); width: fit-content; padding-block: 3px; }
.footer-col a:hover { color: var(--ink); }
.footer-col a.quiet { color: var(--text-soft); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-soft); }
.footer-bottom nav { display: flex; gap: 20px; }
.footer-bottom a, .footer-bottom nav a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---- reveals: permanent, and mirrored on the way back up ---------------------------
   --rv-y is the distance the element sits from home while hidden. The script
   flips its sign when the element leaves through the top, so scrolling up
   plays the mirror of scrolling down instead of repeating it. */
html.js [data-reveal] {
  opacity: 0;
  transform: perspective(1100px) rotateX(var(--rv-r, 10deg)) translateY(var(--rv-y, 60px));
  transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger));
}
html.js [data-reveal="40"] { --rv-y: 40px; }
html.js [data-reveal].is-in { opacity: 1; transform: perspective(1100px) rotateX(0deg) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js .hero:not(.is-ready) .hero-copy > * { opacity: 1; transform: none; }
  .hero-copy > * { transition: none; }
}

/* ---- scroll-linked motion, natively ------------------------------------------------
   Chrome, Edge and Safari run these off the compositor on a view() timeline, so
   they are bidirectional and permanent by construction. Firefox has no support
   yet and keeps the static layout: right trade for decoration. The script fills
   the same custom properties there if it can. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes pan-shot { from { transform: translateY(0%); } to { transform: translateY(-42%); } }
    .browser-shot img { animation: pan-shot linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }

    @keyframes lift { from { transform: translateY(calc(var(--lift, -28px) * -1)); } to { transform: translateY(var(--lift, -28px)); } }
    .phone-row > * { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }

    @keyframes rail { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .step-rail-fill { animation: rail linear both; animation-timeline: view(); animation-range: entry 60% exit 40%; }

    @keyframes read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .progress { animation: read linear both; animation-timeline: scroll(root block); }

    /* the closing mark drifts up out of its own section as you reach it */
    @keyframes rise { from { transform: perspective(1200px) rotateX(16deg) translateY(50px); } to { transform: perspective(1200px) rotateX(-6deg) translateY(-30px); } }
    .close-mark { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }

    /* The browser frame is the one place the page really leans into depth: it
       arrives lying back and stands up as it reaches the middle of the view. */
    @keyframes stand-up { from { transform: rotateX(17deg) scale(0.92); } to { transform: rotateX(0deg) scale(1); } }
    .browser { animation: stand-up linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; transform-origin: 50% 100%; }

    /* the waveform gets a shallower version of the same move */
    @keyframes lean-up { from { transform: perspective(1200px) rotateX(18deg) translateY(16px); } to { transform: perspective(1200px) rotateX(0deg) translateY(0); } }
    .voice { animation: lean-up linear both; animation-timeline: view(); animation-range: entry 0% cover 46%; }
  }
}

/* ---- legal pages --------------------------------------------------------------- */
.legal { padding: 140px 0 96px; max-width: 720px; }
.legal h1 { margin-bottom: 24px; }
.legal h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 40px 0 12px; color: var(--ink); }
.legal p { margin: 0 0 16px; }

/* ===========================================================================
   Inner pages: the services tree, work, industries, about and contact.
   Everything below is built from the same tokens as the home page. There is
   no second design system here, only components the home page did not need.
   =========================================================================== */

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip:focus { left: 16px; top: 16px; padding: 12px 18px; background: var(--ink); color: var(--ground); border-radius: 999px; font-size: 15px; }

/* A section that follows straight on from another one and should not pay the
   full vertical padding twice. */
.pt-0 { padding-top: 0; }

/* ---- the page header ------------------------------------------------------
   The inner-page answer to the hero: no canvas, the same air. */
/* ---- the page flare ------------------------------------------------------
   Inner pages get the home page's character in miniature: a drift of spectrum
   motes behind the title that answers the cursor, fading out before the copy
   begins. Drawn by flare.js. */
.page-head { position: relative; isolation: isolate; overflow: clip; padding: clamp(124px, 15vw, 168px) 0 clamp(40px, 6vw, 64px); }
.page-flare { position: absolute; inset: 0; z-index: -1; pointer-events: auto; }
.page-flare canvas { display: block; width: 100%; height: 100%; }
.page-head .wrap { position: relative; z-index: 1; }
.crumb::before { content: ""; display: block; width: 46px; height: 3px; border-radius: 2px; margin-bottom: 18px;
  background: linear-gradient(90deg, var(--cobalt), var(--violet), var(--rose), var(--amber), var(--teal)); }
.page-head .h1 { max-width: 15em; margin-bottom: 22px; }
.page-head .lead { max-width: 32em; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 14px; color: var(--text-soft); }
.crumb a { color: var(--text-soft); border-bottom: 1px solid var(--line-strong); }
.crumb a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.crumb span { opacity: 0.5; }
.crumb::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--cobalt), var(--violet), var(--rose), var(--amber), var(--teal)); }
.head-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---- running prose --------------------------------------------------------- */
.prose { max-width: 34em; display: grid; gap: 20px; }
.prose p { color: var(--text); }
.prose-lead { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.44; letter-spacing: -0.015em; color: var(--ink); }

/* ---- the six services ------------------------------------------------------
   One card each. The number carries the spectrum so the set reads as a range
   rather than a menu, which is the same trick the promises use on the home
   page. */
.svc-grid { display: grid; gap: 4px; }
@media (min-width: 700px) { .svc-grid { grid-template-columns: 1fr 1fr; gap: 6px; } }
@media (min-width: 1080px) { .svc-grid.is-full { grid-template-columns: repeat(3, 1fr); } }
.svc-grid > li { display: grid; }
.svc-grid a {
  display: grid; align-content: start; gap: 8px; height: 100%;
  padding: 26px 26px 24px; border-radius: 20px; border: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.svc-grid a:hover { background: #fff; border-color: var(--line); transform: translateY(-2px); }
.svc-n { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--n, var(--text-soft)); font-variant-numeric: tabular-nums; }
.svc-grid > li:nth-child(1) { --n: var(--cobalt); }
.svc-grid > li:nth-child(2) { --n: var(--violet); }
.svc-grid > li:nth-child(3) { --n: var(--rose); }
.svc-grid > li:nth-child(4) { --n: var(--amber); }
.svc-grid > li:nth-child(5) { --n: var(--teal); }
.svc-grid > li:nth-child(6) { --n: var(--cobalt); }
.svc-t { font-size: clamp(19px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.svc-d { font-size: 16px; line-height: 1.5; color: var(--text); max-width: 30em; }
.svc-x { font-size: 14.5px; line-height: 1.5; max-width: 30em; }
.svc-go { margin-top: 6px; color: var(--ink); opacity: 0.35; transition: opacity 200ms ease, transform 200ms ease; }
.svc-go svg { width: 16px; height: auto; }
.svc-grid a:hover .svc-go { opacity: 1; transform: translateX(4px); }
.svc-aside { margin-top: 44px; font-size: 15px; }

/* ---- the chain ------------------------------------------------------------- */
.chain { display: grid; gap: 0; }
.chain-step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 28px 0; border-top: 1px solid var(--line); }
.chain-step:last-child { border-bottom: 1px solid var(--line); }
.chain-step > div { display: grid; gap: 10px; }
.chain-step p { max-width: 34em; }
.chain-n { font-size: 14px; font-weight: 500; color: var(--n, var(--text-soft)); padding-top: 4px; font-variant-numeric: tabular-nums; }
.chain-step:nth-child(1) { --n: var(--cobalt); }
.chain-step:nth-child(2) { --n: var(--violet); }
.chain-step:nth-child(3) { --n: var(--rose); }
.chain-step:nth-child(4) { --n: var(--amber); }
.chain-step:nth-child(5) { --n: var(--teal); }
@media (max-width: 599px) { .chain-step { grid-template-columns: 38px 1fr; gap: 10px; } }

/* ---- what sits under a service --------------------------------------------- */
.offer { display: grid; gap: 32px; }
@media (min-width: 900px) { .offer { grid-template-columns: 1fr 1.25fr; gap: clamp(40px, 6vw, 88px); align-items: start; } }
.offer-head { display: grid; gap: 14px; align-content: start; }
.offer-head::before { content: ""; display: block; width: 64px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--cobalt), var(--violet), var(--rose), var(--amber), var(--teal)); margin-bottom: 6px; }
.offer-head p { max-width: 28em; }
/* Hairline above every item and one under the whole list, so the closing
   line runs across both columns at once. An odd number of items would leave
   the second column a row short of that line, so it gets an empty cell. */
.offer-list { display: grid; border-bottom: 1px solid var(--line); }
.offer-list li { padding: 15px 0; border-top: 1px solid var(--line); font-size: 16.5px; color: var(--ink); }
@media (min-width: 620px) {
  .offer-list { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .offer-list:has(> li:last-child:nth-child(odd))::after { content: ""; padding: 15px 0; border-top: 1px solid var(--line); font-size: 16.5px; }
}

/* ---- a claim beside its receipts -------------------------------------------- */
.split { display: grid; gap: 32px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 104px); align-items: start; } }
.split-a { display: grid; gap: 16px; align-content: start; }
.split-a p { max-width: 30em; }
.ticks { display: grid; }
.ticks li { position: relative; padding: 16px 0 16px 30px; border-top: 1px solid var(--line); font-size: 16.5px; color: var(--ink); }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 23px; width: 12px; height: 7px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

/* ---- questions people ask before they say yes -------------------------------- */
.faq { display: grid; }
.faq > div { display: grid; gap: 10px; padding: 24px 0; border-top: 1px solid var(--line); }
.faq > div:last-child { border-bottom: 1px solid var(--line); }
.faq p { max-width: 34em; }

/* ---- an example call, written out --------------------------------------------
   The home page plays this with a canvas. Here it is simply on the page, which
   is the right weight for something a reader has arrived to study. */
.script { display: grid; gap: 10px; max-width: 560px; align-content: start; }
.script li { display: grid; gap: 4px; padding: 16px 20px; border-radius: 18px; max-width: 88%; }
.script-ai { background: #fff; border: 1px solid var(--line); justify-self: start; border-bottom-left-radius: 6px; }
.script-them { background: var(--ink); color: var(--ground); justify-self: end; border-bottom-right-radius: 6px; }
.script-who { font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-soft); }
.script-them .script-who { color: rgba(244, 244, 242, 0.6); }
.script li p { font-size: 16.5px; line-height: 1.45; }

/* ---- a sequence of moments ----------------------------------------------------- */
.beats { display: grid; }
.beats li { display: grid; gap: 8px; padding: 24px 0; border-top: 1px solid var(--line); }
.beats li:last-child { border-bottom: 1px solid var(--line); }
.beats p { max-width: 40em; }
.beat-t { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--c, var(--ink)); }
.beats li:nth-child(1) { --c: var(--cobalt); }
.beats li:nth-child(2) { --c: var(--violet); }
.beats li:nth-child(3) { --c: var(--rose); }
.beats li:nth-child(4) { --c: var(--amber); }
.beats li:nth-child(5) { --c: var(--teal); }
@media (min-width: 760px) { .beats li { grid-template-columns: 190px 1fr; gap: 24px; align-items: baseline; } .beat-t { padding-top: 2px; } }

/* ---- channels, and industries: the same plain card ------------------------------ */
.chan-grid, .ind-grid { display: grid; gap: 4px; }
@media (min-width: 700px) { .chan-grid, .ind-grid { grid-template-columns: 1fr 1fr; gap: 6px; } }
@media (min-width: 1080px) { .ind-grid { grid-template-columns: repeat(3, 1fr); } }
.chan-grid li, .ind-grid li { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.chan-grid p, .ind-grid p { font-size: 16px; line-height: 1.5; }
.ind-foot { margin-top: 40px; font-size: 15px; max-width: 40em; }

/* ---- the same Tuesday, twice ----------------------------------------------------- */
.ba-cols { display: grid; gap: 20px; }
@media (min-width: 820px) { .ba-cols { grid-template-columns: 1fr 1fr; gap: 24px; } }
.ba-col { padding: 30px; border-radius: 22px; border: 1px solid var(--line); }
.ba-col.is-after { background: #fff; }
.ba-h { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-soft); margin-bottom: 6px; }
.ba-col.is-after .ba-h { color: var(--teal); }
.ba-col li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 16.5px; color: var(--text); }
.ba-col.is-after li { color: var(--ink); }

/* ---- the work ---------------------------------------------------------------------- */
.cases { display: grid; }
.case { display: grid; grid-template-columns: 1fr; gap: 14px; padding: clamp(36px, 5vw, 56px) 0; border-top: 1px solid var(--line); }
.case:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 820px) { .case { grid-template-columns: 120px 1fr; gap: 32px; } }
/* Each row carries a real capture of the site in a browser frame, panning as
   you scroll past it. Rows alternate sides above 1000px; below that the frame
   sits under the copy. */
.case-shot { perspective: 1700px; perspective-origin: 50% 25%; }
@media (min-width: 820px) { .case-shot { grid-column: 2; } }
@media (min-width: 1000px) {
  .case { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px clamp(32px, 4vw, 56px); align-items: center; }
  .case-shot { grid-column: 3; grid-row: 1; }
  .case:nth-child(even) .case-shot { grid-column: 2; }
  .case:nth-child(even) .case-body { grid-column: 3; grid-row: 1; }
}
.case-n span { font-size: 14px; font-weight: 500; color: var(--n, var(--text-soft)); font-variant-numeric: tabular-nums; }
.case:nth-child(1) { --n: var(--cobalt); }
.case:nth-child(2) { --n: var(--rose); }
.case:nth-child(3) { --n: var(--teal); }
.case-body { display: grid; gap: 12px; max-width: 40em; }
.case-kind { font-size: 14.5px; margin-top: -6px; }
.case-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; width: fit-content; font-size: 16px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; }
.case-link svg { width: 14px; height: auto; transition: transform 200ms ease; }
.case-link:hover { border-bottom-color: var(--ink); }
.case-link:hover svg { transform: translateX(3px); }

/* ---- where to go next -------------------------------------------------------------- */
.rel-grid { display: grid; gap: 6px; }
@media (min-width: 820px) { .rel-grid { grid-template-columns: repeat(3, 1fr); } }
.rel-grid a { display: grid; gap: 8px; align-content: start; height: 100%; padding: 24px; border-radius: 18px; border: 1px solid var(--line); background: #fff; transition: transform 200ms ease, box-shadow 200ms ease; }
.rel-grid a:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -26px rgba(14, 15, 14, 0.4); }
.rel-t { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.rel-grid p { font-size: 15px; line-height: 1.5; color: var(--text-soft); }

/* ---- contact --------------------------------------------------------------------- */
.contact-steps { display: grid; margin-top: 8px; }
.contact-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; }
.contact-steps li:last-child { border-bottom: 1px solid var(--line); }
.contact-steps span { font-size: 13px; font-weight: 500; color: var(--c, var(--text-soft)); font-variant-numeric: tabular-nums; padding-top: 3px; }
.contact-steps li:nth-child(1) { --c: var(--cobalt); }
.contact-steps li:nth-child(2) { --c: var(--rose); }
.contact-steps li:nth-child(3) { --c: var(--teal); }

/* ---- the closing call, now on every page ------------------------------------------ */
.close-sub { max-width: 32em; font-size: 16.5px; margin-top: -8px; }

/* ===========================================================================
   Web Design & Development
   ---------------------------------------------------------------------------
   The service page that has to prove the service. Everything here is built
   from the tokens above: the same ground, the same spectrum, the same spring.
   What it adds are five pieces the rest of the site did not need: a hero that
   builds a page in front of you, a sticky frame that repairs one, a tabbed
   showcase, a drag comparison, and a native accordion.

   Every class is prefixed wd- so it is obvious at a glance that nothing here
   reaches the home page.
   =========================================================================== */

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- hero -----------------------------------------------------------------
   The page header, widened to carry a frame beside the copy. Below 1000px it
   stacks, and the frame keeps its own air rather than being squeezed. */
.wd-hero { padding-bottom: clamp(48px, 7vw, 88px); }
.wd-hero-grid { display: grid; gap: clamp(40px, 5vw, 56px); align-items: center; }
@media (min-width: 1000px) {
  .wd-hero { padding-top: clamp(132px, 13vw, 176px); }
  .wd-hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(48px, 5vw, 80px); }
}
.wd-hero-copy { display: grid; align-content: center; }
.wd-hero-copy .h1 { max-width: 11em; margin-bottom: 22px; }
.wd-hero-copy .lead { max-width: 30em; }
.wd-hero .head-cta { margin-top: 30px; }

.wd-stage { display: grid; gap: 18px; justify-items: stretch; }
/* The tilt wrapper exists so the cursor can lean the frame without fighting
   the stand-up animation the .browser component already owns. Two elements,
   two transforms, no argument over the same property. */
.wd-tilt {
  perspective: 1500px; perspective-origin: 50% 40%;
  transform: rotateX(calc(var(--ty, 0) * -3.4deg)) rotateY(calc(var(--tx, 0) * 4.2deg));
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .wd-tilt { transform: none; transition: none; } }

.wd-screen { position: relative; aspect-ratio: 6 / 5; overflow: clip; background: #fbfbfa; }
.wd-shot {
  position: absolute; inset: 0 0 auto 0; width: 100%; height: auto;
  opacity: 0; transform: scale(1.012);
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wd-screen[data-stage="3"] .wd-shot { opacity: 1; transform: none; }
.wd-screen[data-stage="3"] .wd-mock { opacity: 0; }

/* ---- the coded page inside the hero frame ---------------------------------
   One set of elements in two costumes. In stage one the <i> bars are the
   page and the <em> words are hidden; in stage two the bars retire, the
   words arrive, and the flat greys pick up colour. Nothing crossfades
   between two copies of the same layout, so it reads as one page being
   worked on rather than two pictures swapping. */
.wd-mock {
  position: absolute; inset: 0; padding: 4.2% 5%;
  display: grid; grid-template-rows: auto auto 1fr; gap: 4%;
  transition: opacity 500ms ease;
  container-type: inline-size;
}
.wd-mock i { display: block; background: #dcdcd8; border-radius: 3px; transition: opacity 420ms ease, background-color 420ms ease; }
.wd-mock em { font-style: normal; opacity: 0; transition: opacity 420ms ease 120ms; }
.wd-screen[data-stage="2"] .wd-mock i, .wd-screen[data-stage="3"] .wd-mock i { opacity: 0; }
.wd-screen[data-stage="2"] .wd-mock em, .wd-screen[data-stage="3"] .wd-mock em { opacity: 1; }

.wd-mock-nav { display: flex; align-items: center; gap: 4%; }
.wd-mock-logo { position: relative; flex: none; width: 22%; height: 11px; display: grid; align-items: center; }
.wd-mock-logo i { position: absolute; inset: 1px 0; }
.wd-mock-logo em { font-size: 2.9cqw; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; }
.wd-mock-links { flex: 1; display: flex; gap: 12px; }
.wd-mock-links i { width: 46px; height: 7px; }
.wd-mock-cta { position: relative; flex: none; width: 24%; height: 26px; display: grid; place-items: center; border-radius: 999px; transition: background-color 420ms ease; }
.wd-mock-cta i { position: absolute; inset: 0; border-radius: 999px; }
.wd-mock-cta em { font-size: 2.5cqw; font-weight: 500; color: #fff; white-space: nowrap; }
.wd-screen[data-stage="2"] .wd-mock-cta { background: var(--ink); }

.wd-mock-photo {
  position: relative; border-radius: 4px; aspect-ratio: 16 / 7;
  background: #e6e6e2; display: grid; place-items: center;
  transition: background 520ms ease;
}
/* the wireframe cross, which is what a placeholder looks like everywhere */
.wd-mock-x { position: absolute; inset: 0; opacity: 0.5; transition: opacity 380ms ease; }
.wd-mock-x::before, .wd-mock-x::after { content: ""; position: absolute; inset: 0; border-top: 1px solid #c9c9c4; transform-origin: 50% 0; }
.wd-mock-x::before { transform: rotate(24.5deg) scaleX(1.1); }
.wd-mock-x::after { transform: rotate(-24.5deg) scaleX(1.1); top: 100%; }
.wd-screen[data-stage="2"] .wd-mock-photo, .wd-screen[data-stage="3"] .wd-mock-photo {
  background:
    radial-gradient(120% 140% at 18% 8%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    linear-gradient(118deg, #9fb4d8 0%, #b9c6d6 34%, #cdd3cb 62%, #e0d7c4 100%);
}
.wd-screen[data-stage="2"] .wd-mock-x, .wd-screen[data-stage="3"] .wd-mock-x { opacity: 0; }

.wd-mock-body { display: grid; align-content: start; gap: 3.4%; }
.wd-mock-h { position: relative; display: grid; gap: 7px; min-height: 8.4cqw; }
.wd-mock-h i:nth-child(1) { width: 78%; height: 15px; }
.wd-mock-h i:nth-child(2) { width: 52%; height: 15px; }
.wd-mock-h em { position: absolute; inset: 0; font-size: 6.6cqw; font-weight: 600; letter-spacing: -0.035em; line-height: 1.03; color: var(--ink); }
.wd-mock-p { position: relative; min-height: 3.2cqw; }
.wd-mock-p i { width: 62%; height: 8px; }
.wd-mock-p em { position: absolute; inset: 0; font-size: 2.7cqw; line-height: 1.4; color: var(--text-soft); }
.wd-mock-btns { display: flex; gap: 10px; margin-top: 1%; }
.wd-mock-btns span {
  display: grid; place-items: center; height: 30px; padding: 0 14px; border-radius: 999px;
  background: #dcdcd8; transition: background-color 420ms ease, border-color 420ms ease; border: 1px solid transparent;
}
.wd-mock-btns em { font-size: 2.4cqw; font-weight: 500; color: #fff; white-space: nowrap; }
.wd-screen[data-stage="2"] .wd-mock-btns span:not(.is-ghost), .wd-screen[data-stage="3"] .wd-mock-btns span:not(.is-ghost) { background: var(--ink); }
.wd-screen[data-stage="2"] .wd-mock-btns .is-ghost, .wd-screen[data-stage="3"] .wd-mock-btns .is-ghost { background: transparent; border-color: var(--line-strong); }
.wd-mock-btns .is-ghost em { color: var(--ink); }
.wd-mock-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; margin-top: 2%; padding-top: 4%; border-top: 1px solid var(--line); }
.wd-mock-cols span { position: relative; display: grid; gap: 6px; min-height: 3cqw; }
.wd-mock-cols i:nth-child(1) { width: 70%; height: 8px; }
.wd-mock-cols i:nth-child(2) { width: 88%; height: 6px; }
.wd-mock-cols em { position: absolute; inset: 0; font-size: 2.5cqw; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

/* ---- the stage buttons ---------------------------------------------------- */
.wd-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-step {
  flex: 1 1 0; min-width: 108px;
  display: grid; gap: 4px; justify-items: start; text-align: left;
  padding: 13px 16px 14px; border-radius: 16px;
  background: transparent; border: 1px solid var(--line); cursor: pointer;
  font-size: 15px; font-weight: 500; letter-spacing: -0.012em; color: var(--text-soft);
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
.wd-step span { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--n, var(--line-strong)); transition: color 220ms ease; }
.wd-step:nth-child(1) { --n: var(--cobalt); }
.wd-step:nth-child(2) { --n: var(--violet); }
.wd-step:nth-child(3) { --n: var(--teal); }
.wd-step:hover { background: rgba(255, 255, 255, 0.6); border-color: var(--line-strong); color: var(--ink); }
.wd-step[aria-pressed="true"] { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.wd-stage-note { font-size: 14.5px; line-height: 1.5; max-width: 40em; }

/* ---- why sites fail --------------------------------------------------------
   The frame stays put while the problems scroll past it. Below 1000px there
   is nowhere to stick it, so the frame simply leads and the list follows. */
.wd-fail-grid { display: grid; gap: clamp(36px, 5vw, 56px); }
/* Without a second column there is nowhere to park the frame beside the
   list, so it pins under the header instead and the problems run beneath it.
   It needs its own ground, or the copy shows through as it passes. */
@media (max-width: 999px) {
  .wd-fail-sticky {
    position: sticky; top: 78px; z-index: 2;
    padding-bottom: 16px; margin-bottom: -8px;
    background: linear-gradient(180deg, var(--ground) 0%, var(--ground) 82%, rgba(244, 244, 242, 0) 100%);
  }
  .wd-fail-sticky::before { content: ""; position: absolute; inset: -16px 0 auto 0; height: 16px; background: var(--ground); }
}
@media (min-width: 1000px) {
  .wd-fail-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); align-items: start; }
  .wd-fail-sticky { position: sticky; top: 108px; }
}
.wd-fix-caption { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--text-soft); min-height: 3em; max-width: 30em; transition: opacity 260ms ease; }
.wd-fix-caption.is-out { opacity: 0; }

.wd-fix { position: relative; aspect-ratio: 4 / 3; overflow: clip; background: #fff; container-type: inline-size; }
.wd-fix-page {
  position: absolute; inset: 0; padding: 5% 6%;
  display: grid; align-content: start; gap: 3%;
  transition: padding 620ms cubic-bezier(0.22, 1, 0.36, 1), gap 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wd-fix[data-level="0"] .wd-fix-page { padding: 3.4% 4%; gap: 2%; }

.wd-fix-nav { display: flex; align-items: center; justify-content: space-between; gap: 5%; padding-bottom: 3%; border-bottom: 1px solid var(--line); }
.wd-fix-logo { font-size: 2.5cqw; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; }
.wd-fix-links { display: flex; gap: 8px; }
.wd-fix-links i { display: block; width: 30px; height: 6px; border-radius: 3px; background: #dedeDA; transition: opacity 420ms ease, width 520ms ease; }
.wd-fix[data-level="0"] .wd-fix-links i { width: 22px; }
.wd-fix:not([data-level="0"]) .wd-fix-links i:nth-child(n+4) { opacity: 0; width: 0; }

/* the headline is two spans in the same box, so one can replace the other */
.wd-fix-h { position: relative; min-height: 7cqw; margin-top: 2%; }
.wd-fix-h span { position: absolute; inset: 0; transition: opacity 460ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1); }
.wd-fix-h-old { font-size: 3.4cqw; font-weight: 500; color: #8d8e8b; text-align: center; }
.wd-fix-h-new { font-size: 6.4cqw; font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; color: var(--ink); opacity: 0; transform: translateY(10px); }
.wd-fix:not([data-level="0"]) .wd-fix-h-old { opacity: 0; transform: translateY(-8px); }
.wd-fix:not([data-level="0"]) .wd-fix-h-new { opacity: 1; transform: none; }

.wd-fix-sub { font-size: 2.6cqw; line-height: 1.4; color: var(--text-soft); opacity: 0; transform: translateY(8px); transition: opacity 460ms ease 90ms, transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 90ms; }
.wd-fix:not([data-level="0"]) .wd-fix-sub { opacity: 1; transform: none; }

/* the wall of text that goes away once there is something worth looking at */
.wd-fix-wall { display: grid; gap: 5px; transition: opacity 420ms ease, max-height 620ms cubic-bezier(0.22, 1, 0.36, 1); max-height: 40cqw; overflow: clip; }
.wd-fix-wall i { display: block; height: 5px; border-radius: 3px; background: #e6e6e2; }
.wd-fix-wall i:nth-child(2n) { width: 96%; }
.wd-fix-wall i:nth-child(3n) { width: 88%; }
.wd-fix-wall i:last-child { width: 54%; }
.wd-fix[data-level="2"] .wd-fix-wall, .wd-fix[data-level="3"] .wd-fix-wall,
.wd-fix[data-level="4"] .wd-fix-wall, .wd-fix[data-level="5"] .wd-fix-wall,
.wd-fix[data-level="6"] .wd-fix-wall { opacity: 0; max-height: 0; }

.wd-fix-photo {
  border-radius: 5px; aspect-ratio: 16 / 7.8; opacity: 0; transform: translateY(12px) scale(0.985);
  background:
    radial-gradient(120% 140% at 18% 8%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    linear-gradient(118deg, #9fb4d8 0%, #b9c6d6 34%, #cdd3cb 62%, #e0d7c4 100%);
  transition: opacity 560ms ease, transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wd-fix[data-level="2"] .wd-fix-photo, .wd-fix[data-level="3"] .wd-fix-photo,
.wd-fix[data-level="4"] .wd-fix-photo, .wd-fix[data-level="5"] .wd-fix-photo,
.wd-fix[data-level="6"] .wd-fix-photo { opacity: 1; transform: none; }

.wd-fix-cta { display: flex; align-items: center; gap: 3%; opacity: 0; transform: translateY(10px); transition: opacity 480ms ease, transform 640ms cubic-bezier(0.22, 1, 0.36, 1); }
.wd-fix-btn { display: grid; place-items: center; height: 6.2cqw; padding: 0 4cqw; border-radius: 999px; background: var(--ink); color: var(--ground); font-size: 2.5cqw; font-weight: 500; white-space: nowrap; }
.wd-fix-tel { font-size: 2.6cqw; font-weight: 600; color: var(--ink); white-space: nowrap; }
.wd-fix[data-level="3"] .wd-fix-cta, .wd-fix[data-level="4"] .wd-fix-cta,
.wd-fix[data-level="5"] .wd-fix-cta, .wd-fix[data-level="6"] .wd-fix-cta { opacity: 1; transform: none; }

.wd-fix-proof { display: flex; flex-wrap: wrap; gap: 3%; margin-top: 1%; opacity: 0; transform: translateY(10px); transition: opacity 480ms ease, transform 640ms cubic-bezier(0.22, 1, 0.36, 1); }
.wd-fix-proof span { font-size: 2.2cqw; color: var(--text-soft); padding-left: 3.2cqw; position: relative; }
.wd-fix-proof span::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 1.5cqw; height: 0.85cqw; border-left: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal); transform: rotate(-45deg); }
.wd-fix[data-level="5"] .wd-fix-proof, .wd-fix[data-level="6"] .wd-fix-proof { opacity: 1; transform: none; }

/* the phone slides in from the right rather than replacing the desktop view,
   because the point is that both are designed, not that one wins */
.wd-fix-phone {
  position: absolute; right: 5%; bottom: -2%; width: 21%; aspect-ratio: 1 / 2.02;
  border-radius: 2.4cqw; background: #fff; border: 1.5px solid var(--ink); padding: 6% 5%;
  box-shadow: 0 22px 44px -22px rgba(12, 14, 20, 0.42);
  opacity: 0; transform: translate(14%, 16%) rotate(4deg);
  transition: opacity 520ms ease, transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wd-fix-phone-in { display: grid; gap: 8%; align-content: start; height: 100%; }
.wd-fix-phone-h { display: block; height: 8%; border-radius: 2px; background: var(--ink); }
.wd-fix-phone-p { display: block; height: 4%; width: 76%; border-radius: 2px; background: #dcdcd8; }
.wd-fix-phone-btn { display: block; margin-top: auto; height: 11%; border-radius: 999px; background: var(--ink); }
.wd-fix[data-level="4"] .wd-fix-phone, .wd-fix[data-level="5"] .wd-fix-phone, .wd-fix[data-level="6"] .wd-fix-phone { opacity: 1; transform: none; }

.wd-fix-bar {
  position: absolute; left: 5%; right: 5%; bottom: 4%;
  display: flex; align-items: center; justify-content: space-between; gap: 4%;
  padding: 2.6% 3.4%; border-radius: 999px; background: var(--ink); color: var(--ground);
  font-size: 2.2cqw; opacity: 0; transform: translateY(120%);
  transition: opacity 460ms ease, transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wd-fix-bar em { font-style: normal; font-weight: 500; color: #7fe0c4; white-space: nowrap; }
.wd-fix[data-level="6"] .wd-fix-bar { opacity: 1; transform: none; }

/* the problem list beside it */
.wd-fails { display: grid; }
.wd-fails li { display: grid; grid-template-columns: 52px 1fr; gap: 8px 16px; padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--line); }
.wd-fails li:last-child { border-bottom: 1px solid var(--line); }
.wd-fails h3 { grid-column: 2; }
.wd-fails p { grid-column: 2; max-width: 34em; color: var(--text); }
.wd-fail-n { grid-row: span 2; font-size: 14px; font-weight: 500; padding-top: 6px; font-variant-numeric: tabular-nums; color: var(--n, var(--text-soft)); transition: color 300ms ease; }
.wd-fails li:nth-child(1) { --n: var(--cobalt); }
.wd-fails li:nth-child(2) { --n: var(--violet); }
.wd-fails li:nth-child(3) { --n: var(--rose); }
.wd-fails li:nth-child(4) { --n: var(--amber); }
.wd-fails li:nth-child(5) { --n: var(--teal); }
.wd-fails li:nth-child(6) { --n: var(--cobalt); }
.wd-fails li { opacity: 0.65; transition: opacity 420ms ease; }
.wd-fails li.is-live { opacity: 1; }
@media (max-width: 999px) { .wd-fails li { opacity: 1; } .wd-fails li { grid-template-columns: 40px 1fr; } }

/* ---- what we build ---------------------------------------------------------
   Three bands, not thirteen cards. Each term carries its own line of plain
   English rather than a tooltip nobody on a phone can reach. */
.wd-bands { display: grid; gap: clamp(48px, 6vw, 76px); }
.wd-band { display: grid; gap: 22px; }
@media (min-width: 900px) { .wd-band { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(40px, 5vw, 80px); align-items: start; } }
.wd-band-head { display: grid; gap: 12px; align-content: start; }
@media (min-width: 900px) { .wd-band-head { position: sticky; top: 116px; } }
.wd-band-head::before { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--cobalt), var(--violet), var(--rose), var(--amber), var(--teal)); }
.wd-band-head p { font-size: 16px; color: var(--text-soft); max-width: 26em; }
.wd-band-n { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.wd-band-list { display: grid; border-bottom: 1px solid var(--line); }
.wd-band-list li {
  display: grid; gap: 5px; padding: 17px 0; border-top: 1px solid var(--line);
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; letter-spacing: -0.015em; color: var(--ink);
}
.wd-band-list em { font-style: normal; font-size: 15.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--text-soft); max-width: 40em; }

/* ---- the showcase ----------------------------------------------------------
   Four tabs, one frame. The shot pans to the pointer on a mouse and to the
   scroll everywhere else, so a phone is never left with a still picture and
   an instruction it cannot follow. */
.wd-showcase { display: grid; gap: clamp(24px, 3vw, 36px); }
@media (min-width: 1000px) { .wd-showcase { grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr); gap: clamp(32px, 4vw, 56px); align-items: start; } }
.wd-tabs { display: grid; gap: 4px; }
@media (max-width: 999px) { .wd-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .wd-tabs { grid-template-columns: 1fr; } }
.wd-tab {
  display: grid; gap: 4px; justify-items: start; text-align: left;
  padding: 16px 18px 17px; border-radius: 18px;
  background: transparent; border: 1px solid transparent; cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.wd-tab:hover { background: rgba(255, 255, 255, 0.66); border-color: var(--line); }
.wd-tab[aria-selected="true"] { background: #fff; border-color: var(--line); transform: translateX(2px); }
.wd-tab-n { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--n, var(--text-soft)); }
.wd-tabs > :nth-child(1) { --n: var(--cobalt); }
.wd-tabs > :nth-child(2) { --n: var(--teal); }
.wd-tabs > :nth-child(3) { --n: var(--amber); }
.wd-tabs > :nth-child(4) { --n: var(--rose); }
.wd-tab-t { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.wd-tab-d { font-size: 14px; line-height: 1.4; color: var(--text-soft); }

.wd-show-stage { display: grid; gap: 14px; }
.wd-show-screen { position: relative; aspect-ratio: 4 / 3; overflow: clip; background: var(--ground-2); }
.wd-show-pane { position: absolute; inset: 0; opacity: 0; transition: opacity 420ms ease; }
.wd-show-pane.is-on { opacity: 1; }
.wd-show-pane img {
  position: absolute; inset: 0 0 auto 0; width: 100%; height: auto;
  transform: translateY(calc(var(--pan, 0.18) * -50%));
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wd-showcase.is-tracking .wd-show-pane img { transition: transform 220ms linear; }
.wd-show-hint { font-size: 13.5px; }
.wd-show-note { margin-top: clamp(28px, 3vw, 40px); font-size: 14.5px; max-width: 44em; }

/* ---- before and after ------------------------------------------------------
   The clip is driven by a real range input laid over the frame, so it drags
   with a mouse, drags with a thumb, and moves with the arrow keys. */
.wd-compare { position: relative; }
.wd-ba-screen { position: relative; aspect-ratio: 16 / 10; overflow: clip; background: #fff; container-type: inline-size; }
@media (max-width: 759px) {
  .wd-ba-screen { aspect-ratio: 4 / 5; }
  /* a portrait frame leaves the packed rows sitting in the top half,
     so on a phone the page fills its own height instead */
  .wd-ba-panel { align-content: space-between; }
}
.wd-ba-panel { position: absolute; inset: 0; padding: 4.6% 5.4%; display: grid; align-content: start; gap: 4%; }
.wd-ba-before { background: #fafaf9; clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }

.wd-ba-nav { display: flex; align-items: center; justify-content: space-between; gap: 5%; }
.wd-ba-logo { font-size: 2.4cqw; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; }
.wd-ba-logo.is-old { font-weight: 500; letter-spacing: 0; color: #8d8e8b; }
.wd-ba-pill { display: grid; place-items: center; height: 5.6cqw; padding: 0 3.4cqw; border-radius: 999px; background: var(--ink); color: var(--ground); font-size: 2.2cqw; font-weight: 500; white-space: nowrap; }
.wd-ba-oldnav { display: flex; gap: 7px; }
.wd-ba-oldnav i { display: block; width: 26px; height: 5px; border-radius: 3px; background: #dededa; }

.wd-ba-hero { display: grid; gap: 2.6%; margin-top: 4%; }
.wd-ba-eyebrow { font-size: 2cqw; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cobalt); }
.wd-ba-head { font-size: 6.6cqw; font-weight: 600; letter-spacing: -0.035em; line-height: 1.03; color: var(--ink); max-width: 13em; }
.wd-ba-sub { font-size: 2.6cqw; line-height: 1.4; color: var(--text-soft); }
.wd-ba-actions { display: flex; align-items: center; gap: 3.4%; margin-top: 1.6%; }
.wd-ba-btn { display: grid; place-items: center; height: 6.4cqw; padding: 0 4.2cqw; border-radius: 999px; background: var(--ink); color: var(--ground); font-size: 2.5cqw; font-weight: 500; white-space: nowrap; }
.wd-ba-tel { font-size: 2.6cqw; font-weight: 600; color: var(--ink); }
.wd-ba-proof { display: flex; flex-wrap: wrap; gap: 3.4%; margin-top: auto; padding-top: 3%; border-top: 1px solid var(--line); }
.wd-ba-proof span { position: relative; padding-left: 3.2cqw; font-size: 2.2cqw; color: var(--text-soft); }
.wd-ba-proof span::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 1.5cqw; height: 0.85cqw; border-left: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal); transform: rotate(-45deg); }

.wd-ba-oldhero { display: grid; gap: 3%; margin-top: 6%; }
.wd-ba-oldhead { font-size: 3.6cqw; font-weight: 500; color: #8d8e8b; text-align: center; }
.wd-ba-wall { display: grid; gap: 5px; }
.wd-ba-wall i { display: block; height: 5px; border-radius: 3px; background: #e6e6e2; }
.wd-ba-wall i:nth-child(2n) { width: 97%; }
.wd-ba-wall i:nth-child(3n) { width: 90%; }
.wd-ba-wall i:last-child { width: 46%; }
.wd-ba-oldrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; margin-top: 2%; }
.wd-ba-oldrow i { display: block; height: 7cqw; border-radius: 3px; background: #eeeeeb; }
.wd-ba-oldfoot { margin-top: auto; font-size: 2.1cqw; color: #9a9b98; text-align: center; }

.wd-ba-handle { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; background: rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(14,15,14,.18); pointer-events: none; }
.wd-ba-handle i {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: var(--ink); box-shadow: 0 8px 22px -8px rgba(12,14,20,.55);
}
.wd-ba-handle i::before, .wd-ba-handle i::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-left: 2px solid var(--ground); border-bottom: 2px solid var(--ground);
}
.wd-ba-handle i::before { left: 13px; transform: rotate(45deg); }
.wd-ba-handle i::after { right: 13px; transform: rotate(-135deg); }
.wd-ba-tag { position: absolute; bottom: 14px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; background: rgba(14,15,14,.72); color: var(--ground); pointer-events: none; }
.wd-ba-tag-b { left: 14px; }
@media (max-width: 759px) { .wd-ba-tag { bottom: 10px; padding: 4px 9px; font-size: 11px; } }
.wd-ba-tag-a { right: 14px; }
.wd-ba-control { position: absolute; inset: 40px 0 0 0; display: block; }
.wd-ba-control input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.wd-ba-control input::-webkit-slider-thumb { -webkit-appearance: none; width: 54px; height: 100%; cursor: ew-resize; }
.wd-ba-control input::-moz-range-thumb { width: 54px; height: 999px; border: 0; background: transparent; cursor: ew-resize; }
.wd-compare:has(input:focus-visible) .wd-ba-handle i { box-shadow: var(--focus), 0 8px 22px -8px rgba(12,14,20,.55); }

.wd-ba-notes { display: grid; gap: 20px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 760px) { .wd-ba-notes { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); } }
.wd-ba-list { display: grid; }
.wd-ba-list li { padding: 13px 0; border-top: 1px solid var(--line); font-size: 16.5px; color: var(--text); }
.wd-ba-list li:first-child { border-top: 0; padding-top: 0; }
.wd-ba-list li:last-child { border-bottom: 1px solid var(--line); }
.wd-ba-list strong { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.wd-ba-list.is-after strong { color: var(--teal); }
.wd-ba-list.is-after li:not(:first-child) { color: var(--ink); }

/* ---- the journey ----------------------------------------------------------
   The home page draws this vertically down the steps. Here it runs across the
   page on wide screens, because the point is a path rather than a list. */
.wd-rail { position: relative; display: grid; gap: 0; }
.wd-rail-line, .wd-rail-fill { position: absolute; left: 5px; top: 26px; bottom: 26px; width: 2px; }
.wd-rail-line { background: var(--line); }
.wd-rail-fill { background: linear-gradient(180deg, var(--cobalt), var(--violet), var(--rose), var(--amber), var(--teal)); transform: scaleY(var(--p, 0)); transform-origin: top; }
.wd-rail li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 6px 16px; padding: 26px 0; border-top: 1px solid var(--line); }
.wd-rail li:last-child { border-bottom: 1px solid var(--line); }
.wd-rail-dot { position: relative; grid-row: span 2; }
.wd-rail-dot::before { content: ""; position: absolute; left: -1px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--ground); border: 2px solid var(--line-strong); transition: background-color 300ms ease, border-color 300ms ease; }
.wd-rail li.is-in .wd-rail-dot::before { background: var(--ink); border-color: var(--ink); }
.wd-rail-t { grid-column: 2; font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.wd-rail p { grid-column: 2; max-width: 40em; font-size: 16.5px; }
.wd-rail p a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.wd-rail p a:hover { border-bottom-color: var(--ink); }
@media (min-width: 1000px) {
  .wd-rail { grid-template-columns: repeat(6, 1fr); gap: 0 clamp(16px, 2vw, 28px); }
  .wd-rail-line, .wd-rail-fill { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; }
  .wd-rail-fill { background: linear-gradient(90deg, var(--cobalt), var(--violet), var(--rose), var(--amber), var(--teal)); transform: scaleX(var(--p, 0)); transform-origin: left; }
  .wd-rail li { display: block; padding: 30px 0 0; border-top: 0; }
  .wd-rail li:last-child { border-bottom: 0; }
  .wd-rail-dot { display: block; }
  .wd-rail-dot::before { top: -30px; left: 0; }
  .wd-rail-t { margin-top: 4px; font-size: clamp(17px, 1.4vw, 20px); }
  .wd-rail p { font-size: 15px; margin-top: 8px; }
}
@media (max-width: 599px) { .wd-rail li { grid-template-columns: 38px 1fr; } }

/* ---- who does what --------------------------------------------------------
   The argument is the length of one column against the other, so they sit
   side by side and the short one is deliberately left short. */
.wd-split { display: grid; gap: clamp(36px, 5vw, 56px); }
@media (min-width: 820px) { .wd-split { grid-template-columns: 1.35fr 1fr; gap: clamp(48px, 7vw, 104px); align-items: start; } }
.wd-split-h { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 6px; }
.wd-yours .wd-split-h { color: var(--teal); }
.wd-split-list { display: grid; border-bottom: 1px solid var(--line); }
.wd-split-list li { padding: 13px 0; border-top: 1px solid var(--line); font-size: 16.5px; color: var(--ink); }
@media (min-width: 620px) {
  .wd-ours .wd-split-list { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .wd-ours .wd-split-list:has(> li:last-child:nth-child(odd))::after { content: ""; padding: 13px 0; border-top: 1px solid var(--line); }
}
.wd-split-note { margin-top: 20px; font-size: 15px; line-height: 1.55; max-width: 30em; }

/* ---- the questions --------------------------------------------------------
   Native <details>, which is keyboard operable, found by browser search and
   linkable, with none of it written by us. The shared name makes it an
   exclusive accordion; interpolate-size lets the panel animate to its own
   height where the browser supports it, and simply opens where it does not. */
.wd-faq { display: grid; interpolate-size: allow-keywords; }
.wd-faq details { border-top: 1px solid var(--line); }
.wd-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.wd-faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink);
}
.wd-faq summary::-webkit-details-marker { display: none; }
.wd-faq summary::after {
  content: ""; flex: none; width: 13px; height: 13px; margin-top: 6px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) translate(-2px, -2px); transform-origin: 50% 50%;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wd-faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.wd-faq summary:hover { color: var(--ink-2); }
.wd-faq summary:focus-visible { box-shadow: var(--focus); border-radius: 8px; }
.wd-faq-body { padding: 0 0 26px; }
.wd-faq-body p { max-width: 40em; color: var(--text); }
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .wd-faq details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size 420ms cubic-bezier(0.22, 1, 0.36, 1), content-visibility 420ms allow-discrete;
  }
  .wd-faq details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-faq summary::after { transition: none; }
  .wd-faq details::details-content { transition: none; }
}

/* ---- scroll-linked motion for this page ----------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes wd-rail-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .wd-rail-fill { animation: wd-rail-fill linear both; animation-timeline: view(); animation-range: entry 70% exit 30%; }
    @media (min-width: 1000px) {
      @keyframes wd-rail-fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
      .wd-rail-fill { animation-name: wd-rail-fill-x; animation-range: entry 90% cover 62%; }
    }
    /* the hero frame is already on screen at load, so it is given the lean
       rather than the stand-up the other frames get */
    .wd-hero .browser { animation: none; }
  }
}

/* ---- reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wd-shot, .wd-mock, .wd-mock i, .wd-mock em, .wd-mock-photo, .wd-mock-x,
  .wd-fix-h span, .wd-fix-sub, .wd-fix-wall, .wd-fix-photo, .wd-fix-cta,
  .wd-fix-proof, .wd-fix-phone, .wd-fix-bar, .wd-fix-page, .wd-fix-links i,
  .wd-show-pane, .wd-show-pane img, .wd-fails li, .wd-fix-caption { transition: none; }
}

/* ===========================================================================
   AI Receptionists & Voice Agents
   ---------------------------------------------------------------------------
   The service is invisible software, so this page shows it running rather
   than describing it. The centrepiece is a call console: the waveform is the
   home page's own voice.js, unchanged, driven through the same [data-orb]
   is-ai hook it already answers to.

   Prefixed vx- throughout. The only things borrowed from elsewhere are
   .wd-faq, .ticks, .step-list and .close, which are already shared.
   =========================================================================== */

/* ---- hero ------------------------------------------------------------------
   Copy across the top rather than beside the console, because the console
   wants the full column to hold a transcript and a panel side by side. */
.vx-hero { padding-bottom: clamp(56px, 7vw, 96px); }
.vx-hero-copy { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.vx-hero-copy .h1 { max-width: 13em; margin-bottom: 22px; }
.vx-hero-copy .lead { max-width: 34em; }
.vx-hero .head-cta { margin-top: 30px; }
.vx-hero .head-cta .btn-ghost { font: inherit; font-weight: 500; font-size: 16px; }

/* ---- the console ------------------------------------------------------- */
.vx { display: grid; gap: 14px; }
.vx-choose { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.vx-choose-h { font-size: 13px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-soft); }
.vx-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-tab {
  height: 38px; padding: 0 16px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line-strong); cursor: pointer;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-soft);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.vx-tab:hover { background: rgba(255, 255, 255, 0.7); color: var(--ink); }
.vx-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
/* on a phone the row scrolls sideways rather than wrapping into three lines */
@media (max-width: 599px) {
  .vx-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-snap-type: x proximity; }
  .vx-tabs::-webkit-scrollbar { display: none; }
  .vx-tab { flex: none; scroll-snap-align: start; }
}
/* a thumb needs 44px, whatever the row looks like at that size */
@media (pointer: coarse) { .vx-tab { height: 44px; padding-inline: 18px; } }

.vx-frame {
  border-radius: 26px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 34px 70px -40px rgba(12, 14, 20, 0.34), 0 2px 8px -5px rgba(12, 14, 20, 0.12);
  overflow: clip;
}
@media (max-width: 599px) { .vx-frame { border-radius: 20px; } }

/* the call header */
.vx-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 16px 24px; border-bottom: 1px solid var(--line); background: #fbfbfa;
  font-size: 14px;
}
.vx-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.vx-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background-color 300ms ease; }
.vx[data-state="ringing"] .vx-state i { background: var(--amber); animation: vx-ring 1s ease-in-out infinite; }
.vx[data-state="live"] .vx-state i { background: var(--teal); animation: vx-ring 2.4s ease-in-out infinite; }
.vx[data-state="done"] .vx-state i { background: var(--cobalt); }
@keyframes vx-ring { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
@media (prefers-reduced-motion: reduce) { .vx-state i { animation: none !important; } }
.vx-who { font-weight: 500; color: var(--ink); }
.vx-when, .vx-timer { color: var(--text-soft); }
.vx-timer { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .vx-top { padding: 14px 18px; font-size: 13px; } .vx-timer { margin-left: 0; } }

/* the waveform, which is the home page's component and nothing new */
.vx-wave { display: grid; justify-items: center; gap: 2px; padding: 14px 24px 4px; }
.vx-orb { gap: 0; padding: 0; }
.vx .voice { width: min(560px, 100%); aspect-ratio: 5 / 1.15; }
.vx-turn { font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); transition: color 300ms ease; }
.vx-orb.is-ai + .vx-turn { color: var(--cobalt); }

/* transcript beside the panel */
.vx-body { display: grid; gap: 0; }
@media (min-width: 900px) { .vx-body { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr); } }

.vx-script { display: grid; gap: 10px; align-content: start; padding: 18px 24px 26px; min-height: 330px; }
@media (max-width: 899px) { .vx-script { min-height: 300px; padding: 16px 18px 22px; } }
.vx-script li {
  display: grid; gap: 3px; padding: 13px 18px; border-radius: 18px; max-width: 90%;
  animation: vx-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes vx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vx-script li { animation: none; } }
.vx-script .is-ai { background: var(--ground); justify-self: start; border-bottom-left-radius: 6px; }
.vx-script .is-them { background: var(--ink); color: var(--ground); justify-self: end; border-bottom-right-radius: 6px; }
.vx-script .is-live { box-shadow: 0 0 0 1px rgba(39, 73, 233, 0.28); }
.vx-script .is-them.is-live { box-shadow: 0 0 0 1px rgba(39, 73, 233, 0.55); }
.vx-w { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; color: var(--text-soft); }
.vx-script .is-them .vx-w { color: rgba(244, 244, 242, 0.62); }
.vx-script p { font-size: 16px; line-height: 1.45; }
@media (max-width: 599px) { .vx-script p { font-size: 15.5px; } .vx-script li { max-width: 96%; } }

/* the panel that fills itself in as the call goes on */
.vx-panel { padding: 18px 24px 26px; border-left: 1px solid var(--line); background: #fcfcfb; }
@media (max-width: 899px) { .vx-panel { border-left: 0; border-top: 1px solid var(--line); padding: 18px; } }
.vx-panel-h { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 12px; }
.vx-fields { display: grid; }
.vx-fields > div {
  display: grid; gap: 2px; padding: 11px 0; border-top: 1px solid var(--line);
  opacity: 0.42; transition: opacity 420ms ease;
}
.vx-fields > div:last-child { border-bottom: 1px solid var(--line); }
.vx-fields > div.is-set { opacity: 1; }
.vx-fields dt { font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-soft); }
.vx-fields dd { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.vx-fields > div:not(.is-set) dd { font-weight: 400; color: var(--text-soft); }
/* the value lands rather than simply appearing */
.vx-fields dd { transition: opacity 260ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.vx-fields dd.is-swap { opacity: 0; transform: translateY(5px); }
/* each row takes its own place in the spectrum, the way the home page's
   numbers do */
.vx-fields > div:nth-child(1).is-set dt { color: var(--cobalt); }
.vx-fields > div:nth-child(2).is-set dt { color: var(--violet); }
.vx-fields > div:nth-child(3).is-set dt { color: var(--rose); }
.vx-fields > div:nth-child(4).is-set dt { color: var(--amber); }
.vx-fields > div:nth-child(5).is-set dt { color: var(--teal); }
.vx-fields > div:nth-child(6).is-set dt { color: var(--cobalt); }
.vx-fields > div:nth-child(7).is-set dt { color: var(--violet); }
@media (max-width: 899px) {
  /* on a phone the panel is a two column ledger under the transcript, which
     reads far better than seven full width rows of two words each */
  .vx-fields { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .vx-fields > div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 419px) { .vx-fields { grid-template-columns: 1fr; } .vx-fields > div:nth-last-child(2) { border-bottom: 0; } }

/* the controls */
.vx-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 24px 20px; border-top: 1px solid var(--line); }
@media (max-width: 599px) { .vx-controls { padding: 14px 18px 18px; } }
.vx-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--ink); color: var(--ground); border: 1px solid var(--ink);
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.vx-btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.vx-btn.is-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.vx-btn.is-quiet:hover { background: rgba(14, 15, 14, 0.05); border-color: var(--ink); }
.vx-btn-ico { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 1px; }
.vx[data-audio="on"] .vx-btn-ico { width: 10px; height: 12px; border: 0; background: currentColor; -webkit-mask: linear-gradient(#000 0 0) 0 0 / 3px 12px no-repeat, linear-gradient(#000 0 0) 7px 0 / 3px 12px no-repeat; mask: linear-gradient(#000 0 0) 0 0 / 3px 12px no-repeat, linear-gradient(#000 0 0) 7px 0 / 3px 12px no-repeat; margin-left: 0; }
.vx-note { font-size: 14px; color: var(--text-soft); }
.vx-note.is-warn { color: #a33f3a; }
.vx-caveat { font-size: 14px; line-height: 1.5; max-width: 52em; }

/* Without script these are the four calls, written out. With it they are the
   source the console plays from. */
html.js .vx-source { display: none; }
.vx-source { display: grid; gap: 28px; margin-top: 28px; }
.vx-source ol { display: grid; gap: 8px; max-width: 640px; }
.vx-source li { font-size: 16px; line-height: 1.5; }
.vx-source li::before { content: attr(data-who) ": "; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; color: var(--text-soft); }

/* ---- a day of calls, twice --------------------------------------------- */
.vx-day { display: grid; gap: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) { .vx-day { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); } }
.vx-day-lab { display: grid; gap: 8px; margin-bottom: 18px; }
.vx-day-tag { justify-self: start; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--ground-2); color: var(--text-soft); }
.vx-day-tag.is-on { background: var(--ink); color: var(--ground); }
.vx-day-lab p { font-size: 15px; }
.vx-calls { display: grid; border-bottom: 1px solid var(--line); }
.vx-calls li {
  display: grid; grid-template-columns: 52px 108px 1fr; gap: 6px 12px; align-items: baseline;
  padding: 15px 0; border-top: 1px solid var(--line); font-size: 15.5px;
}
.vx-call-t { font-variant-numeric: tabular-nums; color: var(--text-soft); font-size: 14px; }
.vx-call-s { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; }
.vx-call-s.is-miss { background: rgba(163, 63, 58, 0.1); color: #a33f3a; }
.vx-call-s.is-vm { background: var(--ground-2); color: var(--text-soft); }
.vx-call-s.is-ok { background: rgba(18, 181, 176, 0.14); color: #0c807c; }
.vx-call-s.is-hot { background: rgba(240, 160, 32, 0.18); color: #8a5a05; }
.vx-call-d { color: var(--text); }
@media (max-width: 479px) { .vx-calls li { grid-template-columns: 48px 1fr; } .vx-call-d { grid-column: 2; } }
.vx-day-foot { margin-top: clamp(28px, 3vw, 40px); font-size: 15px; max-width: 46em; }

/* ---- after the call ------------------------------------------------------ */
.vx-after { position: relative; display: grid; }
.vx-after-line, .vx-after-fill { position: absolute; left: 5px; top: 30px; bottom: 30px; width: 2px; }
.vx-after-line { background: var(--line); }
.vx-after-fill { background: linear-gradient(180deg, var(--cobalt), var(--violet), var(--rose), var(--amber), var(--teal)); transform: scaleY(var(--p, 0)); transform-origin: top; }
.vx-after li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 26px 0; border-top: 1px solid var(--line); }
.vx-after li:last-child { border-bottom: 1px solid var(--line); }
.vx-after li > div { display: grid; gap: 9px; }
.vx-after p { max-width: 38em; }
.vx-after p a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.vx-after p a:hover { border-bottom-color: var(--ink); }
.vx-after-n { position: relative; z-index: 1; padding-top: 5px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--n, var(--text-soft)); }
.vx-after-n::before { content: ""; position: absolute; left: -1px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--ground); border: 2px solid var(--line-strong); }
.vx-after li.is-in .vx-after-n::before { background: var(--ink); border-color: var(--ink); }
.vx-after-n { padding-left: 24px; }
.vx-after li:nth-child(1) { --n: var(--cobalt); }
.vx-after li:nth-child(2) { --n: var(--violet); }
.vx-after li:nth-child(3) { --n: var(--rose); }
.vx-after li:nth-child(4) { --n: var(--amber); }
.vx-after li:nth-child(5) { --n: var(--teal); }
@media (max-width: 599px) { .vx-after li { grid-template-columns: 42px 1fr; gap: 10px; } .vx-after-n { padding-left: 20px; } }

/* ---- four kinds of call --------------------------------------------------- */
.vx-kinds { display: grid; gap: clamp(44px, 5vw, 72px); }
.vx-kind { display: grid; gap: 20px; }
@media (min-width: 900px) { .vx-kind { grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr); gap: clamp(40px, 5vw, 80px); align-items: start; } .vx-kind-head { position: sticky; top: 116px; } }
.vx-kind-head { display: grid; gap: 10px; align-content: start; }
.vx-kind-head::before { content: ""; display: block; width: 52px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--cobalt), var(--violet), var(--rose), var(--amber), var(--teal)); }
.vx-kind-head p { font-size: 16px; color: var(--text-soft); max-width: 24em; }
.vx-kind-n { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.vx-kind-list { display: grid; border-bottom: 1px solid var(--line); }
.vx-kind-list li { display: grid; gap: 5px; padding: 16px 0; border-top: 1px solid var(--line); font-size: clamp(16.5px, 1.5vw, 19px); font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.vx-kind-list em { font-style: normal; font-size: 15px; font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--text-soft); max-width: 40em; }

/* ---- the handoff ---------------------------------------------------------- */
.vx-hand { display: grid; gap: clamp(36px, 5vw, 56px); }
@media (min-width: 960px) { .vx-hand { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); align-items: start; } }
.vx-hand-copy { display: grid; gap: 18px; align-content: start; }
.vx-hand-copy p { max-width: 32em; }
.vx-flow { display: grid; gap: 10px; }
.vx-flow > li { position: relative; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.vx-flow > li:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -10px; width: 2px; height: 10px;
  background: linear-gradient(180deg, var(--line-strong), var(--line)); transform: translateX(-50%);
}
.vx-flow-k { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c, var(--text-soft)); margin-bottom: 7px; }
.vx-flow > li:nth-child(1) { --c: var(--cobalt); }
.vx-flow > li:nth-child(2) { --c: var(--violet); }
.vx-flow p { font-size: 16px; line-height: 1.45; }
.vx-flow-split { display: grid; gap: 18px; padding: 0 !important; border: 0 !important; background: transparent !important; }
@media (min-width: 620px) { .vx-flow-split { grid-template-columns: 1fr 1fr; gap: 10px; } }
.vx-flow-yes, .vx-flow-no { padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line); }
.vx-flow-yes { background: #fff; --c: var(--teal); }
.vx-flow-no { background: var(--ground-2); --c: var(--amber); }
.vx-flow-split::after { display: none; }

/* ---- what it knows -------------------------------------------------------- */
.vx-know { display: grid; gap: clamp(32px, 4vw, 52px); }
@media (min-width: 960px) { .vx-know { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; } }
.vx-blocks { display: grid; gap: 6px; }
@media (min-width: 560px) { .vx-blocks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .vx-blocks { grid-template-columns: 1fr 1fr; } }
.vx-blocks li { display: grid; gap: 5px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.vx-block-k { font-size: 12.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--k, var(--text-soft)); }
.vx-blocks li:nth-child(5n+1) { --k: var(--cobalt); }
.vx-blocks li:nth-child(5n+2) { --k: var(--violet); }
.vx-blocks li:nth-child(5n+3) { --k: var(--rose); }
.vx-blocks li:nth-child(5n+4) { --k: var(--amber); }
.vx-blocks li:nth-child(5n+5) { --k: var(--teal); }
.vx-block-v { font-size: 15px; line-height: 1.42; color: var(--text); }
.vx-know-demo { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 34px); border-radius: 24px; background: rgba(255, 255, 255, 0.72); }
.vx-know-h { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.vx-qa { display: grid; gap: 12px; }
.vx-q { font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; letter-spacing: -0.018em; color: var(--ink); }
.vx-a { font-size: 14px; color: var(--text-soft); }
.vx-a em { font-style: normal; font-weight: 600; color: var(--ink); }
.vx-said { padding: 16px 18px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--ground); font-size: 16px; line-height: 1.45; color: var(--ink); }
.vx-know-foot { font-size: 14.5px; line-height: 1.5; }

/* ---- what it is wired into ------------------------------------------------ */
.vx-wire { display: grid; gap: 12px; align-items: center; }
@media (min-width: 900px) { .vx-wire { grid-template-columns: 1fr auto 1fr auto 1fr; gap: clamp(12px, 2vw, 26px); } }
.vx-wire-col, .vx-wire-core { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 22px; }
.vx-wire-col { background: rgba(255, 255, 255, 0.66); border: 1px solid var(--line); }
.vx-wire-core { background: var(--ink); color: var(--ground); }
.vx-wire-lab { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.vx-wire-core .vx-wire-lab { color: rgba(244, 244, 242, 0.6); }
.vx-wire-item { font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; letter-spacing: -0.02em; color: inherit; }
.vx-wire-col .vx-wire-item { color: var(--ink); }
.vx-wire-note { font-size: 14px; line-height: 1.45; }
.vx-wire-outs { display: grid; gap: 4px; margin-top: 2px; }
.vx-wire-outs li { font-size: 15.5px; color: var(--text); }
/* three dots between the boxes, drifting along the join */
.vx-wire-mid { display: flex; justify-content: center; gap: 6px; padding: 4px 0; }
.vx-wire-mid span { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
@media (prefers-reduced-motion: no-preference) {
  .vx-wire-mid span { animation: vx-dot 1.8s ease-in-out infinite; }
  .vx-wire-mid span:nth-child(2) { animation-delay: 0.18s; }
  .vx-wire-mid span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes vx-dot { 0%, 100% { background: var(--line-strong); } 45% { background: var(--cobalt); } }
}
.vx-wire-foot { margin-top: clamp(24px, 3vw, 36px); font-size: 16px; line-height: 1.55; max-width: 46em; color: var(--text); }

/* ---- who it suits --------------------------------------------------------- */
.vx-suits { display: grid; border-bottom: 1px solid var(--line); }
.vx-suits li { display: grid; gap: 8px; padding: 24px 0; border-top: 1px solid var(--line); }
@media (min-width: 820px) { .vx-suits li { grid-template-columns: 300px 1fr; gap: 32px; align-items: baseline; } }
.vx-suit-k { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.022em; color: var(--ink); }
.vx-suit-v { font-size: 16.5px; line-height: 1.5; color: var(--text); max-width: 40em; }

/* ---- close ----------------------------------------------------------------- */
.vx-close-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---- scroll-linked motion for this page ------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes vx-after-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .vx-after-fill { animation: vx-after-fill linear both; animation-timeline: view(); animation-range: entry 70% exit 30%; }
  }
}