/* ============================================================
   INTELLICAMP — Digital Product Studio
   Original stylesheet. No build step required.
   ============================================================ */

/* ---------- 1. Tokens ----------
   Dark is the default. Everything themeable lives here; the light set
   below overrides the same names, so components never need to know
   which theme is active. */
:root {
  --ink: #07080a;
  --ink-rgb: 7, 8, 10;
  --ink-2: #0e1013;
  --ink-3: #16191e;
  --ink-3-rgb: 22, 25, 30;
  --line: #24282f;
  --line-rgb: 36, 40, 47;
  --line-soft: #1b1f25;

  --paper: #f4f4f0;
  --muted: #9aa3af;
  --muted-2: #6b7280;
  --muted-3: #4a515c;
  --text-2: #d6dae1;

  /* frosted panels */
  --glass: rgba(11, 13, 16, 0.94);
  --glass-2: rgba(18, 21, 26, 0.96);

  --shadow-strong: rgba(0, 0, 0, 0.9);
  --shadow-soft: rgba(0, 0, 0, 0.5);

  /* always dark: text that sits on top of the accent colour */
  --on-accent: #0d0f12;

  --accent: #c6f24e;
  --accent-rgb: 198, 242, 78;
  /* the tint decorations glint with; flips on the light build */
  --sheen: 255, 255, 255;
  /* fallbacks — theme.js overwrites both on first paint */
  --deco: var(--accent);
  --deco-rgb: var(--accent-rgb);

  /* The accent as *ink* — text, icon strokes and state borders, as opposed
     to fills. On a near-black surface the raw accent is already legible, so
     here it is a pass-through; the light build overrides it. theme.js
     recomputes this from whatever accent is active, so a custom accent gets
     the same treatment. */
  --accent-ink: var(--accent);
  --accent-deep: #a8d92c;
  --violet: #8b5cf6;
  --violet-rgb: 139, 92, 246;
  --coral: #ff7a59;
  --sky: #6ee7f0;

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(0.95rem, 0.91rem + 0.2vw, 1.05rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4: clamp(2.6rem, 1.8rem + 3.6vw, 5.4rem);

  --gutter: clamp(1.15rem, 4vw, 3rem);
  --max: 1320px;
  --radius: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --header-h: 68px;
  --stripe-h: 34px;

  --cursor-c: var(--accent);
}

/* ---------- 1b. Light theme ----------
   Not an inversion: surfaces, borders and washes are retuned so the
   light build reads as its own design. */
:root[data-theme="light"] {
  --ink: #f6f6f2;
  --ink-rgb: 246, 246, 242;
  --ink-2: #eeeee7;
  --ink-3: #e4e4db;
  --ink-3-rgb: 228, 228, 219;
  --line: #d2d2c6;
  --line-rgb: 210, 210, 198;
  --line-soft: #e0e0d6;

  --paper: #0d0f12;

  /* Grey ramp, retuned rather than reused. The dark-theme greys were chosen
     to sit on near-black; dropped onto this canvas they land at 6.1 / 3.8 /
     2.4:1, so the two lower tiers were effectively unreadable. These clear
     4.5:1 against the *darkest* light surface (--ink-3, the card fill) so
     they hold up on tinted panels too, and stay far enough apart that the
     three tiers still read as a hierarchy. */
  --muted: #444955;
  --muted-2: #535963;
  --muted-3: #5e6674;
  --text-2: #2b3038;

  --glass: rgba(255, 255, 255, 0.88);
  --glass-2: rgba(255, 255, 255, 0.97);

  --shadow-strong: rgba(24, 26, 32, 0.22);
  --shadow-soft: rgba(24, 26, 32, 0.14);

  /* Lime is a fill colour here, not an ink one: #c6f24e on this canvas is
     1.2:1, i.e. invisible. Same hue, dropped in lightness until it clears
     AA. theme.js overwrites this per accent — this value is the no-JS
     fallback for the default lime. */
  --accent-ink: #536f08;
  --accent-deep: #7ea70f;

  /* Only ever a gradient stop, so it stays bright — darkening it would just
     muddy the artwork it appears in. */
  --sky: #1fa9b8;

  /* Coral *is* used as text (warnings, "no" branches, cut figures) and runs
     2.4:1 against this canvas, so it gets the same treatment as the accent. */
  --coral: #c42700;
  --sheen: 20, 22, 26;
}

/* ---------- 1c. Dim theme ----------
   Its own token set, not a blend: softer slate surfaces, lower contrast
   than dark, easier than light in the evening. */
:root[data-theme="dim"] {
  --ink: #1c2028;
  --ink-rgb: 28, 32, 40;
  --ink-2: #222732;
  --ink-3: #2b313d;
  --ink-3-rgb: 43, 49, 61;
  --line: #3a4250;
  --line-rgb: 58, 66, 80;
  --line-soft: #2f3643;

  --paper: #e8eaef;
  --muted: #a3abbb;
  --muted-2: #808999;
  --muted-3: #8f99aa;   /* was #5f6878 — 2.9:1 here, which is not a text colour */
  --text-2: #cfd5e0;

  --glass: rgba(30, 35, 44, 0.9);
  --glass-2: rgba(38, 44, 55, 0.95);

  --shadow-strong: rgba(0, 0, 0, 0.7);
  --shadow-soft: rgba(0, 0, 0, 0.4);
}

:root[data-theme="dim"] .header { background: rgba(28, 32, 40, 0.82); }

/* Light mode needs a few components retuned rather than just recoloured. */
:root[data-theme="light"] .hero__grid-lines { opacity: 0.9; }

:root[data-theme="light"] .work__item::after {
  background: linear-gradient(
    to top,
    rgba(20, 22, 26, 0.9) 12%,
    rgba(20, 22, 26, 0.25) 70%
  );
}

/* Card artwork sits under white text, so it stays rich in both themes.
   This list has to cover EVERYTHING inside a tile: the canvas stays dark
   in the light build, so any token that flips — --muted, --muted-2,
   --paper — turns dark grey on a dark card and disappears. The tiles
   gained a lede, body copy and a numeral after this rule was written. */
:root[data-theme="light"] .work__item h3,
:root[data-theme="light"] .work__meta .tag,
:root[data-theme="light"] .work__item .nn__n { color: #f6f6f2; }

:root[data-theme="light"] .work__body p,
:root[data-theme="light"] .work__lede,
:root[data-theme="light"] .work__result small { color: rgba(246, 246, 242, 0.76); }

:root[data-theme="light"] .stripe__cta span {
  background-image:
    linear-gradient(110deg, transparent 42%, rgba(var(--accent-rgb), 0.95) 50%, transparent 58%),
    linear-gradient(#f6f6f2, #f6f6f2);
}

:root[data-theme="light"] .header {
  background: rgba(246, 246, 242, 0.82);
}

:root[data-theme="light"] .boot { background: var(--ink); }
:root[data-theme="light"] .cursor { mix-blend-mode: normal; }
:root[data-theme="light"] .cursor-dot { mix-blend-mode: normal; }

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- 3. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section--alt { background: var(--ink-2); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.02em; }

.lede {
  color: var(--muted);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 56ch;
}

.section-head {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: end;
    gap: 3rem;
  }
}

.accent { color: var(--accent-ink); }
.violet { color: var(--violet); }

/* ---------- 4. Buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}

/* A halo and a rim, and nothing moves. The lift and the arrow nudge were
   removed at the client's request some time ago; this replaces the flat
   colour-only hover with light, which reads as a state rather than an
   effect. */
.btn:hover {
  transform: none;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.45),
              0 6px 26px -6px rgba(var(--accent-rgb), 0.6);
}

.btn:hover::after { transform: translateY(0); }

.btn svg { transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translate(3px, -3px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border: 1px solid var(--line);
}

.btn--ghost::after { background: var(--paper); }
.btn--ghost:hover {
  color: var(--ink);
  box-shadow: none;
}

.btn--sm { padding: 0.6rem 1.15rem; font-size: var(--step--1); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent-ink);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease);
}

.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { transition: transform 0.35s var(--ease); }
.link-arrow:hover svg { transform: translate(3px, -3px); }

/* ---------- 5. Scroll progress ---------- */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--sky), var(--violet));
  z-index: 10001;
  will-change: transform;
}

/* ---------- 6. Promo stripe ---------- */
@keyframes stripe-hue {
  0%, 100% { background-color: #c6f24e; }
  25% { background-color: #6ee7f0; }
  50% { background-color: #ffb3cc; }
  75% { background-color: #ffd166; }
}

@keyframes shimmer {
  0% { background-position: 160% center; }
  100% { background-position: -60% center; }
}

.stripe {
  height: var(--stripe-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding-inline: 1rem;
  color: var(--on-accent);
  font-size: var(--step--1);
  font-weight: 700;
  animation: stripe-hue 14s linear infinite;
  position: relative;
  z-index: 1002;
}

.stripe p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stripe__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  height: 24px;
  padding-inline: 0.7rem;
  border-radius: 999px;
  background: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
}

.stripe__cta span {
  background-image:
    linear-gradient(110deg, transparent 42%, rgba(var(--accent-rgb), 0.95) 50%, transparent 58%),
    linear-gradient(var(--paper), var(--paper));
  background-size: 220% 100%, 100% 100%;
  background-position: 160% center, center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.6s linear infinite;
}

/* ---------- 7. Header + mega menu ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(var(--ink-rgb), 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: transform 0.45s var(--ease), border-color 0.3s ease,
    background 0.3s ease;
}

.header.is-stuck { border-bottom-color: var(--line-soft); }
.header.is-hidden { transform: translateY(-100%); }

.header__bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.66rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}

.logo__mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent);
  display: grid;
  place-items: center;
  color: var(--on-accent);
  font-size: 1.24rem;
  font-weight: 700;
  transition: transform 0.5s var(--ease);
}

.logo:hover .logo__mark { transform: rotate(-14deg) scale(1.08); }
.logo__dot { color: var(--accent-ink); }

/* Nav */
.nav { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.25s ease, background 0.25s ease;
}

.nav__link:hover,
.nav__item.is-open .nav__link { color: var(--paper); background: var(--ink-3); }

.nav__link svg { transition: transform 0.3s var(--ease); }
.nav__item.is-open .nav__link svg { transform: rotate(180deg); }

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: 1.4rem;
}

/* Dropdown panel */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: min(880px, calc(100vw - 2 * var(--gutter)));
  translate: -50% 0;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  box-shadow: 0 30px 70px -30px var(--shadow-strong);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease),
    visibility 0.35s;
}

.nav__item.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__grid { display: grid; gap: 1.4rem; }

@media (min-width: 880px) {
  .mega__grid { grid-template-columns: 1.4fr 1fr; }
}

.mega__list { display: grid; gap: 0.2rem; }

@media (min-width: 620px) {
  .mega__list { grid-template-columns: 1fr 1fr; gap: 0.2rem 0.8rem; }
}

.mega__link {
  display: block;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease,
    transform 0.3s var(--ease);
}

.mega__link:hover {
  background: var(--ink-3);
  border-color: var(--line);
  transform: translateX(4px);
}

.mega__link strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.mega__link span { font-size: 0.82rem; color: var(--muted-2); line-height: 1.4; }
.mega__link:hover strong { color: var(--accent-ink); }

.mega__promo {
  border-radius: var(--radius);
  padding: 1.3rem;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--violet-rgb), 0.35), transparent 55%),
    var(--ink-3);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
}

.mega__promo h4 { font-size: 1.05rem; line-height: 1.25; }
.mega__promo p { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }

/* Burger */
.burger {
  display: none;
  width: 42px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  position: relative;
}

.burger span,
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 1.5px;
  background: var(--paper);
  translate: -50% -50%;
  transition: transform 0.45s var(--ease), opacity 0.25s ease;
}

.burger::before { transform: translateY(-6px); }
.burger::after { transform: translateY(6px); }

body.nav-open .burger span { opacity: 0; }
body.nav-open .burger::before { transform: rotate(45deg); }
body.nav-open .burger::after { transform: rotate(-45deg); }

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(4rem, 11vw, 9rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  pointer-events: none;
  background:
    radial-gradient(45% 55% at 18% 12%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    radial-gradient(40% 50% at 82% 8%, rgba(var(--violet-rgb), 0.22), transparent 70%);
  will-change: transform;
}

.hero__grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(80% 60% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 30%, #000 20%, transparent 78%);
  opacity: 0.55;
}

.hero__inner { position: relative; z-index: 2; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--ink-3-rgb), 0.7);
  font-size: var(--step--1);
  color: var(--muted);
  margin-bottom: 1.8rem;
}

.hero__badge b {
  background: var(--accent);
  color: var(--ink);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: var(--step-4);
  max-width: 16ch;
  margin-bottom: 1.6rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent-ink);
  position: relative;
}

.hero__sub { max-width: 52ch; color: var(--muted); font-size: var(--step-1); }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.4rem;
}

/* --- Hero stats: glass tiles with lime bloom --- */
.hero-stats {
  position: relative;
  margin-top: clamp(3rem, 7vw, 5rem);
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(
    118deg,
    rgba(var(--violet-rgb), 0.55),
    rgba(var(--accent-rgb), 0.4) 48%,
    rgba(var(--line-rgb), 0.6) 78%
  );
  isolation: isolate;
}

.hero-stats__wash {
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 60% at 12% 30%, rgba(var(--accent-rgb), 0.22), transparent 70%),
    radial-gradient(42% 65% at 88% 70%, rgba(var(--violet-rgb), 0.28), transparent 72%);
  filter: blur(30px);
}

.hero-stats__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-radius: calc(var(--radius-lg) - 1px);
  overflow: hidden;
}

.hstat {
  position: relative;
  padding: clamp(1.5rem, 3.4vw, 2.3rem) clamp(1.15rem, 2.6vw, 1.8rem);
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
  isolation: isolate;
  cursor: default;
  transition: transform 0.55s var(--ease), background 0.5s ease;
}

/* cursor-tracked bloom */
.hstat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-rgb), 0.16),
    transparent 62%
  );
  transition: opacity 0.45s ease;
}

/* base sweep rule */
.hstat::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease);
}

.hstat:hover {
  transform: translateY(-6px);
  background: var(--glass-2);
}

.hstat:hover::before { opacity: 1; }
.hstat:hover::after { transform: scaleX(1); }

.hstat__i {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.45s ease, transform 0.5s var(--ease);
}

.hstat:hover .hstat__i { opacity: 0.75; transform: none; }

.hstat__n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease, transform 0.55s var(--ease);
}

.hstat:hover .hstat__n {
  color: var(--accent-ink);
  transform: translateX(3px);
}

.hstat__label {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--step--1);
  color: var(--muted-2);
  transition: color 0.4s ease;
}

.hstat:hover .hstat__label { color: var(--muted); }

@media (max-width: 640px) {
  .hstat { padding: 1.3rem 1.2rem; }
}

/* Word-by-word reveal */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.reveal-word > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%);
  opacity: 0;
  animation: word-up 0.85s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes word-up {
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- 9. Marquee ---------- */
.marquee {
  --speed: 34s;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding-block: 1.4rem;
  border-block: 1px solid var(--line-soft);
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-right: clamp(2rem, 5vw, 4rem);
  animation: slide var(--speed) linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes slide {
  to { transform: translateX(-100%); }
}

.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--muted-3);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.marquee__item:hover { color: var(--paper); }

.marquee--headline .marquee__item {
  font-size: clamp(2.4rem, 8vw, 6rem);
  color: transparent;
  /* --accent-ink rather than raw --accent: theme.js fits it to 4.5:1
     against the page background for whatever accent is selected, so the
     outline holds up in dark, dim and light without a per-theme override.
     It also matches the .solid words, which already use it. */
  -webkit-text-stroke: 1px var(--accent-ink);
  text-transform: uppercase;
}

.marquee--headline .marquee__item.solid {
  color: var(--accent-ink);
  -webkit-text-stroke: 0;
}

/* ---------- 10. Cards / services ---------- */
.grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.card {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease), border-color 0.4s ease;
}

/* Stretched link, same idea as .work__hit: the whole card is the target
   where a card has a page behind it. Cards without one are unaffected,
   so the grid can be linked up progressively as pages get built. */
.card__hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  cursor: pointer;
}

.card__hit:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -4px; }

/* the affordance only appears on cards that actually lead somewhere */
.card__go {
  position: absolute;
  top: clamp(1.4rem, 3vw, 2rem);
  right: clamp(1.4rem, 3vw, 2rem);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted-2);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.35s ease, transform 0.45s var(--ease),
              color 0.35s ease, border-color 0.35s ease;
}

.card:hover .card__go,
.card:focus-within .card__go {
  opacity: 1;
  transform: none;
  color: var(--accent-ink);
  border-color: var(--accent-ink);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-rgb), 0.09),
    transparent 65%
  );
  transition: opacity 0.4s ease;
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--line);
}

.card:hover::before { opacity: 1; }

.card__num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--muted-2);
  transition: color 0.35s ease;
}

.card:hover .card__num { color: var(--accent-ink); }

/* Article cards: the category chip lights up on hover */
#insights .card__num {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 0.35s ease, border-color 0.35s ease,
    background 0.35s ease, transform 0.5s var(--ease);
}

#insights .card:hover .card__num {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

#insights .card:hover h3 { color: var(--paper); }

#insights .card .link-arrow { background-size: 0% 1px; }
#insights .card:hover .link-arrow { background-size: 100% 1px; }
#insights .card:hover .link-arrow svg { transform: translate(4px, -4px); }

.card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--ink-3);
  border: 1px solid var(--line);
  margin-bottom: 1.3rem;
  transition: background 0.4s var(--ease), transform 0.5s var(--ease);
}

.card:hover .card__icon {
  background: var(--accent);
  transform: rotate(-8deg);
}

.card:hover .card__icon svg { stroke: var(--ink); }
.card__icon svg { stroke: var(--accent-ink); transition: stroke 0.35s ease; }

.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--muted); font-size: var(--step--1); line-height: 1.6; }

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.2rem;
}

.tag {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted-2);
}

/* ---------- 11. Stats ---------- */
.stats {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.stat {
  background: var(--ink);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  transition: background 0.4s ease;
}

.stat:hover { background: var(--ink-2); }

.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 0.5rem;
}

.stat span { color: var(--muted-2); font-size: var(--step--1); }

/* ---------- 12. Work / portfolio ---------- */
.work { display: grid; gap: 1.1rem; }

@media (min-width: 860px) {
  .work { grid-template-columns: repeat(6, 1fr); }
  .work__item--wide { grid-column: span 4; }
  .work__item--narrow { grid-column: span 2; }
  .work__item--half { grid-column: span 3; }
}

.work__item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.3rem, 3vw, 2rem);
  isolation: isolate;
  transition: border-color 0.4s ease;
}

.work__item:hover { border-color: transparent; }

/* Diagonal wipe as the card scrolls in.
   Default state is fully visible on purpose: the wipe is an entrance
   animation, so a card can never get stuck hidden if JS doesn't run. */
@keyframes work-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.work__item[data-reveal].is-in {
  animation: work-wipe 0.95s var(--ease) both;
}

.work__canvas {
  position: absolute;
  inset: -8%;
  z-index: -2;
  filter: saturate(0.85) brightness(0.9);
  transition: transform 0.75s var(--ease), filter 0.6s ease;
  will-change: transform;
}

.work__item:hover .work__canvas {
  transform: scale(1.12);
  filter: saturate(1.2) brightness(1.05);
}

/* content layer, drifts with the cursor */
.work__body {
  position: relative;
  z-index: 1;
  transition: transform 0.6s var(--ease);
  will-change: transform;
}

/* SVG border that draws itself around the perimeter */
.work__trace {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.work__trace rect {
  fill: none;
  /* --wc is set per card in the markup */
  stroke: var(--wc, var(--accent));
  stroke-width: 1.5;
  /* dash values are set from the measured perimeter in motion.js */
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
  transition: stroke-dashoffset 0.85s var(--ease);
}

.work__item:hover .work__trace rect { stroke-dashoffset: 0; }

/* tags stagger upward on hover */
.work__meta .tag {
  transform: translateY(0);
  transition: transform 0.5s var(--ease), background 0.4s ease,
    color 0.4s ease, border-color 0.4s ease;
}

.work__item:hover .work__meta .tag {
  transform: translateY(-4px);
  border-color: var(--wc, var(--accent));
  color: var(--wc, var(--accent));
}

.work__item:hover .work__meta .tag:nth-child(2) { transition-delay: 0.06s; }
.work__item:hover .work__meta .tag:nth-child(3) { transition-delay: 0.12s; }

/* hidden CTA row slides up on hover */
.work__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--wc, var(--accent));
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.55s var(--ease);
}

.work__item:hover .work__cta { opacity: 1; transform: none; }
.work__item:hover .work__cta svg { transform: translate(3px, -3px); }
.work__cta svg { transition: transform 0.4s var(--ease); }

.work__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(var(--ink-rgb), 0.94) 12%, rgba(var(--ink-rgb), 0.15) 70%);
}

.c-1 { background: linear-gradient(135deg, #1f2937, #0b3d3a 45%, #c6f24e); }
.c-2 { background: linear-gradient(135deg, #2b1b4d, #6d28d9 60%, #f0abfc); }
.c-3 { background: linear-gradient(135deg, #0c2a3d, #0891b2 55%, #6ee7f0); }
.c-4 { background: linear-gradient(135deg, #3d1f0c, #c2410c 55%, #ff7a59); }
.c-5 { background: linear-gradient(135deg, #101418, #334155 60%, #94a3b8); }

.work__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.work__meta .tag {
  background: rgba(var(--ink-rgb), 0.55);
  backdrop-filter: blur(6px);
  color: var(--text-2);
}

.work__item h3 { font-size: var(--step-2); max-width: 18ch; }

.work__result {
  margin-top: 0.8rem;
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.work__result b {
  font-family: var(--font-display);
  font-size: 1.35rem;
  display: block;
  color: var(--wc, var(--accent));
  letter-spacing: -0.03em;
}

.work__result small { color: var(--muted); font-size: 0.78rem; }

/* ---------- 13. Process (sticky) ---------- */
.process { display: grid; gap: 2.5rem; }

@media (min-width: 960px) {
  .process { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: start; }
  .process__aside { position: sticky; top: calc(var(--header-h) + 3rem); }
}

.steps { display: grid; gap: 1rem; }

.step {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  background: var(--ink-2);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  transition: border-color 0.4s ease, background 0.4s ease;
}

.step:hover { border-color: var(--accent-ink); background: var(--ink-3); }

.step__n {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-ink);
  flex-shrink: 0;
}

.step:hover .step__n { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.step h3 { margin-bottom: 0.45rem; }
.step p { color: var(--muted); font-size: var(--step--1); }

/* ---------- 14. Testimonials ---------- */
.quotes {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.quote {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease), border-color 0.4s ease;
}

/* cursor-tracked bloom, matching the service cards */
.quote::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-rgb), 0.09),
    transparent 65%
  );
  transition: opacity 0.4s ease;
}

.quote:hover {
  transform: translateY(-6px);
  border-color: var(--accent-ink);
}

.quote:hover::before { opacity: 1; }

.quote__mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--accent-ink);
  opacity: 0.5;
  transform-origin: 0 50%;
  transition: transform 0.55s var(--ease), opacity 0.4s ease;
}

.quote:hover .quote__mark { transform: scale(1.25); opacity: 1; }

.avatar {
  transition: transform 0.55s var(--ease), box-shadow 0.5s var(--ease);
}

.quote:hover .avatar {
  transform: rotate(-10deg) scale(1.12);
  box-shadow: 0 8px 22px -8px rgba(var(--accent-rgb), 0.5);
}

.quote__by strong { transition: color 0.35s ease; }
.quote:hover .quote__by strong { color: var(--accent-ink); }

.quote p { font-size: var(--step-1); line-height: 1.5; letter-spacing: -0.01em; }

.quote__by { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  flex-shrink: 0;
}

.quote__by strong { display: block; font-size: 0.92rem; }
.quote__by span { font-size: 0.8rem; color: var(--muted-2); }

/* ---------- 14b. Team ---------- */
/* Built on .card, so it already inherits the pointer-tracked bloom, the 3D
   tilt and the scroll-velocity skew that motion.js wires to every .card.
   Everything below keys off .is-in — the class the scroll observer already
   sets — so the entrance needs no extra JS and nothing to measure.
   Each card carries one --pc, which drives both the avatar fill and the
   ring stroke, and comes from the accent-derived palette. */
.person__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.05rem;
}

.person__head h3 {
  margin: 0;
  font-size: var(--step-1);
  transition: color 0.35s ease, transform 0.5s var(--ease);
}

.person:hover .person__head h3 { color: var(--accent-ink); transform: translateX(3px); }

/* ---- avatar + traced ring ---- */
.person__ava {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}

.person .avatar { background: var(--pc, var(--accent)); }

.person:hover .avatar {
  transform: rotate(-8deg) scale(1.1);
  box-shadow: 0 8px 22px -8px rgba(var(--accent-rgb), 0.5);
}

/* Same dash-offset trick as the work tiles' border tracer, but on a circle
   of fixed radius — the dash length is a constant, so unlike .work__trace
   this needs no measuring and no resize handling. */
.person__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  rotate: -90deg; /* start the lap at twelve o'clock */
}

.person__ring circle {
  fill: none;
  stroke: var(--pc, var(--accent));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: var(--ring-len, 157);
  stroke-dashoffset: var(--ring-len, 157);
  opacity: 0.7;
  transition: stroke-dashoffset 1.1s var(--ease) 0.15s, opacity 0.4s ease;
}

.person.is-in .person__ring circle { stroke-dashoffset: 0; }

/* hover carries it round another full lap rather than snapping back */
.person:hover .person__ring circle {
  stroke-dashoffset: calc(var(--ring-len, 157) * -1);
  opacity: 1;
  transition-duration: 0.9s;
  transition-delay: 0s;
}

/* ---- role wipe ---- */
/* Same wipe as .eyebrow, but safe to put on the element itself: nothing
   observes .person__role, and its ancestor .person — which is what the
   observer actually watches — is never clipped. */
.person__role {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-3);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.3s, color 0.35s ease;
}

.person.is-in .person__role { clip-path: inset(0 0 0 0); }
.person:hover .person__role { color: var(--muted); }

/* ---- tags lift, matching the work tiles ---- */
.person .card__tags .tag {
  transition: transform 0.5s var(--ease), color 0.4s ease, border-color 0.4s ease;
}

.person:hover .card__tags .tag {
  transform: translateY(-4px);
  color: var(--paper);
  border-color: rgba(var(--accent-rgb), 0.45);
}

.person:hover .card__tags .tag:nth-child(2) { transition-delay: 0.05s; }

/* ---------- 15. Accordion (FAQ) ---------- */
.acc { border-top: 1px solid var(--line-soft); }

.acc__item { border-bottom: 1px solid var(--line-soft); }

.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.acc__btn:hover { color: var(--accent-ink); }

.acc__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: transform 0.4s var(--ease);
}

.acc__icon::before { width: 14px; height: 1.5px; }
.acc__icon::after { width: 1.5px; height: 14px; }

.acc__item.is-open .acc__icon::after { transform: scaleY(0); }
.acc__item.is-open .acc__btn { color: var(--accent-ink); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}

.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }

.acc__panel > div { overflow: hidden; }
.acc__panel p { color: var(--muted); padding-bottom: 1.5rem; max-width: 70ch; }

/* ---------- 16. Contact ---------- */
.contact {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 960px) {
  .contact { grid-template-columns: 1fr 1.05fr; gap: 4rem; }
}

.form {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  gap: 1.1rem;
}

.field { display: grid; gap: 0.45rem; }

.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: var(--step-0);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.field textarea { resize: vertical; min-height: 110px; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--muted-3); }

.field--row { display: grid; gap: 1.1rem; }

@media (min-width: 560px) {
  .field--row { grid-template-columns: 1fr 1fr; }
}

.form__note { font-size: 0.78rem; color: var(--muted-2); }

.form__ok {
  display: none;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--accent-ink);
  font-size: var(--step--1);
}

.form__ok.show { display: block; }

.contact__list { display: grid; gap: 1.4rem; margin-top: 2.2rem; }

.contact__row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line-soft);
}

.contact__row strong { display: block; font-family: var(--font-display); }
.contact__row span { color: var(--muted); font-size: var(--step--1); }

/* ---------- 17. CTA band ---------- */
.cta-band {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(2.4rem, 6vw, 4.5rem);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(var(--violet-rgb), 0.3), transparent 60%),
    var(--ink-2);
  border: 1px solid var(--line);
}

.cta-band h2 { max-width: 20ch; margin-inline: auto; margin-bottom: 1.2rem; }
.cta-band p { color: var(--muted); max-width: 52ch; margin-inline: auto; }
.cta-band .hero__cta { justify-content: center; }

/* ---------- 18. Footer ---------- */
@keyframes hairline-drift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.footer {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--ink-2);
  overflow: hidden;
}

/* animated gradient hairline along the top edge */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    var(--sky),
    var(--violet),
    var(--coral),
    transparent
  );
  background-size: 200% 100%;
  animation: hairline-drift 9s linear infinite;
}

/* soft ambient wash so the footer isn't flat */
.footer::after {
  content: "";
  position: absolute;
  inset: auto -10% -60% -10%;
  height: 70%;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 20% 100%, rgba(var(--accent-rgb), 0.1), transparent 70%),
    radial-gradient(45% 65% at 80% 100%, rgba(var(--violet-rgb), 0.12), transparent 72%);
  filter: blur(20px);
}

.footer .wrap { position: relative; z-index: 1; }

.footer__grid {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

@media (min-width: 780px) {
  .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); gap: 3rem; }
}

.footer__brand p {
  color: var(--muted);
  font-size: var(--step--1);
  max-width: 34ch;
  margin-top: 1rem;
}

.footer h4 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1.1rem;
}

.footer__links { display: grid; gap: 0.65rem; }

.footer__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--text-2);
  font-size: var(--step--1);
  padding-left: 0;
  transition: color 0.25s ease, padding-left 0.4s var(--ease);
}

/* arrow slides in from the left on hover */
.footer__links a::before {
  content: "\2197";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-8px);
  color: var(--accent-ink);
  transition: opacity 0.3s ease, transform 0.4s var(--ease);
}

.footer__links a:hover {
  color: var(--accent-ink);
  padding-left: 20px;
}

.footer__links a:hover::before { opacity: 1; transform: none; }

/* --- Live studio clocks --- */
.clocks {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.clock {
  position: relative;
  background: var(--ink);
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: background 0.4s ease;
}

.clock:hover { background: var(--ink-3); }

.clock__city {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.clock__time {
  display: flex;
  align-items: flex-end;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
  /* headroom so digits can lift without clipping */
  padding-top: 0.55rem;
  min-height: 2.4rem;
}

/* digits inherit the magnetic letter component */
.clock__time .wm-l__o {
  color: var(--paper);
  -webkit-text-stroke: 0;
}

.clock__time .wm-l__f {
  text-shadow: 0 0 calc(max(var(--lit, 0), var(--pulse, 0)) * 20px)
    color-mix(in srgb, var(--c, var(--accent)) 60%, transparent);
}

/* the status dot and city label take the same time-of-day colour */
.clock__dot { background: var(--c, var(--accent)); }

.clock__phase {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c, var(--accent));
  opacity: 0.85;
  transition: color 1.2s ease;
}

.clock {
  /* --c is recalculated every second from local time */
  transition: background 0.4s ease;
}

.clock::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--c, var(--accent));
  transform: scaleX(var(--daypart, 0));
  transform-origin: 0 50%;
  opacity: 0.55;
  transition: transform 1s linear, background 1.2s ease;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

.clock__dot {
  position: absolute;
  top: 1.15rem;
  right: 1.2rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* --- Giant wordmark: elastic magnetic letters --- */
.wordmark {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 2rem;
  line-height: 0.8;
  user-select: none;
  cursor: default;
  /* room for letters to lift without clipping */
  padding-top: 2.2rem;
}

.wm-l {
  position: relative;
  display: inline-block;
  will-change: transform;
  /* driven by the spring loop in motion.js */
  transform:
    translateY(var(--lift, 0px))
    scale(var(--scale, 1))
    rotate(var(--rot, 0deg));
}

/* letters inherit type from whatever hosts them, so the same
   component works at wordmark size and at clock size */
.wm-l i {
  display: block;
  font: inherit;
  font-style: normal;
  white-space: pre;
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 15vw, 14.5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
}

/* outlined base */
.wm-l__o {
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
}

/* coloured twin, faded in by proximity (--lit) or by a tick pulse (--pulse) */
.wm-l__f {
  position: absolute;
  inset: 0;
  color: var(--c, var(--accent));
  opacity: max(var(--lit, 0), var(--pulse, 0));
  -webkit-text-stroke: 0;
  text-shadow: 0 0 calc(max(var(--lit, 0), var(--pulse, 0)) * 42px)
    color-mix(in srgb, var(--c, var(--accent)) 45%, transparent);
}

@media (max-width: 640px) {
  .wordmark { padding-top: 1.2rem; }
}

@media (max-width: 640px) {
  .clock__time { font-size: 1.25rem; }
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  color: var(--muted-2);
}

.socials { display: flex; gap: 0.5rem; }

.socials a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background 0.3s ease, color 0.3s ease, transform 0.4s var(--ease);
}

.socials a:hover {
  background: var(--accent);
  color: var(--on-accent);
  transform: translateY(-3px);
}

/* ---------- 19. Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--delay, 0s);
}

[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="left"] { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="scale"] { transform: scale(0.94); }

/* ---------- 20. Back to top ---------- */
.totop {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.85);
  transition: opacity 0.4s ease, transform 0.5s var(--ease);
}

.totop.show { opacity: 1; pointer-events: auto; transform: none; }
.totop:hover { transform: translateY(-3px); }

/* ---------- 21. Mobile ---------- */
@media (max-width: 1023px) {
  .burger { display: block; order: 3; }
  .header__actions { margin-left: auto; gap: 0.5rem; }
  .header__actions .btn { display: none; }

  .nav {
    position: fixed;
    inset: calc(var(--header-h) + var(--stripe-h)) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 1.2rem var(--gutter) 5rem;
    background: var(--ink);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease);
  }

  body.nav-open .nav { transform: none; }
  body.nav-open { overflow: hidden; }

  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: var(--step-1);
    font-family: var(--font-display);
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }

  .nav__link:hover,
  .nav__item.is-open .nav__link { background: none; }

  .mega {
    position: static;
    width: 100%;
    translate: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
    border: 0;
    padding: 0.8rem 0;
    box-shadow: none;
    background: none;
  }

  .nav__item.is-open .mega { display: block; }
  .mega__promo { display: none; }
}

@media (max-width: 640px) {
  .stripe p { font-size: 0.72rem; }
  .hero__meta { gap: 1.4rem 2rem; }
  .work__item { min-height: 280px; }
}

/* ============================================================
   13b. Work tiles as links
   Moved here from service.css: the industry pages use work tiles but do
   not load that file, so a stretched link defined there had no size and
   the card was not clickable.
   ============================================================ */
.work__lede {
  margin-top: 0.7rem;
  font-size: var(--step--1);
  line-height: 1.6;
  /* --muted, not --muted-2: this sits on the dark card scrim rather than
     on a section background, where the dimmer token only reaches 3.75:1 */
  color: var(--muted);
  max-width: 52ch;
}

.work__body .link-arrow { margin-top: 1.2rem; }

/* --- the whole tile is the click target ---------------------
   A stretched link rather than a wrapper: it keeps one link per card
   for a screen reader, leaves the tags and figures outside the link
   text, and stays keyboard-focusable. It must be a direct child of
   .work__item — .work__body is positioned, so a pseudo-element on the
   inner link would stretch only as far as the body, not the card. */
.work__hit {
  position: absolute;
  inset: 0;
  /* above .work__trace (2) and .work__body (1) */
  z-index: 3;
  border-radius: inherit;
  cursor: pointer;
}

.work__hit:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: -4px;
}

/* the visible affordance is now a span, so the card drives its states */
.work__item:hover .link-arrow { background-size: 100% 1px; }
.work__item:hover .link-arrow svg { transform: translate(3px, -3px); }

/* ---------- 22. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-word > i { opacity: 1; transform: none; }
}

/* ---------- 21. Card tags: shared baseline, and their own hover ----------

   Paragraphs differ in length from card to card, so the tag rows were landing
   at a different height in every card of a row. The grid already stretches
   every card to the tallest in its row; making the card a column and pushing
   the tags with margin-top:auto hands that slack to the gap above them
   instead of leaving it below. Everything higher up — icon, number, title —
   was already aligned by fixed heights.

   Scoped to cards that actually have tags, so the ones ending in a link-arrow
   (the insights grid) keep their existing spacing. */

.card { display: flex; flex-direction: column; }

.card:has(.card__tags) > p:last-of-type { margin-bottom: 0; }

.card__tags {
  margin-top: auto;      /* takes the slack the short cards have spare */
  padding-top: 1.2rem;   /* the gap the paragraph's margin used to provide */
}

/* the group responds when the card is hovered... */
.card__tags .tag {
  cursor: default;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease,
              transform 0.35s var(--ease), box-shadow 0.35s ease;
}
.card:hover .card__tags .tag { transform: translateY(-2px); border-color: var(--line); }
.card:hover .card__tags .tag:nth-child(2) { transition-delay: 0.04s; }
.card:hover .card__tags .tag:nth-child(3) { transition-delay: 0.08s; }
.card:hover .card__tags .tag:nth-child(4) { transition-delay: 0.12s; }

/* ...and an individual tag answers for itself. Declared after the group rule
   so it wins at equal specificity, and the delay is cleared so the one under
   the pointer reacts immediately rather than waiting its turn. */
.card__tags .tag:hover {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
  background: rgba(var(--accent-rgb), 0.09);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px -10px rgba(var(--accent-rgb), 0.85);
  transition-delay: 0s;
}

/* the card acknowledges it too — a tag is part of the card, so lighting one
   without the card responding read as though the tag had come loose */
.card:has(.card__tags .tag:hover) {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 34px -20px rgba(var(--accent-rgb), 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .card:hover .card__tags .tag,
  .card__tags .tag:hover { transform: none; }
}

/* the registered-entity line: a school checking a vendor should find it here */
.footer__legal {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted-3);
}
.footer__legal a { color: var(--muted-2); }
.footer__legal a:hover { color: var(--accent-ink); }

/* ==========================================================================
   Header — the sliding indicator.

   Each nav item carries a palette slot, the way the footer wordmark gives
   every letter one. The indicator takes the colour of whatever it is under,
   the label lights in the same hue, and the live dot beside the CTA follows.
   Those slots are regenerated per theme by buildPalette() and each is held to
   3:1, so this survives any accent the visitor picks.
   ========================================================================== */

.header__prog {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--p1), var(--p4), var(--p6));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.header.is-stuck .header__prog { opacity: 1; }

/* the bar tightens once it is no longer at the top of the page */
.header__bar { transition: height 0.4s var(--ease); }
.header.is-stuck .header__bar { height: calc(var(--header-h) - 12px); }
.header.is-stuck .logo { font-size: 1.1rem; }
.header.is-stuck .logo__mark { width: 26px; height: 26px; border-radius: 8px; }

.logo { transition: font-size 0.4s var(--ease); }
.logo__mark { position: relative; overflow: hidden; }

.logo__ring {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent 0 70%,
    rgba(255, 255, 255, 0.55) 82%, transparent 92%);
  animation: hdr-spin 4.5s linear infinite;
  pointer-events: none;
}

@keyframes hdr-spin { to { transform: rotate(360deg); } }

/* ---- the indicator ---- */

.nav { position: relative; }

.nav__pill {
  position: absolute;
  left: 0;
  bottom: 3px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--pc, var(--accent));
  box-shadow: 0 0 12px 1px rgba(var(--pc-rgb, var(--accent-rgb)), 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.44s var(--ease), width 0.44s var(--ease),
              opacity 0.28s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.nav.is-on .nav__pill { opacity: 1; }

.nav__item { position: relative; z-index: 1; }

/* the label takes its own slot rather than the flat --paper */
.nav__item:hover > .nav__link,
.nav__item:focus-within > .nav__link {
  color: var(--c, var(--paper));
  background: transparent;
}

.nav__item.is-open > .nav__link { color: var(--c, var(--paper)); background: transparent; }

/* the live dot follows whatever is hovered */
.header__actions::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--live, var(--accent));
  box-shadow: 0 0 0 0 rgba(var(--live-rgb, var(--accent-rgb)), 0.5);
  animation: hdr-ping 2.6s var(--ease) infinite;
  transition: background 0.35s ease;
}

@keyframes hdr-ping {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--live-rgb, var(--accent-rgb)), 0.5); }
  55%      { box-shadow: 0 0 0 7px rgba(var(--live-rgb, var(--accent-rgb)), 0); }
}

.header__actions .btn svg { transition: transform 0.4s var(--ease); }
.header__actions .btn:hover svg { transform: translate(3px, -3px); }

/* the drawer stacks the nav, where a horizontal indicator makes no sense */
@media (max-width: 1024px) {
  .nav__pill { display: none; }
  .header__actions::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .logo__ring, .header__actions::before { animation: none; }
  .nav__pill { transition: opacity 0.2s ease; }
  .header__bar, .logo { transition: none; }
}


/* ---------- logo scale ----------
   68px of bar leaves 14px of clearance around a 40px mark, which is about the
   limit before it crowds the row. The footer has no such constraint, so it
   carries the mark at the size the brand actually wants. */
.header.is-stuck .logo { font-size: 1.34rem; }

.header.is-stuck .logo__mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 1.06rem;
}

.footer .logo { font-size: 1.95rem; gap: 0.8rem; }

.footer .logo__mark {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  font-size: 1.6rem;
}

@media (max-width: 640px) {
  .logo { font-size: 1.3rem; }
  .logo__mark { width: 34px; height: 34px; border-radius: 10px; font-size: 1.06rem; }
  .footer .logo { font-size: 1.6rem; }
  .footer .logo__mark { width: 44px; height: 44px; border-radius: 13px; font-size: 1.35rem; }
}

/* ==========================================================================
   Footer — the upper section.

   It used to be a logo, one sentence, and a large dead area beneath it, with
   one link column running to nine items while its neighbours ran to six. The
   brand column now carries what is live today and an ask, and the links are
   four balanced columns.
   ========================================================================== */

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
}

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---- column headings and links ---- */

.fcol h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-3);
}

/* the rule runs out to the column edge, so the four columns read as a set */
.fcol h4::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.footer__links { display: grid; gap: 0.55rem; }

.footer__links a {
  position: relative;
  padding-left: 0;
  font-size: 0.92rem;
  color: var(--muted);
  transition: color 0.25s ease, padding-left 0.3s var(--ease);
}

.footer__links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.25s ease;
}

.footer__links a:hover { color: var(--paper); padding-left: 11px; }
.footer__links a:hover::before { opacity: 1; }

/* ---- what is live today ---- */

.fbadge { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }

.fbadge span {
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-ink);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.fbadge span:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.16); }

/* the roadmap reads differently from what is running */
.fbadge span.fbadge__soon {
  border-color: var(--line);
  background: none;
  color: var(--muted-3);
  border-style: dashed;
}

/* ---- the ask ----
   Stripped to the one thing it is for. The heading and the sentence were
   saying again what the page above has already said; what was left was a
   click, so that is all it is now — centred, and moving enough to be found. */

.fcta {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-top: 1.5rem;
  padding: 1.05rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  text-align: center;
  background:
    linear-gradient(150deg, rgba(var(--accent-rgb), 0.14), transparent 65%),
    rgba(var(--ink-rgb), 0.45);
  transition: border-color 0.35s ease, transform 0.4s var(--ease),
              box-shadow 0.4s ease, background 0.35s ease;
}

.fcta:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background:
    linear-gradient(150deg, rgba(var(--accent-rgb), 0.22), transparent 65%),
    rgba(var(--ink-rgb), 0.45);
  box-shadow: 0 14px 34px -16px rgba(var(--accent-rgb), 0.8);
}

.fcta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.fcta__go {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent-ink);
}

.fcta__go i { font-style: normal; transition: transform 0.4s var(--ease); }
.fcta:hover .fcta__go i { transform: translateX(5px); }

/* a ring pushing outward, so the eye finds it in a column of links */
.fcta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.4);
  animation: fcta-ring 3.2s var(--ease) infinite;
  pointer-events: none;
}

@keyframes fcta-ring {
  0%, 72%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.36); }
  36%           { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); }
}

/* and a light crossing it on its own beat */
.fcta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 36%,
    rgba(var(--accent-rgb), 0.2) 50%, transparent 64%);
  background-size: 250% 100%;
  animation: fcta-shine 5s var(--ease) infinite;
}

@keyframes fcta-shine {
  0%, 60% { background-position: 150% 0; }
  100%    { background-position: -150% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fcta::after, .fcta::before { animation: none; }
  .fcta:hover { transform: none; }
  .footer__links a:hover { padding-left: 0; }
}

/* ==========================================================================
   Account access.

   Sign in is a text link and Sign up is the button, because they are not
   equals: one is for someone who already has an account and knows they want
   it, the other is the thing we are asking for. Giving both the same weight
   makes a visitor choose before they have a reason to.

   This replaced "Start free trial", which was the same action under a
   different name — and which pointed at the demo booking form, so it promised
   a trial and delivered a form.
   ========================================================================== */

.header__actions { gap: 0.9rem; }

.acct__in {
  position: relative;
  padding: 0.45rem 0.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.25s ease;
}

/* the underline draws from the left, the same language as the nav indicator */
.acct__in::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  bottom: 0.28rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.acct__in:hover { color: var(--paper); }
.acct__in:hover::after,
.acct__in:focus-visible::after { transform: scaleX(1); }

/* on a phone the wordmark and two actions will not fit; the button is the one
   that has to survive */
@media (max-width: 560px) {
  .acct__in { display: none; }
}