/* ═══════════════════════════════════════════════════════════════════════════
   What I Do — the hub.  Concept: FOUR WORLDS, opened by ONE LINE.

   The page this replaced was 3,758 words, eleven repetitions of one two-column
   ledger, six photographs across five pages, and a single paper colour with a
   2% tonal step. It read as a document on a site made of experiences. The
   diagnosis was not taste: it had opted out of the whole design language —
   zero `data-anim-high`, zero `split-text`, zero Rive, zero dotfield, while
   every one of those runs on any page by markup alone.

   THE BODY of the page is a temperature journey. Four sticky panels stack over
   one another and the ground changes with each: pale blue-white, deep navy,
   near-black, magenta. The header ink flips with them through the
   section-level data-nav-theme-target the engine already watches. Varying tone
   is the one thing the old page could not do, so it is what this one is built
   on.

   THE HERO is one continuous line that redraws itself into each of the four
   things at the end of it — a browser, a phone, a bag, a mark. It replaced a
   dotfield hero reading "Four disciplines, one pair of hands", which was
   /projects' hero ("Ten sites, one pair of hands", same dotfield, same paper)
   with four words changed. The mechanism is deliberately NOT path morphing:
   four separate paths share one pathLength, and the change is the outgoing
   stroke retracting while the incoming one draws. Nothing can break on a
   point-count mismatch, and the resting state of every path is "fully drawn".

   MECHANISM of the stack: the homepage services deck (site.shared…css
   `.svc-card-w { position: sticky }` + `[data-svc-dim]`), widened to full
   bleed. Already proven here, CSS-native, and — the reason it beat an
   absolutely-positioned cross-fade — `position: sticky` still stacks with no
   JavaScript at all. The JS only adds the scrub.

   LAYERING, copied from projects.css:352–425. The base rules below are the
   NO-JS state: four ordinary full-height sections, fully visible, in flow, and
   a hero showing its first drawing complete. The pin, the scrub and the redraw
   are layered on only behind `.widjs`, and the reduced-motion block peels them
   back off. A script failure degrades to four readable panels, never a blank
   stage.

   Namespace: `.wid-*`. `.svc-*` is owned by the homepage deck in the shared
   sheet and `.sd-*` by the page this replaces — neither may be reused.
   ═══════════════════════════════════════════════════════════════════════════ */

.taxi-w.whatido {
  /* Paper for the framing sections. The worlds bring their own grounds. */
  --wid-bg: #fafcfb;
  --wid-surface: #eef4f1;
  --wid-surface-2: #e3ece7;
  --wid-ink: #040504;
  --wid-ink-soft: #10120f;
  --wid-grey: #535450;
  --wid-line: rgba(4, 5, 4, .08);
  --wid-rim: #cbd3ce;
  --wid-mint: #21f1a8;
  --wid-mint-ink: #0f6f4e;      /* mint is ~1.5:1 on paper; this carries text */
  --wid-ease: cubic-bezier(.215, .61, .355, 1);
  --wid-rhythm: clamp(4rem, 9vh, 7rem);
  --wid-measure: 60ch;
  --page-bg: var(--wid-bg);

  background: var(--wid-bg);
  color: var(--wid-ink);
}

/* THE LIST RESET IS DELIBERATELY NARROW, and this is a bug fix rather than a
   preference. It used to read `.taxi-w.whatido ul, .taxi-w.whatido ol
   { margin: 0 }` — specificity 0,2,1, which silently out-specified every
   single-class `.wid-* { margin-top }` below it. Measured before this change,
   `.wid-index`, `.wid-chips`, `.wid-terms-grid` and `.wid-audit-list` all
   computed to marginTop 0px while `.wid-proof-grid` (a div, so unaffected)
   computed correctly. The gap between "The same on every job" and its grid was
   ONE PIXEL. So: reset the marker and the padding, leave vertical space to the
   component that owns it, and never reach for an element selector here again. */
.taxi-w.whatido :is(ul, ol) { padding: 0; list-style: none; }
.taxi-w.whatido :is(ul, ol):not([class]) { margin: 0; }

.taxi-w.whatido p,
.taxi-w.whatido h1,
.taxi-w.whatido h2,
.taxi-w.whatido h3,
.taxi-w.whatido dl,
.taxi-w.whatido dd { margin: 0; }

.taxi-w.whatido img { display: block; max-width: 100%; }

/* The global ring is lime on lime-adjacent grounds too, so the page gets an
   offset ring that reads on paper and on all four world grounds. */
.taxi-w.whatido :where(a, button):focus-visible {
  outline: 2px solid var(--wid-mint);
  outline-offset: 3px;
  border-radius: .25rem;
}

.wid-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: .75rem 1.25rem;
  background: var(--wid-ink);
  color: var(--wid-bg);
  border-radius: .5rem;
  font-family: 'Quicksand Label', Arial, sans-serif;
  font-size: .8125rem;
}
.wid-skip:focus { left: 1rem; top: 1rem; }

/* ── shared atoms ──────────────────────────────────────────────────────── */

.wid-s { padding-block: var(--wid-rhythm); }
.wid-wrap {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--padding--container);
}

.wid-eyebrow {
  font-family: 'Quicksand Label', Arial, sans-serif;
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variation-settings: "wght" 700;
  color: var(--wid-grey);
}

.wid-h2 {
  font-family: Quicksand, Arial, sans-serif;
  font-variation-settings: "wght" 700, "wdth" 93;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin-top: .875rem;
}

.wid-body {
  font-family: Quicksand, Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--wid-ink-soft);
  max-width: var(--wid-measure);
}

.wid-ico { width: 1.125rem; height: 1.125rem; flex: none; display: block; }
.wid-ico.is-lg { width: 1.5rem; height: 1.5rem; }

/* ── the drawings ──────────────────────────────────────────────────────── */

/* One sprite, six inherited properties, four grounds. The percentages are NOT
   the same on paper and on a dark ground: at 13%/7% of a light ink over a dark
   field the filled surfaces measured invisible, because the tonal room below a
   dark ground is far smaller than above a light one. The dark worlds get the
   higher set. */
.wid-scene {
  display: block;
  width: 100%;
  height: auto;
  --ill-fill: color-mix(in srgb, currentColor 13%, transparent);
  --ill-fill-2: color-mix(in srgb, currentColor 7%, transparent);
  --ill-fill-3: color-mix(in srgb, currentColor 24%, transparent);
  --ill-panel: var(--wid-w-bg, var(--wid-bg));
  --ill-accent: var(--wid-mint);
  --ill-on-accent: #040504;
}
.wid-world:not(.is-web) .wid-scene {
  --ill-fill: color-mix(in srgb, currentColor 17%, transparent);
  --ill-fill-2: color-mix(in srgb, currentColor 9%, transparent);
  --ill-fill-3: color-mix(in srgb, currentColor 32%, transparent);
}

/* ── 1 · the hero: one line, four outcomes ─────────────────────────────── */

.wid-hero {
  position: relative;
  min-height: 88svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--padding--container);
  padding-top: calc(var(--on-t-nav-spacer, 5.375rem) + 2rem);
  padding-bottom: var(--wid-rhythm);
  overflow: clip;
}

/* The only place the hero borrows the colour journey: a wide, soft wash that
   moves toward whichever ground the line is currently drawing. It sits on the
   hero, not on the element nav-ink samples, and the hero carries an explicit
   data-nav-backdrop so the header never has to read it. */
.wid-hero::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto auto;
  width: 78%;
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--wid-hero-tint, rgba(90, 120, 200, .17)), transparent 72%);
  transition: background 1.1s var(--wid-ease);
}
.wid-hero[data-wid-s="0"] { --wid-hero-tint: rgba(90, 120, 200, .17); }
.wid-hero[data-wid-s="1"] { --wid-hero-tint: rgba(58, 78, 220, .16); }
.wid-hero[data-wid-s="2"] { --wid-hero-tint: rgba(33, 241, 168, .20); }
.wid-hero[data-wid-s="3"] { --wid-hero-tint: rgba(232, 60, 120, .16); }

.wid-hero-copy { position: relative; z-index: 1; }

.wid-h1 {
  font-family: Quicksand, Arial, sans-serif;
  font-variation-settings: "wght" 750, "wdth" 93;
  font-size: clamp(2.375rem, 6.4vw, 5.25rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-top: 1rem;
  max-width: 13ch;
}

.wid-hero-lede {
  font-family: Quicksand, Arial, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.5;
  color: var(--wid-ink-soft);
  max-width: 44ch;
  margin-top: 1.5rem;
}

.wid-hero-art {
  position: relative;
  z-index: 1;
  justify-self: end;
  width: 100%;
  max-width: min(34rem, 62vh);
}

.wid-line { display: block; width: 100%; height: auto; color: var(--wid-ink); }
.wid-line-fill {
  --ill-fill: color-mix(in srgb, currentColor 12%, transparent);
  --ill-fill-2: color-mix(in srgb, currentColor 6%, transparent);
  --ill-fill-3: color-mix(in srgb, currentColor 26%, transparent);
  --ill-accent: var(--wid-mint);
  --ill-on-accent: #040504;
}

/* BASE = the settled, no-JS pose: the first drawing is rendered complete and
   the other three are not in the render tree at all. They are alternates, not
   reveals — four silhouettes stacked in one box with no script to switch them
   would overlap into noise, so `display:none` here is the finished state. */
.wid-line-state { display: none; }
.wid-line-state.is-on { display: block; }

/* The four controls double as the caption. Real anchors into the four worlds,
   so they navigate before any script has run; hovering or focusing one draws
   its world, which is enhancement on top of a link that already worked. */
.wid-line-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.75rem;
}
.wid-line-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .55rem .85rem;
  min-height: 24px;
  box-sizing: border-box;
  border: 1px solid var(--wid-rim);
  border-radius: 2rem;
  color: var(--wid-grey);
  text-decoration: none;
  font-family: 'Quicksand Label', Arial, sans-serif;
  font-size: .75rem;
  letter-spacing: .02em;
  transition: color .3s var(--wid-ease), border-color .3s var(--wid-ease), background-color .3s var(--wid-ease);
}
.wid-line-nav b {
  font-family: var(--wid-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .625rem;
  font-weight: 400;
  opacity: .7;
}
.wid-line-nav a:hover { color: var(--wid-ink); border-color: var(--wid-ink); }
/* Not aria-current: the drawing is decorative and aria-hidden, so marking a
   control as "the current item" would announce a page state that is not one. */
.wid-line-nav a[data-on] {
  color: var(--wid-ink);
  border-color: var(--wid-ink);
  background: var(--wid-surface);
}

/* ── 2 · the four worlds ───────────────────────────────────────────────── */

/* BASE = the no-JS state: four ordinary full-height panels, in flow, each
   fully legible. Everything below this comment that pins or scrubs is gated. */
.wid-worlds { position: relative; z-index: 1; }

.wid-world {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  color: var(--wid-w-ink, #edf5f3);
  background: var(--wid-w-bg, #040504);
}

/* Each world declares its own ground and ink. Ink is checked against the flat
   ground, which is the whole reason the ground is flat. */
.wid-world.is-web    { --wid-w-bg: #e9eef5; --wid-w-ink: #0a0f18; --wid-w-soft: #33405a; --wid-w-rim: rgba(10,15,24,.16);  --wid-w-tint: rgba(90,120,200,.16); }
.wid-world.is-mobile { --wid-w-bg: #0b1030; --wid-w-ink: #eaf0ff; --wid-w-soft: #a8b4dd; --wid-w-rim: rgba(234,240,255,.22); --wid-w-tint: rgba(90,120,255,.20); }
.wid-world.is-shop   { --wid-w-bg: #07100c; --wid-w-ink: #e9f7f0; --wid-w-soft: #9fc4b3; --wid-w-rim: rgba(233,247,240,.22); --wid-w-tint: rgba(33,241,168,.13); }
.wid-world.is-brand  { --wid-w-bg: #16070f; --wid-w-ink: #fbeef4; --wid-w-soft: #d3a9bd; --wid-w-rim: rgba(251,238,244,.22); --wid-w-tint: rgba(232,60,120,.18); }

/* WHY THE ART IS DRAWN AND NOT PHOTOGRAPHED — a correctness decision, and
   worth the paragraph because it was arrived at twice.

   The four commissioned mockups embed copy. At the thumbnail scale the home
   page uses, none of it reads; at card scale all of it does, and three of the
   four then publish something this site forbids — the store frame renders a
   price and a fabricated "4.8 (124)" rating (OD-17: no figure, no floor, no
   range, anywhere), the website frame renders "We build …" (OD-21: first
   person singular) and "Crafting digital experiences" (PAGE-KIT's banned list,
   verbatim), the design desk carries a licensed-font TRIAL watermark, and the
   fourth carries a legible third-party brand name.

   Cropping around the copy fixed the words and not the set: the four surviving
   crops were 0.65, 0.50, 0.84 and 1.12 aspect — a tall photograph, a drawing,
   and two different landscape plates — so the four cards never read as one
   thing. The drawings in wid-scenes.svg are all 4:5, all in one language, and
   publish only what they are drawn to publish. */
.wid-world-in {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--padding--container);
  padding-block: calc(var(--on-t-nav-spacer, 5.375rem) + 2rem) clamp(3rem, 7vh, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* A single wide-radius wash lifts the flat ground off dead-flat without
   becoming a gradient the header has to read: it sits on the panel, not on
   the element nav-ink samples. */
.wid-world::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at var(--wid-w-glow, 78% 30%), var(--wid-w-tint, transparent) 0%, transparent 62%);
}

.wid-world-art {
  justify-self: end;
  width: 100%;
  max-width: min(28rem, 52vh);
}

.wid-world-n {
  font-family: var(--wid-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .8125rem;
  letter-spacing: .18em;
  color: var(--wid-w-soft);
}

/* Was clamp(2.5rem, 8.2vw, 7.5rem) — 100px at 1440, which set "Mobile App
   Development" in three lines 261px tall and made the title, not the drawing,
   the loudest thing on the panel. */
.wid-world-t {
  font-family: Orbitron, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 4.4vw, 4.4rem);
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-top: .75rem;
  max-width: 13ch;
}

.wid-world-d {
  font-family: Quicksand, Arial, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--wid-w-soft);
  max-width: 42ch;
  margin-top: 1.25rem;
}

.wid-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.75rem;
}
.wid-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .8rem;
  border: 1px solid var(--wid-w-rim);
  border-radius: 2rem;
  font-family: 'Quicksand Label', Arial, sans-serif;
  font-size: .6875rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--wid-w-ink);
}
.wid-chip .wid-ico { color: var(--wid-mint); }
.wid-world.is-web .wid-chip .wid-ico { color: var(--wid-mint-ink); } /* mint fails on the pale ground */

.wid-world-go {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2rem;
  padding-bottom: .35rem;
  color: var(--wid-w-ink);
  text-decoration: none;
  font-family: 'Quicksand Label', Arial, sans-serif;
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--wid-w-rim);
  transition: border-color .35s var(--wid-ease), gap .35s var(--wid-ease);
}
.wid-world-go:hover { border-color: currentColor; gap: 1rem; }

/* --- the pin and the scrub, JS only ------------------------------------- */

.widjs .wid-world {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
}

/* The outgoing panel loses a little scale and gains a wash of the incoming
   ground, so the stack reads as depth rather than as a hard cut. Both values
   are written by init.js as one custom property each, per panel. */
.widjs .wid-world::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--wid-w-bg);
  opacity: var(--wid-dim, 0);
}
.widjs .wid-world-in {
  transform: scale(var(--wid-s, 1));
  transform-origin: 50% 40%;
}

/* --- the redraw, JS only ------------------------------------------------ */

.widjs .wid-line-state { display: block; }
.widjs .wid-line-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .85s var(--wid-ease);
}
.widjs .wid-line-state.is-on .wid-line-path { stroke-dashoffset: 0; }
/* Out is fast and immediate, in waits for its own outline to finish drawing —
   which is what makes it read as one line becoming the next thing rather than
   two pictures cross-fading. */
.widjs .wid-line-fill { opacity: 0; transition: opacity .25s var(--wid-ease); }
.widjs .wid-line-state.is-on .wid-line-fill {
  opacity: 1;
  transition: opacity .5s var(--wid-ease) .5s;
}

/* ── 3 · the terms carried on every job ────────────────────────────────── */

.wid-terms { background: var(--wid-surface); }
/* Sized in vw and px, not rem: this is the gap the owner measured at 1px, and
   a rem value here would collapse again at 480px where 1rem drops to 5.56px. */
.wid-terms-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(48px, 11vw, 168px);
  background: var(--wid-line);
  border: 1px solid var(--wid-line);
  border-radius: 1.25rem;
  overflow: clip;
}
.wid-term {
  background: var(--wid-bg);
  padding: 1.5rem 1.375rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.wid-term .wid-ico { color: var(--wid-ink); }
.wid-term h3 {
  font-family: Quicksand, Arial, sans-serif;
  font-variation-settings: "wght" 650;
  font-size: 1rem;
  line-height: 1.25;
}
.wid-term p {
  font-family: Quicksand, Arial, sans-serif;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--wid-grey);
}

/* ── 4 · the audit ─────────────────────────────────────────────────────── */

.wid-audit-in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 3.25rem);
  border: 1px solid var(--wid-rim);
  border-radius: 1.5rem;
  background: var(--wid-bg);
}
.wid-audit-list {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  margin-top: 2rem;
}
.wid-audit-list li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-family: Quicksand, Arial, sans-serif;
  font-size: .9375rem;
  line-height: 1.45;
}
.wid-audit-list .wid-ico { color: var(--wid-ink); margin-top: .15rem; }

.wid-measure {
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  border-radius: .875rem;
  background: var(--wid-surface-2);
  font-family: var(--wid-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--wid-ink-soft);
}

/* ── 5 · proof ─────────────────────────────────────────────────────────── */

.wid-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.wid-proof-card {
  position: relative;
  border: 1px solid var(--wid-rim);
  border-radius: 1.25rem;
  overflow: clip;
  background: var(--wid-surface);
  transition: border-color .35s var(--wid-ease), transform .35s var(--wid-ease);
}
.wid-proof-card:hover { border-color: var(--wid-ink); transform: translateY(-.3rem); }
.wid-proof-card img { width: 100%; height: auto; aspect-ratio: 600 / 850; object-fit: cover; }
.wid-proof-body { padding: 1.125rem 1.25rem 1.375rem; }
.wid-proof-body h3 {
  font-family: Quicksand, Arial, sans-serif;
  font-variation-settings: "wght" 650;
  font-size: 1.0625rem;
}
.wid-proof-body p {
  font-family: Quicksand, Arial, sans-serif;
  font-size: .875rem;
  color: var(--wid-grey);
  margin-top: .35rem;
}
.wid-proof-card a::after { content: ""; position: absolute; inset: 0; }

/* ── 6 · the closing invitation ────────────────────────────────────────── */

/* This was a 281px black band sitting directly on top of the black footer —
   two black blocks in a row, so the footer read as more of the same instead of
   as arrival. Light, with room, and the drawing carrying half of it. */
/* The last section on the page, so it hands over to the shared footer band
   directly. That band paints --page-bg (#fafcfb), so the gradient has to ARC
   — paper up into the mint glow behind the content, then back to paper at its
   last pixel. Ending on #e8f8f0 put an 18-point step against the footer's
   #fafcfb, which reads as a hard rule across the page. */
.wid-cta {
  background: linear-gradient(180deg, var(--wid-bg) 0%, #e8f8f0 58%, var(--wid-bg) 100%);
  padding-block: clamp(4.5rem, 12vh, 9rem);
}
.wid-cta-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.wid-cta-h {
  font-family: Quicksand, Arial, sans-serif;
  font-variation-settings: "wght" 720, "wdth" 93;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -.03em;
  max-width: 12ch;
  margin-top: .875rem;
}
.wid-cta-note {
  font-family: Quicksand, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--wid-ink-soft);
  max-width: 40ch;
  margin-top: 1.375rem;
}
.wid-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
}
.wid-cta a.wid-alt {
  color: var(--wid-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wid-rim);
  padding-bottom: .2rem;
  min-height: 24px;
  box-sizing: border-box;
  font-family: 'Quicksand Label', Arial, sans-serif;
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: border-color .3s var(--wid-ease);
}
.wid-cta a.wid-alt:hover { border-color: var(--wid-ink); }
.wid-cta-art { justify-self: end; width: 100%; max-width: 32rem; }

/* ── reveals (gated) ───────────────────────────────────────────────────── */

.widjs .wid-reveal { opacity: 0; transform: translateY(1.25rem); }
.widjs .wid-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--wid-ease), transform .8s var(--wid-ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ── responsive ────────────────────────────────────────────────────────── */

@media screen and (max-width: 991px) {
  .wid-terms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wid-audit-in { grid-template-columns: minmax(0, 1fr); }
  .wid-proof-grid { grid-template-columns: minmax(0, 1fr); }
  .wid-hero,
  .wid-cta-in { grid-template-columns: minmax(0, 1fr); }
  .wid-hero { min-height: 0; padding-bottom: clamp(3rem, 8vh, 5rem); }
  .wid-hero-art { justify-self: start; max-width: 22rem; margin-top: 2.5rem; }
  .wid-cta-art { justify-self: start; max-width: 24rem; order: -1; }
  /* Below the desktop split the drawing stops being a column and becomes a
     band above the copy, so the type keeps the full measure. */
  .wid-world-in {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 2rem;
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }
  .wid-world-art { justify-self: start; max-width: min(15rem, 30vh); order: -1; }
}

@media screen and (max-width: 767px) {
  .wid-world-t { max-width: 11ch; }
  .wid-world-d { max-width: 38ch; }
}

@media screen and (max-width: 479px) {
  .wid-terms-grid { grid-template-columns: minmax(0, 1fr); }
  .wid-chip { font-size: .625rem; padding: .45rem .7rem; }
}

/* Minimum target size, in PIXELS on purpose. --fluid-font is derived from the
   viewport and its bands do not run continuously: 1rem is 13.31px at 479px and
   5.56px at 480px, a 58% collapse across one pixel of width. A rem-based floor
   collapses with it. Measured before this rule, four controls fell under 24px
   at 480px — and at 720px, which is what a 1440 desktop becomes at the 200%
   zoom PAGE-KIT requires be tested. */
.wid-line-nav a,
.wid-chip,
.wid-world-go,
.wid-cta a.wid-alt {
  min-height: 24px;
  box-sizing: border-box;
}

/* ── reduced motion — peel the enhancement back off ────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .widjs .wid-world {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100svh;
  }
  .widjs .wid-world::after { opacity: 0; }
  .widjs .wid-world-in { transform: none; }
  .widjs .wid-reveal { opacity: 1; transform: none; transition: none; }
  /* The line stops redrawing and stops cycling; the controls still switch it,
     instantly. Four overlapping silhouettes cannot all be shown at once, so
     "settled" here means one of them, chosen by the reader. */
  .widjs .wid-line-state { display: none; }
  .widjs .wid-line-state.is-on { display: block; }
  .widjs .wid-line-path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .widjs .wid-line-fill,
  .widjs .wid-line-state.is-on .wid-line-fill { opacity: 1; transition: none; }
  .wid-hero::before { transition: none; }
  .wid-line-nav a,
  .wid-world-go,
  .wid-proof-card { transition: none; }
}

/* ═══ RTL — html[dir="rtl"] only ═══════════════════════════════════════════
   The world counter (`01 / 04`) is one token in one text node; RTL read it
   as `04 / 01`. plaintext takes the direction from the token itself. */
html[dir="rtl"] :is(.wid-world-n, .wid-measure) { unicode-bidi: plaintext; }