/* ═══════════════════════════════════════════════════════════
   Kuldeep Misra — Full Stack Application Developer
   Theme: noise → signal. Near-black, red signal accent,
   geometric type, particle wordmark, film grain.
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Light theme. Dark-on-bright red was vibrating badly at text sizes;
     the page now runs ink-on-paper with a deepened accent that reads
     as emphasis rather than alarm. */
  --bg:        #fcfbf8;   /* warm paper, softer than pure white */
  --bg-2:      #f5f3ee;   /* alternate sections, footer */
  --bg-3:      #efece5;   /* hover */
  --bg-card:   #ffffff;

  --fg:        #14141a;   /* ink */
  --fg-2:      #56565f;   /* body copy */
  --fg-3:      #83838d;   /* mono labels, meta */

  --red:       #c2321f;   /* deepened accent */
  --red-dim:   #9d2415;
  --red-glow:  rgba(194,50,31,.16);

  --line:      rgba(20,20,26,.10);
  --line-2:    rgba(20,20,26,.07);
  --line-hot:  rgba(194,50,31,.34);

  --honey:     #e0952f;   /* warm secondary, used sparingly */
  --panel:     #14141d;   /* the one deliberately dark surface: the terminal */
  --veil:      rgba(252,251,248,.86);
  --card:      #ffffff;   /* cards float above the paper */

  --display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'DM Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Rounded, soft-edged surfaces — the hairline wire-grid read as harsh. */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --sh:    0 1px 2px rgba(20,20,26,.04), 0 6px 16px rgba(20,20,26,.045);
  --sh-lg: 0 2px 6px rgba(20,20,26,.05), 0 18px 44px rgba(20,20,26,.09);

  --wrap: 1440px;
  --pad:  clamp(20px, 4.4vw, 64px);
  --ease: cubic-bezier(.2,.7,.25,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }
/* figure carries a UA margin of 1em 40px — it wrecks grid gaps. */
p, figure, blockquote, dl, dd { margin: 0; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* ── Film grain (fixed, above everything) ───────────────── */
.grain {
  position: fixed; inset: -120px; z-index: 900; pointer-events: none;
  opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 700ms steps(1) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-6%,4%); }
  40%  { transform: translate(4%,-7%); }
  60%  { transform: translate(-5%,-3%); }
  80%  { transform: translate(7%,5%); }
  100% { transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; opacity: .1; } }

/* ── Cursor comet ───────────────────────────────────────────
   Full-viewport and fixed, so the tail keeps up with the pointer
   anywhere on the page. Above the grain, below the cursor ring. */
.comet {
  --comet-dark:  #2bff77;
  --comet-light: #0f9b45;
  position: fixed; inset: 0; z-index: 940;
  width: 100%; height: 100%; pointer-events: none;
}
@media (hover: none), (pointer: coarse) { .comet { display: none; } }

/* ── WhatsApp ───────────────────────────────────────────────
   Bottom-right corner. The particles readout previously sat there
   and has been stacked above it. Icon-only at rest, expanding to
   a labelled pill on hover or keyboard focus.                 */
.wa {
  position: fixed; right: clamp(14px, 1.6vw, 24px); bottom: clamp(14px, 1.6vw, 24px);
  z-index: 910;
  display: inline-flex; align-items: center;
  height: 56px; border-radius: 999px; overflow: hidden;
  background: #25d366; color: #fff;
  box-shadow: 0 12px 30px rgba(37,211,102,.32), 0 2px 10px rgba(20,20,26,.16);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.wa svg { width: 26px; height: 26px; flex: none; margin: 0 15px; }
.wa span {
  max-width: 0; opacity: 0; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  transition: max-width .45s var(--ease), opacity .3s var(--ease), padding-right .45s var(--ease);
}
.wa:hover, .wa:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 16px 38px rgba(37,211,102,.42), 0 3px 12px rgba(20,20,26,.2);
}
.wa:hover span, .wa:focus-visible span { max-width: 220px; opacity: 1; padding-right: 22px; }
/* On small screens it stays a plain circle — an expanding pill would cover
   half the content and there is no hover to trigger it anyway. */
@media (max-width: 640px) {
  .wa { height: 50px; }
  .wa svg { width: 23px; height: 23px; margin: 0 13px; }
  .wa span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa:hover, .wa:focus-visible { transform: none; } }

/* ── Cursor ─────────────────────────────────────────────── */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 950; pointer-events: none;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 1px solid var(--fg); mix-blend-mode: difference;
  opacity: 0; transition: opacity .3s, width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease), background-color .28s;
}
.cursor.on { opacity: .85; }
.cursor.hot { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: var(--fg); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ── Layout ─────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sec { padding-block: clamp(58px, 6.4vw, 110px); position: relative; }
.sec-alt { background: var(--bg-2); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ── Type ───────────────────────────────────────────────────
   Headings run in sentence case — all-caps at display sizes reads
   as shouting and costs legibility. Uppercase is reserved for the
   small mono labels, where it works as a system marker.        */
.mono {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red);
}
.label::before { content: ""; width: 6px; height: 6px; background: var(--red); border-radius: 50%; animation: blip 2.4s var(--ease) infinite; }
@keyframes blip { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .28; transform: scale(.7); } }

.display { font-size: clamp(38px, 5.4vw, 80px); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; }
h2, .h2 { font-size: clamp(30px, 3.5vw, 53px); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
h3, .h3 { font-size: clamp(22px, 2.1vw, 31px); font-weight: 600; letter-spacing: -.022em; line-height: 1.22; }
h4 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.lead { font-size: clamp(18px, 1.25vw, 21px); line-height: 1.75; color: var(--fg-2); font-weight: 400; }
.dim { color: var(--fg-2); }
.red { color: var(--red); }

.sec-head { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(32px, 4.4vw, 80px); align-items: start; margin-bottom: clamp(60px, 7vw, 112px); }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; } }
.sec-head .label { margin-bottom: 24px; }
.sec-head-copy > p + p { margin-top: 20px; }

.sec-num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--fg-3);
  display: flex; align-items: center; gap: 14px; padding-bottom: 22px; margin-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.sec-num span:last-child { margin-left: auto; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 30px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--fg);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fg); transform: translateY(101%);
  transition: transform .45s var(--ease-io);
}
.btn { isolation: isolate; }
.btn:hover { color: var(--bg); border-color: var(--fg); }
.btn:hover::after { transform: translateY(0); }
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translate(4px,-4px); }

.btn-red { border-color: var(--red); color: var(--red); }
.btn-red::after { background: var(--red); }
.btn-red:hover { color: #fff; border-color: var(--red); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg); position: relative; padding-bottom: 4px;
}
.arrow-link::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-io); }
.arrow-link:hover::before { transform: scaleX(1); transform-origin: left; }
.arrow-link svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.arrow-link:hover svg { transform: translate(4px,-4px); }

/* ── Header ─────────────────────────────────────────────── */
.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent;
}
.head.stuck {
  background: var(--veil);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }

.brand { display: flex; align-items: baseline; gap: 10px; }
.brand b { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; }
.brand i { font-style: normal; color: var(--red); font-size: 19px; line-height: 1; }
.brand span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
@media (max-width: 600px) { .brand span { display: none; } }

/* ── Two-name brand lockup (index only) ──────────────────────
   services.html still runs the single-line .brand, so everything here is
   scoped to .brand-duo rather than changing the shared rules. */
.brand-duo { display: grid; gap: 3px; align-items: start; line-height: 1; }
.brand-duo .brand-name { display: flex; align-items: baseline; gap: 6px; }
.brand-duo b {
  font-size: clamp(15px, 1.25vw, 19px); font-weight: 700;
  letter-spacing: -.035em; text-transform: uppercase;
}
/* The ampersand is the logo's hinge, so it keeps the accent here too. */
.brand-duo i {
  font-style: normal; color: var(--red);
  font-size: clamp(14px, 1.15vw, 18px); font-weight: 500; line-height: 1;
}
.brand-duo .brand-tag {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: clamp(8px, .62vw, 9.5px);
  letter-spacing: .26em; text-transform: uppercase; color: var(--fg-3);
}
.brand-duo .brand-tag em { font-style: normal; color: var(--red); opacity: .8; }
/* Below 600 the shared rule hides every .brand span; the name has to come
   back or the header loses its wordmark entirely. */
@media (max-width: 600px) {
  .brand-duo .brand-name { display: flex; }
  .brand-duo .brand-tag { display: none; }
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  position: relative; padding: 8px 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2);
  transition: color .3s var(--ease);
}
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-io); }
.nav a:hover { color: var(--fg); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); transform-origin: left; }
.nav a.active { color: var(--fg); }

.head-end { display: flex; align-items: center; gap: 14px; }
.head-end .btn { padding: 12px 22px; }
/* The in-nav CTA is for the mobile drawer only. */
.nav > .btn { display: none; }

.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; place-items: center; }
.burger i { display: block; width: 16px; height: 1px; background: var(--fg); position: relative; transition: background-color .2s; }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: var(--fg); transition: transform .35s var(--ease-io), top .25s var(--ease); }
.burger i::before { top: -5px; }
.burger i::after { top: 5px; }
.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] i::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: grid; }
  .head-end .btn { display: none; }
  .nav {
    position: fixed; inset: 76px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--line);
    padding: 12px var(--pad) 28px;
    clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
    transition: clip-path .5s var(--ease-io), opacity .3s;
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav.open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
  .nav a { padding: 16px 0; font-size: 13px; border-bottom: 1px solid var(--line-2); }
  .nav a::after { display: none; }
  .nav > .btn { display: inline-flex; margin-top: 20px; justify-content: center; border-bottom-width: 1px; }
}

/* ── HERO / particle wordmark ───────────────────────────── */
/* The banner owns the whole first screen and holds nothing but the
   wordmark, its positioning line, and the identity strip that closes it. */
/* The banner runs dark-web: black ground, green code. Re-scoping the tokens
   here means the wordmark, tagline and meta strip all invert with it, while
   the rest of the page stays on paper. */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  padding-top: 76px; overflow: hidden;

  --bg:     #04070a;
  --bg-2:   #080c11;
  --bg-3:   #0d1218;
  --card:   #080c11;
  --fg:     #e6fbee;
  --fg-2:   #8ab89c;
  --fg-3:   #5a806a;
  --red:    #2bff77;          /* the signal colour turns green in here */
  --line:   rgba(80,255,150,.15);
  --line-2: rgba(80,255,150,.08);

  background: #04070a;
  color: var(--fg-2);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(900px 520px at 50% 38%, rgba(43,255,119,.10), transparent 70%);
}
/* The particle field spans the whole banner so the wordmark can
   scatter on load and drift away down-page as you scroll. */
.fx-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.hero > .wrap { position: relative; z-index: 2; }
/* Matrix intro: sits above the particle field, below the copy. Scaled and
   faded out by JS as the rain hands over to the wordmark. */
.rain-canvas {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  pointer-events: none; will-change: transform, opacity;
  transform-origin: 50% 42%;
}
.rain-canvas.is-done { display: none; }
/* Hero copy waits out the intro, then fades up with the wordmark. */
.hero > .wrap { transition: opacity .9s var(--ease); }
.hero.is-intro > .wrap { opacity: 0; }

/* Nothing but rain while the intro runs. The navbar, the readout and the
   back-to-top button all arrive with the wordmark. */
html.intro-lock .head,
html.intro-lock .hud,
html.intro-lock .totop { opacity: 0; pointer-events: none; }
html.intro-lock .head { transform: translateY(-12px); }
.head { transition: background-color .4s var(--ease), border-color .4s var(--ease),
                    backdrop-filter .4s, color .5s var(--ease),
                    opacity 1s var(--ease), transform 1s var(--ease); }
.hud, .totop { transition: opacity .9s var(--ease); }

/* Unstuck, the header floats over the dark banner and must read light; once
   it sticks it is back on the paper veil. Services is dark throughout, so it
   opts out of this. */
/* Over the banner the navbar is tuned to the green: mint type, a vivid green
   mark and CTA, no plate behind it. It needs no scrim — by the time it fades
   in the rain has already cleared, so the ground is plain black. */
html:not(.theme-ink) .head:not(.stuck) {
  --fg:   #ecfff5;                    /* nav hover / active */
  --fg-2: #a9dcc0;                    /* nav links at rest */
  --fg-3: #79b795;                    /* the small brand line */
  --red:  #34ff7d;                    /* brand mark, underline, CTA */
  --line: rgba(52,255,125,.30);
  border-bottom-color: transparent;
  /* Setting the variable is not enough on its own: .brand b inherits its
     colour from body and never reads var(--fg), so it would stay ink. */
  color: var(--fg);
}
html:not(.theme-ink) .head:not(.stuck) .brand b { text-shadow: 0 0 24px rgba(52,255,125,.30); }

/* The readout and the back-to-top control are fixed, so they sit outside the
   banner's scope and would render as cream pills on the black. Match them to
   the banner until the page scrolls off it. */
html:not(.theme-ink):not(.scrolled) .hud,
html:not(.theme-ink):not(.scrolled) .totop {
  background: rgba(4,7,10,.66);
  border-color: rgba(52,255,125,.26);
  color: #a9dcc0;
}
html:not(.theme-ink):not(.scrolled) .hud b { color: #34ff7d; }
html:not(.theme-ink):not(.scrolled) .hud .dot { background: #34ff7d; }
html:not(.theme-ink):not(.scrolled) .totop { color: #d8f7e5; }

/* Sits at the foot of the banner, closing it off. */
.hero-meta {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-block: 22px; border-top: 1px solid var(--line-2);
}
.hero-meta span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.hero-meta span b { color: var(--fg-2); font-weight: 500; }
@media (max-width: 760px) { .hero-meta span:nth-child(3) { display: none; } }

.stage { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; padding-block: clamp(28px, 4vw, 56px); }

/* .wordmark reserves the wordmark's slot in the flow; the particles
   themselves are painted by .fx-canvas, which covers the whole banner. */
.wordmark { position: relative; width: 100%; }
.js-particles .wordmark { height: clamp(112px, 18.5vw, 258px); }
.wordmark-text {
  font-size: clamp(64px, 21.2vw, 340px); font-weight: 500; line-height: .8;
  letter-spacing: -.055em; text-transform: uppercase; text-align: center;
  margin: 0; color: var(--fg);
}
/* When JS takes over, the DOM wordmark becomes the accessible label only. */
.js-particles .wordmark-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.wordmark-punct { color: var(--red); }

/* Two names stacked, so the duo slot is deep rather than wide — the
   rasteriser fits the block to whichever of the two runs out first. */
.wordmark-duo .wordmark-text {
  font-size: clamp(38px, 8.4vw, 118px); line-height: .86; letter-spacing: -.045em;
}
.wordmark-duo .wordmark-text span { display: block; }
.wordmark-duo .wordmark-punct { font-style: normal; }
.js-particles .wordmark-duo { height: clamp(120px, 14vw, 220px); }

/* ── Hero cast — the pair flanking the wordmark ──────────── */
/* The two PNGs are exported to a shared frame: identical height, subject
   bottom-anchored, eye-line at the same fraction down. Bottom-aligning the
   row is therefore all it takes to keep the faces level at any width. */
.hero-cast {
  --cast-h: clamp(180px, min(50vh, 32vw), 470px);
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(6px, 2.2vw, 40px); width: 100%;
}
/* Lifts the wordmark off the row's baseline so it lands on the eye-line
   rather than the chins, and keeps doing so as the portraits scale. */
.cast-mid { flex: 1 1 auto; min-width: 0; padding-bottom: calc(var(--cast-h) * .2); }

.cast { flex: 0 0 auto; margin: 0; position: relative; line-height: 0; }
/* A pool of green under each figure so the colour photos read as part of the
   banner rather than pasted onto it. */
.cast::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; bottom: -4%; transform: translateX(-50%);
  width: 132%; height: 72%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43,255,119,.20), transparent 72%);
}
.cast img {
  display: block; position: relative; z-index: 1;
  height: var(--cast-h); width: auto; max-width: 100%;
  /* The cutouts end on a crop line; fade it into the black ground. */
  -webkit-mask-image: linear-gradient(180deg, #000 74%, rgba(0,0,0,.55) 90%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 74%, rgba(0,0,0,.55) 90%, transparent 100%);
  filter: drop-shadow(0 0 30px rgba(43,255,119,.18));
}

/* Narrow: the wordmark takes the full width and the pair sits beneath it.
   Both figures are the same width here, so the height is driven off the
   viewport — two of them plus the gap always have to fit the line. */
@media (max-width: 900px) {
  .hero-cast {
    --cast-h: min(52vw, 44vh, 320px);
    flex-wrap: wrap; gap: clamp(8px, 2.5vw, 20px);
  }
  .cast-mid { order: -1; flex: 1 0 100%; padding-bottom: clamp(16px, 4vw, 34px); }
  /* The slot spans the full width here, so it needs the depth to match or
     the block gets sized down to fit the height instead of the measure. */
  .js-particles .wordmark-duo { height: clamp(130px, 34vw, 250px); }
}

.hero-tag {
  display: flex; justify-content: center; gap: clamp(14px, 3vw, 44px); flex-wrap: wrap;
  margin-top: clamp(22px, 3vw, 44px);
  font-family: var(--mono); font-size: clamp(10px, .9vw, 12.5px);
  letter-spacing: .26em; text-transform: uppercase; color: var(--fg-2); text-align: center;
}
.hero-tag span { position: relative; }
.hero-tag span + span::before {
  content: "/"; position: absolute; left: clamp(-26px, -1.9vw, -12px);
  color: var(--red); letter-spacing: 0;
}

/* The intro is the second screen — headline, pitch, CTAs, contact. */
.intro { padding-block: clamp(58px, 6.4vw, 110px); }
.intro .hero-bottom { padding-block: 0; border-top: 0; }

.hero-bottom {
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  gap: clamp(28px, 4vw, 64px); align-items: end;
  padding-block: clamp(28px, 3.4vw, 48px); border-top: 1px solid var(--line-2);
}
@media (max-width: 940px) { .hero-bottom { grid-template-columns: 1fr; align-items: start; } }
.hero-h1 { font-size: clamp(27px, 2.9vw, 42px); font-weight: 600; letter-spacing: -.03em; line-height: 1.16; margin-bottom: 24px; }
/* Second half of the headline drops back so the instruction lands first
   and the promise follows it rather than competing. */
.hero-h1-2 { color: var(--fg-2); font-weight: 500; margin-bottom: 30px; }
.hero-bottom .lead { max-width: 58ch; }
.hero-bottom .btn-row { margin-top: 28px; }

/* ── Pitch — three beats, each with its own hue ──────────────
   Long paragraphs get skimmed. A rule down the left edge gives each
   one a shape to land on, and the highlight inside carries the part
   worth reading if only one line gets read. */
.pitch { display: grid; gap: clamp(16px, 1.5vw, 22px); margin-bottom: clamp(26px, 2.6vw, 36px); }
.pitch .lead {
  position: relative; padding-left: clamp(16px, 1.4vw, 22px); margin: 0;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.pitch .lead::before {
  content: ""; position: absolute; left: 0; top: .34em; bottom: .34em; width: 2px;
  border-radius: 2px; background: var(--c, var(--red)); opacity: .55;
  transform: scaleY(0); transform-origin: top;
  transition: transform .8s var(--ease) calc(var(--i, 0) * 90ms + 160ms);
}
.pitch .lead.in::before { transform: scaleY(1); }

/* mark defaults to a yellow highlighter; this is a tinted keyline instead. */
.hl {
  background: color-mix(in srgb, var(--c, var(--red)) 11%, transparent);
  color: var(--fg); font-weight: 500;
  /* The negative margin claws back most of the padding, so a full stop
     immediately after the highlight does not float away from it. */
  padding: .1em .26em; margin: 0 -.16em; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .hl { background: var(--bg-3); }
}

/* ── Pledge — the two lines the page closes the pitch on ───── */
.pledge {
  border-left: 3px solid var(--red);
  padding: clamp(14px, 1.3vw, 20px) 0 clamp(14px, 1.3vw, 20px) clamp(16px, 1.4vw, 22px);
  display: grid; gap: 10px; max-width: 58ch;
}
.pledge p {
  margin: 0; font-size: clamp(17px, 1.2vw, 20px); line-height: 1.5;
  letter-spacing: -.015em; color: var(--fg-2); font-weight: 400;
}
.pledge b { color: var(--fg); font-weight: 600; }
/* The last line is the ask, so it carries the accent. */
.pledge-last b { color: var(--red); }

.hero-contact { display: grid; gap: 0; border-top: 1px solid var(--line); }
.hero-contact a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .4s var(--ease), color .3s var(--ease);
}
.hero-contact a:hover { padding-left: 12px; color: var(--red); }
.hero-contact em { font-style: normal; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.hero-contact strong { font-weight: 400; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: -.01em; }

/* ── Ticker ─────────────────────────────────────────────── */
.ticker { border-block: 1px solid var(--line); overflow: hidden; padding-block: 16px; background: var(--bg); }
.ticker-track { display: flex; width: max-content; animation: slide 42s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker-track span {
  display: inline-flex; align-items: center; gap: 26px; padding-right: 26px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap;
}
.ticker-track span::after { content: "◆"; color: var(--red); font-size: 8px; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ── Stats row ──────────────────────────────────────────────
   Reads like a spec sheet: indexed cells, one figure each. The top
   margin is what separates the banner screen from everything below. */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: clamp(10px,1vw,14px);
  margin-top: clamp(44px, 5.5vw, 88px);
}
.stat-row div {
  position: relative;
  padding: clamp(18px,1.6vw,24px) clamp(20px,1.8vw,26px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* A small coloured dot instead of the old [ 0n ] block — it was the
   counter and the oversized figure that made these read as heavy slabs. */
.stat-row div::before {
  content: ""; display: block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); opacity: .85; margin-bottom: 16px;
}
.stat-row div:nth-child(even)::before { background: var(--honey); }
.stat-row div:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.stat-row strong {
  display: block; font-size: clamp(20px, 1.8vw, 27px); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.15; margin-bottom: 3px;
}
.stat-row span {
  font-family: var(--display); font-size: 14.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--fg-3); line-height: 1.5;
}

/* ── Hued stat cells (index only) ────────────────────────────
   The plain row above is still what services.html renders. These add a
   colour per cell, so the strip reads as the opening bar of the proof
   grid below it rather than a separate spec sheet. Same four hues, in
   the same order. */
.stat-row div.stat {
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease), opacity .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.stat-row div.stat::before {
  background: var(--c); opacity: 1;
  width: 8px; height: 8px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent);
  transition: box-shadow .4s var(--ease);
}
.stat-row div.stat:hover {
  border-color: color-mix(in srgb, var(--c) 32%, var(--line));
}
.stat-row div.stat:hover::before { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 20%, transparent); }

/* Headline carries the hue; the figure inside it carries the extra weight,
   so the claim reads before the label does. */
.stat-row .stat strong {
  font-size: clamp(20px, 1.75vw, 26px); font-weight: 500; color: var(--c);
  letter-spacing: -.025em; line-height: 1.12; margin-bottom: 7px;
}
.stat-row .stat strong em { font-style: normal; font-weight: 700; letter-spacing: -.035em; }
.stat-row .stat > span { color: var(--fg-2); font-weight: 300; margin-top: auto; }
.stat-row .stat > span b { font-weight: 500; color: var(--fg); }

/* Platform and process lists: terms in ink, the marks between them in the
   cell's hue — it is the marks that make these read as a sequence. */
/* Flex, not inline: the terms are written without whitespace between them so
   the separators sit tight, which leaves an inline run no line break can
   land in. As flex items each term wraps on its own. */
.stat-row .stat .flow {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: .4em; row-gap: 3px;
}
.stat-row .stat .flow b { font-weight: 500; color: var(--fg); }
.stat-row .stat .flow i { font-style: normal; font-weight: 500; color: var(--c); opacity: .8; }

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .stat-row div.stat::before { box-shadow: none; }
}

/* ── Proof cards ────────────────────────────────────────────
   The one place on the paper side of the page that carries colour.
   Each card owns a hue through --c and spends it on four small
   things — rule, index, icon, keywords — so eight different colours
   still read as one set rather than a paint chart. */
.proof { padding-top: clamp(46px, 5.4vw, 78px); padding-bottom: clamp(18px, 2.2vw, 36px); }
.proof-eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-3); margin: 0 0 clamp(20px, 2vw, 30px);
}
.proof-grid {
  display: grid; gap: clamp(14px, 1.4vw, 20px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1180px) { .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .proof-grid { grid-template-columns: 1fr; } }

.pcard {
  --tint: color-mix(in srgb, var(--c) 8%, transparent);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(20px, 1.7vw, 28px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
/* The hue arrives as a wash from the top-left rather than a flat fill —
   flat tinted cards fought the paper ground. */
.pcard::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(120% 90% at 0% 0%, var(--tint), transparent 62%);
  transition: opacity .45s var(--ease);
}
/* Accent rule along the top edge, drawn on when the card arrives. */
.pcard::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 25%, transparent));
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease) calc(var(--i, 0) * 70ms + 120ms);
}
.pcard.in::after { transform: scaleX(1); }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: color-mix(in srgb, var(--c) 34%, var(--line)); }
.pcard:hover::before { opacity: 1; }

.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.pcard-ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  transition: background .45s var(--ease), transform .45s var(--ease);
}
.pcard-ico svg { width: 19px; height: 19px; }
.pcard:hover .pcard-ico { background: color-mix(in srgb, var(--c) 18%, transparent); transform: scale(1.06); }
.pcard-n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: color-mix(in srgb, var(--c) 62%, var(--fg-3));
}
.pcard h3 {
  font-size: clamp(17px, 1.25vw, 19.5px); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.28; margin: 0 0 12px;
}
/* The two figures carry the card — they get the hue and the weight. */
.pcard h3 .fig {
  display: block; font-size: clamp(34px, 3.1vw, 46px); font-weight: 600;
  letter-spacing: -.04em; line-height: 1; color: var(--c); margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.pcard p { margin: 0; font-size: 15.5px; font-weight: 300; line-height: 1.6; color: var(--fg-2); }
.pcard p + .pcard-pills { margin-top: 14px; }
.pcard p b { font-weight: 500; color: var(--fg); }

.pcard-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pcard-pills:last-child { margin-bottom: 0; }
.pcard-pills span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px;
  color: color-mix(in srgb, var(--c) 78%, var(--fg));
  background: color-mix(in srgb, var(--c) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
  transition: background .35s var(--ease);
}
.pcard:hover .pcard-pills span { background: color-mix(in srgb, var(--c) 15%, transparent); }

/* Each card follows the one before it in rather than the whole row landing
   at once — .rv supplies the movement, --i supplies the stagger. */
.pcard.rv { transition-delay: calc(var(--i, 0) * 70ms); }

/* color-mix is recent; without it the hue simply does not tint. Fall back
   to the neutral card so nothing looks broken. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .pcard-ico  { background: var(--bg-3); border-color: var(--line); }
  .pcard-pills span { background: var(--bg-3); border-color: var(--line); color: var(--fg-2); }
}

/* ── About ──────────────────────────────────────────────── */
/* ── About ──────────────────────────────────────────────────
   Four distinct parts rather than one wall: the introduction beside
   a shell session, the track record as a path, the long-form thinking
   as separate notes, and a closing line.                          */
.about-lede { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,4.4vw,76px); align-items: center; }
@media (max-width: 980px) { .about-lede { grid-template-columns: 1fr; } }

.about-hi { font-size: clamp(26px,2.8vw,40px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 22px; }
.about-intro { font-size: clamp(18px,1.3vw,21px); font-weight: 400; line-height: 1.75; color: var(--fg-2); }

.about-part {
  margin: clamp(72px,8vw,128px) 0 26px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}

/* Terminal card — the profile, read the way a developer would read it. */
.term {
  --fg: #f4f2ee; --fg-2: #a6a6b0; --fg-3: #6f6f7a;
  --line: rgba(244,242,238,.12); --line-2: rgba(244,242,238,.07);
  --red: #ff5540;
  border: 1px solid rgba(20,20,26,.14); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, #16161f, var(--panel));
  box-shadow: 0 24px 60px rgba(20,20,26,.22);
  color: var(--fg-2);
}
.term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.term-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fg-3); opacity: .45; }
.term-dot:first-child { background: var(--red); opacity: .95; }
.term-title {
  margin-left: 12px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; color: var(--fg-3);
}
.term-body {
  margin: 0; padding: clamp(20px,2.2vw,32px);
  font-family: var(--mono); font-size: clamp(11.5px,.86vw,13px); line-height: 2;
  color: var(--fg-2); overflow-x: auto; tab-size: 2;
}
.term-body code { font: inherit; }
.c-key  { color: var(--red); }
.c-str  { color: var(--fg); }
.c-num  { color: #ffb454; }
.c-punc { color: var(--fg-3); }
.c-dim  { color: var(--fg-3); }
.c-cmd  { color: var(--fg); }
.caret {
  display: inline-block; width: 7px; height: 14px; background: var(--red);
  margin-left: 4px; vertical-align: -2px; animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

/* ── Crew — the two profiles ─────────────────────────────────
   Each is a terminal beside its prose. The two panels run different
   accents inside .term's own scoped tokens, so Kuldeep's session reads
   as a shell and Srishti's as a stylesheet without either leaving the
   dark-panel language the rest of the page already uses. */
.crew { display: grid; gap: clamp(46px, 5vw, 84px); }
.mate {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 3.4vw, 60px); align-items: center;
}
/* Srishti's panel sits on the right so the pair mirrors rather than repeats. */
.mate-s .term { order: 2; }
@media (max-width: 940px) {
  .mate { grid-template-columns: 1fr; gap: clamp(24px, 3vw, 36px); }
  .mate-s .term { order: 0; }
}

/* --c is the profile's accent; the terminal re-points its own --red at it. */
.mate-k { --c: #2bcc7a; }
.mate-s { --c: #b07cff; }
.mate .term { --red: var(--c); }
.mate .term .c-fn { color: var(--c); }
.mate .term-dot:first-child { background: var(--c); }

.mate-body h3 {
  font-size: clamp(24px, 2.2vw, 33px); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.12; margin-bottom: 4px;
}
.mate-body h3 .dot { color: var(--c); }
.mate-role {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c); margin-bottom: 20px; font-weight: 500;
}
.mate-body > p { font-size: 16.5px; font-weight: 300; line-height: 1.7; color: var(--fg-2); margin-bottom: 14px; }
.mate-body > p b { font-weight: 500; color: var(--fg); }
.mate-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-3); margin: 26px 0 0; font-weight: 500;
}
.mate-tag + .pills { margin-top: 12px; }
.mate .pill { border-color: color-mix(in srgb, var(--c) 26%, var(--line)); }
.mate .pill::before { background: var(--c); }
.mate:hover .pill { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }

/* Names carry their owner's accent wherever they appear in the copy. */
.nm { font-weight: 600; }
.nm-k { color: #1a9e5c; }
.nm-s { color: #7c5cf0; }

/* ── One team — where the two profiles converge ────────────── */
.onecrew {
  margin-top: clamp(56px, 6vw, 96px);
  padding: clamp(28px, 3vw, 46px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(43,204,122,.05), transparent 42%),
    linear-gradient(0deg, rgba(176,124,255,.05), transparent 42%),
    var(--card);
  box-shadow: var(--sh);
}
.onecrew .mono { display: block; color: var(--fg-3); margin-bottom: 16px; }
.onecrew h3 {
  font-size: clamp(22px, 2vw, 30px); font-weight: 600;
  letter-spacing: -.03em; margin-bottom: 26px;
}
.onecrew > p { font-size: 16.5px; font-weight: 300; line-height: 1.7; color: var(--fg-2); max-width: 74ch; margin: 0; }
.onecrew > p b { font-weight: 500; color: var(--fg); }

/* The pipeline: stages joined by arrows drawn in CSS, so it stays a list
   for screen readers and a diagram for everyone else. */
.pipe {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0;
}
.pipe li { display: flex; align-items: center; }
.pipe li b {
  display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  padding: 9px 15px; border-radius: 999px;
  color: var(--fg); background: var(--bg-2); border: 1px solid var(--line);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
/* Colour walks the pipeline from Kuldeep's green to Srishti's violet. */
.pipe li:nth-child(1) b { border-color: rgba(176,124,255,.42); }
.pipe li:nth-child(2) b { border-color: rgba(140,150,200,.42); }
.pipe li:nth-child(3) b { border-color: rgba(110,175,170,.42); }
.pipe li:nth-child(4) b { border-color: rgba(70,195,140,.42); }
.pipe li:nth-child(5) b { border-color: rgba(43,204,122,.5); background: rgba(43,204,122,.08); }
.pipe li:not(:last-child)::after {
  content: ""; width: clamp(14px, 1.6vw, 28px); height: 1px; margin: 0 4px;
  background: linear-gradient(90deg, var(--line-hot), rgba(20,20,26,.14));
}
.onecrew.in .pipe li b { animation: pipeIn .55s var(--ease) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes pipeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .onecrew.in .pipe li b { animation: none; } }
.pipe li b:hover { transform: translateY(-3px); }

@supports not (border-color: color-mix(in srgb, red 26%, black)) {
  .mate .pill { border-color: var(--line); }
}

/* Track record — three steps on one path. */
.track {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: clamp(16px,1.6vw,22px);
}
.track li {
  position: relative; overflow: hidden; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(28px,2.8vw,42px);
  box-shadow: var(--sh);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.track li:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.track li::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-io);
}
.track li:hover::after { transform: scaleX(1); }
.track-n {
  display: flex; align-items: center; gap: 12px; margin-bottom: clamp(24px,2.6vw,38px);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--fg-3);
  transition: color .4s var(--ease);
}
.track-n::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.track li:hover .track-n { color: var(--red); }
.track h4 { font-size: clamp(18px,1.4vw,21px); letter-spacing: -.02em; line-height: 1.3; margin-bottom: 8px; }
.track p { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }

/* Notes — the long-form thinking, one idea per block. */
/* Fixed at two columns: four notes across an auto-fit track leaves a
   dead cell showing the container's hairline background. */
.notes {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(18px,1.8vw,26px);
}
@media (max-width: 900px) { .notes { grid-template-columns: 1fr; } }
.note {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(30px,2.9vw,46px); box-shadow: var(--sh);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.note:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.note .n {
  display: block; margin-bottom: 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--fg-3);
  transition: color .4s var(--ease);
}
.note:hover .n { color: var(--red); }
.note h4 { font-size: clamp(18px,1.4vw,21px); letter-spacing: -.02em; margin-bottom: 14px; }
.note p { font-size: 17px; font-weight: 400; line-height: 1.72; color: var(--fg-2); }

/* Closing line. */
.about-close {
  margin-top: clamp(56px,6vw,92px); padding-top: clamp(32px,3.4vw,52px);
  border-top: 1px solid var(--line);
}
.about-close .mono { display: block; margin-bottom: 20px; }
.about-close p {
  font-size: clamp(19px,1.75vw,27px); font-weight: 300; line-height: 1.6;
  letter-spacing: -.015em; max-width: 62ch; color: var(--fg);
}

/* ── Solution sets ──────────────────────────────────────────
   All three categories are laid out one after another. Tabs hid
   two thirds of the offer behind a control nobody noticed.    */
.solset + .solset { margin-top: clamp(58px, 6.6vw, 112px); }
.solset-head { max-width: 78ch; margin-bottom: clamp(40px,4.4vw,66px); }
.solset-head h3 { margin-bottom: 18px; }
.solset-head p + p { margin-top: 14px; }
.solset-tag {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red);
}
.solset-tag::after { content: ""; flex: 1; height: 1px; background: var(--line-hot); opacity: .6; }

/* ── Solution cards ─────────────────────────────────────── */
/* Cards float on the paper with real gaps. The old 1px wire-grid put a
   hard rule against every edge, which is what made this feel sharp. */
.grid { display: grid; gap: clamp(18px,1.8vw,26px); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(355px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

.card {
  position: relative; overflow: hidden; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(30px, 2.9vw, 46px);
  box-shadow: var(--sh);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-io);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: rgba(20,20,26,.16); }
.card:hover::before { transform: scaleX(1); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.card-n { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--fg-3); }
.card:hover .card-n { color: var(--red); }

/* Icon tile — gives each solution a face to recognise it by. */
.card-ico {
  width: 52px; height: 52px; flex: none; border-radius: 16px;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--fg-2);
  transition: color .45s var(--ease), border-color .45s var(--ease),
              background-color .45s var(--ease), transform .45s var(--ease);
}
.card-ico svg { width: 21px; height: 21px; }
.card:hover .card-ico {
  color: var(--red); border-color: var(--line-hot);
  background: rgba(194,50,31,.08); transform: translateY(-3px);
}
.card h4 { margin-bottom: 14px; letter-spacing: -.02em; font-size: clamp(18px,1.4vw,21px); line-height: 1.25; }
.card > p { font-size: 17px; color: var(--fg-2); font-weight: 300; line-height: 1.62; }
.card-for { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.card-for b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 7px; font-weight: 500; }
.card-for span { font-size: 15.5px; color: var(--fg-2); font-weight: 300; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* Feature chips: soft fill instead of hard outlines, each flagged with a
   red dot so the individual capabilities read as marked points. */
.card .pills, .live .pills { gap: 7px; margin-top: 24px; }
.card .pill, .live .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 9px;
  border: 1px solid transparent; background: rgba(20,20,26,.045);
  font-family: var(--display); font-size: 13.5px; font-weight: 300;
  letter-spacing: 0; text-transform: none; color: var(--fg-2); line-height: 1.35;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.card .pill::before, .live .pill::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; flex: none;
  background: var(--red); opacity: .75; transition: opacity .35s var(--ease);
}
.card:hover .pill, .live:hover .pill { background: rgba(20,20,26,.07); border-color: var(--line); color: var(--fg); }
.card:hover .pill::before, .live:hover .pill::before { opacity: 1; }
.pill {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-2); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px;
  transition: border-color .3s, color .3s;
}
.card:hover .pill, .case:hover .pill { border-color: rgba(20,20,26,.16); }
.pill-red { color: var(--red); border-color: var(--line-hot); }

/* ── Expect / feature list ──────────────────────────────── */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 60px minmax(0,.9fr) minmax(0,1.3fr); gap: clamp(16px,2.4vw,40px);
  padding: clamp(24px,2.6vw,34px) 0; border-bottom: 1px solid var(--line);
  transition: padding-left .5s var(--ease), background-color .4s var(--ease);
}
.row:hover { padding-left: 20px; background: var(--bg-2); border-radius: var(--r); }
@media (max-width: 800px) { .row { grid-template-columns: 40px 1fr; } .row p { grid-column: 2; } }
.row .n { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--fg-3); padding-top: 5px; }
.row:hover .n { color: var(--red); }
.row h4 { letter-spacing: -.02em; font-size: clamp(17px,1.3vw,21px); line-height: 1.3; }
.row p { font-size: 17px; color: var(--fg-2); font-weight: 300; line-height: 1.62; }

/* ── Chips (industries) ─────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-2); border: 1px solid var(--line); background: var(--card);
  padding: 12px 22px; border-radius: 999px; box-shadow: var(--sh);
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.chip:hover { color: var(--fg); border-color: var(--red); transform: translateY(-2px); }

/* ── Tech ───────────────────────────────────────────────── */
.tech-rows { border-top: 1px solid var(--line); }
.tech-row {
  display: grid; grid-template-columns: minmax(0,.34fr) minmax(0,1fr); gap: clamp(16px,3vw,48px);
  padding: clamp(22px,2.4vw,30px) 0; border-bottom: 1px solid var(--line); align-items: center;
  transition: padding-left .5s var(--ease);
}
.tech-row:hover { padding-left: 16px; }
@media (max-width: 720px) { .tech-row { grid-template-columns: 1fr; gap: 14px; } }
.tech-row h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--red); font-weight: 500; }
.tech-row .pills { margin: 0; }

/* ── Testimonials ───────────────────────────────────────── */
.tst-grid { display: grid; gap: clamp(18px,1.8vw,26px); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.tst {
  display: flex; flex-direction: column; gap: 22px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(30px,2.7vw,42px); box-shadow: var(--sh);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tst:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.tst.is-hidden { display: none; }
.tst-n { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; color: var(--fg-3); display: flex; justify-content: space-between; }
.tst-n b { color: var(--red); font-weight: 500; letter-spacing: .1em; }
.tst blockquote { margin: 0; font-size: 17.5px; line-height: 1.72; font-weight: 300; color: var(--fg); }
.tst footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-2); }
.tst cite { font-style: normal; display: block; font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.tst .role { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin-top: 6px; display: block; line-height: 1.6; }

.tst-short-row { display: grid; gap: clamp(16px,1.6vw,22px); grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.tst-short { background: var(--bg-2); border-radius: var(--r); padding: clamp(24px,2.1vw,30px); }
.tst-short p { font-size: 15.5px; font-weight: 300; line-height: 1.6; color: var(--fg); margin: 14px 0 16px; }
.tst-short cite { font-style: normal; font-size: 15.5px; font-weight: 500; letter-spacing: -.02em; display: block; }
.tst-short .role { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }

.more-wrap { display: flex; justify-content: center; margin-top: 40px; }

/* ── Project grid ───────────────────────────────────────────
   The preview is the card. Two per row; the written case study
   lives in a modal so the grid stays scannable.              */
.proj-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(26px,2.8vw,48px); }
@media (max-width: 900px) { .proj-grid { grid-template-columns: 1fr; } }
.proj { display: flex; flex-direction: column; }
.proj.is-out { display: none; }

.proj-frame {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card);
  box-shadow: var(--sh);
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.proj:hover .proj-frame {
  border-color: rgba(194,50,31,.28); transform: translateY(-6px);
  box-shadow: var(--sh-lg);
}

/* Browser chrome */
.live-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: rgba(20,20,26,.04);
}
.live-dots { display: flex; gap: 6px; flex: none; }
.live-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); opacity: .45; }
.live-dots i:first-child { background: var(--red); opacity: .9; }
.live-url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--fg-3);
}
.live-open {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-2); transition: color .3s var(--ease);
}
.live-open svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.live-open:hover { color: var(--red); }
.live-open:hover svg { transform: translate(2px,-2px); }
.live-open.is-off { color: var(--fg-3); opacity: .7; }

/* The viewport itself */
.live-view {
  position: relative; height: 300px; background: #fff;
  display: grid; place-items: center;
}
.live.is-wide .live-view { height: 400px; }
@media (max-width: 760px) { .live-view, .live.is-wide .live-view { height: 320px; } }
/* The frame renders at a desktop width and is scaled down to fit the box,
   so each preview shows the site's real opening layout rather than the
   narrow layout it would pick at the card's own width. --vw/--sc are set
   per card in JS; the fallbacks keep it sane before that runs. */
.live-view iframe {
  position: absolute; top: 0; left: 0;
  width: var(--vw, 100%);
  height: calc(100% / var(--sc, 1));
  transform: scale(var(--sc, 1));
  transform-origin: 0 0;
  border: 0; background: #fff;
}
/* Block, not flex: an inline <code> inside a flex container becomes a
   flex item and shatters the sentence into columns. */
.live-ph {
  display: block; padding: 22px 30px; max-width: 46ch; text-align: center;
  font-family: var(--mono); font-size: 11px; line-height: 1.95; letter-spacing: .06em; color: var(--fg-3);
}
.live-ph code { color: var(--red); font-family: var(--mono); white-space: nowrap; }
.live-ph i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  margin-right: 9px; vertical-align: middle; animation: blip 1.4s var(--ease) infinite;
}
.live-view.is-blocked { background: repeating-linear-gradient(135deg, #f2f2ed 0 10px, #e9e9e2 10px 20px); }


.proj .live-view { height: clamp(300px, 30vw, 440px); }

/* Placeholder for projects with no embeddable URL. */
.live-view.is-static {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: repeating-linear-gradient(135deg, #f2f2ed 0 11px, #e9e9e2 11px 22px);
}
.proj-mark {
  font-family: var(--display); font-size: clamp(52px,5vw,78px); font-weight: 600;
  letter-spacing: -.05em; line-height: 1; color: var(--fg-3); opacity: .5;
}
.proj-kind { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.proj-note {
  max-width: 40ch; padding: 0 26px; text-align: center;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.9; letter-spacing: .05em; color: var(--fg-3);
}
.proj-note code { color: var(--red); font-family: var(--mono); white-space: nowrap; }

/* Card text */
.proj-info { padding: clamp(22px,2.1vw,30px) 2px 0; display: flex; flex-direction: column; flex: 1; }
.proj-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.proj-n { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--fg-3); }
.proj:hover .proj-n { color: var(--red); }
.proj-cat { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.proj-info h4 { font-size: clamp(21px,1.75vw,27px); font-weight: 600; letter-spacing: -.02em; margin-bottom: 9px; }
.proj-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); line-height: 1.7; margin-bottom: 14px;
}
.proj-ov {
  font-size: 16.5px; font-weight: 400; line-height: 1.7; color: var(--fg-2); margin-bottom: 22px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.proj-more {
  align-self: flex-start; margin-top: auto;
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg);
  transition: border-color .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease);
}
.proj-more svg { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.proj-more:hover { border-color: var(--red); color: var(--red); background: rgba(255,46,23,.07); }
.proj-more:hover svg { transform: translate(3px,-3px); }
.proj-details, .proj-detail { display: none; }

/* ── Detail modal ───────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 960; display: grid; place-items: center; padding: clamp(16px,3vw,48px); }
.modal[hidden] { display: none; }
.modal-back { position: absolute; inset: 0; background: rgba(20,20,26,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fadeIn .3s var(--ease); }
.modal-box {
  position: relative; width: min(880px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(30px,3.6vw,60px);
  box-shadow: 0 40px 100px rgba(20,20,26,.25);
  animation: modalIn .45s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .modal-back, .modal-box { animation: none; } }
.modal-x {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--fg-2); background: var(--bg);
  transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.modal-x svg { width: 17px; height: 17px; }
.modal-x:hover { border-color: var(--red); color: var(--red); transform: rotate(90deg); }
.modal-cat {
  display: block; margin-bottom: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); line-height: 1.7;
}
.modal-body h3 { font-size: clamp(26px,2.6vw,38px); margin-bottom: 20px; }
.modal-body .case-stack { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.modal-body .case-block { margin-top: clamp(28px,3vw,40px); }
.modal-body .btn-row { margin-top: clamp(30px,3.2vw,44px); }
body.modal-open { overflow: hidden; }


/* ── Developer elements ─────────────────────────────────────
   Code blocks, an architecture flow, a commit log and a design
   token panel. Each is doing a job: showing backend depth,
   systems thinking, delivery discipline and UI craft rather
   than just decorating the page.                             */

/* Shared block heading, so these read as asides to the section. */
.dev-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(22px,2.2vw,30px); }
.dev-head b {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red);
}
.dev-head span { font-size: 15.5px; font-weight: 400; color: var(--fg-3); line-height: 1.5; }
.dev-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* The CTA centres its content; code and diagrams must not inherit that. */
.dev-block { margin-top: clamp(64px,6.5vw,110px); text-align: left; }

/* Code panel. Re-scopes the ink tokens so the syntax colours hold up on the
   dark ground whichever theme the page is running. */
.code {
  --fg: #f4f2ee; --fg-2: #a8a8b2; --fg-3: #74747f;
  --red: #ff6a52;
  --line: rgba(244,242,238,.12);
  border: 1px solid rgba(20,20,26,.16); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, #16161f, var(--panel));
  box-shadow: var(--sh-lg);
  color: var(--fg-2); font-family: var(--mono);
}
.code-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.code-bar .term-dot { width: 9px; height: 9px; }
.code-file { font-size: 11.5px; letter-spacing: .06em; color: var(--fg-3); }
.code-tag {
  margin-left: auto; font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red);
}
.code-body {
  margin: 0; padding: 20px 20px 24px; overflow-x: auto;
  font-size: 12.8px; line-height: 1.9; white-space: pre; text-align: left;
}
.code-body code { font: inherit; }
.ln {
  display: inline-block; width: 2em; margin-right: 16px;
  text-align: right; color: rgba(244,242,238,.2); user-select: none;
}
.c-fn { color: #7fd6ff; }
.c-com { color: rgba(244,242,238,.34); font-style: italic; }
.code-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px,1fr)); gap: clamp(18px,1.8vw,26px); }

/* Architecture flow. Plain boxes and arrows — a request's actual path. */
.arch { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.arch-stage {
  flex: 1 1 190px; display: flex; flex-direction: column; gap: 7px;
  padding: clamp(18px,1.7vw,24px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh);
}
.arch-n { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--red); }
.arch-stage b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.arch-stage span { font-family: var(--mono); font-size: 11px; line-height: 1.75; color: var(--fg-3); }
.arch-arrow {
  align-self: center; flex: 0 0 auto;
  font-family: var(--mono); font-size: 15px; color: var(--fg-3);
}
.arch-fan { gap: 9px; }
.arch-fan i {
  font-style: normal; display: block; padding: 9px 12px; border-radius: 9px;
  background: rgba(20,20,26,.05); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 11px; color: var(--fg-2);
}
@media (max-width: 860px) { .arch-arrow { transform: rotate(90deg); align-self: center; } }

/* Commit log — how a project actually ships. */
.gitlog { position: relative; padding-left: 26px; }
.gitlog::before {
  content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px;
  width: 1px; background: var(--line);
}
.gitlog li { position: relative; padding: 0 0 clamp(22px,2.2vw,30px); }
.gitlog li:last-child { padding-bottom: 0; }
.gitlog li::before {
  content: ""; position: absolute; left: -26px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--red);
}
.gitlog li:last-child::before { background: var(--red); }
.git-hash {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--red); margin-right: 12px;
}
.gitlog b { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.git-meta {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.8; color: var(--fg-3);
}

/* Design tokens — the system this page is actually built on. */
.tokens { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: clamp(18px,1.8vw,26px); }
.tok {
  padding: clamp(20px,1.9vw,28px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh);
}
.tok > b {
  display: block; margin-bottom: 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-3);
}
.tok-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid var(--line-2); }
.tok-row:first-of-type { border-top: 0; }
.tok-row em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--fg-3); }
.tok-row i { font-style: normal; color: var(--fg); letter-spacing: -.02em; }
.tok-sw { display: flex; align-items: center; gap: 10px; }
.tok-sw span { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line); flex: none; }
.tok-bar { height: 8px; border-radius: 3px; background: var(--red); opacity: .8; }
/* space-between pins a two-child row's last item right, which read as bars
   growing backwards. This card lays them out from the left instead. */
.tok-scale .tok-row { justify-content: flex-start; gap: 18px; }
.tok-scale .tok-row em { flex: none; width: 2.2em; }


/* ── Case studies ───────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.filter {
  position: relative; padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-3);
  transition: color .3s var(--ease), background-color .35s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}

.filter:hover { color: var(--fg); border-color: rgba(20,20,26,.22); transform: translateY(-2px); }

.filter[aria-pressed="true"] { color: var(--card); background: var(--fg); border-color: var(--fg); }


.cases { border-top: 1px solid var(--line); }
.case {
  display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  gap: clamp(24px,3.6vw,72px);
  padding: clamp(44px,4.4vw,80px) 0; border-bottom: 1px solid var(--line);
  transition: background-color .5s var(--ease), padding-left .5s var(--ease), padding-right .5s var(--ease);
}
.case:hover { background: var(--bg-3); padding-left: clamp(12px,1.6vw,26px); padding-right: clamp(12px,1.6vw,26px); }
.case.is-out { display: none; }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } }

.case-idx { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--fg-3); display: block; margin-bottom: 22px; }
.case:hover .case-idx { color: var(--red); }
.case-head h3 { font-size: clamp(24px,2.8vw,40px); margin-bottom: 12px; }
.case-tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 22px; line-height: 1.7; }
.case-overview { font-size: 17.5px; color: var(--fg-2); font-weight: 300; line-height: 1.68; }
.case-stack { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.case-stack b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 9px; font-weight: 500; }
.case-stack span { font-size: 15.5px; color: var(--fg-2); font-weight: 300; line-height: 1.8; }

.case-body { display: grid; gap: 32px; align-content: start; }
.case-block h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
  font-weight: 500; margin-bottom: 18px; display: flex; align-items: center; gap: 12px;
}
.case-block h4::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.impact { display: grid; }
.impact li {
  display: grid; grid-template-columns: 34px 1fr; gap: 4px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line-2);
  font-size: 16.5px; color: var(--fg-2); font-weight: 400; line-height: 1.66;
}
.impact li:last-child { border-bottom: 0; }
.impact li::before { content: attr(data-n); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--fg-3); }

/* ── Page hero (inner) ──────────────────────────────────── */
.page-hero { padding-top: calc(76px + clamp(60px,8vw,120px)); padding-bottom: clamp(50px,6vw,90px); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(700px 400px at 15% 0%, rgba(194,50,31,.06), transparent 65%); }
.page-hero .wrap { position: relative; z-index: 2; }
.js-particles .page-hero .wordmark { height: clamp(96px, 15vw, 205px); }
.crumbs { display: flex; gap: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 30px; }
.crumbs a:hover { color: var(--red); }
.page-hero h1 { font-size: clamp(40px, 8vw, 128px); font-weight: 600; letter-spacing: -.05em; line-height: .92; text-transform: uppercase; }
.page-hero .lead { margin-top: 28px; max-width: 68ch; }

/* ── CTA ────────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; padding-block: clamp(64px, 7.2vw, 124px); text-align: center; border-top: 1px solid var(--line); }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 420px at 50% 100%, rgba(194,50,31,.07), transparent 70%); pointer-events: none; }
.cta .wrap { position: relative; }
.cta h2 { font-size: clamp(30px, 4.4vw, 64px); letter-spacing: -.03em; line-height: 1.08; }
.cta p { margin: 28px auto 0; max-width: 60ch; }
.cta .btn-row { justify-content: center; margin-top: 40px; }
.cta-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin-top: 44px; }
.cta-contacts a { font-family: var(--mono); font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-2); transition: color .3s; }
.cta-contacts a:hover { color: var(--red); }

/* ── Footer ─────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding-block: clamp(48px,5vw,72px) 28px; background: var(--bg-2); }
.foot-grid { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap: 40px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-mark { font-size: clamp(40px,5vw,72px); font-weight: 600; letter-spacing: -.055em; line-height: .9; text-transform: uppercase; margin-bottom: 18px; }
/* Two names will not sit on one line in a 1.5fr column at the single-name
   size, so the duo mark stacks and drops a step — same shape as the banner.
   Scoped, because services.html still runs the one-line mark. */
.foot-mark-duo { font-size: clamp(30px, 3.6vw, 52px); }
.foot-mark-duo span { display: block; }
.foot-mark-duo em { font-style: normal; }
.foot p { font-size: 16.5px; color: var(--fg-2); font-weight: 300; line-height: 1.65; max-width: 40ch; }
.foot h5 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; margin-bottom: 18px; }
.foot li { margin-bottom: 11px; }
.foot li a { font-size: 16px; color: var(--fg-2); transition: color .3s, padding-left .3s var(--ease); display: inline-block; }
.foot li a:hover { color: var(--red); padding-left: 6px; }
.foot-bot {
  margin-top: clamp(44px,5vw,72px); padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-3);
}

/* ── HUD (particles / fps readout) ──────────────────────── */
.hud {
  position: fixed; right: 18px; bottom: 92px; z-index: 80;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--veil); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--fg-3);
  transition: opacity .4s, transform .4s var(--ease), border-color .3s;
}
.hud:hover { border-color: var(--line-hot); }
.hud b { color: var(--fg-2); font-weight: 500; }
.hud .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); animation: blip 1.6s var(--ease) infinite; }
.hud.hide { opacity: 0; transform: translateY(14px); pointer-events: none; }
@media (max-width: 700px) { .hud { display: none; } }

/* ── To top ─────────────────────────────────────────────── */
.totop {
  position: fixed; left: 18px; bottom: 18px; z-index: 80;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--veil); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center; color: var(--fg);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .4s, transform .4s var(--ease), border-color .3s, color .3s;
}
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { border-color: var(--red); color: var(--red); }
.totop svg { width: 16px; height: 16px; }

/* ── Reveal ─────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* Split-line reveal for big headings */
.mask { display: block; overflow: hidden; }
.mask > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease-io); }
.in .mask > span, .mask.in > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .mask > span { transform: none; } }


/* ═══════════════════════════════════════════════════════════
   INK THEME — services.html only
   The home page keeps the cream/ink treatment. The services page
   stays on the original scheme: near-black paper, hot red signal,
   Jost + JetBrains Mono, and the flat hairline-grid boxes that the
   light theme replaced with floating cards.
   Applied via class="theme-ink" on <html>.
   ═══════════════════════════════════════════════════════════ */
html.theme-ink {
  --bg:        #08080a;
  --bg-2:      #0d0d10;
  --bg-3:      #131317;
  --card:      #08080a;

  --fg:        #f4f2ee;
  --fg-2:      #a2a2ab;
  --fg-3:      #6a6a75;

  --red:       #ff2e17;
  --red-dim:   #c02411;
  --honey:     #ffb454;

  --line:      rgba(244,242,238,.11);
  --line-2:    rgba(244,242,238,.06);
  --line-hot:  rgba(255,46,23,.34);

  --panel:     #0c0c11;
  --veil:      rgba(8,8,10,.78);

  --display: 'Jost', 'Futura', 'Century Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  --r-sm: 0px; --r: 0px; --r-lg: 0px;
  --sh: none;
  --sh-lg: 0 22px 60px rgba(0,0,0,.55);
}

/* Grain sits over black, not paper. */
.theme-ink .grain { opacity: .32; mix-blend-mode: overlay; }
@media (prefers-reduced-motion: reduce) { .theme-ink .grain { opacity: .2; } }

/* Jost carries its own weight; 600 reads too heavy here. */
.theme-ink h2, .theme-ink .h2,
.theme-ink h3, .theme-ink .h3,
.theme-ink .display,
.theme-ink .hero-h1, .theme-ink .about-hi,
.theme-ink .stat-row strong, .theme-ink .foot-mark,
.theme-ink .proj-mark, .theme-ink .proj-info h4 { font-weight: 400; }
.theme-ink .brand b { font-weight: 500; }

/* Flat hairline grids instead of floating cards. */
.theme-ink .grid { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.theme-ink .card,
.theme-ink .note,
.theme-ink .track li,
.theme-ink .tst { border: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
.theme-ink .card:hover,
.theme-ink .note:hover,
.theme-ink .track li:hover,
.theme-ink .tst:hover { transform: none; box-shadow: none; background: var(--bg-3); }

.theme-ink .track,
.theme-ink .notes,
.theme-ink .tst-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.theme-ink .tst-short-row { gap: 1px; background: var(--line); border: 1px solid var(--line); border-top: 0; }
.theme-ink .tst-short { background: var(--bg); border-radius: 0; }

/* Stat strip returns to bordered cells with the [ 0n ] index. */
.theme-ink .stat-row { gap: 0; border-top: 1px solid var(--line); }
.theme-ink .stat-row div {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line); border-radius: 0; box-shadow: none;
  padding: clamp(32px,3.4vw,52px) clamp(20px,2.2vw,36px);
}
.theme-ink .stat-row div:last-child { border-right: 0; }
.theme-ink .stat-row div:hover { transform: none; box-shadow: none; background: var(--bg-3); }
.theme-ink .stat-row div::before {
  content: "[ 0" counter(stat) " ]";
  counter-increment: stat; width: auto; height: auto; border-radius: 0; background: none;
  margin-bottom: clamp(26px,3vw,44px);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--fg-3);
}
.theme-ink .stat-row { counter-reset: stat; }
.theme-ink .stat-row div:nth-child(even)::before { background: none; }
.theme-ink .stat-row strong { font-size: clamp(34px, 3.8vw, 56px); letter-spacing: -.035em; margin-bottom: 14px; }
.theme-ink .stat-row span {
  font-family: var(--mono); font-size: 12px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-3);
}

/* Filter bar rather than pills. */
.theme-ink .filters { gap: 0; border-block: 1px solid var(--line); }
.theme-ink .filter {
  border: 0; border-right: 1px solid var(--line); border-radius: 0;
  background: transparent; padding: 18px clamp(14px,1.6vw,24px);
}
.theme-ink .filter:hover { background: var(--bg-3); transform: none; border-color: var(--line); color: var(--fg); }
.theme-ink .filter[aria-pressed="true"] { background: transparent; color: var(--fg); border-color: var(--line); }
.theme-ink .filter[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--red);
}

/* Surfaces that were tinted with ink now tint with light. */
.theme-ink .chip { background: transparent; box-shadow: none; }
.theme-ink .card .pill, .theme-ink .live .pill { background: rgba(255,255,255,.04); }
.theme-ink .card:hover .pill, .theme-ink .live:hover .pill { background: rgba(255,255,255,.065); }
.theme-ink .live-chrome { background: rgba(255,255,255,.035); }
.theme-ink .card-ico { background: rgba(255,255,255,.035); }
.theme-ink .card:hover .card-ico { background: rgba(255,46,23,.1); }
.theme-ink .live-view.is-static,
.theme-ink .live-view.is-blocked { background: repeating-linear-gradient(135deg, #0a0a0d 0 11px, #0c0c11 11px 22px); }
.theme-ink .proj-frame { background: var(--bg-2); border-radius: 14px; }
.theme-ink .term { border-radius: 12px; border-color: rgba(244,242,238,.12); }
.theme-ink .modal-box { border-radius: 18px; background: var(--bg-2); }
.theme-ink .modal-back { background: rgba(4,4,6,.82); }
.theme-ink .row:hover { background: var(--bg-3); border-radius: 0; }