/* ==========================================================================
   LittleMan Dev · littlemandev.com
   One page, twelve sections, 3D all the way down.

   Structure of this file
     01  tokens & themes
     02  reset & base
     03  custom cursor
     04  chrome: nav, progress rail, chapter dots
     05  the 3D stage & panel system
     06  type scale & shared primitives
     07  panel-specific composition
     08  the permanent contact footer
     09  reduced-motion / no-3d flat fallback
     10  responsive
   ========================================================================== */

/* ---------- 01  tokens & themes ---------------------------------------- */

:root {
  /* brand, fixed across themes */
  --deep: #012c66;
  --electric: #5170ff;
  --cursor-blue: #2375ff;
  --cursor-pale: #aacaff;

  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --rail-h: 58px;          /* height of the permanent contact footer */
  --gutter: clamp(1.1rem, 3.5vw, 3.2rem);
}

/* ----- night (default) ----- */
html[data-theme='night'] {
  --bg: #04060f;
  --bg-2: #070b18;
  --ink: #eef2ff;
  --ink-soft: #8b9fc9;
  --ink-faint: #5a6d94;
  --line: rgba(81, 112, 255, .22);
  --line-soft: rgba(170, 202, 255, .10);
  --card: rgba(8, 13, 31, .66);
  --card-2: rgba(12, 19, 44, .82);
  --accent: #6f8bff;
  --accent-2: #aacaff;
  --glow: rgba(81, 112, 255, .16);
  --shadow: rgba(0, 0, 0, .55);
  --grain: .055;
  --field-op: .78;
  --logo-invert: 0;
  --scrim: rgba(4, 6, 15, .82);
}

/* ----- day ----- */
html[data-theme='day'] {
  --bg: #f6f8ff;
  --bg-2: #ffffff;
  --ink: #04143a;
  --ink-soft: #465d8d;
  --ink-faint: #7d8fb4;
  --line: rgba(1, 44, 102, .14);
  --line-soft: rgba(1, 44, 102, .07);
  --card: rgba(255, 255, 255, .80);
  --card-2: rgba(255, 255, 255, .95);
  --accent: #2c53ff;
  --accent-2: #012c66;
  --glow: rgba(81, 112, 255, .09);
  --shadow: rgba(1, 44, 102, .14);
  --grain: .03;
  --field-op: .6;
  --logo-invert: 0;
  --scrim: rgba(246, 248, 255, .86);
}

/* ---------- 02  reset & base ------------------------------------------- */

*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .7s var(--ease), color .7s var(--ease);
  /* fallback cursor: the brand mark, hotspot on the arrow tip */
  cursor: url('../img/cursor-native.png') 20 0, auto;
}

/* JS took over, hide the OS pointer entirely */
body.custom-cursor,
body.custom-cursor * { cursor: none !important; }

::selection { background: var(--electric); color: #fff; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  background: var(--electric); color: #fff; padding: .7rem 1.2rem;
  border-radius: 10px; font-size: .85rem; transition: top .25s var(--ease);
}
.skip:focus { top: 1rem; }

/* ---------- background layers ----------------------------------------- */

#field {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; opacity: calc(var(--field-op) * .82);
  transition: opacity .7s var(--ease);
}

/* The reading scrim.

   This was a vignette, dark at the edges, clear in the middle, which is
   exactly backwards for this page. The corridor of geometry is a background
   now rather than something an opaque panel sits in front of, so the place
   that needs calming is the middle, where the copy is, and the place that
   needs to stay alive is the edges, where the geometry flies.

   So: a soft wash of the page ground over the centre column, falling away to
   nothing well before the frame edge. Text gets a settled ground to sit on,
   the gutters keep their depth, and no panel needs an opaque face to be
   legible.  */
.vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 96% at 50% 50%,
      color-mix(in srgb, var(--bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--bg) 74%, transparent) 48%,
      color-mix(in srgb, var(--bg) 30%, transparent) 82%,
      transparent 100%),
    /* and just enough at the very top and bottom to seat the nav and rail */
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 70%, transparent) 0%,
      transparent 14%, transparent 86%,
      color-mix(in srgb, var(--bg) 70%, transparent) 100%);
}

.grain {
  position: fixed; inset: -50%; z-index: 3; pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: grain 7s steps(8) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-4%, -3%); }
  40%      { transform: translate(3%, -6%); }
  60%      { transform: translate(-6%, 4%); }
  80%      { transform: translate(4%, 5%); }
}

/* ---------- 03  custom cursor ------------------------------------------ */

.cursor-mark,
.cursor-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; }

.cursor-mark {
  width: 34px; height: auto;
  /* arrow tip of the mark sits at 73.2% / 0.7%, align it to the pointer */
  margin-left: -24.9px;
  margin-top: -.24px;
  filter: drop-shadow(0 3px 10px rgba(1, 24, 66, .45));
  transition: transform .28s var(--ease), opacity .3s;
  transform-origin: 73.2% .7%;
  will-change: transform;
}

.cursor-ring {
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border: 1px solid var(--electric);
  border-radius: 50%;
  z-index: 9998;
  opacity: .55;
  transition: width .32s var(--ease), height .32s var(--ease),
              margin .32s var(--ease), opacity .32s var(--ease),
              background .32s var(--ease), border-color .32s var(--ease);
  will-change: transform;
}

body.cursor-hot .cursor-ring {
  width: 74px; height: 74px; margin: -37px 0 0 -37px;
  background: var(--glow);
  border-color: var(--cursor-pale);
  opacity: 1;
}
body.cursor-hot .cursor-mark { transform: scale(.72) rotate(-8deg); }
body.cursor-down .cursor-mark { transform: scale(.58) rotate(-14deg); }
body.cursor-down .cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
body.cursor-idle .cursor-mark,
body.cursor-idle .cursor-ring { opacity: 0; }

/* ---------- 04  chrome ------------------------------------------------- */

.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--gutter);
  transition: padding .45s var(--ease), background .45s var(--ease),
              box-shadow .45s var(--ease);
}
.nav.is-stuck {
  padding: .7rem var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 var(--line-soft);
}

/* The lockups ship in two colourways rather than being filtered at runtime:
   the artwork is a gradient, and a CSS filter that fixes "DEV" would wreck it. */
.lockup { display: none; width: auto; }
html[data-theme='night'] .lockup.night,
html[data-theme='day']   .lockup.day { display: block; }

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand .lockup {
  height: 26px;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.brand:hover .lockup { transform: scale(1.04); filter: drop-shadow(0 4px 16px var(--glow)); }
.nav.is-stuck .brand .lockup { height: 23px; }

.nav-right { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 2.1rem); }
.nav-links { display: flex; gap: clamp(.9rem, 1.9vw, 2rem); list-style: none; }
.nav-links button {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); position: relative; padding: .35rem 0;
  transition: color .3s;
}
.nav-links button::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--electric);
  transition: width .4s var(--ease);
}
.nav-links button:hover,
.nav-links button[aria-current='true'] { color: var(--ink); }
.nav-links button:hover::after,
.nav-links button[aria-current='true']::after { width: 100%; }

.theme-toggle {
  width: 54px; height: 28px; border-radius: 30px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--card-2);
  position: relative; transition: background .5s var(--ease);
}
.theme-toggle .knob {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(140deg, var(--electric), var(--cursor-blue));
  box-shadow: 0 0 14px var(--glow);
  display: grid; place-items: center; font-size: .68rem; line-height: 1;
  transition: transform .5s var(--ease);
}
html[data-theme='day'] .theme-toggle .knob { transform: translateX(26px); }

/* chapter dots */
.dots {
  position: fixed; right: calc(var(--gutter) - .35rem); top: 50%;
  transform: translateY(-50%); z-index: 250;
  display: flex; flex-direction: column; gap: .55rem; align-items: flex-end;
}
.dots button {
  display: flex; align-items: center; gap: .6rem;
  padding: .2rem; opacity: .45; transition: opacity .3s;
}
.dots button:hover, .dots button.on { opacity: 1; }
.dots .label {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
  opacity: 0; transform: translateX(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.dots button:hover .label { opacity: 1; transform: translateX(0); }
.dots .pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-faint); transition: all .35s var(--ease);
}
.dots button.on .pip {
  width: 7px; height: 20px; border-radius: 4px;
  background: var(--electric); box-shadow: 0 0 12px var(--glow);
}

/* ---------- 05  the document stage ------------------------------------

   The page scrolls like a page. That is a decision about LAYOUT only, the
   third dimension is still here, it has just stopped hijacking the scrollbar.

   #stage is an ordinary column. Each panel carries its own perspective, so
   it arrives rotated back and pushed into depth and then settles onto the
   page plane, and its children stagger in behind it. Same vocabulary as the
   fly-through on /walkthrough, surfaces moving in a space, spoken quietly
   enough that you can read the page while it happens.
------------------------------------------------------------------------ */

#stage {
  position: relative; z-index: 10;
  padding: 7.5rem 0 2rem;
  scroll-padding-top: 5.5rem;
}

.panel {
  position: relative;
  width: min(1180px, calc(100vw - var(--gutter) * 2));
  margin: 0 auto clamp(4rem, 12vh, 8rem);
  /* the panel is its own 3D context, so a long page never builds one huge
     shared one, that is what keeps compositing cheap here */
  perspective: 1400px;
  perspective-origin: 50% 30%;
}
.panel:last-of-type { margin-bottom: 3rem; }

.panel-inner {
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* --- the arrival ---------------------------------------------------------
   Back in depth and tipped away from you, then it rotates up onto the plane.
   The rotation is small: past about 8deg the top line of a heading starts to
   blur on the way in and it reads as a glitch rather than a movement. */
.panel .panel-inner {
  opacity: 0;
  transform: translate3d(0, 42px, -180px) rotateX(7deg);
  transition:
    opacity .9s var(--ease),
    transform 1.05s var(--ease);
}
.panel.seen .panel-inner {
  opacity: 1;
  transform: none;
}

/* children stagger in behind the panel they belong to */
.rise {
  opacity: 0;
  transform: translate3d(0, 22px, -40px);
  transition:
    opacity .7s var(--ease) var(--stagger, 0ms),
    transform .8s var(--ease) var(--stagger, 0ms);
}
.panel.seen .rise { opacity: 1; transform: none; }

/* ---------- 06  type & primitives -------------------------------------- */

.eyebrow {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: .8rem;
}
.eyebrow::before {
  content: ''; width: 34px; height: 1px; flex-shrink: 0;
  background: linear-gradient(90deg, var(--electric), transparent);
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::after {
  content: ''; width: 34px; height: 1px;
  background: linear-gradient(270deg, var(--electric), transparent);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; }

.h-hero {
  font-weight: 700; line-height: .95; letter-spacing: -.035em;
  font-size: clamp(2.1rem, 5.6vw, 5rem);
}
.h-sec {
  font-weight: 600; line-height: 1.02; letter-spacing: -.028em;
  font-size: clamp(1.75rem, 4vw, 3.4rem);
  margin-bottom: 1rem;
}
.h-sec em, .h-hero em { font-style: normal; color: var(--accent); }
.h-sec .quiet, .h-hero .quiet { color: var(--ink-faint); }

.lede {
  font-size: clamp(.98rem, 1.25vw, 1.22rem);
  line-height: 1.6; color: var(--ink-soft); max-width: 62ch;
}
.lede strong { color: var(--ink); font-weight: 600; }
.lede + .lede { margin-top: .9rem; }

.small {
  font-size: clamp(.83rem, .95vw, .95rem);
  line-height: 1.55; color: var(--ink-soft);
}

.cta-row {
  display: flex; gap: .8rem; flex-wrap: wrap; align-items: center;
  margin-top: clamp(1.4rem, 3vh, 2.4rem);
}

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  padding: .95rem 1.9rem; border-radius: 100px;
  border: 1px solid transparent; position: relative; overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              background .35s, border-color .35s, color .35s;
}
.btn-solid {
  background: linear-gradient(135deg, var(--electric), var(--cursor-blue));
  color: #fff; box-shadow: 0 10px 34px -8px var(--electric);
}
.btn-solid:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -10px var(--electric); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn-ghost:hover { border-color: var(--electric); background: var(--glow); transform: translateY(-3px); }
.btn .arw { transition: transform .4s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* generic card */
.card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: clamp(1.1rem, 1.8vw, 1.7rem);
  position: relative; overflow: hidden;
  box-shadow: 0 18px 46px -34px var(--shadow);
  transition: transform .55s var(--ease), border-color .45s,
              background .45s, box-shadow .55s var(--ease);
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--electric), var(--cursor-pale));
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.card:hover { transform: translateY(-7px); border-color: var(--line);
  box-shadow: 0 30px 66px -32px var(--shadow); }
.card:hover::before { transform: scaleX(1); }
.card .idx {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em;
  color: var(--accent); display: block; margin-bottom: .7rem;
}
.card h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 600;
  letter-spacing: -.015em; margin-bottom: .5rem;
}
.card p { font-size: clamp(.82rem, .95vw, .92rem); color: var(--ink-soft); line-height: 1.55; }

.tag-list { display: flex; flex-wrap: wrap; gap: .38rem; margin-top: .9rem; }
.tag {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em;
  padding: .3rem .62rem; border-radius: 100px;
  border: 1px solid var(--line-soft); color: var(--ink-faint);
  white-space: nowrap;
}

.two-col {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.6rem, 4vw, 4rem); align-items: center;
}
.two-col.split-wide { grid-template-columns: .88fr 1.12fr; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }

/* ---------- 07  panel composition -------------------------------------- */

/* --- hero --- */
.hero-grid {
  display: grid; grid-template-columns: 1.35fr .65fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.hero-ask { list-style: none; }
.hero-ask li {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 3.15vw, 2.85rem);
  line-height: 1.08; letter-spacing: -.032em;
  color: var(--ink-faint);
  transition: color .5s var(--ease), transform .6s var(--ease);
}
.hero-ask li em { font-style: normal; color: var(--accent); }
.hero-ask li.lit { color: var(--ink); }
.hero-ask li.lit em {
  background: linear-gradient(100deg, var(--electric), var(--cursor-pale));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-answer {
  margin-top: clamp(.9rem, 2.2vh, 1.6rem);
  font-size: clamp(.98rem, 1.25vw, 1.2rem);
  color: var(--ink-soft); line-height: 1.6; max-width: 52ch;
}
.hero-answer strong { color: var(--ink); font-weight: 600; }

.hero-mark { position: relative; display: grid; place-items: center; }
.hero-mark .lockup {
  width: clamp(150px, 17vw, 280px); height: auto;
  filter: drop-shadow(0 24px 60px var(--glow));
  animation: hover-mark 7s ease-in-out infinite;
}
@keyframes hover-mark {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}
.hero-mark::after {
  content: ''; position: absolute; width: 62%; aspect-ratio: 1;
  border-radius: 50%; background: var(--glow); filter: blur(48px); z-index: -1;
}

.hero-meta {
  display: flex; gap: clamp(1.1rem, 2.6vw, 2.6rem); flex-wrap: wrap;
  margin-top: clamp(1.3rem, 3vh, 2.2rem);
  padding-top: clamp(1.1rem, 2.4vh, 1.7rem);
  border-top: 1px solid var(--line-soft);
}
.hero-meta div { min-width: 0; }
.hero-meta dt {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .28rem;
}
.hero-meta dd { font-size: .9rem; font-weight: 500; color: var(--ink); }

/* --- stats --- */
.stat-row { display: flex; gap: clamp(1.4rem, 3.2vw, 3rem); flex-wrap: wrap; margin-top: 1.6rem; }
.stat .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.9rem); line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(150deg, var(--electric), var(--cursor-pale));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .lbl {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: .45rem;
}

/* --- the "signature" panel: a stylised code/spec plate --- */
.plate {
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-2);
  box-shadow: 0 34px 80px -30px var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.plate-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--line-soft);
  background: var(--card);
}
.plate-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.plate-bar .addr {
  margin-left: .7rem; font-family: var(--font-mono); font-size: .64rem;
  color: var(--ink-faint); letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plate-body { padding: 1rem 1.1rem; font-family: var(--font-mono); font-size: .72rem; line-height: 1.85; }
.plate-body .ln { display: flex; gap: .9rem; color: var(--ink-soft); }
.plate-body .ln span:first-child { color: var(--ink-faint); opacity: .55; width: 1.4em; text-align: right; flex-shrink: 0; }
.plate-body .k { color: var(--accent); }
.plate-body .s { color: var(--cursor-pale); }
.plate-body .c { color: var(--ink-faint); font-style: italic; }

/* --- work / project panels --- */
.work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.work-status {
  font-family: var(--font-mono); font-size: .63rem; letter-spacing: .18em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem 1rem; border-radius: 100px; border: 1px solid var(--line);
  color: var(--ink-soft); background: var(--card); white-space: nowrap;
}
.work-status .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); animation: pulse 2.2s infinite;
}
.work-status.wip .pulse { background: var(--cursor-pale); box-shadow: 0 0 0 0 rgba(170, 202, 255, .5); animation: pulse 2.6s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 9px transparent; opacity: .75; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

.work-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center; }

.shot {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 40px 90px -34px var(--shadow);
  background: var(--card-2); position: relative;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.shot .browser {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .9rem; border-bottom: 1px solid var(--line-soft); background: var(--card);
}
.shot .browser i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.shot .browser .addr {
  margin-left: .6rem; flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: .6rem; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shot img { width: 100%; height: auto; display: block; }
.shot:hover { transform: translateY(-8px) scale(1.008); }

.work-facts { list-style: none; margin-top: 1.1rem; }
.work-facts li {
  display: flex; gap: .7rem; padding: .48rem 0;
  font-size: clamp(.83rem, .95vw, .93rem); color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}
.work-facts li:last-child { border-bottom: 0; }
.work-facts b {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
  flex: 0 0 5.6rem; padding-top: .22em;
}

/* --- process timeline --- */
.rail { position: relative; margin-top: 1.4rem; }
.rail::before {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px;
  background: linear-gradient(90deg, var(--electric), var(--line) 65%, transparent);
}
.rail-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; }
.step { position: relative; padding-top: 1.9rem; }
.step::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line);
  transition: all .45s var(--ease);
}
.step:hover::before, .step.on::before {
  border-color: var(--electric); background: var(--electric);
  box-shadow: 0 0 16px var(--glow);
}
.step .n {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em;
  color: var(--accent); display: block; margin-bottom: .35rem;
}
.step h4 { font-size: clamp(.92rem, 1.15vw, 1.08rem); font-weight: 600; margin-bottom: .35rem; letter-spacing: -.01em; }
.step p { font-size: clamp(.76rem, .88vw, .86rem); color: var(--ink-soft); line-height: 1.5; }

/* --- payment ladder --- */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 1.3rem; }
.tier { padding: clamp(1rem, 1.7vw, 1.5rem); border-radius: 16px;
  border: 1px solid var(--line-soft); background: var(--card);
  box-shadow: 0 18px 46px -36px var(--shadow); }
.tier .scale {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .7rem;
}
.tier .split {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem); letter-spacing: -.035em;
  color: var(--ink-faint); line-height: 1; margin-bottom: .55rem;
  display: flex; align-items: baseline; gap: .32em; flex-wrap: wrap;
}
.tier .split u { text-decoration: none; color: var(--accent); }
.tier .split .plus { font-size: .46em; letter-spacing: -.01em; color: var(--ink-soft); font-weight: 500; }
.tier .tierline {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
  color: var(--ink-soft); margin-bottom: .6rem; line-height: 1.5;
}
.tier p { font-size: .82rem; color: var(--ink-soft); line-height: 1.5; }
.bars { display: flex; gap: 3px; margin-top: .8rem; height: 5px; }
.bars i { border-radius: 3px; background: var(--line); }
.bars i.f { background: linear-gradient(90deg, var(--electric), var(--cursor-blue)); }

.terms { list-style: none; margin-top: 1.2rem; display: grid; gap: .55rem; }
/* Block, not flex: these list items mix <strong> and running text, and a flex
   container would turn the lead-in phrase into its own column. */
.terms li {
  position: relative; padding-inline-start: 1.15rem;
  font-size: clamp(.83rem, .95vw, .93rem); color: var(--ink-soft); line-height: 1.55;
}
.terms li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--electric);
}
.terms li strong { color: var(--ink); font-weight: 600; }

/* --- AI panel: before / during / after --- */
.beam { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 1.2rem; position: relative; }
.beam::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: -.85rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--electric), transparent);
}
.beam-col { padding: clamp(1rem, 1.6vw, 1.4rem); border-radius: 16px;
  border: 1px solid var(--line-soft); background: var(--card);
  box-shadow: 0 18px 46px -36px var(--shadow); }
.beam-col .w {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .6rem;
}
.beam-col h4 { font-size: clamp(.95rem, 1.2vw, 1.15rem); margin-bottom: .5rem; letter-spacing: -.015em; }
.beam-col p { font-size: clamp(.79rem, .92vw, .89rem); color: var(--ink-soft); line-height: 1.55; }
.beam-col.hot { border-color: var(--line); background: var(--card-2); }

.pullquote {
  margin-top: 1.3rem; padding: clamp(1rem, 1.7vw, 1.4rem) clamp(1.1rem, 2vw, 1.8rem);
  border-left: 2px solid var(--electric); border-radius: 0 14px 14px 0;
  background: var(--card);
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.015em;
  font-size: clamp(.98rem, 1.5vw, 1.35rem); line-height: 1.4; color: var(--ink);
}
html[dir='rtl'] .pullquote { border-left: 0; border-right: 2px solid var(--electric); border-radius: 14px 0 0 14px; }

/* --- team / not-an-agency --- */
.people { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }
.person {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem 1.1rem .65rem .65rem; border-radius: 100px;
  border: 1px solid var(--line-soft); background: var(--card);
  transition: border-color .4s, transform .4s var(--ease);
}
.person:hover { border-color: var(--line); transform: translateY(-3px); }
.person .av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 600; color: #fff;
  background: linear-gradient(140deg, var(--electric), var(--deep));
}
.person .who { font-size: .84rem; font-weight: 500; color: var(--ink); line-height: 1.2; }
.person .who small { display: block; font-size: .68rem; color: var(--ink-faint); font-weight: 400; }
.person.solo .av { background: linear-gradient(140deg, var(--cursor-blue), var(--electric)); }

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.2rem; }
.versus > div { padding: clamp(.95rem, 1.6vw, 1.4rem); border-radius: 16px; border: 1px solid var(--line-soft); }
.versus .yes { background: var(--card-2); }
.versus .no { background: transparent; opacity: .72; }
.versus h4 {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; margin-bottom: .75rem;
}
.versus .yes h4 { color: var(--accent); }
.versus .no h4 { color: var(--ink-faint); }
.versus ul { list-style: none; display: grid; gap: .42rem; }
.versus li { font-size: clamp(.79rem, .92vw, .89rem); color: var(--ink-soft); display: flex; gap: .55rem; line-height: 1.45; }
.versus li::before { content: '+'; color: var(--accent); font-family: var(--font-mono); }
.versus .no li::before { content: '–'; color: var(--ink-faint); }

/* --- contact panel --- */
.contact { text-align: center; }
.contact .h-hero { margin-bottom: 1.4rem; }
.contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .9rem; margin-top: 1.6rem; text-align: left;
}
.contact-card {
  display: block; padding: clamp(1rem, 1.7vw, 1.4rem); border-radius: 16px;
  border: 1px solid var(--line-soft); background: var(--card);
  box-shadow: 0 18px 46px -36px var(--shadow);
  transition: transform .5s var(--ease), border-color .4s, background .4s;
}
.contact-card:hover { transform: translateY(-6px); border-color: var(--electric); background: var(--card-2); }
.contact-card .ch {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .6rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.contact-card .val {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(.95rem, 1.4vw, 1.22rem); color: var(--ink);
  word-break: break-word;
}
.contact-card .sub { font-size: .76rem; color: var(--ink-faint); margin-top: .35rem; }
.foot-lockup { display: block; flex-shrink: 0; }
.foot-lockup .lockup { height: 20px; opacity: .82; transition: opacity .3s; }
.foot-lockup:hover .lockup { opacity: 1; }

.contact-foot {
  margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ---------- 07b  zoom-into-the-page ------------------------------------
   On a [data-zoom] panel the marked media keeps growing as the panel passes
   the camera, while the copy around it drops away, so the last thing you
   see before the next panel arrives is the work itself, full-bleed. The
   transforms are written by the scroll loop; these rules only prepare for
   them. */

[data-zoom-target] { will-change: transform; transform-origin: 50% 50%; }
[data-zoom-fade] { will-change: opacity; }

/* Three things have to give way for the media to actually fill the frame:
   the panel's own clip, the hover transition (the transform is scroll-driven,
   so any easing on it reads as lag), and stacking order. */
/* Two separate moments, and they are not simultaneous. The media has to be
   free to grow past the card's bounds the instant the zoom starts, but the
   card's FACE has to stay until the copy on it has faded, otherwise the
   depth field shows straight through live text and the words end up sitting
   on top of geometry flying past. */
.panel.zooming .panel-inner {
  overflow: visible;
}
.panel.zooming.face-off .panel-inner {
  background: none; border-color: transparent; box-shadow: none;
}
.panel.zooming [data-zoom-target] {
  transition: none;
  position: relative; z-index: 5;
  box-shadow: 0 60px 140px -40px var(--shadow);
}

/* ---------- 08  the permanent contact footer --------------------------- */

.rail-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  height: var(--rail-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid var(--line-soft);
}
.rail-footer .prog { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.rail-footer .prog .pct {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em;
  color: var(--accent); width: 2.6em;
}
.rail-footer .prog .track {
  width: clamp(48px, 8vw, 120px); height: 2px; border-radius: 2px;
  background: var(--line-soft); position: relative; overflow: hidden;
}
.rail-footer .prog .fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--cursor-blue), var(--cursor-pale));
  border-radius: 2px;
}
.rail-footer .chapter {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rail-links { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.rail-links a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: 100px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em;
  color: var(--ink-soft); border: 1px solid transparent;
  transition: color .3s, background .3s, border-color .3s, transform .3s var(--ease);
  white-space: nowrap;
}
.rail-links a:hover {
  color: var(--ink); background: var(--card-2);
  border-color: var(--line); transform: translateY(-2px);
}
.rail-links a.primary {
  background: linear-gradient(135deg, var(--electric), var(--cursor-blue));
  color: #fff; box-shadow: 0 6px 20px -6px var(--electric);
}
.rail-links a.primary:hover { box-shadow: 0 12px 28px -8px var(--electric); color: #fff; }
.rail-links svg { width: 14px; height: 14px; flex-shrink: 0; }
.rail-links .txt { display: inline; }

/* scroll affordance, fades out once you move */
.scroll-hint {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--rail-h) + 1.1rem); z-index: 260;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-faint);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.scroll-hint.gone { opacity: 0; transform: translate(-50%, 14px); }
.scroll-hint .bar {
  width: 1px; height: 30px;
  background: linear-gradient(var(--electric), transparent);
  animation: drop 2s var(--ease-in-out) infinite;
}
@keyframes drop {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .5; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* ---------- 09  narrow screens (phones & small tablets) ----------------

   One column, tighter type, the secondary prose dropped, and, the rule that
   does the most work, every group of more than one item becomes a
   horizontal swipe row.

   This began as a fix for the fly-through, where a panel could not scroll
   inside itself and a three-card grid stacked vertically simply did not fit.
   The page scrolls normally now, so it is no longer load-bearing, and the
   rules that came with it purely to save vertical space, cropping the work
   screenshots to 19vh, in particular, have gone with the constraint.

   The swipe rows stayed, because they turned out to be the better pattern on
   their own merits: three cards as a row is one gesture and keeps every word,
   where three stacked cards is a third of a page of scrolling to read the
   same content.
   ---------------------------------------------------------------------- */

@media (max-width: 899px), (pointer: coarse) and (max-width: 1100px) {
  body { --rail-h: 52px; }

  #stage { padding-top: 5.5rem; }
  .panel {
    width: calc(100vw - var(--gutter) * 2);
    perspective: 760px;             /* a narrow frame needs a shorter lens */
    perspective-origin: 50% 34%;
  }
  .panel-inner {
    padding: 1.05rem .95rem;
    border-radius: 20px;
  }

  /* one column, everywhere */
  .hero-grid,
  .two-col,
  .two-col.split-wide,
  .work-grid { grid-template-columns: 1fr; gap: .9rem; }

  /* Grid children default to min-width:auto, so a 1440px-wide screenshot drags
     its column wider than the panel and the copy beside it gets clipped. */
  .hero-grid > *,
  .two-col > *,
  .work-grid > * { min-width: 0; }

  .hero-mark { display: none; }
  .dots { display: none; }
  .m-hide { display: none !important; }

  /* type, re-scaled for a narrow frame */
  .eyebrow { font-size: .58rem; letter-spacing: .22em; margin-bottom: .7rem; }
  .eyebrow::before, .eyebrow.center::after { width: 22px; }
  .h-hero { font-size: clamp(1.65rem, 8.2vw, 2.5rem); }
  .h-sec  { font-size: clamp(1.45rem, 7vw, 2.15rem); margin-bottom: .7rem; }
  .hero-ask li { font-size: clamp(1.1rem, 5.4vw, 1.7rem); line-height: 1.14; }
  .hero-answer { font-size: .93rem; margin-top: .9rem; }
  .lede { font-size: .93rem; line-height: 1.55; }
  .cta-row { margin-top: 1rem; gap: .55rem; }
  .btn { padding: .78rem 1.4rem; font-size: .66rem; }
  .pullquote { font-size: 1rem; margin-top: 1rem; padding: .9rem 1rem; }
  .hero-meta { margin-top: 1rem; padding-top: .9rem; }

  /* ---- the swipe row ---- */
  .swipe {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* don't chain a swipe into a page scroll */
    touch-action: pan-x;
    flex-wrap: nowrap;
    scrollbar-width: none;
    /* bleed to the panel edges so a card can sit flush while peeking */
    margin-inline: calc(var(--gutter) * -0.6);
    padding-inline: calc(var(--gutter) * 0.6);
    padding-bottom: .45rem;
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * {
    flex: 0 0 min(80%, 310px);
    scroll-snap-align: center;
    margin: 0;
  }
  /* small chips size to their content instead of taking a whole slide */
  .stat-row > *,
  .hero-meta > *,
  .people > *,
  .tag-list > * { flex: 0 0 auto; scroll-snap-align: start; }
  .stat-row, .hero-meta { scroll-snap-type: none; }
  .versus > * { flex: 0 0 min(84%, 330px); }
  .rail-grid > * { flex: 0 0 min(72%, 270px); }

  /* lists that become cards in a swipe row */
  .terms > li,
  .work-facts > li {
    display: flex; flex-direction: column; gap: .3rem;
    padding: .85rem .95rem;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--card);
    padding-inline-start: .95rem;
  }
  .terms > li::before { display: none; }
  .work-facts b { flex: none; padding-top: 0; }

  /* The work panels are the densest in the deck. The screenshot gives up the
     height, since it is also the thing you are about to fly into full-bleed. */
  .shot .browser { padding: .4rem .65rem; }
  .work-head { gap: .45rem; margin-bottom: .55rem; }
  .work-status { padding: .32rem .75rem; font-size: .56rem; }
  .work-grid { gap: .7rem; }
  .work-grid .lede { font-size: .87rem; line-height: 1.48; }
  .work-grid .cta-row { margin-top: .6rem !important; }
  .work-facts > li { padding: .6rem .8rem; }

  /* the process rail has no room for its connecting line */
  .rail::before { display: none; }
  .step { padding-top: 1.6rem; }
  .beam::before { display: none; }

  /* cards get a touch more presence when they are the whole slide */
  .card, .tier,
  .beam-col, .contact-card { height: 100%; }

  .contact-foot { justify-content: center; gap: .6rem; text-align: center; }
  .scroll-hint { bottom: calc(var(--rail-h) + .6rem); }
}

/* ---------- 09b  reduced motion ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero-mark img, .grain, .scroll-hint .bar, .work-status .pulse { animation: none !important; }
  * { transition-duration: .01ms !important; }
  /* the arrival is the one thing that must not simply be sped up, a panel
     left at opacity 0 would never become readable */
  .panel .panel-inner, .rise { opacity: 1 !important; transform: none !important; }
  .scroll-hint { display: none; }
}

/* ---------- 10  responsive --------------------------------------------- */

@media (max-width: 1100px) {
  .rail-grid { grid-template-columns: repeat(3, 1fr); row-gap: 1.5rem; }
  .rail::before { display: none; }
  /* The section links go: there is a chapter rail and a scrollbar for that.
     The two cross-site actions are not section links and they stay, because
     the demo and the chat are the only things in this header a phone visitor
     cannot reach any other way. They live outside .nav-links precisely so
     this rule cannot take them with it. */
  .nav-links { display: none; }
}

@media (max-width: 900px) {
  .cursor-mark, .cursor-ring { display: none; }
  body, body.custom-cursor, body.custom-cursor * { cursor: auto !important; }
  /* Layout below this width is driven by body.portrait (or body.flat under
     reduced motion), not by these queries, these only cover the chrome and
     the reduced-motion fallback, which keeps a grid. */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-mark { display: none; }
  .two-col, .work-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-4, .ladder, .beam, .contact-grid, .versus { grid-template-columns: 1fr; }
  .rail-grid { grid-template-columns: 1fr 1fr; }
  .rail-links .txt { display: none; }
  .rail-links a { padding: .5rem .7rem; }
  .rail-footer .chapter { display: none; }
  .beam::before { display: none; }
  .nav { padding: .8rem var(--gutter); }
  .brand .lockup { height: 22px; }
  .nav.is-stuck .brand .lockup { height: 20px; }
}

@media (max-width: 560px) {
  .rail-grid { grid-template-columns: 1fr; }
  .rail-footer .prog .track { display: none; }
  .work-facts b { flex-basis: 4.6rem; }
  .contact-foot { font-size: .58rem; }
}

/* coarse pointers never get the custom cursor */
@media (pointer: coarse) {
  .cursor-mark, .cursor-ring { display: none !important; }
  body, body.custom-cursor, body.custom-cursor * { cursor: auto !important; }
}

/* ---------- 11  the cross-site actions ---------------------------------

   Two destinations live outside this page: the /walkthrough demo and the
   chat subdomain. They are not sections of the document, so they must not
   read as the sixth and seventh items in a list of five nav links.

   They get one shared component instead, used identically on the home page,
   the walkthrough and the chat, so the same two doors look the same
   wherever you meet them. The chat is the primary action everywhere (it is
   the one that starts a project), so it carries the solid fill; the
   walkthrough is the secondary, outlined.
   ---------------------------------------------------------------------- */

.nav-actions {
  display: flex; align-items: center; gap: .5rem;
  flex-shrink: 0;
}

.nav-cta {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  padding: .52rem .95rem; border-radius: 30px;
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid color-mix(in srgb, var(--electric) 42%, transparent);
  color: var(--accent);
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease),
              box-shadow .4s var(--ease);
}
.nav-cta:hover {
  background: var(--glow); color: var(--ink);
  border-color: var(--electric); transform: translateY(-1px);
}
.nav-cta .arw { transition: transform .4s var(--ease); }
.nav-cta:hover .arw { transform: translate(2px, -2px); }

/* the primary door: filled, and it keeps the brand gradient the buttons use */
.nav-cta.is-primary {
  background: linear-gradient(135deg, var(--electric), var(--cursor-blue));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px -10px var(--electric);
}
.nav-cta.is-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px var(--electric);
}
.nav-cta.is-primary .arw { transform: none; }
.nav-cta.is-primary:hover .arw { transform: translateX(3px); }

/* a quiet "back" variant, for pages that are not the home page */
.nav-cta.is-quiet {
  border-color: var(--line-soft); color: var(--ink-soft);
}
.nav-cta.is-quiet:hover { color: var(--ink); border-color: var(--electric); }

/* Long labels on a desktop, short ones on a phone. A wrapped nav pill made
   the header 105px tall and covered the top of the page underneath it. */
.nav-cta .cta-short { display: none; }
@media (max-width: 760px) {
  .nav-cta { padding: .48rem .75rem; font-size: .58rem; letter-spacing: .1em; }
  .nav-cta .cta-long { display: none; }
  .nav-cta .cta-short { display: inline; }
}

/* The chat card is the route I actually want people to take: no inbox to
   check, no number to save, and it opens with them already identified. It
   gets the accent treatment the others do not. */
.contact-card.is-primary {
  border-color: color-mix(in srgb, var(--electric) 45%, transparent);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--electric) 12%, var(--card)), var(--card) 70%);
}
.contact-card.is-primary .ch span:first-child { color: var(--accent); }
.contact-card.is-primary:hover { border-color: var(--electric); }