/* SynaptrixAI — 2026 redesign
   Two families: Space Grotesk (voice), JetBrains Mono (data).
   One accent: --signal. Everything else is ground, rule, or text. */

:root {
  color-scheme: dark;

  --void:   #06080B;   /* page ground */
  --panel:  #0E1216;   /* raised surface */
  --rule:   #1C232B;   /* hairlines */
  --text:   #DDE3EA;   /* primary text */
  --dim:    #7C8794;   /* secondary text */
  --signal: #6EE7DC;   /* the one accent */

  --shell: 60rem;
  --gap: clamp(1rem, 2vw, 1.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --t-data:  0.8125rem;
  --t-small: 0.9375rem;
  --t-body:  1.0625rem;
  --t-lede:  clamp(1.125rem, 1.8vw, 1.375rem);
  --t-sub:   clamp(1.5rem, 3.2vw, 2.125rem);
  --t-display: clamp(2.5rem, 6.5vw, 4.25rem);

  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  font-size-adjust: from-font;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--signal); color: var(--void); }

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--signal);
  color: var(--void);
  font-family: var(--mono);
  font-size: var(--t-data);
}
.skip:focus { left: 0; }

/* ─── the signal trace ───────────────────────────────────────────
   One piece of ambient motion on the page. Pure CSS, compositor
   driven. Decorative, so it progressively enhances: browsers without
   scroll-driven animations simply see the static rail. */

.trace {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  background: var(--rule);
  z-index: 40;
  pointer-events: none;
}

.trace__lit {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--signal));
  transform: scaleY(0);
  transform-origin: 50% 0;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes trace-advance {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }
    .trace__lit {
      animation: trace-advance auto linear;
      animation-timeline: scroll();
    }
  }
}

/* ─── masthead ─────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--void) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  container-type: scroll-state;
  container-name: masthead;
}

@container masthead scroll-state(stuck: top) {
  .masthead__inner { border-block-end-color: var(--rule); }
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
  border-block-end: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-inline-end: auto;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.0625rem;
}
.mark svg { width: 1.375rem; height: 1.375rem; color: var(--signal); }
.mark b { font-weight: 700; color: var(--signal); }

.masthead nav {
  display: flex;
  gap: 1.75rem;
  font-size: var(--t-small);
  color: var(--dim);
}
.masthead nav a { transition: color 0.2s var(--ease); }
.masthead nav a:hover { color: var(--text); }

/* ─── hero ─────────────────────────────────────────────────────── */

.hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem); }

.hero h1 {
  font-size: var(--t-display);
  font-weight: 500;
  letter-spacing: -0.038em;
  max-width: 20ch;
  /* balance splits this evenly across two lines instead of orphaning "studio." */
  text-wrap: balance;
}

.hero__lede {
  margin-block-start: 1.75rem;
  max-width: 46ch;
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--dim);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 2.5rem;
}

/* ─── buttons ──────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 0.9375rem 1.5rem;
  background: var(--signal);
  color: var(--void);
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 500;
  transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { opacity: 0.86; }

.btn--quiet {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--rule);
  padding-block: calc(0.9375rem - 1px);
}
.btn--quiet:hover { opacity: 1; color: var(--text); border-color: var(--dim); }

/* ─── section heads ────────────────────────────────────────────── */

.section-head { margin-block-end: clamp(2rem, 4vw, 3rem); }
.section-head h2 {
  font-size: var(--t-sub);
  font-weight: 500;
  max-width: 20ch;
  text-wrap: balance;
}
.section-head p {
  margin-block-start: 1.125rem;
  max-width: 58ch;
  color: var(--dim);
  text-wrap: pretty;
}

/* ─── services ─────────────────────────────────────────────────── */

.services { padding-block: clamp(3rem, 6vw, 4.5rem); border-block-start: 1px solid var(--rule); }

/* A spec sheet, not a card deck: cells are separated by the same hairline
   as the work index, with no boxes, radii or shadows of their own. */
.services__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gap);
}
.service { grid-column: span 3; padding-inline-end: clamp(0.5rem, 3vw, 2.5rem); }
@media (max-width: 46rem) {
  .services__grid { grid-template-columns: 1fr; }
}

.service {
  padding-block: 1.75rem;
  border-block-start: 1px solid var(--rule);
}
.service h3 {
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.service p {
  margin-block-start: 0.75rem;
  font-size: var(--t-small);
  color: var(--dim);
  max-width: 44ch;
  text-wrap: pretty;
}

/* ─── the index ────────────────────────────────────────────────── */

.index {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-block-start: 1px solid var(--rule);
}

.row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: baseline;
  gap: 0 var(--gap);
  padding-block: 1.375rem;
  border-block-end: 1px solid var(--rule);
  /* background and box-shadow only — nothing here reflows on hover */
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Grid items default to min-width:auto, so long text refuses to shrink below
   its min-content width and shoves the status column off a narrow screen. */
.row > * { min-width: 0; }
.row:hover,
.row:focus-visible {
  background: var(--panel);
  box-shadow: inset 2px 0 0 var(--signal);
  outline-offset: 0;
}

.row__sector {
  font-family: var(--mono);
  font-size: var(--t-data);
  color: var(--dim);
  transition: color 0.25s var(--ease);
}
.row:hover .row__sector { color: var(--signal); }

.row__name {
  grid-column: 2 / 6;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.row__thesis {
  grid-column: 2 / -1;
  margin-block-start: 0.25rem;
  font-size: var(--t-small);
  color: var(--dim);
  max-width: 52ch;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.row__state {
  grid-column: 6;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-data);
  color: var(--dim);
  white-space: nowrap;
}
/* The label stays quiet on every row; only the dot carries state, so the
   accent reads as signal rather than as five repetitions of itself. */
.row__state::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.row__state[data-state="live"]::before  { background: var(--signal); }
.row__state[data-state="beta"]::before  { box-shadow: inset 0 0 0 1.5px var(--signal); }
.row__state[data-state="build"]::before { box-shadow: inset 0 0 0 1.5px var(--dim); }

@media (max-width: 46rem) {
  .row {
    grid-template-columns: 1fr auto;
    gap: 0 1rem;
  }
  .row__sector { grid-row: 1; grid-column: 1 / -1; margin-block-end: 0.375rem; }
  .row__name { grid-column: 1; }
  .row__thesis { grid-column: 1 / -1; }
  .row__state { grid-row: 2; grid-column: 2; }
}

/* ─── studio ───────────────────────────────────────────────────── */

.studio {
  padding-block: clamp(3.25rem, 6.5vw, 5rem);
  border-block-start: 1px solid var(--rule);
}

.studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 52rem) {
  .studio__grid { grid-template-columns: 1fr; }
}

.studio h2 {
  font-size: var(--t-sub);
  font-weight: 500;
  max-width: 16ch;
  text-wrap: balance;
}

.studio__body p + p { margin-block-start: 1.125rem; }
.studio__body p { color: var(--dim); max-width: 62ch; text-wrap: pretty; }

/* The chips sit under the heading so the left column carries its own weight;
   otherwise it runs out halfway and leaves a hole beside the prose. */
.craft {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 2rem;
  max-width: 22rem;
}
.craft li {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-data);
  color: var(--dim);
}

/* ─── contact ──────────────────────────────────────────────────── */

.contact {
  padding-block: clamp(3.25rem, 6.5vw, 5rem);
  border-block-start: 1px solid var(--rule);
}

.contact h2 {
  font-size: var(--t-sub);
  font-weight: 500;
  max-width: 18ch;
  text-wrap: balance;
}

.contact p {
  margin-block-start: 1.25rem;
  max-width: 52ch;
  color: var(--dim);
  text-wrap: pretty;
}

.mailto {
  display: inline-block;
  margin-block-start: 2.25rem;
  padding-block-end: 0.375rem;
  border-block-end: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-lede);
  color: var(--signal);
  transition: border-color 0.25s var(--ease);
}
.mailto:hover { border-block-end-color: var(--signal); }

/* ─── foot ─────────────────────────────────────────────────────── */

.foot {
  padding-block: 2.5rem 3.5rem;
  border-block-start: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-data);
  color: var(--dim);
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}
.foot a { transition: color 0.2s var(--ease); }
.foot a:hover { color: var(--signal); }

/* ─── product pages ────────────────────────────────────────────── */

.back {
  display: inline-block;
  margin-block-start: clamp(2rem, 5vw, 3rem);
  font-family: var(--mono);
  font-size: var(--t-data);
  color: var(--dim);
  transition: color 0.2s var(--ease);
}
.back:hover { color: var(--signal); }

.detail { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 9vw, 7rem); }

.detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-block-end: 1.5rem;
  font-family: var(--mono);
  font-size: var(--t-data);
  color: var(--dim);
}

.detail h1 {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.detail__thesis {
  margin-block-start: 1.25rem;
  max-width: 54ch;
  font-size: var(--t-lede);
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}

.detail__body {
  margin-block-start: 2.5rem;
  max-width: 62ch;
}
.detail__body p { color: var(--dim); text-wrap: pretty; }
.detail__body p + p { margin-block-start: 1.125rem; }

.detail__visit {
  display: inline-block;
  margin-block-start: 2.5rem;
  padding: 0.875rem 1.5rem;
  background: var(--signal);
  color: var(--void);
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 500;
  transition: opacity 0.2s var(--ease);
}
.detail__visit:hover { opacity: 0.86; }

.detail__pending {
  display: inline-block;
  margin-block-start: 2.5rem;
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--dim);
}

.siblings {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-block-start: 1px solid var(--rule);
}

/* ─── writing index ────────────────────────────────────────────── */

.index--top { padding-block-start: clamp(2.5rem, 6vw, 4rem); }
.index--writing { border-block-start: 1px solid var(--rule); }

.section-head--row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}

.seemore {
  font-family: var(--mono);
  font-size: var(--t-data);
  color: var(--dim);
  padding-block-end: 0.25rem;
  border-block-end: 1px solid var(--rule);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.seemore:hover { color: var(--signal); border-block-end-color: var(--signal); }

/* An article row has no status, so the thesis takes the full remaining span
   rather than leaving a gap where the state column would be. */
.row--article .row__name { grid-column: 2 / -1; }
.row--article .row__sector { font-variant-numeric: tabular-nums; }

@media (max-width: 46rem) {
  .row--article { grid-template-columns: 1fr; }
  .row--article .row__sector,
  .row--article .row__name,
  .row--article .row__thesis { grid-column: 1; }
}

/* ─── product page: what it demonstrates ───────────────────────── */

.proves {
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--rule);
}
.proves h2 {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--dim);
}
.proves p {
  margin-block-start: 0.875rem;
  max-width: 56ch;
  text-wrap: pretty;
}
.proves .craft { max-width: none; }

.btn--pending {
  display: inline-block;
  margin-block-start: 2.5rem;
  padding: 0.9375rem 1.5rem;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--dim);
}

.detail__meta time { font-variant-numeric: tabular-nums; }
.detail .btn { margin-block-start: 2.5rem; }

/* ─── article prose ────────────────────────────────────────────── */

.prose {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #C3CBD5;
}

.prose > * + * { margin-block-start: 1.5rem; }

.prose h2 {
  margin-block-start: 3rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
}
.prose h3 {
  margin-block-start: 2.5rem;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.prose h4 {
  margin-block-start: 2rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
}

.prose strong { color: var(--text); font-weight: 500; }

.prose a {
  color: var(--signal);
  border-block-end: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  transition: border-color 0.2s var(--ease);
}
.prose a:hover { border-block-end-color: var(--signal); }

.prose-list { padding-inline-start: 1.25rem; }
.prose-list li { list-style: none; position: relative; }
.prose-list li + li { margin-block-start: 0.625rem; }
.prose ul.prose-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.25rem;
  top: 0.75em;
  width: 5px;
  height: 1px;
  background: var(--dim);
}
.prose ol.prose-list { counter-reset: step; }
.prose ol.prose-list li::before {
  counter-increment: step;
  content: counter(step) ".";
  position: absolute;
  inset-inline-start: -1.5rem;
  font-family: var(--mono);
  font-size: var(--t-data);
  color: var(--dim);
}

.prose blockquote {
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--signal);
}
.prose blockquote p { color: var(--text); }

.prose hr {
  margin-block: 2.5rem;
  border: 0;
  border-block-start: 1px solid var(--rule);
}

.prose code {
  font-family: var(--mono);
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--text);
}

/* Code blocks scroll inside themselves; the page never scrolls sideways. */
.prose pre {
  margin-block: 1.75rem;
  padding: 1.125rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  overflow-x: auto;
  position: relative;
}
.prose pre code {
  padding: 0;
  background: none;
  border: 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text);
  white-space: pre;
}
.prose pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  padding: 0.25rem 0.625rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--dim);
  border-inline-start: 1px solid var(--rule);
  border-block-end: 1px solid var(--rule);
}

/* ─── mobile navigation ────────────────────────────────────────────
   Was display:none below 34rem, which left small phones with no
   navigation at all. The links now wrap to their own line and scroll
   sideways if they must — still no JavaScript. */

@media (max-width: 40rem) {
  .masthead__inner {
    flex-wrap: wrap;
    align-items: flex-start;
    min-height: 0;
    padding-block: 0.875rem;
    gap: 0.625rem 1rem;
  }
  .mark { margin-inline-end: 0; }
  .masthead nav {
    width: 100%;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .masthead nav::-webkit-scrollbar { display: none; }
  .masthead nav a { white-space: nowrap; }
}

/* ─── hero strip ───────────────────────────────────────────────────
   The products supply the colour; the studio's own palette stays
   monochrome around them. Runs off the right edge to read as a shelf
   that continues rather than a row of three tidy thumbnails. */

.hero { overflow: clip; }

.strip {
  display: flex;
  gap: 0.875rem;
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  margin-inline-end: calc(50% - 50vw);
  padding-inline-end: 3rem;
  mask-image: linear-gradient(to right, #000 72%, transparent);
}
.strip img {
  flex: none;
  height: clamp(104px, 13vw, 152px);
  width: auto;
  border: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  object-fit: cover;
  object-position: top left;
}

/* ─── work grid ────────────────────────────────────────────────────
   Six columns with uneven spans (4+2, 2+4, 2+2+2). Wide tiles take a
   wider image ratio so every tile in a row still lines up. */

.work {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  border-block-start: 1px solid var(--rule);
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1.75rem, 3.5vw, 2.75rem) var(--gap);
}

.tile { grid-column: span 2; min-width: 0; }
.tile--wide { grid-column: span 4; }

.tile__frame {
  display: block;
  border: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
}
.tile__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.tile__meta {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-block-start: 1rem;
  font-family: var(--mono);
  font-size: var(--t-data);
  color: var(--dim);
}
.tile__sector { transition: color 0.25s var(--ease); }

.tile__name {
  display: block;
  margin-block-start: 0.5rem;
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.tile__thesis {
  display: block;
  margin-block-start: 0.375rem;
  font-size: var(--t-small);
  color: var(--dim);
  max-width: 46ch;
  text-wrap: pretty;
}

.tile:hover .tile__frame,
.tile:focus-visible .tile__frame { border-color: var(--dim); }
.tile:hover .tile__sector { color: var(--signal); }

/* Products with no screenshot keep the compact row treatment rather than
   getting an invented placeholder. */
.rest {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  border-block-start: 1px solid var(--rule);
  padding-block-start: 0.5rem;
}

@media (max-width: 60rem) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile--wide { grid-column: span 1; }
}
@media (max-width: 40rem) {
  .grid { grid-template-columns: 1fr; }
}

/* ─── product page screenshot ──────────────────────────────────── */

.detail__shot {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  border: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  background: var(--panel);
  overflow: hidden;
}
.detail__shot img { display: block; width: 100%; height: auto; }

/* ─── approach ─────────────────────────────────────────────────────
   Deliberately a different shape from every other section: a wide
   heading row, then the argument in three columns. The two-column
   version left a large hole under the heading, and gave the page a
   fourth section with identical proportions to the other three. */

.approach {
  padding-block: clamp(3.25rem, 6.5vw, 5rem);
  border-block-start: 1px solid var(--rule);
}

.approach__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-block-end: clamp(2rem, 4vw, 2.75rem);
}
.approach__head h2 {
  font-size: var(--t-sub);
  font-weight: 500;
  max-width: 20ch;
  text-wrap: balance;
}
.approach__head .craft { margin-block-start: 0; max-width: 34rem; }

.approach__cols {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) var(--gap);
  border-block-start: 1px solid var(--rule);
  padding-block-start: clamp(1.5rem, 3vw, 2.25rem);
}
.approach__cols p {
  grid-column: span 2;
  padding-inline-end: clamp(0.25rem, 1.5vw, 1rem);
  font-size: var(--t-small);
  color: var(--dim);
  text-wrap: pretty;
}

@media (max-width: 60rem) {
  .approach__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .approach__cols { grid-template-columns: 1fr; }
}

/* ─── alignment corrections ────────────────────────────────────────
   Every grid on the page now shares one 6-column system and one gap
   token, so column edges coincide instead of missing each other by a
   few pixels. Measured before this change: the work tiles sat at
   x=497 while the approach columns sat at x=501. */

/* Products with no screenshot sit directly beneath the tiles, so their
   titles must share the tiles' left edge. The label-column treatment
   put them 160px inboard of everything above them. */
.rest .row { grid-template-columns: 1fr auto; gap: 0 1rem; }
.rest .row__sector { grid-row: 1; grid-column: 1 / -1; margin-block-end: 0.375rem; }
.rest .row__name { grid-column: 1; }
.rest .row__state { grid-row: 2; grid-column: 2; }
.rest .row__thesis { grid-column: 1 / -1; }