/*
 * The Work band (UI round 14, operator-directed): one animated band under the
 * Work title and, without its timeline, under the Home actions. Everything it
 * shows is derived at build time from the published catalog and is complete in
 * the static document: the numbers are text, the status segments are a list and
 * the timeline is a list of links. This sheet only draws and animates them.
 *
 *   counter   odometer wheels (the look of the Serras Firstlight "lesson
 *             odometer": a windowed digit drum whose neighbours peek under the
 *             window shading). The script adds the drum inside each wheel; the
 *             wheel's own digit is the value and never changes.
 *   status    a segmented bar that fills left to right; each segment is a
 *             toggle (Work) or a link (Home). Colours are the round 13 status
 *             tones: live jade, build cyan, beta amber, delivered steel.
 *   timeline  one thin line per project on a year axis, drawn in sequence; a
 *             line that began before the axis runs in from the left edge.
 *
 * Motion is transform and opacity only, starts once the route is settled, and
 * resolves at once under reduced motion (reduced-motion.css). At rest every
 * fill and line is fully drawn: nothing depends on the script to be visible.
 */

.work-band {
  --seg-color: var(--status-still-dot);
  --band-ease: cubic-bezier(.33, 0, .18, 1);
  container-type: inline-size;
  display: grid;
  gap: 16px;
  max-width: 76rem;
  margin: 0 0 1.9rem;
}
.work-band [data-status-tone="live"] { --seg-color: var(--status-live-dot); --seg-word: var(--status-live); }
.work-band [data-status-tone="build"] { --seg-color: var(--status-build-dot); --seg-word: var(--status-build); }
.work-band [data-status-tone="beta"] { --seg-color: var(--status-beta-dot); --seg-word: var(--status-beta); }
.work-band [data-status-tone="delivered"] { --seg-color: var(--status-still-dot); --seg-word: var(--status-still); }

/* The Home lockup is a square mark with no intrinsic size in its markup; its box is
   reserved here, so the identity, the band and the featured set do not move when
   the lockup arrives after the first paint. */
.home-surface .home-lockup img { aspect-ratio: 1 / 1; }

/* On Home the band is the proof under "Why teams work with us" (UI round 17); its
   Home-only treatment is in the Home layout block at the end of this sheet. */

/* ---- counter ----------------------------------------------------------- */
.work-band__counter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--text-body);
  font: 400 .9375rem/1.3 var(--font-body, "Instrument Sans", sans-serif);
}
.work-band__unit { color: var(--text-body); }
.work-band__dot { margin: 0 4px; color: var(--text-2); }
.work-band__figure {
  --odo-window: 34px;
  --odo-digit: 26px;
  display: inline-flex;
  gap: 2px;
}
.work-band .odo-wheel {
  position: relative;
  display: inline-block;
  width: 22px;
  height: var(--odo-window);
  overflow: hidden;
  border: 1px solid var(--line-detail);
  border-radius: 5px;
  color: var(--text-hi);
  background: var(--plate);
  box-shadow: var(--groove);
  font: 600 1.125rem/var(--odo-window) var(--font-meta, "JetBrains Mono", ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* The drum: a strip of digits behind the window; only the seated digit and a
   sliver of its neighbours show. The wheel's own digit stays in the document
   (it is the value) and is simply not painted while the drum is in place. */
.work-band .odo-wheel[data-odo="live"] { color: transparent; }
.work-band .odo-strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: var(--text-hi);
  transform: translateY(calc((var(--odo-window) - var(--odo-digit)) / 2 - var(--seat, 1) * var(--odo-digit)));
  transition: transform var(--roll, .9s) cubic-bezier(.22, .8, .2, 1) var(--roll-delay, 0s);
  will-change: transform;
}
.work-band .odo-glyph {
  display: block;
  height: var(--odo-digit);
  line-height: var(--odo-digit);
}
.work-band .odo-glyph::before { content: attr(data-g); }
/* Window shading: the neighbours read as a wheel, not as more numbers. */
.work-band .odo-wheel[data-odo="live"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--odo-shade, rgba(6, 11, 16, .92)) 0, transparent 30%, transparent 70%, var(--odo-shade, rgba(6, 11, 16, .92)) 100%);
  pointer-events: none;
}
:root[data-theme="light"] .work-band { --odo-shade: rgba(237, 243, 242, .94); }

/* ---- status bar -------------------------------------------------------- */
.work-band__status {
  display: grid;
  grid-template-columns: var(--band-columns);
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A segment: its fill, then its count and label. On /work/ the toggle is an empty
   button laid over the whole segment (named by the label and the count beside
   it), so without the script the segment is a plain legend with no dead control.
   On Home the segment's link wraps the fill and the label. */
.work-band__seg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  min-height: 44px;
  padding-bottom: 4px;
  color: var(--text-2);
  font: 500 .8125rem/1.3 var(--font-body, "Instrument Sans", sans-serif);
  letter-spacing: .005em;
}
button.work-band__seg-key {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
a.work-band__seg-key {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  box-sizing: border-box;
  width: 100%;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}
.work-band__seg-key:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; box-shadow: none; }
.work-band__seg-fill {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: 10px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--seg-color) 20%, transparent);
}
.work-band__seg-fill::before,
.work-band__seg-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.work-band__seg-fill::before {
  background: var(--seg-color);
  transform-origin: left center;
}
/* Firstlight bloom in the segment's own colour, revealed by opacity. */
.work-band__seg-fill::after {
  box-shadow: 0 8px 22px -6px color-mix(in oklab, var(--seg-color) 70%, transparent);
  opacity: 0;
  transition: opacity .34s var(--band-ease);
}
/* The count leads its label ("8 Live in production"): it comes first in the
   document and is laid over the left edge of the label row. */
.work-band__seg-label {
  display: block;
  padding-left: 1.75em;
  overflow-wrap: break-word;
  transition: color .25s ease;
}
.work-band__seg-count {
  position: absolute;
  top: 19px;
  left: 1px;
  color: var(--text-hi);
  font: 600 .8125rem/1.3 var(--font-meta, "JetBrains Mono", ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
@media (hover: hover) {
  .work-band__seg-key:hover ~ .work-band__seg-label,
  a.work-band__seg-key:hover .work-band__seg-label { color: var(--text-hi); }
  .work-band__seg-key:hover ~ .work-band__seg-fill::after,
  a.work-band__seg-key:hover .work-band__seg-fill::after { opacity: 1; transition-duration: .2s; }
}
.work-band__seg-key:active ~ .work-band__seg-fill,
a.work-band__seg-key:active .work-band__seg-fill { transform: translateY(1px); }
.work-band__seg-key[aria-pressed="true"] ~ .work-band__seg-label { color: var(--text-hi); text-decoration: underline; text-decoration-color: var(--seg-color); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.work-band__seg-key[aria-pressed="true"] ~ .work-band__seg-fill::after { opacity: 1; }
.work-band__status:has([aria-pressed="true"]) .work-band__seg-key[aria-pressed="false"] ~ .work-band__seg-fill { opacity: .38; }

/* Narrow bands: equal columns, each fill a share of the largest group; then two by two. */
@container (max-width: 640px) {
  .work-band__status { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .work-band__seg-fill::before { right: auto; width: calc(var(--seg) / var(--band-max) * 100%); }
  /* A label here is one or two lines depending on the face in use; two lines are
     reserved, so a late web font never moves what follows the band. */
  .work-band__seg-label { min-height: 2.6em; }
}
/* Phones: sized so the counter stays on one line and each label on one line in
   both the web face and its fallback (no shift when the web font arrives). */
@container (max-width: 430px) {
  .work-band__status { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .work-band__seg { font-size: .75rem; }
  .work-band__seg-label { min-height: 0; }
  .work-band__counter { gap: 6px 7px; font-size: .8125rem; }
  .work-band__dot { margin: 0; }
  .work-band .odo-wheel { width: 20px; }
  /* Home's first unit is longer ("projects showcased"): its counter is always two
     lines here (the separator is the break), in the web face and in its fallback. */
  .work-band[data-work-band="home"] .work-band__dot { flex: 0 0 100%; height: 0; overflow: hidden; visibility: hidden; }
}

/* ---- timeline ---------------------------------------------------------- */
.work-band__timeline {
  position: relative;
  padding-top: 20px;
}
.work-band__axis {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--years), minmax(0, 1fr));
  pointer-events: none;
}
.work-band__year {
  padding-left: 7px;
  border-left: 1px solid var(--rule);
  color: var(--text-2);
  font: 500 var(--label-size)/1.3 var(--font-meta, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: .12em;
}
.work-band__lines {
  position: relative;
  display: grid;
  grid-auto-rows: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.work-band__line { position: relative; transition: opacity .3s ease; }
/* A deliberate refinement of the 44px target floor (accessibility.css): 22 marks
   of a dense chart cannot each be 44px tall and stay a compact strip. Each line
   is exactly its 5px row (no overlapping hit areas); every project keeps a full
   size target on the same page (its tile below and its row in the guide), which
   is the WCAG 2.5.8 "equivalent control" case. The strip is for fine pointers
   and the keyboard: it is not shown on phones or on coarse (touch) pointers. */
.work-band__line a {
  position: absolute;
  top: 0;
  left: calc(var(--x0) * 100%);
  display: block;
  width: calc((var(--x1) - var(--x0)) * 100%);
  min-inline-size: 0;
  min-block-size: 0;
  height: 5px;
  color: var(--text-hi);
  text-decoration: none;
}
.work-band__line a::before {
  content: "";
  position: absolute;
  top: 1.5px;
  right: 3px;
  left: 1px;
  height: 2px;
  border-radius: 1px;
  background: var(--seg-color);
  transform-origin: left center;
  transition: transform .2s ease;
}
/* An entry older than the axis runs in from the left edge: its first stretch is a
   fading lead-in, marked by a small notch at the edge. */
.work-band__line[data-runs-in="true"] a::before {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%);
  mask-image: linear-gradient(to right, transparent 0, #000 9%);
}
.work-band__line[data-runs-in="true"] a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--seg-color);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.work-band__line a:hover,
.work-band__line a:focus-visible { z-index: 3; }
.work-band__line a:hover::before,
.work-band__line a:focus-visible::before { transform: scaleY(2.5); }
.work-band__line a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; box-shadow: none; }
/* The project's name: always in the document (it is the link's name), shown beside
   the line on hover or focus. The full names are also the tiles below. */
.work-band__tip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 0;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text-hi);
  background: var(--bg);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
  font: 500 .75rem/1.2 var(--font-body, "Instrument Sans", sans-serif);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.work-band__line[data-tip-side="end"] .work-band__tip { right: 0; left: auto; }
.work-band__line a:hover .work-band__tip,
.work-band__line a:focus-visible .work-band__tip { opacity: 1; transform: none; }
/* A pressed status toggle quiets the other groups' lines. */
.work-band:has([data-work-filter-value="production"][aria-pressed="true"]) .work-band__line:not([data-status-group="production"]),
.work-band:has([data-work-filter-value="daily-use"][aria-pressed="true"]) .work-band__line:not([data-status-group="daily-use"]),
.work-band:has([data-work-filter-value="beta"][aria-pressed="true"]) .work-band__line:not([data-status-group="beta"]),
.work-band:has([data-work-filter-value="delivered"][aria-pressed="true"]) .work-band__line:not([data-status-group="delivered"]) { opacity: .22; }

/* Phones and touch: the counter and the status bar only. */
@media (max-width: 767px) {
  .work-band__timeline { display: none; }
  .work-band { gap: 14px; margin-bottom: 1.6rem; }
}
@media (pointer: coarse) {
  .work-band__timeline { display: none; }
}

/* ---- motion ------------------------------------------------------------ */
/* Once the route is settled the fills run left to right, one segment after the
   other, and the lines draw in sequence. `backwards` holds a fill at zero only
   during its own delay; at rest everything is fully drawn. */
@keyframes workBandFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
:is(html.js.arrival-seen body, html.js body:not([data-arrival-state="pending"])) .work-band:not([data-band-state="wait"]) .work-band__seg-fill::before {
  /* One sweep across the whole bar: each segment takes its share of the time, in turn. */
  animation: workBandFill calc(var(--share, .25) * 1.25s) linear calc(.45s + var(--from, 0) * 1.25s) backwards;
}
:is(html.js.arrival-seen body, html.js body:not([data-arrival-state="pending"])) .work-band:not([data-band-state="wait"]) .work-band__line a::before {
  animation: workBandFill .55s var(--band-ease) calc(.9s + var(--i, 0) * .045s) backwards;
}
/* A band that starts below the fold waits (the script marks it) and runs when reached. */
.work-band[data-band-state="wait"] .work-band__seg-fill::before,
.work-band[data-band-state="wait"] .work-band__line a::before { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  .work-band .odo-strip,
  .work-band__seg-fill::after,
  .work-band__line a::before,
  .work-band__tip { transition: none; }
  .work-band .work-band__seg-fill::before,
  .work-band .work-band__line a::before { animation: none !important; transform: none !important; }
}
html[data-motion-preference="reduce"] .work-band .odo-strip { transition: none; }
html[data-motion-preference="reduce"] .work-band .work-band__seg-fill::before,
html[data-motion-preference="reduce"] .work-band .work-band__line a::before { animation: none !important; transform: none !important; }

/* ---- Home layout (UI round 17, AMD-20261001-HOME-LAYOUT) --------------- */
/* Operator-directed: calm, editorial, one idea per section. This block replaces
   the round 14 featured-tile and round 15 narrative styles. On Home colour means
   three things only: the primary action (the steel key), live status (a jade dot)
   and links / focus (cyan). Everything else is ink on the ground with hairlines.
   Layout switches are container queries on each section (the content column is
   932px at 1440, 788 at 1280, 558 at 1024 with the rail docked, 691 at 768 and
   342 on phones). Motion is opacity and transform, runs once, and is drawn at
   once under reduced motion; nothing depends on the script to be visible. */
.home-surface {
  --home-gap: 6rem;
  --home-head-gap: 1.75rem;
  --home-hairline: var(--line-lift);
  --home-live: var(--status-live-dot);
}
@media (min-width: 768px) { .home-surface { --home-gap: 7.5rem; --home-head-gap: 2.25rem; } }
@media (min-width: 1024px) { .home-surface { --home-gap: 9rem; } }

/* Opening: lockup, headline, sub, two actions, one proof line. */
.home-surface .home-identity {
  container-type: inline-size;
  gap: 0;
  margin-bottom: var(--home-gap);
}
.home-surface .home-headline {
  max-width: none;
  margin: 1.5rem 0 0;
  color: var(--text-hi);
  font-family: "Fraunces", "Tarva Title Fallback", Georgia, "Times New Roman", serif;
  font-optical-sizing: none;
  font-variation-settings: var(--font-display-tamed);
  font-size: clamp(1.875rem, 6.4cqi, 3.75rem);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.06;
  text-wrap: balance;
}
/* The second sentence takes its own line; the first wraps in balance above it.
   From tablets up the headline sits closer to the mark: the lockup's box is a
   square around a wide wordmark, so most of the space under it is its own. */
@container (min-width: 480px) { .home-surface .home-headline > span { display: block; } }
@media (min-width: 768px) { .home-surface .home-headline { margin-top: -3.5rem; } }
.home-surface .home-identity > [data-home-statement] {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: clamp(1.125rem, 1.02rem + .45vw, 1.3125rem);
  line-height: 1.5;
}
.home-surface .home-identity > [data-home-actions] { margin-top: 2rem; }
.home-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .7rem;
  margin: 1.5rem 0 0;
  color: var(--text-2);
  font: 400 .9375rem/1.5 var(--font-body, "Instrument Sans", sans-serif);
}
.home-proof__item > div { display: inline; }
.home-proof__n { color: var(--text-hi); font-weight: 600; font-variant-numeric: tabular-nums; }
.home-proof__dot { color: var(--text-2); }
/* Live status: the one jade mark, with the slow pulse (statusPulse, work-story.css). */
.home-proof [data-home-proof-live],
.home-reason__figure { position: relative; }
.home-proof [data-home-proof-live] { padding-left: 15px; }
.home-proof [data-home-proof-live]::before,
.home-proof [data-home-proof-live]::after,
.home-reason__figure::before,
.home-reason__figure::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--home-live);
}
.home-proof [data-home-proof-live]::before,
.home-proof [data-home-proof-live]::after { top: calc(.75em - 3.5px); left: 0; }
.home-proof [data-home-proof-live]::after,
.home-reason__figure::after,
.home-surface [data-featured-list] > li[data-status-tone="live"] .featured-card-status::after { animation: statusPulse 2.8s cubic-bezier(.33, 0, .18, 1) infinite; }

/* Section frame: a quiet mono index, a real heading, then the content. */
.home-section,
.home-surface .home-featured {
  container-type: inline-size;
  max-width: 76rem;
  margin: 0 0 var(--home-gap);
}
.home-section::before,
.home-surface .home-featured::before {
  content: "01 / 05" / "";
  display: block;
  margin: 0 0 .875rem;
  color: var(--text-2);
  font: 500 .6875rem/1.4 var(--font-meta, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: .18em;
}
/* The index is fixed per section (a container scopes CSS counters to itself). */
.home-surface [data-home-section="reasons"]::before { content: "02 / 05" / ""; }
.home-surface [data-home-section="process"]::before { content: "03 / 05" / ""; }
.home-surface .home-featured::before { content: "04 / 05" / ""; }
.home-surface [data-home-section="audiences"]::before { content: "05 / 05" / ""; }
.home-section > h2,
.home-surface .home-featured > h2 {
  display: block;
  max-width: 20ch;
  margin: 0 0 var(--home-head-gap);
  padding: 0;
  border: 0;
  color: var(--text-hi);
  font-family: "Fraunces", "Tarva Title Fallback", Georgia, "Times New Roman", serif;
  font-optical-sizing: none;
  font-variation-settings: var(--font-display-tamed);
  font-size: clamp(1.75rem, 1.1rem + 2.3cqi, 2.375rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
  text-wrap: balance;
}
.home-section :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
.home-section h3 {
  margin: 0;
  color: var(--text-hi);
  font-family: "Fraunces", "Tarva Title Fallback", Georgia, "Times New Roman", serif;
  font-optical-sizing: none;
  font-variation-settings: var(--font-display-tamed);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
}
.home-section p {
  max-width: 62ch;
  margin: 0;
  color: var(--text-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-wrap: pretty;
}
@container (min-width: 520px) { .home-section p { font-size: 1.125rem; } }

/* What we do: a numbered hairline list (two by two where the column holds it). */
.home-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 3rem;
  border-bottom: 1px solid var(--home-hairline);
  counter-reset: home-service;
}
@container (min-width: 640px) { .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-card {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-content: start;
  row-gap: .5rem;
  padding: 1.375rem 0 1.5rem;
  border-top: 1px solid var(--home-hairline);
  counter-increment: home-service;
}
@container (min-width: 520px) { .home-card { padding: 1.75rem 0 2rem; } }
.home-card::before {
  content: counter(home-service, decimal-leading-zero) / "";
  grid-row: 1 / span 2;
  padding-top: .55em;
  color: var(--text-2);
  font: 500 .75rem/1.4 var(--font-meta, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: .08em;
}
.home-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -1rem;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--text-hi) 5%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.home-card h3 { font-size: clamp(1.375rem, 1.15rem + 1cqi, 1.625rem); }
.home-card h3, .home-card p { grid-column: 2; }
.home-card p { max-width: 34ch; }
@media (hover: hover) { .home-card:hover::after { opacity: 1; } }

/* Why: three statements. Side by side where a column is wide enough to read;
   between that and phones, the phrase sits left of its sentence. */
.home-reasons__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 2.5rem;
}
.home-reason {
  display: grid;
  align-content: start;
  gap: .875rem;
  padding: 1.5rem 0 1.75rem;
  border-top: 1px solid var(--line-strong);
}
.home-reason h3 { font-size: clamp(1.625rem, 1.3rem + 1.4cqi, 1.9375rem); text-wrap: balance; }
@container (min-width: 620px) {
  .home-reason { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 2.5rem; padding: 2rem 0 2.25rem; }
}
@container (min-width: 880px) {
  .home-reasons__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-reason { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.75rem 0 0; }
}
.home-reason__proof { display: flex; align-items: center; gap: 1.125rem; }
.home-reason__figure {
  flex: 0 0 auto;
  min-width: .62em;
  padding-right: 14px;
  color: var(--text-hi);
  font-family: "Fraunces", "Tarva Title Fallback", Georgia, "Times New Roman", serif;
  font-optical-sizing: none;
  font-variation-settings: var(--font-display-tamed);
  font-size: clamp(3.5rem, 2.9rem + 2.6cqi, 4.5rem);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: .95;
}
.home-reason__figure::before,
.home-reason__figure::after { top: .16em; right: 0; }

/* The proof band under the reasons (the Work band's Home variant, restyled for
   Home only): plain figures and one neutral track; jade marks the live segment. */
.home-surface [data-home-work-band-slot] { max-width: 76rem; margin: 2.5rem 0 var(--home-gap); }
.home-surface .work-band {
  gap: 1.5rem;
  max-width: none;
  margin: 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--home-hairline);
}
.home-surface .home-reasons { margin-bottom: 0; }
.home-surface .work-band [data-status-tone] { --seg-color: color-mix(in srgb, var(--text-body) 72%, transparent); --seg-word: var(--text-2); }
.home-surface .work-band [data-status-tone="live"] { --seg-color: var(--home-live); }
.home-surface .work-band [data-status-group="daily-use"] { --seg-color: color-mix(in srgb, var(--text-body) 90%, transparent); }
.home-surface .work-band [data-status-group="delivered"] { --seg-color: color-mix(in srgb, var(--text-body) 56%, transparent); }
.home-surface .work-band__counter { gap: 6px 12px; align-items: flex-end; font-size: 1.0625rem; }
.home-surface .work-band__figure { --odo-window: 2.25rem; --odo-digit: 2.25rem; gap: 0; }
.home-surface .work-band__unit, .home-surface .work-band__dot { padding-bottom: .34rem; }
.home-surface .work-band .odo-wheel {
  width: .64em;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 1.75rem;
}
.home-surface .work-band .odo-wheel[data-odo="live"]::after { display: none; }
.home-surface .work-band__seg { color: var(--text-body); font-size: .9375rem; }
.home-surface .work-band__seg-fill { height: 6px; border-radius: 2px; background: color-mix(in srgb, var(--text-2) 16%, transparent); }
.home-surface .work-band__seg-fill::after { display: none; }
.home-surface .work-band__seg-count { top: 15px; font-size: .9375rem; }
.home-surface .work-band__seg-label { padding-left: 1.6em; }
@container (max-width: 430px) {
  .home-surface .work-band__seg { font-size: .875rem; }
  .home-surface .work-band__seg-count { font-size: .875rem; }
  .home-surface .work-band__counter { font-size: 1rem; }
}

/* How: one step line across the column (the geometry of the library's
   PipelineTimeline connector, in ink): a hairline track, a line that fills once,
   and circles that take their ink as the fill reaches them. */
.home-section .home-steps {
  --step-node: 40px;
  --step-run: 1.5s;
  position: relative;
  display: flex;
  counter-reset: home-step;
  margin: 0 0 2.25rem;
}
@container (min-width: 860px) { .home-section .home-steps { --step-node: 44px; } }
.home-steps::before,
.home-steps::after {
  content: "";
  position: absolute;
  top: calc(var(--step-node) / 2 - 1px);
  left: calc(var(--step-node) / 2);
  right: calc(var(--step-node) / 2);
  height: 2px;
  border-radius: 1px;
  background: var(--line-strong);
  pointer-events: none;
}
.home-steps::after { background: var(--text-2); transform-origin: left center; }
.home-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: .875rem;
  min-width: 0;
  counter-increment: home-step;
}
.home-step__node {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--step-node);
  height: var(--step-node);
  border: 2px solid var(--control-line);
  border-radius: 50%;
  background: var(--bg);
}
.home-step__node::before,
.home-step__node::after {
  content: counter(home-step);
  position: absolute;
  inset: -2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-2);
  font: 600 .8125rem/1 var(--font-meta, "JetBrains Mono", ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}
.home-step__node::after {
  border: 2px solid var(--text-2);
  color: var(--text-hi);
  background: var(--bg);
}
.home-step__label {
  padding-right: .5rem;
  color: var(--text-hi);
  font: 600 1.0625rem/1.3 var(--font-body, "Instrument Sans", sans-serif);
  letter-spacing: .005em;
  overflow-wrap: anywhere;
}
/* The line runs edge to edge: the last step is only as wide as its circle, which
   sits on the column's right edge with its label ending under it. */
.home-step:last-child { flex: 0 0 var(--step-node); align-items: flex-end; }
.home-step:last-child .home-step__label { padding-right: 0; white-space: nowrap; }
.home-section .home-process__line { text-wrap: balance; max-width: 60ch; font-size: clamp(1.0625rem, 1rem + .4cqi, 1.1875rem); }
/* Narrow: a vertical stepper; the same track runs top to bottom. */
@container (max-width: 619px) {
  .home-steps { flex-direction: column; gap: 0; }
  .home-steps::before,
  .home-steps::after {
    top: 28px;
    right: auto;
    bottom: 28px;
    left: calc(var(--step-node) / 2 - 1px);
    width: 2px;
    height: auto;
  }
  .home-steps::after { transform-origin: center top; }
  .home-step, .home-step:last-child { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 1rem; min-height: 60px; }
}

/* Featured work: six neutral wells; the status carries a dot (jade when live). */
.home-surface [data-featured-list] {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
}
@container (min-width: 640px) { .home-surface [data-featured-list] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-surface [data-featured-list] > li:first-child { grid-column: auto; }
.home-surface [data-featured-list] > li > [data-featured-entry] {
  padding: 1.375rem 1.375rem 1.5rem;
  border-color: var(--home-hairline);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .3s ease, transform .3s var(--ease-release);
}
@container (min-width: 640px) { .home-surface [data-featured-list] > li > [data-featured-entry] { padding: 1.625rem 1.75rem 1.75rem; } }
@media (hover: hover) {
  .home-surface [data-featured-list] > li > [data-featured-entry]:hover {
    border-color: var(--line-strong);
    box-shadow: var(--groove), 0 20px 44px -28px color-mix(in srgb, var(--text-hi) 34%, transparent);
    transform: translateY(-2px);
  }
}
.home-surface [data-featured-list] > li > [data-featured-entry]:active { transform: translateY(1px); transition-duration: .12s; }
.home-surface [data-featured-list] .featured-card-meta { margin-bottom: .875rem; font-size: .6875rem; }
.home-surface [data-featured-list] .featured-card-status { position: relative; padding-left: 14px; color: var(--text-2); }
.home-surface [data-featured-list] .featured-card-status::before,
.home-surface [data-featured-list] > li[data-status-tone="live"] .featured-card-status::after {
  content: "";
  position: absolute;
  top: calc(.7em - 3.5px);
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--control-line-strong);
}
.home-surface [data-featured-list] > li[data-status-tone="live"] .featured-card-status::before,
.home-surface [data-featured-list] > li[data-status-tone="live"] .featured-card-status::after { background: var(--home-live); }
.home-surface [data-featured-list] > li h3,
.home-surface [data-featured-list] > li:first-child h3 { margin-bottom: .5rem; font-size: 1.375rem; letter-spacing: 0; line-height: 1.2; }
.home-surface [data-featured-list] [data-featured-entry] p { max-width: 44ch; color: var(--text-body); font-size: 1rem; line-height: 1.5; }
.home-featured__more { margin: 2rem 0 0; }
.home-featured__more a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  color: var(--cyan);
  font: 600 1.125rem/1.3 var(--font-body, "Instrument Sans", sans-serif);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--cyan) 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.home-featured__more a > div { display: inline; }
.home-featured__more a { gap: .3em; }
.home-featured__more a::after { margin-left: .2em; content: "\2192" / ""; transition: transform .25s var(--ease-release); }
.home-featured__more a:hover { text-decoration-color: currentColor; }
@media (hover: hover) { .home-featured__more a:hover::after { transform: translateX(4px); } }
.home-featured__more a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 4px; }
.home-surface .client-roster { margin-bottom: var(--home-gap); }

/* Who: one line each, large. */
.home-audiences__list { display: grid; border-bottom: 1px solid var(--home-hairline); }
.home-audiences__list > li {
  padding: 1.25rem 0;
  border-top: 1px solid var(--home-hairline);
  color: var(--text-body);
  font-size: clamp(1.1875rem, 1.1rem + .45cqi, 1.3125rem);
  line-height: 1.45;
}
@container (min-width: 520px) { .home-audiences__list > li { padding: 1.625rem 0; } }
.home-audiences__list strong { color: var(--text-hi); font-weight: 600; }

/* Closing: a quiet full-width panel; one prompt, one action. */
.home-surface .home-closing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0;
  padding: clamp(1.75rem, 5vw, 4rem);
  border: 1px solid var(--home-hairline);
  border-radius: var(--radius-sheet);
  background: var(--well);
  box-shadow: var(--groove);
}
.home-surface .home-closing::before { content: none; }
.home-surface .home-closing > h2 { max-width: none; margin: 0; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.375rem); }
.home-closing .inline-action { margin-top: 1rem; }

/* First-view motion. The step line fills once, left to right (top to bottom when
   it is vertical), and each circle takes its ink as the fill reaches it. The
   script holds a line that starts below the fold (data-steps-state="wait") and
   releases it when it is reached; `backwards` holds a layer only during its delay. */
@keyframes homeStepFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes homeStepFillDown { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes homeStepLit { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
html.js .home-steps:not([data-steps-state="wait"])::after { animation: homeStepFill var(--step-run) linear .2s backwards; }
html.js .home-steps:not([data-steps-state="wait"]) .home-step__node::after { animation: homeStepLit .42s cubic-bezier(.16, 1, .3, 1) calc(.2s + var(--i) * var(--step-run) / (var(--steps) - 1)) backwards; }
.home-steps[data-steps-state="wait"]::after { transform: scaleX(0); }
.home-steps[data-steps-state="wait"] .home-step__node::after { opacity: 0; }
@container (max-width: 619px) {
  html.js .home-steps:not([data-steps-state="wait"])::after { animation-name: homeStepFillDown; }
  .home-steps[data-steps-state="wait"]::after { transform: scaleY(0); }
}

/* Emergence as an item is reached (the script marks only what starts below the
   fold; nothing is hidden without it). */
.home-section [data-emerge="wait"],
.home-surface [data-featured-list] > li[data-emerge="wait"] { opacity: 0; }
.home-section [data-emerge="in"],
.home-surface [data-featured-list] > li[data-emerge="in"] { animation: cmdWellIn .6s cubic-bezier(.33, 0, .18, 1) calc(var(--emerge-index, 0) * 80ms) backwards; }

@media (prefers-reduced-motion: reduce) {
  .home-card::after,
  .home-featured__more a::after,
  .home-surface [data-featured-list] > li > [data-featured-entry] { transition: none; }
  .home-surface [data-featured-list] > li > [data-featured-entry]:hover { transform: none; }
  .home-proof [data-home-proof-live]::after,
  .home-reason__figure::after,
  .home-surface [data-featured-list] > li[data-status-tone="live"] .featured-card-status::after { display: none; animation: none; }
  .home-steps::after, .home-steps .home-step__node::after { animation: none !important; transform: none !important; opacity: 1 !important; }
  .home-section [data-emerge],
  .home-surface [data-featured-list] > li[data-emerge] { opacity: 1; animation: none; }
}
html[data-motion-preference="reduce"] .home-surface [data-featured-list] > li > [data-featured-entry]:hover { transform: none; }
html[data-motion-preference="reduce"] .home-proof [data-home-proof-live]::after,
html[data-motion-preference="reduce"] .home-reason__figure::after,
html[data-motion-preference="reduce"] .home-surface [data-featured-list] > li[data-status-tone="live"] .featured-card-status::after { display: none; animation: none; }
html[data-motion-preference="reduce"] .home-steps::after,
html[data-motion-preference="reduce"] .home-steps .home-step__node::after { animation: none !important; transform: none !important; opacity: 1 !important; }
html[data-motion-preference="reduce"] .home-section [data-emerge],
html[data-motion-preference="reduce"] .home-surface [data-featured-list] > li[data-emerge] { opacity: 1; animation: none; }