/* DRC Digital : site.css (Round 2). The whole design system: tokens, base, header, CTA bar, footer, every
   component and the motion layer. Pages write HTML only. Reference and example markup: work/DESIGN.md.
   Direction: a job record on a blueprint. White sheet, concrete grays, blueprint blue for structure
   (links, diagrams, tints, dark bands), safety orange for the action and the one thing that needs attention.
   Contrast (WCAG 2.x, computed): ink 17.1:1, ink-2 11.8:1, ink-soft 7.4:1 on white (6.7:1 on concrete and
   blue-tint); blue 7.3:1 on white; ink on orange 6.3:1 (buttons never carry white text); on-blue 12.7:1,
   on-blue-soft 8.5:1, blue-lite 7.4:1 on blue-deep; orange 5.0:1 against blue-deep (focus ring on dark). */
:root {
  --white: oklch(1 0 0); /* #ffffff */ --concrete: oklch(0.962 0.004 255); /* #f1f3f5 */
  --concrete-2: oklch(0.925 0.006 255); /* #e4e6ea */ --ink: oklch(0.225 0.014 255); /* #171c22 */
  --ink-2: oklch(0.34 0.014 255); /* #33383f */ --ink-soft: oklch(0.45 0.014 255); /* #50565d */
  --line: oklch(0.86 0.008 255); /* #cdd1d6 */ --line-strong: oklch(0.62 0.012 255); /* #81878d, 3.6:1: field borders */
  --blue: oklch(0.46 0.15 258); /* #1654a9 blueprint blue */ --blue-hover: oklch(0.40 0.14 258); /* #084491 */
  --blue-tint: oklch(0.965 0.014 250); /* #edf4fd */ --blue-deep: oklch(0.30 0.095 258); /* #092c5c dark bands */
  --blue-ink: oklch(0.225 0.06 258); /* #081b37 footer, CTA bar */ --on-blue: oklch(0.97 0.008 250); /* #f1f6fa */
  --on-blue-soft: oklch(0.84 0.03 250); /* #bccdde */ --blue-lite: oklch(0.80 0.09 245); /* #8cc4f4 links and marks on dark */
  --on-blue-line: oklch(0.42 0.08 258); /* dividers on dark */ --orange: oklch(0.71 0.185 48); /* #fa761b safety orange: CTAs, highlights */
  --orange-hover: oklch(0.66 0.18 45); /* #e86518, ink on it 5.1:1 */ --orange-tint: oklch(0.955 0.03 60); /* #ffecdd flagged rows */
  --orange-text: oklch(0.54 0.16 45); /* #b64700 orange as text, 5.4:1 on white */
  --font: 'Libre Franklin', 'Franklin Gothic Medium', 'Franklin Gothic', 'Helvetica Neue', Arial, sans-serif;
  --t-xs: 0.8125rem; --t-sm: 0.9375rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --t-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --t-lg: clamp(1.3125rem, 1.16rem + 0.7vw, 1.75rem); --t-xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.875rem);
  --t-2xl: clamp(2.25rem, 1.45rem + 2.4vw, 4rem);
  --gutter: clamp(1rem, 4vw, 4.5rem); --wrap: 112rem;
  --measure: 70ch; --pad-y: clamp(3.5rem, 7vw, 7rem);
  --gap: clamp(2rem, 4vw, 5rem); --radius: 2px;
  --frame: 1.5px solid var(--ink); --rule: 3px solid var(--ink);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --grid-bg: linear-gradient(oklch(1 0 0 / 0.1) 1px, transparent 1px) 0 0 / 8rem 8rem, linear-gradient(90deg, oklch(1 0 0 / 0.1) 1px, transparent 1px) 0 0 / 8rem 8rem, linear-gradient(oklch(1 0 0 / 0.045) 1px, transparent 1px) 0 0 / 1rem 1rem, linear-gradient(90deg, oklch(1 0 0 / 0.045) 1px, transparent 1px) 0 0 / 1rem 1rem;
  --z-head: 50; --z-bar: 60; --z-skip: 100;
}
/* ---------- base + ultrawide scaling (rem grows, so type, gutters and the container grow together) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (min-width: 112.5em) { html { font-size: 106.25%; } } @media (min-width: 150em) { html { font-size: 112.5%; } } @media (min-width: 187.5em) { html { font-size: 125%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font); font-size: var(--t-base); line-height: 1.6; overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 750; line-height: 1.15; letter-spacing: -0.012em; text-wrap: balance; }
p, ul, ol, dl, dd, figure, table { margin: 0; }
p, li { text-wrap: pretty; }
strong { font-weight: 700; }
::selection { background: var(--blue); color: var(--white); }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: var(--radius); }
.on-dark :focus-visible, .band :focus-visible, .rule-band :focus-visible, .site-foot :focus-visible, .cta-bar :focus-visible { outline-color: var(--orange); }
.band .lead-form :focus-visible { outline-color: var(--blue); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: var(--gutter); top: -5rem; z-index: var(--z-skip); background: var(--ink); color: var(--on-blue); padding: 0.75rem 1rem; font-weight: 700; text-decoration: none; }
.skip:focus { top: 0.5rem; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 3rem; padding: 0.75rem 1.35rem; background: var(--orange); color: var(--ink); border: 1.5px solid var(--orange); border-radius: var(--radius); font: inherit; font-weight: 750; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.16s var(--ease-out); }
.btn:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--ink); }
.btn:active { transform: scale(0.97); }
.btn--line { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-hover); }
.on-dark .btn--line, .band .btn--line { border-color: var(--on-blue-soft); color: var(--on-blue); }
.on-dark .btn--line:hover, .band .btn--line:hover { background: oklch(1 0 0 / 0.08); border-color: var(--on-blue); color: var(--on-blue); }
.btn--sm { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: var(--t-sm); }
.btn--lg { min-height: 3.5rem; padding: 1rem 1.6rem; font-size: var(--t-md); white-space: normal; overflow-wrap: anywhere; }
.more { margin-top: 1rem; }
.more a, a.more { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--blue); padding-bottom: 1px; }
.more a::after, a.more::after { content: "\2192" / ""; display: inline-block; margin-left: 0.4em; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) { .more a:hover::after, a.more:hover::after { transform: translateX(3px); } }
.on-dark .more a, .on-dark a.more, .band .more a, .rule-band .more a { color: var(--on-blue); border-bottom-color: var(--orange); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 2rem; }
.plain { font-weight: 700; }
.plain a { text-decoration-color: var(--blue-lite); }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: var(--z-head); background: var(--white); border-bottom: 1px solid var(--line); }
.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; margin-right: auto; color: var(--ink); font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.01em; text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-name span { font-weight: 500; }
.mark { width: 1.7em; height: 1.7em; flex: none; overflow: visible; }
.mk-d { fill: none; stroke: var(--mk-d, var(--blue)); stroke-width: 3; stroke-linejoin: round; }
.mk-n { fill: var(--mk-n, var(--blue)); stroke: var(--mk-d, var(--blue)); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.mk-v { fill: var(--mk-v, var(--blue-tint)); stroke: var(--mk-vs, var(--ink)); stroke-width: 1.6; } .mk-k { fill: none; stroke: var(--mk-vs, var(--ink)); stroke-width: 1; } .mk-b { fill: var(--orange); transform-box: fill-box; transform-origin: center; }
.mk-t { fill: none; stroke: var(--orange); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 12 100; opacity: 0; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.1rem; list-style: none; margin: 0; padding: 0; }
.site-nav ul a { display: block; padding: 0.55rem 0.6rem; color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; text-decoration: none; }
.site-nav ul a:hover { color: var(--blue-hover); text-decoration: underline; text-decoration-color: var(--blue); }
.site-nav ul a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--blue); }
.nav-cta { display: none; }
.head-actions { display: flex; align-items: center; gap: 0.6rem; }
.head-call { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.5rem 0.85rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); font-size: var(--t-sm); font-weight: 700; text-decoration: none; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease; }
.head-call:hover { border-color: var(--blue); color: var(--blue-hover); }
.head-call .short, .menu-btn { display: none; }
@media (min-width: 75em) { .site-nav { order: 0; margin-inline: auto; } .brand { margin-right: 0; } }
@media (max-width: 74.99em) {
  .site-nav { order: 3; flex-basis: 100%; }
  html:not(.js) .head-row { padding-block: 0.6rem; }
  html:not(.js) .site-nav ul a { padding-inline: 0 0.9rem; }
  html:not(.js) .site-head { position: static; }
  html.js .menu-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 0.9rem; background: var(--white); color: var(--ink); border: var(--frame); border-radius: var(--radius); font: inherit; font-weight: 700; cursor: pointer; }
  html.js .menu-btn::after { content: ""; width: 0.5rem; height: 0.5rem; border: solid var(--ink); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ease-out); }
  html.js .is-open .menu-btn::after { transform: translateY(2px) rotate(-135deg); }
  html.js .site-nav { display: none; }
  html.js .is-open .site-nav { display: grid; gap: 1.25rem; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 4.25rem); overflow-y: auto; padding: 0.5rem var(--gutter) 1.5rem; background: var(--white); border-bottom: var(--frame); }
  html.js .is-open .site-nav ul { flex-direction: column; }
  html.js .is-open .site-nav ul a { padding: 0.8rem 0; font-size: var(--t-md); border-bottom: 1px solid var(--line); }
  html.js .is-open .site-nav ul a[aria-current="page"] { box-shadow: none; color: var(--blue); }
  html.js .is-open .nav-cta { display: grid; gap: 0.6rem; }
}
@media (max-width: 47.99em) { .head-email { display: none; } .head-call .num { display: none; } .head-call .short { display: inline; } .head-row { gap: 0.5rem; } .head-actions { gap: 0.4rem; } .head-call, html.js .menu-btn { padding-inline: 0.7rem; } }
@media (max-width: 23.99em) { .brand { gap: 0.45rem; font-size: 1.1875rem; } }

/* ---------- sticky Call / Email bar (phones) ---------- */
.cta-bar { display: none; }
@media (max-width: 47.99em) {
  body { padding-bottom: calc(3.25rem + env(safe-area-inset-bottom)); }
  .cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); display: grid; grid-template-columns: 1fr 1fr; padding-bottom: env(safe-area-inset-bottom); background: var(--blue-ink); box-shadow: 0 -8px 24px -12px oklch(0.225 0.06 258 / 0.5); }
  .cta-bar a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.25rem; color: var(--on-blue); font-weight: 750; text-decoration: none; }
  .cta-bar a + a { background: var(--orange); color: var(--ink); }
  .cta-bar a:active { opacity: 0.85; }
}

/* ---------- sections and type ---------- */
.section { padding-block: var(--pad-y); }
.section--concrete { background: var(--concrete); }
.section--tint { background: var(--blue-tint); }
.section h2, .has-band h2, .h2 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.02em; max-width: 22ch; }
.intro { margin-top: 1rem; max-width: var(--measure); color: var(--ink-2); font-size: var(--t-md); }
.prose { max-width: var(--measure); } h2 + .prose { margin-top: 1.25rem; }
.wrap.prose { max-width: none; }
.wrap.prose > * { max-width: var(--measure); }
.prose > * + * { margin-top: 1rem; }
.prose h3 { margin-top: 2rem; font-size: var(--t-lg); }
.lead { margin-top: 1.25rem; max-width: 46ch; color: var(--ink-2); font-size: var(--t-md); line-height: 1.5; }
.fineprint { margin-top: 1.25rem; max-width: 60ch; color: var(--ink-soft); font-size: var(--t-sm); }
.eyebrow { display: flex; align-items: baseline; gap: 0.75rem; color: var(--ink-2); font-size: var(--t-sm); font-weight: 650; }
.eyebrow::before { content: ""; flex: none; width: 2rem; height: 3px; background: var(--orange); transform: translateY(-0.3em); }

/* ---------- hero (home, and .hero--inner for inner pages): copy on the wrap line, photo bleeds right ---------- */
.hero { container-type: inline-size; border-bottom: 1px solid var(--line); }
.hero-in { display: grid; }
.hero-copy { padding: clamp(2rem, 5vw, 4.5rem) var(--gutter) clamp(2.5rem, 5vw, 4.5rem); }
.hero h1 { margin-top: 1.25rem; font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.028em; line-height: 1.04; max-width: 19ch; }
.hero-copy > h1:first-child { margin-top: 0; }
.hero-ph { position: relative; overflow: hidden; background: var(--concrete-2); }
.hero-ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 55% 50%; }
@media (min-width: 60em) {
  .hero-in { --edge: max(var(--gutter), (100cqw - var(--wrap)) / 2); grid-template-columns: var(--edge) minmax(0, 56fr) minmax(0, 44fr) var(--edge); min-height: min(48rem, calc(100svh - 4.25rem)); }
  .hero-copy { grid-column: 2; align-self: center; padding-inline: 0 clamp(2rem, 4vw, 5rem); }
  .hero-ph { grid-column: 3 / 5; }
  .hero-ph img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .hero--inner .hero-in { min-height: min(34rem, calc(100svh - 4.25rem)); }
}
.hero--inner h1 { font-size: var(--t-2xl); max-width: 20ch; } .hero + .has-band { padding-top: clamp(1rem, 2.5vw, 2.5rem); }

/* ---------- inner-page head without a photo ---------- */
.page-head { padding-block: clamp(2.75rem, 6vw, 5rem) clamp(2.25rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; max-width: 20ch; }

/* ---------- round 2 builder additions (v2_build): four small modifiers ---------- */
.ph-band.ph-band--short img { height: clamp(7rem, 13vw, 17rem); object-position: 50% 0; }
.page-head .eyebrow + h1 { margin-top: 1.25rem; }
.ways > h2:not(:first-child) { margin-top: 2.75rem; }
.card--pick { border-top: 6px solid var(--orange); } .svc .ph img { aspect-ratio: 3 / 2; } .ph--top img { object-position: 50% 20%; }
/* ---------- photos: full-bleed band, side photo, photo + text split ---------- */
.ph-band { overflow: hidden; background: var(--concrete-2); }
.ph-band img { width: 100%; height: clamp(11rem, 24vw, 34rem); object-fit: cover; }
.ph { overflow: hidden; background: var(--concrete-2); }
.ph img { width: 100%; object-fit: cover; }
.photo-split { display: grid; gap: 2rem var(--gap); }
@media (min-width: 60em) {
  .photo-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .photo-split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .photo-split--rev > .ph { order: 2; }
  .ph--stick { position: sticky; top: 6rem; }
}

/* ---------- home: sound familiar ---------- */
.pains { list-style: none; padding: 0; margin-top: 2rem; border-bottom: 1px solid var(--line); }
.pains li { position: relative; padding: 1.2rem 0 1.2rem 2.5rem; border-top: 1px solid var(--line); font-size: var(--t-md); line-height: 1.5; max-width: 60ch; }
.pains li::before { content: ""; position: absolute; left: 0; top: 1.55rem; width: 1.1rem; height: 1.1rem; border: 2px solid var(--orange-text); background: var(--white); }
.punch { margin-top: 2rem; max-width: 44ch; font-size: var(--t-lg); font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; }

/* ---------- home: what we do (ruled cells) ---------- */
.cells { display: grid; gap: 1px; margin-top: 2.5rem; background: var(--line); border-top: 3px solid var(--blue); border-bottom: 1px solid var(--line); }
@media (min-width: 40em) { .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70em) { .cells { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cell { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem clamp(1rem, 2vw, 1.75rem) 1.5rem; background: var(--white); }
.cell h3 { font-size: var(--t-lg); letter-spacing: -0.015em; }
.cell p { color: var(--ink-2); }
.cell .more { margin-top: auto; padding-top: 0.5rem; }

/* ---------- dark blueprint band (home #the-rule; reusable) ---------- */
.has-band > .wrap { padding-block: var(--pad-y); }
.rule-band { background: var(--grid-bg), var(--blue-deep); color: var(--on-blue); }
.rule-band h2 { color: var(--on-blue); }
.rule-text { display: grid; gap: 1rem var(--gap); margin-top: 1.25rem; }
@media (min-width: 75em) { .rule-text { grid-template-columns: repeat(2, minmax(0, var(--measure))); } }
.rule-text p { color: var(--on-blue-soft); font-size: var(--t-md); line-height: 1.55; }
.rule-text p:first-child { color: var(--on-blue); }
.figs { display: grid; gap: 3rem var(--gap); margin-top: clamp(2.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 80em) { .figs { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.rule-band .fig figcaption, .rule-band .fig-cap { color: var(--on-blue-soft); }

/* ---------- sheets: records and sample deliverables ---------- */
.sheet { background: var(--white); color: var(--ink); border: var(--frame); }
.rule-band .sheet { border-color: var(--white); box-shadow: 0 30px 60px -30px oklch(0.12 0.06 258 / 0.7); }
.sheet-head { display: grid; gap: 0.4rem; padding: 1.25rem clamp(1rem, 2.5vw, 1.5rem); border-bottom: 1px solid var(--ink); }
.sheet-title { font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.sheet-sub { color: var(--ink-2); font-size: var(--t-sm); }
.sheet-sub .sep { padding-inline: 0.3em; color: var(--ink-soft); }
.sheet-body { padding: 1.25rem clamp(1rem, 2.5vw, 1.5rem) 1.5rem; }
.sheet-foot { padding: 0.9rem clamp(1rem, 2.5vw, 1.5rem); border-top: 1px solid var(--ink); color: var(--ink-2); font-size: var(--t-sm); }
.fig { margin-top: 2.5rem; }
.figs .fig { margin-top: 0; }
.fig figcaption, .sample figcaption, .fig-cap { margin-top: 0.75rem; color: var(--ink-soft); font-size: var(--t-sm); font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.id { white-space: nowrap; }

/* Figure 1: one job record. Stage rows, a check box per stage, a status chip. */
:is(.record, .payrule) :is(th, td):first-child { padding-left: clamp(1rem, 2.5vw, 1.5rem); }
:is(.record, .payrule) :is(th, td):last-child { padding-right: clamp(1rem, 2.5vw, 1.5rem); }
.record tbody th { white-space: nowrap; }
.stage { display: flex; align-items: center; gap: 0.7rem; }
.tick { position: relative; flex: none; width: 1.15rem; height: 1.15rem; border: 1.5px solid var(--blue); background: var(--blue); }
.tick::after { content: ""; position: absolute; left: 0.33rem; top: 0.1rem; width: 0.3rem; height: 0.6rem; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.is-flag .tick { border-color: var(--orange-text); background: var(--orange); }
.is-flag .tick::after { border-color: var(--ink); }
.chip { display: inline-grid; padding: 0.25rem 0.6rem; border: 1.5px solid var(--blue); border-radius: var(--radius); background: var(--blue-tint); color: var(--blue-hover); font-size: var(--t-xs); font-weight: 750; line-height: 1.25; white-space: nowrap; }
.chip > * { grid-area: 1 / 1; }
.chip--flag { background: var(--orange); border-color: var(--orange); color: var(--ink); }
html:not(.motion) .chip-w { display: none; }
.rtable tr.is-flag > * { background: var(--orange-tint); }

/* Figure 2: one vendor invoice split across jobs (tree: invoice, bus line, job cards, running total) */
.inv { display: grid; gap: 0.15rem; padding: 1rem 1.25rem; background: var(--white); border: var(--frame); }
.inv-title { font-size: var(--t-md); font-weight: 800; }
.inv-total { font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.01em; }
.inv-note { color: var(--ink-soft); font-size: var(--t-xs); font-weight: 700; }
.alloc-split { position: relative; margin-left: 1.25rem; padding: 0.7rem 0 0 1.4rem; color: var(--ink-2); font-size: var(--t-sm); font-weight: 650; }
.alloc-split::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--blue); transform-origin: top; }
.alloc-jobs { list-style: none; display: grid; gap: 0.6rem; margin: 0 0 0 1.25rem; padding: 0.6rem 0 0 1.4rem; }
.alloc-jobs li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; align-items: baseline; padding: 0.6rem 0.9rem; background: var(--white); border: 1.5px solid var(--blue); }
.alloc-jobs li::before { content: ""; position: absolute; left: calc(-1.4rem - 1.5px); top: calc(-0.6rem - 1.5px); width: 2px; height: calc(100% + 1.2rem + 3px); background: var(--blue); transform-origin: top; }
.alloc-jobs li:last-child::before { height: calc(50% + 0.6rem + 2.5px); }
.alloc-jobs li::after { content: ""; position: absolute; left: calc(-1.4rem - 1.5px); top: calc(50% - 1px); width: 1.4rem; height: 2px; background: var(--blue); transform-origin: left; }
.job-id { font-weight: 650; font-size: var(--t-sm); }
.job-amt { grid-row: span 2; align-self: center; font-size: var(--t-md); font-weight: 800; font-variant-numeric: tabular-nums; }
.job-pct { color: var(--ink-soft); font-size: var(--t-xs); font-weight: 700; }
.alloc-total { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--ink); font-weight: 700; line-height: 1.5; }
.alloc-total .ok { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.25em; vertical-align: -0.2em; fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Figure 3 (How we work, Sample D): sub pay on the lower of submitted and approved SF */
.payrule td { font-variant-numeric: tabular-nums; }
.payrule .is-higher { color: var(--ink-soft); }
.pay-v { display: inline-block; padding: 0.1rem 0.45rem; border: 2px solid var(--orange); border-radius: var(--radius); font-weight: 800; }
.pay-why { display: block; margin-top: 0.25rem; color: var(--ink-soft); font-size: var(--t-xs); font-weight: 650; }

/* ---------- tables (stack on small screens with data-label) ---------- */
.rtable { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.5; }
.rtable th, .rtable td { padding: 0.85rem 1rem 0.85rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.rtable thead th { padding-block: 0.7rem; color: var(--ink-soft); font-size: var(--t-xs); font-weight: 700; border-bottom: 1px solid var(--ink); }
.rtable tbody th { font-weight: 700; }
.rtable tbody tr:last-child > * { border-bottom: 0; }
.rtable.record td, .rtable.record th, .rtable.payrule td, .rtable.payrule th { vertical-align: middle; }
.rtable--lg { font-size: var(--t-base); border-top: var(--rule); }
.rtable--lg th, .rtable--lg td { padding-block: 1.1rem; }
.rtable--lg tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.cap td:first-child { font-weight: 600; }
@media (min-width: 40em) { .cap td:first-child { width: 45%; } }
* + .rtable--lg, * + .table-scroll { margin-top: 2rem; }
.cap td:last-child { color: var(--ink-2); }
@media (max-width: 39.99em) {
  .rtable--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rtable--stack tr { display: block; padding: 0.9rem clamp(1rem, 2.5vw, 1.5rem); border-bottom: 1px solid var(--line); }
  .rtable.rtable--stack tbody tr > *, .rtable--stack th, .rtable--stack td { display: block; width: auto; padding: 0.15rem 0; border: 0; }
  .rtable--stack td[data-label]::before { content: attr(data-label); display: block; margin-top: 0.4rem; color: var(--ink-soft); font-size: var(--t-xs); font-weight: 700; }
  .rtable--lg.rtable--stack tr { padding-inline: 0; }
  .rtable--stack tr.is-flag { background: var(--orange-tint); }
  .rtable--stack tr.is-flag > * { background: none; }
  .record tbody th { white-space: normal; }
}

/* ---------- labels (text first; color only repeats it) ---------- */
.label { display: inline-block; padding: 0.3rem 0.65rem; border: 1.5px solid var(--ink); border-radius: var(--radius); font-size: var(--t-xs); font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; }
.label.label--client { background: var(--blue); border-color: var(--blue); color: var(--white); }
.label.label--inhouse { background: var(--ink); color: var(--on-blue); }
.label.label--founder { background: var(--white); color: var(--ink); border-style: dashed; }
.label + h2, .label + h3 { margin-top: 0.9rem; }

/* ---------- home: why rows ---------- */
.why { margin-top: 2.5rem; border-top: var(--rule); }
.why-row { display: grid; gap: 0.75rem; padding-block: 1.75rem; border-bottom: 1px solid var(--line); }
.why-row h3 { font-size: var(--t-lg); letter-spacing: -0.015em; }
.why-row p { max-width: var(--measure); color: var(--ink-2); }
.why-note { margin-top: 1.75rem; max-width: 52ch; padding: 1.1rem 1.35rem; background: var(--blue-tint); border: 1px solid oklch(0.86 0.04 252); font-size: var(--t-md); font-weight: 650; line-height: 1.45; }
@media (min-width: 75em) { .why-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0.75rem 2.5rem; } }

/* ---------- proof cards (folder tab label) ---------- */
.proof-grid { display: grid; gap: 3.25rem 1.5rem; margin-top: 4rem; }
@media (min-width: 60em) { .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem clamp(1rem, 2.5vw, 1.5rem) 1.5rem; background: var(--white); border: var(--frame); }
.card > .label:first-child { position: absolute; top: 0; left: -1.5px; border-radius: var(--radius) var(--radius) 0 0; transform: translateY(-100%); }
.card h3 { font-size: var(--t-lg); letter-spacing: -0.015em; }
.card p { color: var(--ink-2); }
.card .more { margin-top: auto; padding-top: 0.5rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0 3rem; margin-top: 2.5rem; }
@media (min-width: 56em) { .faq--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa { padding-block: 1.5rem 2.25rem; border-top: var(--rule); max-width: 48rem; }
.qa h3 { font-size: var(--t-md); line-height: 1.3; }
.qa p { margin-top: 0.75rem; color: var(--ink-2); }
.qa .more { margin-top: 1rem; }

/* ---------- short contact form ---------- */
.lead-form { padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--white); color: var(--ink); border-radius: var(--radius); }
.band .lead-form { box-shadow: 0 30px 60px -30px oklch(0.12 0.06 258 / 0.7); }
.lead-form h2, .lead-form h3 { font-size: var(--t-lg); letter-spacing: -0.015em; color: var(--ink); }
.lead-form > p { margin-top: 0.5rem; max-width: 60ch; color: var(--ink-2); }
.lead-form .form-req { color: var(--ink-soft); font-size: var(--t-sm); }
.fields { display: grid; gap: 1.1rem 1.25rem; margin-top: 1.5rem; }
@media (min-width: 36em) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field--full { grid-column: 1 / -1; } }
.field label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; font-size: var(--t-sm); font-weight: 700; }
.field .need { color: var(--ink-soft); font-size: var(--t-xs); font-weight: 650; }
.field input, .field textarea { display: block; width: 100%; margin-top: 0.4rem; padding: 0.7rem 0.8rem; min-height: 3rem; background: var(--white); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--radius); font: inherit; line-height: 1.4; transition: border-color 0.15s ease; }
.field textarea { resize: vertical; min-height: 8rem; }
.field input:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--orange-text); }
.field ::placeholder { color: var(--ink-soft); opacity: 1; }
.help { margin-top: 0.35rem; color: var(--ink-soft); font-size: var(--t-xs); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-send { display: grid; justify-items: start; gap: 0.6rem; margin-top: 1.5rem; }
.form-send p, .form-alt { color: var(--ink-soft); font-size: var(--t-sm); }
.form-alt { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.form-error { margin-bottom: 1.25rem; padding: 0.9rem 1.1rem; background: var(--orange-tint); border: 1.5px solid var(--orange-text); color: var(--ink); font-weight: 650; }
[hidden] { display: none !important; }

/* ---------- closing band + footer ---------- */
.band { padding-block: var(--pad-y); background: var(--grid-bg), var(--blue-deep); color: var(--on-blue); } .band .mark { --mk-d: var(--blue-lite); --mk-n: var(--blue-lite); --mk-v: transparent; --mk-vs: var(--blue-lite); } .mark--xl { display: block; width: clamp(3.75rem, 5vw, 5.5rem); height: clamp(3.75rem, 5vw, 5.5rem); margin-bottom: 1.5rem; }
.band-grid { display: grid; gap: 2.5rem var(--gap); }
@media (min-width: 64em) { .band-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } .band-grid > :first-child { position: sticky; top: 6.5rem; } }
.band h2 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.028em; line-height: 1.05; max-width: 14ch; }
.band-grid > div > p { margin-top: 1rem; max-width: 46ch; color: var(--on-blue-soft); font-size: var(--t-md); line-height: 1.55; }
.band .plain { color: var(--on-blue); font-size: var(--t-md); }
.band a:not(.btn), .site-foot a { color: var(--on-blue); text-decoration-color: var(--blue-lite); }
.band a:not(.btn):hover, .site-foot a:hover { color: var(--white); }
.band .lead-form a:not(.btn) { color: var(--ink); text-decoration-color: var(--blue); }
.band .lead-form a:not(.btn):hover { color: var(--blue-hover); }
.band ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.site-foot { --mk-d: var(--blue-lite); --mk-n: var(--blue-lite); --mk-v: transparent; --mk-vs: var(--blue-lite); padding-block: 3.5rem 2rem; background: var(--blue-ink); color: var(--on-blue-soft); font-size: var(--t-sm); line-height: 1.6; }
.foot-grid { display: grid; gap: 2rem var(--gap); }
@media (min-width: 60em) { .foot-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr); } }
.foot-brand { display: flex; align-items: center; gap: 0.6rem; color: var(--on-blue); font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.01em; }
.foot-grid p + p { margin-top: 0.5rem; }
.foot-nav ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 0 2rem; }
.foot-nav a { display: inline-block; padding-block: 0.3rem; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--on-blue-line); font-size: var(--t-xs); }
.foot-legal .credits { max-width: 90ch; }

/* ---------- inner-page components (Services, How we work, Work, About, FAQ, Contact) ---------- */
.list { list-style: none; padding: 0; display: grid; gap: 0.75rem; max-width: var(--measure); }
.list > li { position: relative; padding-left: 1.5rem; }
.list > li::before { content: ""; position: absolute; left: 0.1rem; top: 0.6em; width: 0.45rem; height: 0.45rem; background: var(--blue); }
* + .list { margin-top: 1rem; }
.checks { list-style: none; padding: 0; display: grid; gap: 0.9rem; max-width: var(--measure); }
.checks > li { position: relative; padding-left: 2.1rem; font-size: var(--t-md); line-height: 1.45; }
.checks > li::before { content: ""; position: absolute; left: 0.35rem; top: 0.12em; width: 0.5rem; height: 0.95rem; border: solid var(--blue); border-width: 0 3px 3px 0; transform: rotate(45deg); }
* + .checks { margin-top: 1.5rem; }
.numbered { list-style: none; padding: 0; display: grid; gap: 1.1rem 3rem; counter-reset: n; }
.numbered > li { position: relative; padding-left: 2.9rem; counter-increment: n; }
.numbered > li::before { content: counter(n); position: absolute; left: 0; top: -0.1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1.5px solid var(--blue); color: var(--blue); font-size: var(--t-sm); font-weight: 800; }
@media (min-width: 56em) { .numbered--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
* + .numbered { margin-top: 1.5rem; }
.jumps { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }
.jumps a { display: inline-block; padding: 0.6rem 0.95rem; border: var(--frame); border-radius: var(--radius); color: var(--ink); font-size: var(--t-sm); font-weight: 650; text-decoration: none; }
.jumps a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
* + .note { margin-top: 2rem; }
.note { max-width: var(--measure); padding: 1.1rem 1.35rem; background: var(--concrete); border: 1px solid var(--line); color: var(--ink-2); }
.svc { display: grid; gap: 2rem var(--gap); margin-top: 2rem; }
@media (min-width: 60em) { .svc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.svc h3 { padding-top: 0.75rem; border-top: 1px solid var(--ink); font-size: var(--t-sm); font-weight: 750; }
.svc h3 + * { margin-top: 0.75rem; }
.svc > div > * + h3 { margin-top: 2rem; }
.svc > div > :is(p, ul, ol) + p:not(.note, .more) { margin-top: 1rem; }
.steps { list-style: none; padding: 0; margin-top: 2.5rem; border-top: var(--rule); }
.step { display: grid; gap: 0.75rem 3rem; padding-block: 2rem; border-bottom: 1px solid var(--line); }
@media (min-width: 56em) { .step { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.step h3 { font-size: var(--t-lg); letter-spacing: -0.015em; }
.step-n { display: block; margin-bottom: 0.35rem; color: var(--blue); font-size: var(--t-xl); font-weight: 800; line-height: 1; }
.step p { max-width: var(--measure); color: var(--ink-2); }
.step-meta { display: grid; gap: 0.75rem; margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--blue-tint); max-width: var(--measure); }
.step-meta > div { display: grid; gap: 0.1rem 1.25rem; }
@media (min-width: 40em) { .step-meta > div { grid-template-columns: 8.5rem minmax(0, 1fr); } }
.step-meta dt { font-size: var(--t-sm); font-weight: 750; }
.step-meta dd { color: var(--ink-2); }
.samples { display: grid; gap: 3.5rem var(--gap); margin-top: 3rem; }
@media (min-width: 100em) { .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  :is(#in-house, #books, #founder) .prose { max-width: none; } :is(#in-house, #books, #founder) .prose > :not(.list) { max-width: var(--measure); }
  :is(#in-house, #books, #founder) .list { display: block; column-count: 2; column-gap: 4rem; max-width: calc(2 * var(--measure) + 4rem); } :is(#in-house, #books, #founder) .list > li { break-inside: avoid; margin-bottom: 0.75rem; } }
.sample > h3 { margin-bottom: 1rem; font-size: var(--t-lg); }
.sample > h3 + p { margin-bottom: 1.25rem; max-width: var(--measure); color: var(--ink-2); }
.spec { list-style: none; padding: 0; }
.spec > li { padding-block: 0.9rem; border-top: 1px solid var(--line); }
.spec > li:first-child { border-top: 0; padding-top: 0; }
.spec ul, .spec ol { margin-top: 0.5rem; padding-left: 1.25rem; color: var(--ink-2); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; margin-top: 0.6rem; background: var(--line); border: 1px solid var(--line); }
.kv > div { padding: 0.5rem 0.75rem; background: var(--white); }
.kv dt { color: var(--ink-soft); font-size: var(--t-xs); font-weight: 700; }
.kv dd { font-weight: 700; }
.boxes { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.4rem; }
.box { display: inline-flex; align-items: center; gap: 0.5rem; }
.box::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--ink); background: var(--white); }
.st { white-space: nowrap; }
.st::before { content: ""; display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.45rem; vertical-align: -0.05em; border: 1.5px solid var(--blue); }
.st--yes::before { background: var(--blue); }
.st--part::before { background: linear-gradient(135deg, var(--blue) 50%, var(--white) 50%); }
.st--no::before { border-color: var(--orange-text); background: linear-gradient(to top right, var(--white) 43%, var(--orange-text) 43% 57%, var(--white) 57%); }
.st--unk::before { border-style: dashed; border-color: var(--ink-soft); }
.matrix .type-row th, .matrix .type-row td { color: var(--ink-2); font-weight: 600; font-size: var(--t-xs); border-bottom: 1px solid var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: 0.75rem; color: var(--ink-2); font-size: var(--t-xs); }
.table-scroll { overflow-x: auto; }

/* ---------- motion: opt-in only. The head script adds html.motion (JS on, IntersectionObserver present,
   no reduced motion); site.js adds .in to a [data-anim] block when it scrolls into view. Without .motion
   every element sits in its end state, which is also what print and reduced motion show. ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } } @keyframes settle { from { opacity: 0; transform: scale(1.04); } } @keyframes node-on { from { fill: var(--white); transform: scale(0.6); } } @keyframes bubble { from { transform: translateX(-4.4px); } }
@keyframes trace { 0% { stroke-dashoffset: 12; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -88; opacity: 0; } } @keyframes dline { 0% { stroke-dashoffset: 66; } 70% { stroke-dashoffset: 20.6; } 100% { stroke-dashoffset: 0; } } @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .mark.play .mk-d { stroke-dasharray: 66 66; animation: dline 1.7s linear 0.1s both; } .mark.play .mk-t { animation: trace 1.2s linear 0.1s both; } .mark.play .mk-b { animation: bubble 0.9s var(--ease-io) 1.8s both; }
  .mark.play .mk-n { animation: node-on 0.28s var(--ease-out) both; } /* .play is set by site.js: every load + hover on the header mark; [data-loop] marks replay every 7s on screen */
  .mark.play .mk-n:nth-of-type(1) { animation-delay: 0.1s; } .mark.play .mk-n:nth-of-type(2) { animation-delay: 0.47s; } .mark.play .mk-n:nth-of-type(3) { animation-delay: 0.93s; } .mark.play .mk-n:nth-of-type(4) { animation-delay: 1.3s; }
  html.motion .hero-copy > * { animation: rise 0.6s var(--ease-out) both; }
  html.motion .hero-copy > :nth-child(2) { animation-delay: 60ms; } html.motion .hero-copy > :nth-child(3) { animation-delay: 120ms; } html.motion .hero-copy > :nth-child(4) { animation-delay: 180ms; } html.motion .hero-copy > :nth-child(n+5) { animation-delay: 240ms; }
  html.motion .hero-ph img { animation: settle 1.2s var(--ease-out) both; }
  /* list stagger: pains, cells, proof cards */
  html.motion .stg > * { transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
  html.motion [data-anim]:not(.in) .stg > *, html.motion .stg[data-anim]:not(.in) > * { opacity: 0; transform: translateY(14px); }
  html.motion .stg > :nth-child(2) { transition-delay: 70ms; } html.motion .stg > :nth-child(3) { transition-delay: 140ms; } html.motion .stg > :nth-child(4) { transition-delay: 210ms; } html.motion .stg > :nth-child(5) { transition-delay: 280ms; }
  /* photo bands: a left-to-right reveal, like a line being snapped */
  html.motion .ph-band[data-anim] img { transition: clip-path 1.1s var(--ease-io), transform 1.6s var(--ease-out); }
  html.motion .ph-band[data-anim]:not(.in) img { clip-path: inset(0 100% 0 0); transform: scale(1.05); }
  /* Figure 1: rows fill 0.4s apart; chip goes from Waiting to its status */
  html.motion .record tbody tr { --d: 0.15s; }
  html.motion .record tbody tr:nth-child(2) { --d: 0.55s; } html.motion .record tbody tr:nth-child(3) { --d: 0.95s; } html.motion .record tbody tr:nth-child(4) { --d: 1.35s; } html.motion .record tbody tr:nth-child(5) { --d: 1.75s; }
  html.motion .record tbody tr > * { transition: background-color 0.3s ease var(--d); }
  html.motion .record tbody td:not(.st-cell) { transition: opacity 0.36s var(--ease-out) var(--d), transform 0.36s var(--ease-out) var(--d), background-color 0.3s ease var(--d); }
  html.motion .record .tick, html.motion .record .chip { transition: background-color 0.24s ease var(--d), border-color 0.24s ease var(--d), color 0.24s ease var(--d), transform 0.28s var(--ease-out) var(--d); }
  html.motion .record .tick::after { transition: transform 0.24s var(--ease-out) var(--d); }
  html.motion .chip-w, html.motion .chip-f { transition: opacity 0.24s ease var(--d), filter 0.24s ease var(--d); }
  html.motion .record[data-anim]:not(.in) td:not(.st-cell) { opacity: 0; transform: translateX(-8px); }
  html.motion .record[data-anim]:not(.in) tr > * { background-color: transparent; }
  html.motion .record[data-anim]:not(.in) .tick { background: var(--white); border-color: var(--line-strong); }
  html.motion .record[data-anim]:not(.in) .tick::after { transform: rotate(45deg) scale(0); }
  html.motion .record[data-anim]:not(.in) .chip { background: var(--concrete); border-color: var(--line-strong); color: var(--ink-soft); }
  html.motion .record[data-anim]:not(.in) .chip--flag { transform: scale(0.94); }
  html.motion .record[data-anim]:not(.in) .chip-f { opacity: 0; filter: blur(2px); }
  html.motion .record[data-anim].in .chip-w { opacity: 0; filter: blur(2px); }
  /* Figure 2: invoice lands, three allocations slide out 0.3s apart, total runs up, check draws */
  html.motion .split-fig .inv { transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
  html.motion .split-fig .alloc-split { transition: opacity 0.3s ease 0.35s; }
  html.motion .split-fig .alloc-split::before { transition: transform 0.3s var(--ease-out) 0.35s; }
  html.motion .alloc-jobs li { --d: 0.6s; transition: opacity 0.42s var(--ease-out) var(--d), transform 0.42s var(--ease-out) var(--d); }
  html.motion .alloc-jobs li:nth-child(2) { --d: 0.9s; } html.motion .alloc-jobs li:nth-child(3) { --d: 1.2s; }
  html.motion .alloc-jobs li::before, html.motion .alloc-jobs li::after { transition: transform 0.3s var(--ease-out) calc(var(--d) - 0.15s); }
  html.motion .split-fig .alloc-total { transition: opacity 0.3s ease 0.5s; }
  html.motion .split-fig .ok path { stroke-dasharray: 1; transition: stroke-dashoffset 0.35s var(--ease-out) 1.8s; } html.motion .split-fig .ok-t { transition: opacity 0.3s ease 1.75s; }
  html.motion .split-fig[data-anim]:not(.in) .inv { opacity: 0; transform: translateY(8px); }
  html.motion .split-fig[data-anim]:not(.in) .alloc-split, html.motion .split-fig[data-anim]:not(.in) .alloc-total { opacity: 0; }
  html.motion .split-fig[data-anim]:not(.in) .alloc-split::before, html.motion .split-fig[data-anim]:not(.in) li::before { transform: scaleY(0); }
  html.motion .split-fig[data-anim]:not(.in) li { opacity: 0; transform: translateX(-1.25rem); }
  html.motion .split-fig[data-anim]:not(.in) li::after { transform: scaleX(0); }
  html.motion .split-fig[data-anim]:not(.in) .ok path { stroke-dashoffset: 1; } html.motion .split-fig[data-anim]:not(.in) .ok-t { opacity: 0; }
  /* Figure 3: per row, submitted, then approved, then the lower one moves into Pay on; the higher greys */
  html.motion .payrule tbody tr { --d: 0.1s; }
  html.motion .payrule tbody tr:nth-child(2) { --d: 1.4s; }
  html.motion .payrule .pr-sub { transition: opacity 0.3s ease var(--d), color 0.3s ease calc(var(--d) + 0.75s); }
  html.motion .payrule .pr-app { transition: opacity 0.3s ease calc(var(--d) + 0.35s), color 0.3s ease calc(var(--d) + 0.75s); }
  html.motion .payrule .pay-v { transition: opacity 0.4s var(--ease-out) calc(var(--d) + 0.75s), transform 0.4s var(--ease-out) calc(var(--d) + 0.75s), border-color 0.3s ease calc(var(--d) + 1s); }
  html.motion .payrule .pay-why { transition: opacity 0.3s ease calc(var(--d) + 0.9s); }
  html.motion .payrule[data-anim]:not(.in) :is(.pr-sub, .pr-app, .pay-why) { opacity: 0; }
  html.motion .payrule[data-anim]:not(.in) .is-higher { color: var(--ink); }
  html.motion .payrule[data-anim]:not(.in) .pay-v { opacity: 0; transform: translateX(-1rem); border-color: transparent; }
}

/* ---------- print: everything visible, no chrome ---------- */
@media print {
  .site-head, .skip, .cta-bar, .lead-form, .actions .btn, .band .btn, .hero-ph, .ph-band, .ph, .chip-w, .mk-t { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-anim], [data-anim] *, [data-anim]::before, [data-anim] *::before, [data-anim] *::after { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  body { font-size: 11pt; padding: 0; }
  .section, .band, .has-band > .wrap { padding-block: 1.25rem; }
  .band, .rule-band, .site-foot, .section--concrete, .section--tint { background: none !important; color: #000; }
  .band p, .rule-band p, .rule-band h2, .band h2, .site-foot, .band .plain, .rule-band figcaption { color: #000 !important; }
  .sheet, .card, .qa, .fig { break-inside: avoid; }
}