/* ============================================================================
   DUCK THE SYSTEM — THE LEDGER
   ----------------------------------------------------------------------------
   The whole site is one continuous accounting document. Every surface is a
   form: ruled columns, line-item rows, rubber stamps, perforated edges,
   carbon-copy sheets. The rebellion is not in the ground, it is in what has
   been DONE to the document — struck-through lines, VOID stamps, ballpoint
   annotations scrawled in the margin by someone who stopped accepting it.

   Why this and not the usual dark/neon agency page: every competitor already
   ships that. The invoice is the one artifact where the agency system extracts
   its value, so it is the only honest place to argue against it. It also
   solves the anonymity constraint natively — an invoice lists roles and hours,
   never people.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* Paper stock. Greenbar computer paper — the ground the argument sits on. */
  --paper:        #e3e6d5;   /* main sheet */
  --paper-bar:    #cfdbc0;   /* the green bar on alternating rows */
  --sheet:        #f1f2e8;   /* lighter form sheet, for insets */
  --sheet-edge:   #d3d8c3;   /* the fold/edge of a sheet */

  /* Carbon copies. Second and third sheets of a triplicate form. */
  --canary:       #f2e69a;   /* copy 2 — canary yellow */
  --ncr-pink:     #f0cdc6;   /* copy 3 — NCR pink */

  /* The dark sheet. Carbon paper itself — used to pace the scroll. */
  --carbon:       #22241d;
  --carbon-2:     #2e3128;
  --carbon-rule:  #454a3c;

  /* Ink. */
  --ink:          #191b15;   /* typewriter black, slightly green */
  --ink-2:        #3f4437;   /* secondary — tinted from the ground, never gray */
  --ink-3:        #5f6553;   /* tertiary / captions */
  --ink-rev:      #edefe1;   /* ink on carbon */
  --ink-rev-2:    #b9bfa8;

  /* Marks made ON the document. */
  --stamp:        #b3332b;   /* rubber stamp red */
  --stamp-deep:   #8c231d;
  --ballpoint:    #2b4699;   /* biro annotation */
  --highlight:    #d8e04a;   /* marker */

  /* Rules. */
  --rule:         #a9b399;
  --rule-soft:    #c2caae;
  --rule-heavy:   #6f7860;

  /* Type. */
  --face-doc:  "Courier Prime", "Courier New", ui-monospace, monospace;
  --face-ui:   "Archivo", system-ui, -apple-system, sans-serif;

  /* Scale — a document has few sizes, used strictly. */
  /* The stamp headline. Sized so the whole hero — headline, subhead, both
     actions and the proof note — clears a 900px laptop fold. An earlier value
     of 6rem pushed the primary action 400px below it. */
  --t-mega:  clamp(2.3rem, 4.9vw, 3.75rem);
  --t-xl:    clamp(2.1rem, 5.6vw, 3.5rem);
  --t-lg:    clamp(1.5rem, 3.2vw, 2.05rem);
  --t-md:    clamp(1.13rem, 1.7vw, 1.3rem);
  --t-body:  1.0625rem;
  --t-doc:   0.9375rem;   /* document body — Courier runs small */
  --t-sm:    0.8125rem;
  --t-xs:    0.6875rem;   /* field labels, account codes */

  /* Rhythm. */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --gutter: clamp(1.15rem, 4.5vw, 3.5rem);
  --measure: 68ch;
  --page: 1320px;

  /* Paper depth — real offset and blur. No costume shadows. */
  --lift-1: 0 1px 2px rgba(25,27,21,.10), 0 2px 8px rgba(25,27,21,.06);
  --lift-2: 0 2px 4px rgba(25,27,21,.12), 0 10px 26px rgba(25,27,21,.10);
  --lift-3: 0 4px 8px rgba(25,27,21,.14), 0 22px 52px rgba(25,27,21,.14);

  --ease: cubic-bezier(.16,1,.3,1);      /* exponential ease-out */
  --ease-in: cubic-bezier(.7,0,.84,0);
}

/* --------------------------------------------------------------- 2. RESET */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-ui);
  font-size: var(--t-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The paper itself: fibre grain + the faint blue rule of a ledger pad. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--face-ui);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 var(--s4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--highlight); color: var(--ink); }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--stamp); color: #fff;
  padding: var(--s3) var(--s5);
  font: 700 var(--t-sm)/1 var(--face-doc);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: var(--s4); }

/* ------------------------------------------------------ 3. DOCUMENT ATOMS */

/* Field label — the grammar of a form. Not a decorative eyebrow: these label
   an actual value beneath or beside them, as on a real printed field. */
.field-label {
  font: 700 var(--t-xs)/1.2 var(--face-doc);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
}
.on-carbon .field-label { color: var(--ink-rev-2); }

/* Account code / reference number. */
.ref {
  font: 400 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .14em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.doc { font-family: var(--face-doc); font-size: var(--t-doc); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Struck-through line item. The core gesture of the whole site.
   Two shapes have to be supported: a list item whose span is a direct child,
   and a table row whose span sits one level down inside a <td>. Matching only
   the direct child silently killed every strike in the invoice. */
.struck { position: relative; color: var(--ink-3); }
.struck > span,
.struck td > span:first-child { position: relative; }
.struck > span::after,
.struck td > span:first-child::after {
  content: "";
  position: absolute;
  left: -.15em; right: -.15em;
  top: 52%;
  height: 2px;
  background: var(--stamp);
  transform: scaleX(var(--strike, 1));
  transform-origin: left center;
  border-radius: 2px;
}

/* Rubber stamp. Rotated, worn, over the document. */
.stamp {
  display: inline-block;
  font: 800 var(--t-sm)/1 var(--face-ui);
  font-stretch: 112%;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 3px solid var(--stamp);
  padding: .5em .7em .45em;
  transform: rotate(-6deg);
  opacity: .88;
  mix-blend-mode: multiply;
  white-space: nowrap;
}
.stamp--blue { color: var(--ballpoint); border-color: var(--ballpoint); }
.stamp--ink  { color: var(--ink-2); border-color: var(--ink-2); }

/* Ballpoint annotation — a human hand disagreeing with the document. */
.scrawl {
  font: 400 var(--t-doc)/1.35 var(--face-doc);
  color: var(--ballpoint);
  transform: rotate(-1.4deg);
  display: inline-block;
}

/* Perforated tear edge. */
.perf {
  height: 14px;
  background-image: radial-gradient(circle at 7px 7px, var(--paper) 3.2px, transparent 3.4px);
  background-size: 14px 14px;
  background-color: transparent;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  opacity: .8;
}

/* -------------------------------------------------------- 4. PAGE FURNITURE */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}
.wrap--narrow { max-width: 900px; }

section { position: relative; z-index: 1; }

/* Every band is a region of the document, ruled top and bottom. */
.band { padding-block: var(--s9); border-top: 1px solid var(--rule); }
.band--tight { padding-block: var(--s7); }
.band--first { border-top: 0; }

.band--sheet  { background: var(--sheet); }
.band--canary { background: var(--canary); }
.band--carbon {
  background: var(--carbon);
  color: var(--ink-rev);
  border-top: 1px solid var(--carbon-rule);
}
.band--carbon h2, .band--carbon h3 { color: var(--ink-rev); }
.band--carbon p { color: var(--ink-rev-2); }

/* Greenbar: alternating printed bands, the signature of computer paper. */
.greenbar {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--paper-bar) 0 3.25rem,
    transparent 3.25rem 6.5rem
  );
}

/* Section heading, as a ruled document header with its reference on the right. */
.doc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--s7);
}
.band--carbon .doc-head { border-bottom-color: var(--ink-rev); }
.doc-head h2 { font-size: var(--t-lg); font-stretch: 108%; }
.doc-head .ref { white-space: nowrap; }
.band--carbon .doc-head .ref { color: var(--ink-rev-2); }

.lede {
  font-size: var(--t-md);
  line-height: 1.5;
  max-width: 56ch;
  color: var(--ink-2);
}
.band--carbon .lede { color: var(--ink-rev-2); }

/* ------------------------------------------------------------- 5. CONTROLS */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font: 800 var(--t-sm)/1 var(--face-ui);
  font-stretch: 108%;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 1.5em;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--sheet);
  cursor: pointer;
  position: relative;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease);
  box-shadow: var(--lift-1);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn:active { transform: translateY(0); box-shadow: var(--lift-1); }

.btn--stamp { background: var(--stamp); border-color: var(--stamp); color: #fff; }
.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--ink); color: var(--sheet); box-shadow: var(--lift-2); }
.band--carbon .btn--ghost { color: var(--ink-rev); border-color: var(--ink-rev); }
.band--carbon .btn--ghost:hover { background: var(--ink-rev); color: var(--carbon); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .42; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn .arrow { width: 1em; height: 1em; flex: none; }

/* Text link — underlined like a typed reference, never a bare color change. */
.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  text-decoration-color: var(--stamp);
  transition: background-color .18s var(--ease);
}
.link:hover { background: var(--highlight); }
.band--carbon .link { color: var(--ink-rev); }
.band--carbon .link:hover { background: var(--carbon-2); }

/* --------------------------------------------------------------- 6. HEADER */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  transition: box-shadow .25s var(--ease);
}
.masthead[data-stuck="true"] { box-shadow: var(--lift-2); }

.masthead__in {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s3) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__mark { width: 2rem; height: 2rem; flex: none; }
.wordmark__txt {
  font: 800 var(--t-sm)/1.02 var(--face-ui);
  font-stretch: 112%;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.wordmark__txt small {
  display: block;
  font: 400 var(--t-xs)/1.3 var(--face-doc);
  letter-spacing: .16em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); }
.nav a {
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding: .55em 0;
  border-bottom: 2px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--stamp); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* The nav's own link rule out-specifies .btn and was stripping the CTA's
   padding, squashing it to a 27px slab. Restore the button's own geometry. */
.nav a.btn {
  padding: .95em 1.35em;
  border: 2px solid var(--stamp);
  color: #fff;
  letter-spacing: .1em;
}
.nav a.btn:hover { color: #fff; border-color: var(--stamp-deep); background: var(--stamp-deep); }

.nav-toggle {
  display: none;
  background: none; border: 2px solid var(--ink);
  padding: .5rem .7rem; cursor: pointer;
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 4.35rem 0 auto 0;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s2) var(--gutter) var(--s5);
    box-shadow: var(--lift-3);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .nav a {
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: var(--t-sm);
  }
  .nav .btn { margin-top: var(--s4); justify-content: center; }
}

/* ----------------------------------------------------------- 7. THE INVOICE */

.invoice {
  background: var(--sheet);
  border: 2px solid var(--ink);
  box-shadow: var(--lift-3);
  position: relative;
}
.invoice__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  border-bottom: 2px solid var(--ink);
  align-items: start;
}
.invoice__title {
  font-size: var(--t-lg);
  font-stretch: 116%;
  letter-spacing: -.02em;
}
.invoice__meta {
  display: grid;
  gap: var(--s2);
  text-align: right;
  font-family: var(--face-doc);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.invoice__meta b { color: var(--ink); font-weight: 700; }

@media (max-width: 620px) {
  .invoice__head { grid-template-columns: 1fr; }
  .invoice__meta { text-align: left; }
}

/* Line-item table. The page's primary structure — rows, not cards. */
.items { width: 100%; border-collapse: collapse; }
.items caption { text-align: left; padding: var(--s4) var(--s6) 0; }

.items th {
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule-heavy);
  white-space: nowrap;
}
.items th:last-child, .items td:last-child { text-align: right; }
.items th:first-child, .items td:first-child { padding-left: var(--s6); width: 3.5rem; }
.items th:last-child, .items td:last-child { padding-right: var(--s6); }

.items td {
  padding: var(--s4);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--face-doc);
  font-size: var(--t-doc);
  vertical-align: baseline;
}
.items tbody tr:nth-child(odd) { background: rgba(207,219,192,.34); }
.items tbody tr:last-child td { border-bottom: 2px solid var(--ink); }

.items .amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
.items .amount--void { color: var(--stamp); }
.items .amount--free { color: var(--ink); }

.items__note {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: .04em;
  margin-top: .35em;
  font-family: var(--face-ui);
  text-transform: none;
}

.invoice__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  flex-wrap: wrap;
}
.invoice__total dt {
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.invoice__total dd {
  margin: 0;
  font: 800 var(--t-lg)/1 var(--face-ui);
  font-stretch: 112%;
  letter-spacing: -.02em;
}

/* --------------------------------------------------------------- 8. HERO */

.hero { padding-block: var(--s8) var(--s9); position: relative; overflow: hidden; }

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

.hero__mega {
  font-size: var(--t-mega);
  font-stretch: 122%;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .88;
  text-transform: uppercase;
  margin-bottom: var(--s5);
}
.hero__mega em {
  font-style: normal;
  display: block;
  color: var(--stamp);
  position: relative;
}

.hero__sub {
  font-size: var(--t-md);
  line-height: 1.45;
  max-width: 46ch;
  color: var(--ink-2);
  margin-bottom: var(--s6);
}
.hero__sub strong { color: var(--ink); font-weight: 700; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.hero__stamp {
  position: absolute;
  right: clamp(-1rem, 2vw, 2rem);
  top: clamp(1rem, 6vw, 4rem);
  transform: rotate(11deg);
  pointer-events: none;
  z-index: 4;
}

/* The VOID stamp that lands on the invoice. */
.void-stamp {
  font: 900 clamp(2.2rem, 6vw, 3.6rem)/1 var(--face-ui);
  font-stretch: 125%;
  letter-spacing: .06em;
  color: var(--stamp);
  border: 6px solid var(--stamp);
  border-radius: 4px;
  padding: .18em .3em .14em;
  opacity: .95;
  mix-blend-mode: multiply;
  transform: rotate(-13deg);
  position: absolute;
  /* Sits over the VOIDED rows, never over line 007. Landing the stamp on the
     one line the page is arguing you should keep would say the opposite of
     what the page says. */
  right: 7%;
  top: 36%;
  z-index: 5;
  pointer-events: none;
  /* Worn rubber: erode the fill with a coarse noise mask. Kept chunky —
     a fine-grained mask reads as a faded print, not an inked stamp. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.28' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.1 1.02'/%3E%3C/filter%3E%3Crect width='300' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.28' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.1 1.02'/%3E%3C/filter%3E%3Crect width='300' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: cover; mask-size: cover;
}

/* ------------------------------------------- 9. THE AUTHORED MOTION MOMENT */

/* One orchestrated event: the line items strike through in sequence, then the
   stamp lands. Everything is visible by default — motion only animates the
   marks being made, never the content's existence. */

.js .strike-seq .struck > span::after,
.js .strike-seq .struck td > span:first-child::after { --strike: 0; }
.js .strike-seq[data-run="true"] .struck > span::after,
.js .strike-seq[data-run="true"] .struck td > span:first-child::after {
  animation: strike-in .5s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 130ms);
}
@keyframes strike-in { from { --strike: 0; transform: scaleX(0); }
                       to   { --strike: 1; transform: scaleX(1); } }

.js .strike-seq .void-stamp {
  opacity: 0;
  transform: rotate(-13deg) scale(2.4);
  filter: blur(6px);
}
.js .strike-seq[data-run="true"] .void-stamp {
  animation: stamp-land .62s var(--ease) forwards;
  animation-delay: var(--stamp-delay, 900ms);
}
@keyframes stamp-land {
  0%   { opacity: 0;  transform: rotate(-13deg) scale(2.4); filter: blur(6px); }
  55%  { opacity: .95; transform: rotate(-13deg) scale(.94); filter: blur(0); }
  75%  { transform: rotate(-13deg) scale(1.03); }
  100% { opacity: .9; transform: rotate(-13deg) scale(1);   filter: blur(0); }
}

/* The whole sheet takes the impact of the stamp. */
.js .strike-seq[data-run="true"] .invoice {
  animation: sheet-jolt .3s var(--ease);
  animation-delay: calc(var(--stamp-delay, 900ms) + 230ms);
}
@keyframes sheet-jolt {
  0%,100% { transform: none; }
  30% { transform: translateY(2px) rotate(.12deg); }
}

/* Quiet arrival for document regions further down the page. */
.js .rise { opacity: 0; transform: translateY(14px); }
.js .rise[data-in="true"] {
  animation: rise .62s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .strike-seq .struck > span::after,
  .js .strike-seq .struck td > span:first-child::after,
  .js .strike-seq[data-run="true"] .struck > span::after,
  .js .strike-seq[data-run="true"] .struck td > span:first-child::after { --strike: 1; transform: scaleX(1); animation: none; }
  .js .strike-seq .void-stamp,
  .js .strike-seq[data-run="true"] .void-stamp { opacity: .9; transform: rotate(-13deg); filter: none; animation: none; }
  .js .strike-seq[data-run="true"] .invoice { animation: none; }
  .js .rise, .js .rise[data-in="true"] { opacity: 1; transform: none; animation: none; }
  * { transition-duration: .01ms !important; }
}

/* -------------------------------------------------- 10. THE CREW MANIFEST */

.manifest { border-top: 2px solid currentColor; }
.manifest__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0,1.5fr) minmax(0,1fr) auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--carbon-rule);
  font-family: var(--face-doc);
  font-size: var(--t-doc);
}
.band--carbon .manifest__row { border-bottom-color: var(--carbon-rule); }

.manifest__role { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* Flex so the redaction bar stays on the label's line instead of dropping to
   a second row and losing its connection to "Currently at". */
.manifest__from {
  color: var(--ink-rev-2);
  display: flex;
  align-items: center;
  gap: .5em;
  flex-wrap: wrap;
}

/* The redaction bar. Hover reveals nothing — that is the joke and the point. */
.redact {
  display: inline-block;
  background: currentColor;
  color: inherit;
  border-radius: 1px;
  height: 1.05em;
  vertical-align: -.18em;
  min-width: 3rem;
  position: relative;
  transition: transform .2s var(--ease);
}
.redact::after {
  content: attr(data-w);
  visibility: hidden;
}
.redact:hover { transform: translateX(2px) rotate(-.4deg); }

@media (max-width: 760px) {
  .manifest__row { grid-template-columns: 3.2rem 1fr; row-gap: var(--s2); }
  .manifest__row > *:nth-child(3) { grid-column: 2; }
  .manifest__row > *:nth-child(4) { grid-column: 2; }
}

/* ------------------------------------------------------ 11. THE JOB TICKET */

.ticket {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  border: 2px solid var(--ink);
  background: var(--sheet);
  box-shadow: var(--lift-2);
}
.ticket__step {
  padding: var(--s6) var(--s5);
  border-right: 1px dashed var(--rule-heavy);
  position: relative;
}
.ticket__step:last-child { border-right: 0; }
.ticket__step h3 {
  font-size: var(--t-md);
  font-stretch: 108%;
  margin: var(--s3) 0 var(--s3);
}
.ticket__step p { font-size: var(--t-sm); color: var(--ink-2); }
.ticket__when {
  margin-top: var(--s4);
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stamp);
}
@media (max-width: 900px) {
  .ticket__step { border-right: 0; border-bottom: 1px dashed var(--rule-heavy); }
  .ticket__step:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------- 12. JOB FILES */

.files { display: grid; gap: var(--s5); }

.file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0;
  border: 2px solid var(--ink);
  background: var(--sheet);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--lift-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
  position: relative;
  overflow: hidden;
}
.file:hover { transform: translateY(-3px); box-shadow: var(--lift-3); }

.file__tab {
  padding: var(--s6);
  background: var(--canary);
  border-right: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 100%;
}
.file__client {
  font: 800 var(--t-lg)/1.02 var(--face-ui);
  font-stretch: 108%;
  letter-spacing: -.025em;
  margin: var(--s2) 0 var(--s3);
}
.file__campaign {
  font: 400 var(--t-doc)/1.4 var(--face-doc);
  color: var(--ink-2);
}
.file__body { padding: var(--s6); }
.file__headline {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: var(--s4);
  max-width: 34ch;
}

/* Results, as a ruled column of figures — the receipts. */
.figures { display: grid; gap: 0; border-top: 1px solid var(--rule); margin-top: var(--s5); }
.figures div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.figures dt { font: 400 var(--t-sm)/1.3 var(--face-doc); color: var(--ink-2); }
.figures dd {
  margin: 0;
  font: 800 var(--t-md)/1 var(--face-ui);
  font-stretch: 108%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.band--carbon .figures dt { color: var(--ink-rev-2); }
.band--carbon .figures div { border-bottom-color: var(--carbon-rule); }
.band--carbon .figures { border-top-color: var(--carbon-rule); }

.figures--big dd { font-size: var(--t-lg); }

@media (max-width: 820px) {
  .file { grid-template-columns: 1fr; }
  .file__tab { border-right: 0; border-bottom: 2px solid var(--ink); }
}

/* ------------------------------------------------------- 13. THE OBJECTIONS */

.objection {
  border-bottom: 1px solid var(--rule);
}
.objection__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s5);
  text-align: left;
  background: none;
  border: 0;
  padding: var(--s5) 0;
  cursor: pointer;
  font: 700 var(--t-md)/1.3 var(--face-ui);
  letter-spacing: -.02em;
  color: var(--ink);
}
.objection__q:hover { color: var(--stamp); }
.objection__sign {
  flex: none;
  width: 1.4rem; height: 1.4rem;
  position: relative;
  transition: transform .3s var(--ease);
}
.objection__sign::before, .objection__sign::after {
  content: ""; position: absolute; background: currentColor;
  left: 50%; top: 50%; translate: -50% -50%;
}
.objection__sign::before { width: 100%; height: 2px; }
.objection__sign::after  { width: 2px; height: 100%; transition: opacity .3s var(--ease); }
.objection__q[aria-expanded="true"] .objection__sign { transform: rotate(180deg); }
.objection__q[aria-expanded="true"] .objection__sign::after { opacity: 0; }

.objection__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--ease);
}
.objection__a > div { overflow: hidden; }
.objection__q[aria-expanded="true"] + .objection__a { grid-template-rows: 1fr; }
.objection__a p { padding-bottom: var(--s5); color: var(--ink-2); }
.objection__a p:first-child { padding-top: 0; }

/* --------------------------------------------------------- 14. THE FORM */

.po {
  background: var(--sheet);
  border: 2px solid var(--ink);
  box-shadow: var(--lift-3);
}
.po__head {
  padding: var(--s5) var(--s6);
  border-bottom: 2px solid var(--ink);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s5); flex-wrap: wrap;
}
.po__body { padding: var(--s6); }

.fieldrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--s5);
  margin-bottom: var(--s5);
}

.field { display: grid; gap: var(--s2); }
.field > label {
  font: 700 var(--t-xs)/1.2 var(--face-doc);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.field .hint { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--face-ui); letter-spacing: .02em; }

.field input, .field textarea, .field select {
  font: 400 var(--t-doc)/1.5 var(--face-doc);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--rule-heavy);
  padding: .65rem .1rem;
  width: 100%;
  border-radius: 0;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%233f4437' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .2rem center; background-size: .75rem;
  padding-right: 1.6rem;
}
.field input:hover, .field textarea:hover, .field select:hover { border-bottom-color: var(--ink-2); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-bottom-color: var(--ballpoint);
  background: rgba(43,70,153,.05);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }

.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-bottom-color: var(--stamp); }

.field .err {
  font: 700 var(--t-xs)/1.4 var(--face-doc);
  letter-spacing: .08em;
  color: var(--stamp-deep);
  text-transform: uppercase;
  display: none;
}
.field[data-invalid="true"] .err { display: block; }

/* Option chips, styled as tick-boxes on a form, never as cards. */
.choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: inline-flex; align-items: center; gap: .55em;
  border: 2px solid var(--rule-heavy);
  padding: .6em .85em;
  font: 400 var(--t-sm)/1 var(--face-doc);
  cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.choice span::before {
  content: ""; width: .8em; height: .8em; flex: none;
  border: 2px solid var(--rule-heavy);
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.choice input[type="radio"] + span::before { border-radius: 50%; }
.choice span:hover { border-color: var(--ink-2); }
.choice input:checked + span { border-color: var(--ink); background: var(--canary); }
.choice input:checked + span::before { background: var(--stamp); border-color: var(--stamp); }
.choice input:focus-visible + span { outline: 3px solid var(--ballpoint); outline-offset: 3px; }

/* Multi-step progress, as a document routing strip. */
.routing {
  display: flex; gap: 0; border: 2px solid var(--ink); border-bottom: 0;
  overflow: hidden;
}
.routing li {
  flex: 1; list-style: none;
  padding: var(--s3) var(--s4);
  font: 700 var(--t-xs)/1.2 var(--face-doc);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  border-right: 1px solid var(--rule);
  background: var(--paper-bar);
  transition: background-color .3s var(--ease), color .3s var(--ease);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.routing li:last-child { border-right: 0; }
.routing li[data-state="done"] { background: var(--sheet); color: var(--ink-2); }
.routing li[data-state="now"]  { background: var(--ink); color: var(--sheet); }

.step[hidden] { display: none; }

.po__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4); flex-wrap: wrap;
  padding-top: var(--s5); margin-top: var(--s5);
  border-top: 1px solid var(--rule);
}

/* Signature line — the close. */
.signature {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px dashed var(--rule-heavy);
  display: grid; gap: var(--s2);
}
.signature__line {
  border-bottom: 2px solid var(--ink);
  height: 2.6rem;
  position: relative;
}
.signature__line::after {
  content: "×";
  position: absolute; left: 0; bottom: .2rem;
  font: 400 1.3rem/1 var(--face-doc); color: var(--ink-3);
}

/* --------------------------------------------------------- 15. THE FOOTER */

.footer {
  background: var(--carbon);
  color: var(--ink-rev);
  padding-block: var(--s8) var(--s6);
  border-top: 2px solid var(--ink);
}
.footer a { color: var(--ink-rev-2); text-decoration: none; }
.footer a:hover { color: var(--ink-rev); text-decoration: underline; text-underline-offset: .2em; }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s7) var(--s5);
  padding-bottom: var(--s7);
  border-bottom: 1px solid var(--carbon-rule);
}
.footer h3 {
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-rev-2);
  margin-bottom: var(--s4);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.footer li { font-size: var(--t-sm); }

.footer__terms {
  padding-top: var(--s5);
  display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  font: 400 var(--t-xs)/1.6 var(--face-doc);
  letter-spacing: .06em;
  color: var(--ink-rev-2);
}

/* ---------------------------------------------------------- 16. UTILITIES */

.stack   { display: grid; gap: var(--s5); }
.stack-6 { display: grid; gap: var(--s6); }
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.pull {
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  max-width: 22ch;
}

.tag {
  display: inline-block;
  font: 700 var(--t-xs)/1 var(--face-doc);
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid currentColor;
  padding: .45em .6em;
  color: var(--ink-2);
}

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--t-lg); margin: var(--s7) 0 var(--s4); }
.prose h3 { font-size: var(--t-md); margin: var(--s6) 0 var(--s3); }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.2em; margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose > *:first-child { margin-top: 0; }

.note {
  font: 400 var(--t-sm)/1.55 var(--face-doc);
  color: var(--ink-3);
  border-left: 1px solid var(--rule-heavy);
  padding-left: var(--s4);
  max-width: 58ch;
}
.band--carbon .note { color: var(--ink-rev-2); border-left-color: var(--carbon-rule); }

/* --------------------------------------------- 17. THE ROUTING SLIP -------
   A small paper slip that arrives bottom-left once someone has read enough to
   be worth asking. Deliberately not a modal: it never blocks the page, never
   traps focus, and closes for good. The craft floor bans modals for tasks that
   need neither interruption nor protected focus, and this is one. */

.slip {
  position: fixed;
  left: var(--s5);
  bottom: var(--s5);
  z-index: 55;
  width: min(23rem, calc(100vw - var(--s5) * 2));
  background: var(--canary);
  border: 2px solid var(--ink);
  box-shadow: var(--lift-3);
  padding: var(--s5);
  transform: translateY(calc(100% + var(--s6))) rotate(-1deg);
  opacity: 0;
  visibility: hidden;
  transition: transform .55s var(--ease), opacity .4s var(--ease), visibility .55s;
}
.slip[data-in="true"] { transform: rotate(-1deg); opacity: 1; visibility: visible; }

.slip h2 {
  font-size: var(--t-md);
  margin: var(--s2) 0 var(--s3);
  letter-spacing: -.025em;
}
.slip p { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s4); }
.slip .btn { width: 100%; justify-content: center; }

.slip__close {
  position: absolute;
  top: var(--s2); right: var(--s2);
  width: 2rem; height: 2rem;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-2);
  font: 400 1.1rem/1 var(--face-doc);
}
.slip__close:hover { color: var(--stamp); }

@media (max-width: 560px) {
  .slip { left: var(--s4); right: var(--s4); bottom: var(--s4); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .slip { transition: none; }
}

/* ------------------------------------------ 18. THE CIRCULATION LIST ------
   Email capture at the end of a memo, in the document's own vocabulary:
   an internal circulation slip you add your name to. */

.circulate {
  margin-top: var(--s8);
  border: 2px solid var(--ink);
  background: var(--sheet);
  padding: var(--s6);
  box-shadow: var(--lift-1);
}
.circulate h2 { font-size: var(--t-md); margin: var(--s2) 0 var(--s3); }
.circulate p { font-size: var(--t-sm); color: var(--ink-2); }
.circulate form {
  display: flex;
  gap: var(--s3);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: var(--s5);
}
.circulate .field { flex: 1 1 14rem; }
.circulate .btn { flex: none; }

/* ------------------------------------------------------------- 19. PHONE */

/* The browser used to build this could not render below 606px wide, so these
   rules are derived from the type and padding values rather than observed.
   They pull the document's generous desk-sized padding in so the ruled tables
   and the routing strip keep their columns on a 360–430px screen. Worth a
   real check on an actual phone. */
@media (max-width: 560px) {
  .band { padding-block: var(--s7); }
  .doc-head { margin-bottom: var(--s5); }

  .items th, .items td { padding-inline: var(--s2); }
  .items th:first-child, .items td:first-child { padding-left: var(--s4); width: 2.6rem; }
  .items th:last-child,  .items td:last-child  { padding-right: var(--s4); }

  .invoice__head, .invoice__total { padding-inline: var(--s4); }
  .po__head, .po__body { padding-inline: var(--s4); }
  .file__tab, .file__body { padding: var(--s5); }

  .figures dd { font-size: var(--t-md); }
  .figures--big dd { font-size: var(--t-md); }
  .figures div { flex-wrap: wrap; gap: var(--s1); }

  .routing li { font-size: .58rem; letter-spacing: .05em; padding-inline: var(--s2); }

  .void-stamp { right: 4%; top: 30%; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media print {
  .masthead, .nav, .btn, .footer { display: none !important; }
  body::before { display: none; }
  body { background: #fff; }
}