/* ==========================================================================
   mikee.pro — Site stylesheet
   Depends on tokens.css. Layout concept: a measured column with an
   annotation rail, separated by drawing-title-block rules. Hairlines are
   structure here, not decoration — they separate real registers of
   information the way a schematic separates its regions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shell + rail
   -------------------------------------------------------------------------- */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.shell--narrow { max-width: 780px; }

.rail {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) {
  .rail { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

.rail__meta {
  position: sticky;
  top: 6.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--muted);
}
@media (max-width: 860px) {
  .rail__meta { position: static; }
}
.rail__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--pine);
  letter-spacing: var(--tracking-label);
}
.rail__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.rail__list li { padding-left: 1.05rem; position: relative; }
.rail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--rule);
}

/* --------------------------------------------------------------------------
   Sections + the title-block rule
   -------------------------------------------------------------------------- */
.sec { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.sec--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.sec--ink {
  background: var(--pine-deep);
  color: var(--on-ink);
}
.sec--ink a { color: var(--on-ink); }
.sec--panel { background: var(--panel); }
.sec--topbordered { border-top: var(--hair) solid var(--rule); }

/* A hairline carrying a mono label, like the title block on a drawing. */
.tblock {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  border-top: var(--hair) solid var(--rule);
  padding-top: var(--s-3);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sec--ink .tblock { border-top-color: rgba(238, 242, 239, 0.22); }
.tblock__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--pine);
  white-space: nowrap;
}
.sec--ink .tblock__label { color: var(--on-ink-muted); }
.tblock__spacer { flex: 1; height: var(--hair); background: var(--rule-soft); }
.sec--ink .tblock__spacer { background: rgba(238, 242, 239, 0.14); }
.tblock__note {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--muted-2);
  white-space: nowrap;
}
.sec--ink .tblock__note { color: var(--on-ink-muted); }
@media (max-width: 640px) {
  .tblock { flex-wrap: wrap; gap: var(--s-2); }
  .tblock__spacer { display: none; }
  /* A long title-block label has to be allowed to wrap. Held on one line, the
     widest one ('Case study · Collins Family & Estate Law Group') overhung the
     viewport by 19px at 375px and forced the page to scroll sideways. */
  .tblock__label,
  .tblock__note { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--pine);
  margin: 0 0 var(--s-4);
}
.sec--ink .eyebrow { color: var(--on-ink-muted); }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
}
.display--hero { font-size: var(--step-5); }
.display--statement { font-size: var(--step-6); }
.display--sec { font-size: var(--step-4); }

.h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-3);
}
.h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  margin: 0 0 var(--s-3);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
  margin: 0;
}
.sec--ink .lede { color: var(--on-ink); }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.sec--ink .prose p { color: var(--on-ink); }
.sec--ink .prose strong { color: #fff; }

.small { font-size: var(--step--1); color: var(--muted); }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  border: var(--hair) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn__arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--pine); color: #fff; }
.btn--pine { background: var(--pine); color: #fff; }
.btn--pine:hover { background: var(--pine-deep); color: #fff; }
/* On a dark surface a solid button has to invert, and a ghost button has to
   take the surface's own ink. Measured, not eyeballed: pine-deep (#14332B)
   against pine (#2B5A4C) is a 1.9:1 button edge, which is not a button. */
.btn--light { background: var(--paper); color: var(--pine-deep); }
.btn--light:hover { background: #fff; color: var(--pine-deep); }
.btn--ghost { border-color: var(--rule); color: var(--ink); }
.btn--ghost:hover { border-color: var(--pine); color: var(--pine); background: var(--pine-tint); }
.sec--ink .btn--ghost, .cta .btn--ghost { border-color: rgba(238, 242, 239, 0.38); color: var(--on-ink); }
.sec--ink .btn--ghost:hover, .cta .btn--ghost:hover { border-color: var(--on-ink); background: rgba(238, 242, 239, 0.1); color: #fff; }

.link {
  color: var(--pine);
  text-decoration: none;
  border-bottom: var(--hair) solid var(--pine-tint);
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.link:hover { border-bottom-color: var(--pine); color: var(--pine-deep); }
.sec--ink .link { color: var(--on-ink); border-bottom-color: rgba(238, 242, 239, 0.3); }
.sec--ink .link:hover { border-bottom-color: var(--on-ink); color: #fff; }

.linkarrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--pine);
}
.linkarrow span { transition: transform var(--dur-2) var(--ease-out); display: inline-block; }
.linkarrow:hover span { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--hair) solid transparent;
  transition: border-color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.masthead.is-stuck {
  border-bottom-color: var(--rule);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}
.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: 4.25rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
  /* a logo never squashes: at 86px of a 112px wordmark the letters spilled
     sideways into the nav */
  flex: none;
}
.brand__mark { width: 26px; height: 26px; flex: none; color: var(--pine); }
.brand__word {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}
.brand__tld { color: var(--muted); font-weight: 500; }
.brand__desc {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-left: 0.7rem;
  border-left: var(--hair) solid var(--rule);
  margin-left: 0.35rem;
}
@media (min-width: 1080px) { .brand__desc { display: inline; } }

/* Section list. The site has no nav in its masthead any more, so this component
   now serves one thing: the brand book's own in-page list of sections. Kept
   generic and kept here so that page is styled from the same source as the rest. */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__a {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: var(--hair) solid transparent;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.nav__a:hover { color: var(--ink); border-bottom-color: var(--pine); }
.nav__a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* The header holds the lockup and the one call to action, so the CTA never wraps
   its own label — a two-line button is the one thing that would break the row. */
.masthead__cta { white-space: nowrap; }

@media (max-width: 900px) {
  /* Two rows: the identity, then the call to action across the full width, so the
     only thing to do here is also the most obvious control. Nothing hides behind a
     menu button, so the header still works with JavaScript off. */
  .masthead__in {
    height: auto;
    flex-wrap: wrap;
    /* keep the shell's gutter: this element carries both classes, and a
       padding shorthand here silently zeroes the side padding */
    padding: 0.6rem var(--gutter) 0.5rem;
    row-gap: 0.5rem;
  }
  .masthead__cta { order: 3; flex: 1 1 100%; justify-content: center; }
  /* the brand book's section list stays one strip that scrolls sideways */
  .nav {
    order: 3;
    flex-basis: 100%;
    gap: 1.15rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 3px;
    border-top: var(--hair) solid var(--rule-soft);
    padding-top: 0.6rem;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav__a, .nav .btn { white-space: nowrap; flex: none; }
  .nav .btn { padding: 0.55em 0.9em; }
  /* the sticky header is two rows tall here, so anchored scrolling needs
     more clearance than the desktop 5.5rem */
  html { scroll-padding-top: 8rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(2rem, 4vw, 3.5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
}
.hero__h1 { max-width: 15ch; }
.hero__sub {
  margin: var(--s-5) 0 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.hero__note {
  margin: var(--s-5) 0 0;
  font-size: var(--step--1);
  color: var(--muted);
  max-width: 48ch;
}

/* --------------------------------------------------------------------------
   Schematic (hero graphic)
   -------------------------------------------------------------------------- */
.schematic {
  border: var(--hair) solid var(--rule);
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
}
.schematic__cap {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-bottom: var(--hair) solid var(--rule-soft);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
}
.schematic__svg { width: 100%; height: auto; display: block; }
.schematic__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-4);
  margin: var(--s-4) 0 0;
  padding: var(--s-4) 0 0;
  border-top: var(--hair) solid var(--rule-soft);
  list-style: none;
  font-size: var(--step--2);
  font-family: var(--font-mono);
  color: var(--muted);
}
.schematic__legend b { color: var(--ink); font-weight: 500; }

/* Draw-on animation, driven by [data-draw] */
:where(html[data-motion]) [data-draw] .draw-line {
  stroke-dasharray: var(--len, 240);
  stroke-dashoffset: var(--len, 240);
}
[data-draw].is-drawn .draw-line {
  animation: draw var(--dur-3) var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
:where(html[data-motion]) [data-draw] .draw-node { opacity: 0; }
[data-draw].is-drawn .draw-node {
  animation: nodein 420ms var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes nodein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-draw] .draw-line { stroke-dashoffset: 0; }
  [data-draw] .draw-node { opacity: 1; }
  [data-draw].is-drawn .draw-line,
  [data-draw].is-drawn .draw-node { animation: none; }
}

/* --------------------------------------------------------------------------
   Motion system
   Every animation below has exactly one job: orientation (where did this come
   from), process (how far through a sequence are we), or feedback (did my
   input register). Nothing loops. Nothing is decorative.

   The hidden initial state is declared in CSS rather than applied by script,
   so there is never a flash of un-animated content. Two safety nets cover the
   cases where that could strand content: a <noscript> override in the document
   head for scripting-disabled, and a watchdog in site.js for a script that
   loads but fails part way.
   -------------------------------------------------------------------------- */

/* Opt-in per document. The hidden state below only applies inside a document
   that declares itself motion-enabled (<html data-motion>, emitted by
   build-pages.py). This stylesheet is also linked by the brand proof sheets and
   by the headless-Chrome OG renderer, which load no script at all: without the
   scope they would inherit an invisible initial state with nothing to undo it,
   and those pages would build blank. */
:where(html[data-motion]) :is(
  .reveal-block, .tblock, .metric, .card, .svc__row, .step, .tl__i, .figure,
  .standard, .bar, .faq details, table.data thead, table.data tbody tr,
  .cta__actions, .cta__meta, .foot__grid > div, .schematic
) {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal-block.is-in,
.tblock.is-in,
.metric.is-in,
.card.is-in,
.svc__row.is-in,
.step.is-in,
.tl__i.is-in,
.figure.is-in,
.standard.is-in,
.bar.is-in,
.faq details.is-in,
table.data thead.is-in,
table.data tbody tr.is-in,
.cta__actions.is-in,
.cta__meta.is-in,
.foot__grid > div.is-in,
.schematic.is-in,
.schematic.is-drawn { opacity: 1; transform: none; }

/* Hairlines that draw themselves left to right, like a rule being inked on a
   drawing. The rule carries information — it separates real registers — so
   drawing it reads as structure arriving, not as decoration. */
:where(html[data-motion]) .tblock__spacer,
:where(html[data-motion]) .tl__i::after,
:where(html[data-motion]) .step::after,
:where(html[data-motion]) .metric__v::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 780ms var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + 120ms);
}
.is-in > .tblock__spacer { transform: scaleX(1); }
.tblock.is-in .tblock__spacer { transform: scaleX(1); }
.tl__i.is-in::after,
.step.is-in::after { transform: scaleX(1); }
.metric.is-in .metric__v::after { transform: scaleX(1); }

/* Process sequences: each step's own accent bar grows and its ordinal comes up
   to full strength as that step is reached. On a real sequence this is the
   motion equivalent of ticking through a checklist in order. */
.step { position: relative; }
.step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--hair);
  background: var(--rule-soft);
}
.step__n { transition: color var(--dur-3) var(--ease-out); }
.step.is-in .step__n { color: var(--pine-bright); }
:where(html[data-motion]) .step::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: var(--s-6);
  width: 2px;
  height: 0;
  background: var(--pine);
  transition: height 620ms var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + 80ms);
}
.step.is-in::before { height: 2.75rem; }
@media (max-width: 640px) { .step::before { left: -0.6rem; } }

/* Timeline: a marker appears on the content column and the item's rule inks in. */
.tl__i { position: relative; }
.tl__i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--hair);
  background: var(--rule-soft);
}
:where(html[data-motion]) .tl__i::before {
  content: "";
  position: absolute;
  left: calc(9rem + var(--s-5) - 5px);
  top: 1.85rem;
  width: 9px;
  height: 9px;
  border-radius: 1px;
  background: var(--pine);
  transform: scale(0);
  transition: transform 380ms var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + 100ms);
}
.tl__i.is-in::before { transform: scale(1); }
@media (max-width: 640px) { .tl__i::before { display: none; } }

/* Metric: the tick under the figure inks in behind the count-up. */
.metric__v { position: relative; }
.metric__v::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 2.5rem;
  height: 2px;
  background: var(--pine-tint);
}

/* Service register rows: a pine indicator slides in on hover, which is the
   feedback job. It does not animate on scroll — the row already reveals. */
.svc__row { position: relative; }
.svc__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform var(--dur-2) var(--ease-out);
}
.svc__row:hover::before,
.svc__row:focus-visible::before { transform: scaleY(1); }

/* Sticky rail: the section you are currently in comes forward. The rails also
   carry [data-reveal], so the dimmed state has to out-specify the generic
   revealed state ([data-reveal].is-in) rather than merely follow it. */
.rail__meta { transition: opacity var(--dur-3) var(--ease-out); }
.rail__num { transition: color var(--dur-3) var(--ease-out), letter-spacing var(--dur-3) var(--ease-out); }
@media (min-width: 861px) {
  .rail__meta.is-in:not(.is-active) { opacity: 0.42; }
  .rail__meta.is-active { opacity: 1; }
  .rail__meta.is-in:not(.is-active) .rail__num { color: var(--muted-2); }
  .rail__meta.is-active .rail__num { color: var(--pine); letter-spacing: 0.22em; }
}

/* Reading progress: the datum rail at the top of the viewport, measuring how
   far through the page you are. It reports something real, which is the only
   reason it is here. */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 50;
  pointer-events: none;
  background: transparent;
}
.progress__bar {
  height: 100%;
  width: 100%;
  background: var(--pine);
  transform: scaleX(var(--sp, 0));
  transform-origin: left center;
}

/* FAQ: the answer eases open instead of snapping. */
.faq__a { animation: none; }
.faq details[open] > .faq__a { animation: faqopen 260ms var(--ease-out) both; }
@keyframes faqopen {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Reduced motion: every one of the above resolves to its finished state. The
   site is complete and readable with all of this switched off. */
@media (prefers-reduced-motion: reduce) {
  .reveal-block, .tblock, .metric, .card, .svc__row, .step, .tl__i, .figure,
  .standard, .bar, .faq details, table.data thead, table.data tbody tr,
  .cta__actions, .cta__meta, .foot__grid > div, .schematic,
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tblock__spacer, .tl__i::after, .step::after, .metric__v::after,
  [data-reveal] .bar__f {
    transform: none;
    transition: none;
  }
  .step::before { height: 2.75rem; transition: none; }
  .tl__i::before { transform: scale(1); transition: none; }
  .progress__bar { transform: scaleX(0); }
  .faq details[open] > .faq__a { animation: none; }
  .rail__meta { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Motion graphics, layer two

   Layer one answers "where did this come from" and "how far through am I" for
   blocks and sequences. Layer two does the same work on the parts that carry
   the argument: headings arrive word by word, the schematic's connectors carry
   flow, live states pulse, figures sit on an instrument scale, section rules
   ink themselves in, and the registers respond to the pointer.

   Four things loop, deliberately, and each is reporting a live state rather
   than decorating: a status halo, a connector flow, the drafting grid under a
   schematic, and the provenance ticker in the footer. They are slow on
   purpose (2.2s to 70s) and every one of them is stopped by
   prefers-reduced-motion.

   Same three nets as layer one. Anything a person can lose was declared in CSS
   and is handed back by the <noscript> override in the document head, the
   reduced-motion block at the end of this section, and the watchdog in
   site.js. Anything prefixed .mk- is created by the script, so it does not
   exist at all without it and cannot strand anything.
   -------------------------------------------------------------------------- */

/* Headings arrive word by word. The words are wrapped by script, so with
   scripting off the heading is simply an ordinary heading. */
:where(html[data-motion]) .mk-w > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(0.42em);
  opacity: 0;
  transition: transform 760ms var(--ease-out), opacity 560ms var(--ease-out);
  transition-delay: var(--wd, 0ms);
}
.mk-w { display: inline-block; }
.mk-w > i { display: inline-block; font-style: normal; }
.is-in > .mk-w > i,
.is-drawn > .mk-w > i,
.is-in .mk-w > i,
.is-drawn .mk-w > i,
.mk-lit .mk-w > i { transform: none; opacity: 1; }

/* Instrument scale under a figure. A measuring rule, not a chart: the ticks
   are a fixed scale and carry no data, which is the only kind of ornament this
   brand allows next to a number. */
.mk-scale {
  position: absolute;
  left: 3.15rem;
  bottom: -0.62rem;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 7px;
}
.mk-scale i {
  display: block;
  width: 1px;
  background: var(--rule);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 420ms var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + var(--si, 0ms) + 240ms);
}
.metric.is-in .mk-scale i, .mk-lit .mk-scale i { transform: scaleY(1); }

/* Drafting grid under the hero schematic: the paper the drawing sits on. */
.hero { position: relative; }
.hero > .shell { position: relative; z-index: 1; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule-soft) var(--hair), transparent var(--hair)),
    linear-gradient(to bottom, var(--rule-soft) var(--hair), transparent var(--hair));
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 90% at 18% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 18% 0%, #000 0%, transparent 72%);
  opacity: 0;
  transition: opacity 1600ms var(--ease-out) 120ms;
}
:where(html[data-motion]) .hero.is-in::before {
  opacity: 0.55;
  animation: gridpan 70s linear infinite;
}
@keyframes gridpan { to { background-position: 26px 26px; } }

/* Status halo on the schematic's live nodes: a monitor blinking, not an
   ornament. The circles are cloned into the SVG by script. */
.mk-halo {
  fill: none;
  stroke: var(--live);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
:where(html[data-motion]) .schematic.is-drawn .mk-halo { animation: halo 2600ms ease-out infinite; }
@keyframes halo {
  0% { transform: scale(0.7); opacity: 0.5; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Data flow along the schematic's connectors, drawn as a dashed overlay of the
   same path so the hairlines themselves never move. */
.mk-flow {
  fill: none;
  stroke: var(--pine-bright);
  stroke-width: 1;
  stroke-dasharray: 2 8;
  opacity: 0;
}
:where(html[data-motion]) .schematic.is-drawn .mk-flow {
  opacity: 0.85;
  animation: mkflow 2200ms linear infinite;
}
@keyframes mkflow { to { stroke-dashoffset: -30; } }

/* Instrument yardarm: a fixed dot rail on wide screens naming the sections of
   the page, with the current one extended. Orientation, generated by script. */
.mk-nav {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 11px;
  pointer-events: none;
}
@media (min-width: 1180px) { .mk-nav { display: flex; } }
.mk-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-decoration: none;
  opacity: 0;
  translate: 8px 0;
  transition: opacity 520ms var(--ease-out), translate 520ms var(--ease-out), color 200ms linear;
}
.mk-nav a.is-ready { opacity: 0.5; translate: none; }
.mk-nav a:hover, .mk-nav a:focus-visible { opacity: 1; color: var(--ink); }
.mk-nav a.is-on { opacity: 1; color: var(--pine); }
.mk-nav a i { display: block; width: 14px; height: var(--hair); background: currentColor; transition: width 320ms var(--ease-out); }
.mk-nav a.is-on i { width: 30px; }

/* Per-section progress inside the annotation rail. */
.mk-rp {
  display: block;
  position: relative;
  width: var(--hair);
  height: 44px;
  margin-top: 0.85rem;
  background: var(--rule);
}
.mk-rp i {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  background: var(--pine);
  transform: scaleY(var(--rp, 0));
  transform-origin: top center;
}
@media (max-width: 860px) { .mk-rp { display: none; } }

/* Section rule inks in left to right as the section arrives. The overlay is
   placed exactly on a border the design already draws; it never adds a rule
   where the design has none. */
section.mk-hasrule { position: relative; }
.mk-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--hair));
  height: var(--hair);
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-out);
  pointer-events: none;
}
section.mk-lit > .mk-rule { transform: scaleX(1); }

/* Parallax is written to --py by the script's one rAF loop and applied with the
   translate property, so it can never fight the reveal's transform. */
[data-par] { translate: 0 var(--py, 0px); }

/* Anchors land below the sticky masthead rather than under it. */
section[id] { scroll-margin-top: 5.25rem; }

/* Pointer feedback across the registers. */
.card { position: relative; }
.card::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 9px;
  height: 9px;
  border-top: var(--hair) solid var(--pine);
  border-right: var(--hair) solid var(--pine);
  opacity: 0;
  translate: 4px -4px;
  transition: opacity 260ms var(--ease-out), translate 260ms var(--ease-out);
}
.card:hover::after, .card:focus-within::after { opacity: 0.95; translate: none; }
.svc__row .svc__out { transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out), border-color 240ms var(--ease-out); }
.svc__row:hover .svc__out,
.svc__row:focus-visible .svc__out { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn__arrow { display: inline-block; }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(3px); }
.foot__l a { position: relative; }
.foot__l a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: var(--hair);
  background: var(--pine);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease-out);
}
.foot__l a:hover::after, .foot__l a:focus-visible::after { transform: scaleX(1); }
table.data tbody tr { transition: background-color 220ms var(--ease-out); }
table.data tbody tr:hover { background: var(--pine-tint); }

/* Masthead compresses once the hero has scrolled away. */
.masthead__in { transition: height 320ms var(--ease-out); }
.masthead.is-stuck .masthead__in { height: 3.6rem; }
@media (max-width: 900px) { .masthead.is-stuck .masthead__in { height: auto; } }

/* Form fields take an accent edge while they hold focus. */
.field { position: relative; }
.field::before {
  content: "";
  position: absolute;
  left: -0.55rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 320ms var(--ease-out);
}
.field:focus-within::before { transform: scaleY(1); }
.field label { transition: color 220ms var(--ease-out); }
.field:focus-within label { color: var(--pine-deep); }

/* Open answers keep a marker beside them. */
.faq summary::before {
  content: "";
  position: absolute;
  left: -0.7rem;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--pine);
  translate: 0 -50%;
  transition: height 320ms var(--ease-out);
}
.faq details[open] summary::before { height: 62%; }

/* The confirmation notice arrives rather than appearing, and its tick draws. */
:where(html[data-motion]) .alert:not([hidden]) { animation: alertin 460ms var(--ease-out) both; }
@keyframes alertin { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: none; } }
.alert__tick { display: inline-block; vertical-align: -2px; margin-right: 0.5rem; color: var(--pine); }
:where(html[data-motion]) .alert:not([hidden]) .alert__tick path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: draw 560ms var(--ease-out) 160ms forwards;
}

/* Provenance ticker in the footer: the site's own provenance lines, moving
   because they are the one claim that is always live. It pauses on hover, and
   it stops entirely under reduced motion. */
.ticker {
  overflow: hidden;
  border-top: var(--hair) solid var(--rule-soft);
  border-bottom: var(--hair) solid var(--rule-soft);
  padding: 0.6rem 0;
  margin-bottom: var(--s-6);
}
.ticker__t { display: flex; gap: 3rem; width: max-content; }
:where(html[data-motion]) .ticker__t { animation: ticker 46s linear infinite; }
.ticker:hover .ticker__t, .ticker:focus-within .ticker__t { animation-play-state: paused; }
.ticker__t span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ticker__t b { color: var(--ink); font-weight: 500; }
.ticker__t span::before { content: ""; width: 5px; height: 5px; background: var(--pine); border-radius: 1px; flex: none; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Back to the top, offered once you are a fifth of the way down. */
.mk-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  opacity: 0;
  translate: 0 10px;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out), translate 320ms var(--ease-out), border-color 200ms linear;
}
.mk-top.is-on { opacity: 1; translate: none; pointer-events: auto; }
.mk-top:hover { border-color: var(--pine); }

/* Reduced motion: layer two resolves to its finished state, exactly as layer
   one does. Nothing is lost; everything stops. */
@media (prefers-reduced-motion: reduce) {
  .mk-w > i { transform: none; opacity: 1; transition: none; }
  .mk-scale i { transform: scaleY(1); transition: none; }
  .hero::before { opacity: 0.55; transition: none; animation: none !important; }
  .mk-halo { animation: none !important; opacity: 0; }
  .mk-flow { animation: none !important; opacity: 0.5; }
  .mk-nav a { opacity: 0.7; translate: none; transition: none; }
  .mk-nav a.is-on { opacity: 1; }
  .mk-rule { transform: scaleX(1); transition: none; }
  [data-par] { translate: none; }
  .card::after { opacity: 0; translate: none; transition: none; }
  .mk-top { transition: none; }
  .faq summary::before { transition: none; }
  :where(html[data-motion]) .alert:not([hidden]) { animation: none; }
  :where(html[data-motion]) .alert:not([hidden]) .alert__tick path { animation: none; stroke-dashoffset: 0; }
  .ticker__t { animation: none !important; }
  .masthead__in { transition: none; }
}

/* --------------------------------------------------------------------------
   Reveal on scroll (legacy opt-in attribute, still honoured)
   -------------------------------------------------------------------------- */
:where(html[data-motion]) [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Provenance — the signature component.
   Every figure on this site carries source, window and freshness.
   -------------------------------------------------------------------------- */
.prov {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--muted-2);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}
.prov__i { display: inline-flex; gap: 0.45em; }
.prov__k {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.sec--ink .prov { color: var(--on-ink-muted); }
.sec--ink .prov__k { color: rgba(238, 242, 239, 0.55); }
.prov__dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  flex: none;
  align-self: center;
  background: var(--live);
}
.prov__dot--flag { background: var(--flag); }
.prov__dot--hold { background: var(--hold); }

.standard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  border: var(--hair) solid var(--rule);
  border-left: 3px solid var(--pine);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--s-5);
}
.standard__k {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--pine);
  padding-top: 0.25em;
}
.standard p { margin: 0; max-width: 62ch; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Metrics
   -------------------------------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: var(--hair) solid var(--rule);
}
.metric {
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  border-right: var(--hair) solid var(--rule-soft);
}
.metric:last-child { border-right: 0; }
@media (max-width: 700px) {
  .metric { border-right: 0; border-bottom: var(--hair) solid var(--rule-soft); padding-right: 0; }
  .metric:last-child { border-bottom: 0; }
}
.metric__v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: block;
}
.sec--ink .metric__v { color: #fff; }
.metric__u { font-family: var(--font-mono); font-size: var(--step--1); color: var(--pine); }
.metric__v .metric__u { font-size: 0.46em; letter-spacing: 0; }
.metric__l {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--step--1);
  color: var(--ink-2);
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   Cards / grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.card:hover { border-color: var(--pine); transform: translateY(-2px); }
.card__k {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.card p { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.card__out {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: var(--hair) solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--muted);
}

/* Service list: a register, not a card wall */
.svc {
  border-top: var(--hair) solid var(--rule);
  display: grid;
}
.svc__row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-5) 0;
  border-bottom: var(--hair) solid var(--rule-soft);
  transition: background-color var(--dur-2) var(--ease-out);
  /* the whole row is the target, so the pointer and the underline are the
     row's, not the title's */
  text-decoration: none;
  color: inherit;
}
.svc__row:hover { background: var(--panel); }
.svc__row:hover .svc__t { color: var(--pine); }
.svc__row:focus-visible { outline-offset: -3px; }
.svc__t { transition: color var(--dur-1) var(--ease-out); }
.svc__row:hover .svc__out { color: var(--pine); }
.svc__n {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--pine);
  letter-spacing: 0.08em;
}
.svc__t { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }
.svc__d { font-size: var(--step--1); color: var(--ink-2); }
.svc__out {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .svc__row { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-2) var(--s-4); }
  .svc__d { grid-column: 2; }
  .svc__out { grid-column: 2; text-align: left; }
}

/* --------------------------------------------------------------------------
   Engagements (a real sequence — numbering carries meaning)
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 0; border-top: var(--hair) solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 0.7fr);
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: var(--hair) solid var(--rule-soft);
  align-items: start;
}
.step__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--pine);
}
.step__t { font-size: var(--step-2); font-weight: 600; line-height: var(--lh-snug); }
.step__d { font-size: var(--step--1); color: var(--ink-2); }
.step__d ul { margin: var(--s-3) 0 0; padding-left: 1.1rem; }
.step__d li { margin-bottom: 0.4em; }
.step__w {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (max-width: 1000px) {
  .step { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-2) var(--s-4); }
  .step__d, .step__w { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Evidence table
   -------------------------------------------------------------------------- */
.tablewrap { overflow-x: auto; border: var(--hair) solid var(--rule); border-radius: var(--radius); background: var(--panel); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 620px; }
table.data caption {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-bottom: var(--hair) solid var(--rule-soft);
}
table.data th, table.data td { text-align: left; padding: var(--s-4) var(--s-5); border-bottom: var(--hair) solid var(--rule-soft); vertical-align: top; }
table.data thead th {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.state { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: var(--step--2); white-space: nowrap; }
.state::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--live); flex: none; }
.state--flag::before { background: var(--flag); }
.state--hold::before { background: var(--hold); }

/* --------------------------------------------------------------------------
   Case study
   -------------------------------------------------------------------------- */
.case { border-top: var(--hair) solid var(--rule); padding-top: var(--s-5); }
.case__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-5); justify-content: space-between; }
.case__title { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.015em; line-height: var(--lh-snug); margin: 0; max-width: 24ch; }
.case__kicker { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine); }
.figure {
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--s-5);
}
.figure svg { width: 100%; height: auto; }
.figure figcaption { margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--hair) solid var(--rule-soft); font-size: var(--step--2); font-family: var(--font-mono); color: var(--muted); }

/* Two-bar before/after meter — used for the 100% → 0% exposure figure */
.meter { display: grid; gap: var(--s-3); margin: 0; }
.meter__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); }
.meter__k { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); white-space: nowrap; }
.meter__bar { height: 10px; background: var(--panel-2); border-radius: 1px; position: relative; overflow: hidden; }
.meter__fill { position: absolute; inset: 0 auto 0 0; background: var(--hold); width: 100%; transform-origin: left; }
.meter__fill--none { width: 0; }
.meter__v { font-family: var(--font-mono); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .meter__row { grid-template-columns: minmax(0, 1fr) auto; }
  .meter__k { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Timeline (real, dated)
   -------------------------------------------------------------------------- */
.tl { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--rule); }
.tl__i {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: var(--hair) solid var(--rule-soft);
}
.tl__d { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); padding-top: 0.35em; }
.tl__t { font-weight: 600; }
.tl__o { color: var(--muted); font-size: var(--step--1); }
.tl__b { font-size: var(--step--1); color: var(--ink-2); margin: var(--s-3) 0 0; }
.tl__b li { margin-bottom: 0.35em; }
@media (max-width: 640px) {
  .tl__i { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .tl__d { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: var(--hair) solid var(--rule); }
.faq details { border-bottom: var(--hair) solid var(--rule-soft); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-5) 2.5rem var(--s-5) 0;
  position: relative;
  font-size: var(--step-1);
  font-weight: 500;
  transition: color var(--dur-1) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: var(--hair) solid var(--pine);
  border-bottom: var(--hair) solid var(--pine);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-2) var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--pine); }
.faq__a { padding: 0 0 var(--s-5); max-width: var(--measure); }
.faq__a p { margin: 0 0 0.9em; color: var(--ink-2); font-size: var(--step--1); }
.faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */
.cta { background: var(--pine-deep); color: var(--on-ink); }
/* pine on pine-deep is 1.74:1 — the eyebrow has to take the on-ink grey */
.cta .eyebrow { color: var(--on-ink-muted); }
.cta .link { color: var(--on-ink); }
.cta__in { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.cta__h { font-size: var(--step-4); color: #fff; max-width: 22ch; }
.cta__p { color: var(--on-ink-muted); max-width: 52ch; margin: var(--s-5) 0 var(--s-6); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta__meta {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: var(--hair) solid rgba(238, 242, 239, 0.18);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--on-ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.field label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  background: var(--panel);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  padding: 0.75em 0.85em;
  font-size: var(--step-0);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  width: 100%;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 3px var(--pine-tint);
}
.field__hint { font-size: var(--step--2); color: var(--muted-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formnote { font-size: var(--step--2); color: var(--muted); margin-top: var(--s-4); }
.alert {
  border: var(--hair) solid var(--live);
  border-left-width: 3px;
  background: var(--pine-tint);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
  font-size: var(--step--1);
}
.alert--bad { border-color: var(--hold); background: #f6eae7; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot { border-top: var(--hair) solid var(--rule); padding: var(--s-8) 0 var(--s-6); }
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}
@media (max-width: 800px) { .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: minmax(0, 1fr); } }
.foot__h { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 var(--s-4); }
.foot__l { list-style: none; margin: 0; padding: 0; }
.foot__l li { margin-bottom: 0.55em; }
.foot__l a { font-size: var(--step--1); color: var(--ink-2); text-decoration: none; }
.foot__l a:hover { color: var(--pine); text-decoration: underline; }
.foot__base {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--hair) solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--muted-2);
}

/* --------------------------------------------------------------------------
   Schematic graphics
   Hairline strokes and mono labels, drawn in the same visual language as a
   drawing sheet. Connectors animate in once, when the figure enters view.
   -------------------------------------------------------------------------- */
.schem { --stroke: var(--rule); --node: var(--pine); }
.schem .s-box { fill: var(--panel); stroke: var(--stroke); stroke-width: 1; }
.schem .s-box--accent { fill: var(--pine-tint); stroke: var(--pine); }
.schem .s-line { fill: none; stroke: var(--stroke); stroke-width: 1; }
.schem .s-line--accent { stroke: var(--pine); }
.schem .s-tick { stroke: var(--muted-2); stroke-width: 1; }
.schem .s-node { fill: var(--node); }
.schem .s-node--live { fill: var(--live); }
.schem .s-node--flag { fill: var(--flag); }
.schem .s-label {
  font-family: var(--font-mono);
  /* 8.5px is the largest size at which the longest label still fits its box
     at every breakpoint. Measured against Plex Mono's 0.6em advance. */
  font-size: 8.5px;
  fill: var(--muted);
  letter-spacing: 0.04em;
}
.schem .s-label--key { fill: var(--ink); font-weight: 500; }
.schem .s-label--on { fill: var(--pine); }
.schem .s-rule { stroke: var(--rule-soft); stroke-width: 1; }
.schem .s-dash { stroke-dasharray: 3 3; }

/* The two-bar before/after figure on the work page, drawn as vector so it
   stays crisp and can animate its own width. */
.bars { display: grid; gap: 6px; }
/* Three columns: label, track, figure. The figure is its own column rather than
   a third item wrapping onto a new row, and it is a fixed width so both bars
   come out the same length — the two rows have to be comparable. */
.bar { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: var(--s-4); }
.bar > .mono { text-align: right; white-space: nowrap; }
.bar__k { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); }
.bar__t { display: block; height: 22px; background: var(--panel-2); border-radius: 1px; overflow: hidden; }
/* display:block is load-bearing, not decoration: on an inline span neither
   width, height nor transform apply, so the fill measured 0x0 and the 100% bar
   rendered as an empty track. */
.bar__f { display: block; width: 100%; height: 100%; transform-origin: left center; }
.bar__f--hold { background: var(--hold); }
.bar__f--live { background: var(--live); }
@media (prefers-reduced-motion: no-preference) {
  :where(html[data-motion]) .bar__f { transform: scaleX(0); transition: transform 780ms var(--ease-out) 180ms; }
  .bar.is-in .bar__f { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 0.75rem; z-index: 60; background: var(--panel); padding: 0.6rem 0.9rem; border: var(--hair) solid var(--pine); border-radius: var(--radius); }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack > * + * { margin-top: var(--s-5); }
.mt-0 { margin-top: 0; }
.center { text-align: center; }