/* scientific-business.org — one stylesheet, no build step, no JS, no external requests.
   Edit this file directly; the Cloudflare Worker serves /site as-is.

   The register: broadsheet. Ink on warm off-white, one red, 2px rules, zero
   corner radius, everything flush left, numbers doing the organising. Audits
   are diagnoses and automations are experiments, so the page is built like a
   ruled ledger — sections are numbered entries, the offer ladder is an
   account, not a row of cards. */

/* ── TWEAK THESE ──────────────────────────────────────────────────────────
   The whole site's adjustable surface, in one place. Change a value here and
   every page follows; nothing else needs touching, and there is no build step.

   --bg / --tint      the paper. Lower the warmth toward #faf8f4 for cooler,
                      push toward #f5ead8 for more yellowed paper.
   --mark / --mark-deep  the atom blue, and the same blue at text scale (links,
                      numerals). --mark-deep must stay dark enough for body copy.
   --accent-deep      the focus ring. High-contrast warm outline against every ground.
   --ease-out / --t-press / --t-state
                      motion. --t-press is button press feedback, --t-state is a
                      hover state change. Both stay under 200ms; raise them and the
                      site starts to feel slow rather than considered.
   --btn              the primary button and the BOOK A CALL nav link.
   --save             the green SAVE markers on the Junto term prices.
   --night            the two inverse bands (claims strip, Book-a-call section).
   --night-line       the purple seam inside the claims strip.
   --claim-rule       thickness of that seam. 2px default, try 3px or 1px.
   --claim-cols        how the claims strip divides above 62rem. repeat(5, 1fr)
                      by default; it stacks to one per row on narrow screens.
   --claim-size       claim strip type size.
   --rule-weight      the structural 2px rules between sections.
   --print-size       the /audit one-page knob. See the note below it.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Modernist geometry, Organic ground, Nocturne night bands.
     Deep indigo ink on warm cream = 18th-century printing without the costume;
     terracotta carries structure and the primary action; the night bands are
     where Nocturne's blurple lives, as a line, never a flood. */
  --ink: #161826;
  --body: #34313a;
  --muted: #6d675f;
  --rule: #161826;              /* structural 2px rules */
  --tint: #efe9dd;
  --bg: #f7f3ea;
  --night: #161826;             /* the inverse band */
  --night-line: #9184d9;        /* Nocturne's accent — only ever on night */
  --accent-deep: #a24f18;       /* warm: the focus ring, and the only warm ink left */
  --accent-2: #7a8a5e;          /* sage: the honest second voice */
  --mark: #2b6fd4;              /* the uhstray blue the wordmark's atom carries */
  --mark-deep: #1d4fa3;         /* the same blue at text scale: links and numerals */
  --claim-rule: 2px;            /* the purple seam in the claims strip */
  --claim-cols: repeat(5, 1fr);  /* claims strip columns above 62rem */
  --claim-size: .8rem;
  --btn: #1d4fa3;               /* the primary action: the atom blue at button scale */
  --save: #3f6b2c;              /* the savings markers on the Junto terms */
  --rule-weight: 2px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);  /* fast out, soft landing */
  --t-press: 140ms;             /* press feedback */
  --t-state: 180ms;             /* hover state change */
  /* a real spring, as a linear() curve. Used only where a slight overshoot is
     physically possible: the arrow advance. Not on the ink wipe, where
     overshooting scaleX(1) would run the fill past the button edge. */
  --ease-spring: linear(0, 0.0625 5.5%, 0.25 11.5%, 0.5625 18.2%, 1 26.4%,
                 1.156 30.4%, 1.195 34.9%, 1.125 40.4%, 1 47.2%, 0.953 53%,
                 1 62%, 1.023 69%, 1 80%, 0.996 86%, 1);
  --wrap: 68rem;
  --prose: 42rem;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
          system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* The /audit 1-page-print knob. Verified 1 page at 7.5pt (Letter, 0.4in margins):
     measured content 940px against 979px of printable height — 0.41in headroom.
     If copy is added to /audit and it spills, drop this to 7.2pt before restructuring. */
  --print-size: 7.5pt;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font: 1rem/1.6 var(--sans);
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--ink); line-height: 1.1; letter-spacing: -0.025em; font-weight: 800;
  text-wrap: balance;            /* no orphaned last word in a headline */
}
p, li { text-wrap: pretty; }     /* no single-word last lines in prose */
h1 { font-size: clamp(2.15rem, 6vw, 4.2rem); letter-spacing: -0.032em; margin: 0 0 1.1rem; }
h2 { font-size: clamp(1.45rem, 3.2vw, 2rem); margin: 0 0 1.1rem; }
h3 { font-size: 1.1rem; letter-spacing: -0.015em; margin: 0 0 .45rem; }
p, ul, ol { margin: 0 0 1rem; }
strong { color: var(--ink); font-weight: 700; }
a { color: var(--mark-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }
::selection { background: #e7c9a4; }

/* reading progress: a 3px rule that fills as the page scrolls. Orientation on the
   long pages. Base state is scaleX(0), so where scroll-driven animation is
   unsupported it is simply invisible rather than a full-width bar. */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 20;
  background: var(--mark-deep); transform: scaleX(0); transform-origin: left;
}

/* screen-reader-only text. position:absolute keeps it out of flow, so it adds no
   flex gap inside .btn and never prints. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* skip link: first tab stop on every page, invisible until focused */
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus {
  left: 0; top: 0; z-index: 10;
  background: var(--ink); color: var(--bg);
  padding: .7rem 1.1rem; text-decoration: none;
  font-weight: 800; letter-spacing: .04em;
}

/* ---- layout ---- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
/* caps the text, not the container — so prose sections keep the same left edge as the rest */
.prose > * { max-width: var(--prose); }
section { padding: 3rem 0 3.25rem; border-top: var(--rule-weight) solid var(--rule); }
.hero { border-top: 0; padding: 3.5rem 0 2.75rem; }
/* display type needs a wider measure than reading type: at 42rem the 16-word
   headline ran six lines and buried the CTA below the fold */
.hero h1 { max-width: 52rem; }
.tint { background: var(--tint); }
.lead { font-size: 1.2rem; line-height: 1.5; color: var(--ink); }
.plain { color: var(--muted); }


/* ---- header ---- */
.site-head { border-bottom: var(--rule-weight) solid var(--rule); background: var(--bg); }
.site-head .wrap {
  display: flex; align-items: center; gap: .9rem 1.5rem;
  flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand .mark {
  width: 36px; height: 36px; flex: none; color: var(--mark);
  overflow: visible; shape-rendering: geometricPrecision;
}
.wordmark {
  display: block; color: var(--ink); font-weight: 800;
  font-size: .82rem; line-height: 1.12; letter-spacing: .1em; text-transform: uppercase;
}
.site-nav { margin-left: auto; display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.site-nav a {
  color: var(--ink); text-decoration: none;
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.site-nav a { border-bottom: 2px solid transparent; }   /* reserved, so active adds no shift */
.site-nav a:hover { color: var(--mark-deep); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.site-nav a.cta { color: var(--btn); border-bottom: 2px solid var(--btn); }
.site-foot {
  border-top: 2px solid var(--rule); padding: 1.5rem 0 2.5rem;
  color: var(--muted); font-size: .85rem;
}
.site-foot .wrap { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.fox { width: 22px; height: auto; flex: none; }

/* ---- the claim band: three cells, ruled ---- */
/* the divider IS the grid gap: a blurple sheet showing through 2px seams, so
   every cell is separated at every column count without per-cell border rules */
.claims {
  display: grid; gap: var(--claim-rule); list-style: none;
  grid-template-columns: 1fr;
  margin: 0; padding: 0;
  background: var(--night-line); color: var(--bg);
}
@media (min-width: 62rem) { .claims { grid-template-columns: var(--claim-cols); } }
.claims li {
  background: var(--night); padding: 1rem 1.25rem;
  font-size: var(--claim-size); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
/* stacked below 62rem, one row of five above it, so a row is never part-filled */

/* the night band — Nocturne's register, used twice on the site at most */
.band { background: var(--night); color: #e9e9ed; border-top: 0; }
.band h2, .band h3 { color: var(--bg); }
.band .plain { color: #a9a6b8; }
.band a { color: var(--night-line); }
.band a:hover { color: #fff; }
.band .btn {
  background: transparent; color: var(--bg);
  border: 2px solid var(--night-line); padding: .85rem 1.5rem;
}
.band .btn::before { background: var(--night-line); }
@media (hover: hover) and (pointer: fine) {
  .band .btn:hover { color: var(--night); }
}
.band :focus-visible { outline-color: var(--night-line); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--btn); color: var(--bg); text-decoration: none;
  padding: .8rem 1.3rem; border: 0; border-radius: 0;
  font: inherit; font-weight: 800; letter-spacing: .04em; cursor: pointer;
  /* the wipe below sits behind the label; isolate keeps that reliable */
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform var(--t-press) var(--ease-out),
              color var(--t-state) var(--ease-out);
}
/* the ink wipe: the hover inversion, drawn instead of snapped. Left to right,
   like ink flooding a letterpress block. transform, so it never repaints. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-state) var(--ease-out);
}
/* every .btn leaves the site, so the arrow means "elsewhere" — moving it on
   hover makes the button state its own destination */
.btn::after {
  content: "→"; font-weight: 700;
  transition: transform var(--t-state) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleX(1); }
  .btn:hover::after  { transform: translateX(3px); transition-timing-function: var(--ease-spring); }
}
/* press feedback: the one state a touch device can actually show */
.btn:active { transform: scale(.97); }
.btn-lg { padding: 1rem 1.6rem; font-size: 1.05rem; }

/* ---- the ledger: the offer ladder as a ruled account ---- */
.tiers {
  display: grid; gap: 0; margin: 0 0 1.5rem; padding: 0; list-style: none;
  border-top: 2px solid var(--rule);
}
.tier {
  border-bottom: 2px solid var(--rule);
  padding: 1.1rem 0 1.35rem;
  position: relative;
}
.tier .idx {
  display: block; margin-bottom: .5rem;
  color: var(--mark-deep); font-size: .78rem; font-weight: 800;
  letter-spacing: .12em; font-variant-numeric: tabular-nums;
}
.tier .price {
  display: block; margin: .55rem 0 .7rem; color: var(--ink);
  font-size: 1.95rem; font-weight: 800; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
/* a tier whose price is "email us" instead of a number */
.tier .price.quote { font-size: 1.3rem; letter-spacing: -0.02em; }
.tier .price.quote a { color: var(--btn); text-decoration-thickness: 2px; }
.tier .price.quote a:hover { color: var(--ink); }
.tier p, .tier ul { font-size: .95rem; }
.tier > :last-child { margin-bottom: 0; }
.tier ul { padding-left: 1.05rem; }
.tier li { margin-bottom: .35rem; }

@media (min-width: 40rem) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .tier { padding-right: 1.5rem; }
  .tier:nth-child(2n) { border-left: 2px solid var(--rule); padding-left: 1.5rem; }
}
@media (min-width: 62rem) {
  .tiers { grid-template-columns: repeat(4, 1fr); }
  .tier { padding-right: 1.15rem; }
  .tier + .tier { border-left: 2px solid var(--rule); padding-left: 1.15rem; }
}
/* /audit tiers carry full deliverable lists — 2-up reads better than 4-up */
@media (min-width: 62rem) {
  .tiers-detail { grid-template-columns: repeat(2, 1fr); }
  .tiers-detail .tier { padding-right: 1.75rem; }
  .tiers-detail .tier + .tier { border-left: 0; padding-left: 0; }
  .tiers-detail .tier:nth-child(2n) { border-left: 2px solid var(--rule); padding-left: 1.75rem; }
}
/* Junto plans: the tiers break out of the prose measure and read as columns */
.plans { max-width: none; }
@media (min-width: 46rem) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  .plans .tier { padding-right: 1.5rem; }
  .plans .tier + .tier { border-left: 2px solid var(--rule); padding-left: 1.5rem; }
  /* first cell of each row has no left neighbour, so no divider and no indent */
  .plans .tier:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (min-width: 64rem) {
  .plans { grid-template-columns: repeat(3, 1fr); }
  .plans .tier { padding-right: 1.35rem; }
  .plans .tier + .tier { border-left: 2px solid var(--rule); padding-left: 1.35rem; }
  .plans .tier:nth-child(odd) { border-left: 2px solid var(--rule); padding-left: 1.35rem; }
  .plans .tier:first-child { border-left: 0; padding-left: 0; }
}

.terms { list-style: none; padding: 0; margin: 0 0 .9rem; font-size: .88rem; }
.terms li { margin-bottom: .3rem; }
.terms .hint { display: block; }   /* effective rate on its own line, same in every card */
.save {
  display: inline-block; padding: .05rem .35rem;
  background: var(--save); color: var(--bg);
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; white-space: nowrap;
  text-transform: uppercase;
}
/* honest label for anything not built yet — sage outline, not a warning */
.wip {
  display: inline-block; padding: .02rem .3rem;
  border: 1px solid var(--accent-2); color: #5c6a44;
  font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}

/* ---- identity block ---- */
.who { display: flex; gap: 1.75rem; align-items: flex-start; flex-wrap: wrap; }
.who-text { flex: 1 1 22rem; }
.who-text > :last-child { margin-bottom: 0; }
.avatar {
  width: 190px; height: 190px; flex: none;
  border-radius: 0; object-fit: cover; background: var(--tint);
  filter: grayscale(1) contrast(1.06);
  border: 2px solid var(--rule);
}
.who ul { list-style: none; padding: 0; }
.who ul li { padding-left: 1.15rem; margin-bottom: .55rem; position: relative; }
.who ul li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: .6rem; height: 2px; background: var(--mark);
}

@media (min-width: 46rem) {
  .avatar-lg { width: 260px; height: 260px; }
  /* the plate stays with you while the bio scrolls past it */
  .avatar-lg { position: sticky; top: 1.75rem; }
}
.prose-p { max-width: var(--prose); }

/* ---- the bench, as disciplines ---- */
.roles {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--rule);
}
.roles li {
  padding: .9rem 0 1rem; border-bottom: 2px solid var(--rule);
  color: var(--ink); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em;
}
.roles .role-n {
  display: block; margin-bottom: .3rem; color: var(--mark-deep);
  font-size: .78rem; letter-spacing: .12em; font-variant-numeric: tabular-nums;
}
@media (min-width: 46rem) {
  .roles { grid-template-columns: repeat(3, 1fr); }
  .roles li { padding-right: 1.25rem; }
  .roles li + li { border-left: 2px solid var(--rule); padding-left: 1.25rem; }
}

/* ---- how it works: numbered cells ---- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps li {
  counter-increment: step; padding: 0 0 1rem 3.1rem; position: relative;
  max-width: var(--prose);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.05em;
  color: var(--mark-deep); font-size: 1.15rem; font-weight: 800;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
@media (min-width: 52rem) {
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--rule); }
  .steps li { padding: 1.1rem 1.4rem 1.2rem 0; max-width: none; }
  .steps li::before { position: static; display: block; margin-bottom: .5rem; }
  .steps li + li { border-left: 2px solid var(--rule); padding-left: 1.4rem; }
}

/* ---- waitlist form ---- */
.waitlist { display: grid; gap: .95rem; max-width: 30rem; margin-top: 1.75rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: var(--ink); }
.waitlist input, .waitlist select {
  width: 100%; padding: .7rem .75rem; font: inherit;
  border: 2px solid var(--ink); border-radius: 0; background: #fdfaf3; color: var(--ink);
}
.waitlist .btn { justify-self: start; }
.hint { margin: 0; color: var(--muted); font-size: .85rem; }

/* ── MOTION ──────────────────────────────────────────────────────────────
   Every rule below is doubly gated: @supports so unsupporting browsers get the
   finished state, and prefers-reduced-motion: no-preference so the blanket
   reduce block never has to undo a hidden starting state. Nothing here animates
   anything a visitor reads or compares — no prices, no tier copy, no claim
   strip. Motion is on controls, sequences and orientation only.
   ──────────────────────────────────────────────────────────────────────── */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fill-x  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes curtain { from { transform: scaleY(1); } to { transform: scaleY(0); } }

@media (prefers-reduced-motion: no-preference) {
  /* the hero headline is wiped in once, on load, by a curtain in the paper colour.
     The curtain's resting state is scaleY(0) — already gone — and fill-mode is none,
     so if the animation never runs the headline simply reads normally. Never clip the
     h1 itself: a fill mode that holds a hidden start state can strand the most
     important text on the site. */
  .hero h1 { position: relative; }
  .hero h1::after {
    content: ""; position: absolute; inset: 0; background: var(--bg);
    transform: scaleY(0); transform-origin: bottom; pointer-events: none;
    animation: curtain 620ms var(--ease-out);
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: fill-x linear both; animation-timeline: scroll(root block); }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* How it works is a real sequence, so revealing it in order carries meaning */
    .steps li { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
    .steps li:nth-child(2) { animation-range: entry 5% cover 38%; }
    .steps li:nth-child(3) { animation-range: entry 5% cover 46%; }

    /* the three disciplines on /consultants: staggered, not compared for purchase */
    .roles li { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 5% cover 32%; }
    .roles li:nth-child(2) { animation-range: entry 5% cover 40%; }
    .roles li:nth-child(3) { animation-range: entry 5% cover 48%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- print: /audit to a clean 1-pager ---- */
@media print {
  /* on html, not body — so every rem-based rule scales with it, not just body text */
  html { font-size: var(--print-size); }
  body { line-height: 1.32; color: #000; background: #fff; }
  .site-head, .site-foot, .no-print, .progress { display: none !important; }
  section, .hero { padding: .18rem 0; border-top: 0; }
  .tier { break-inside: avoid; }
  .wrap { max-width: none; padding: 0; }
  .prose > * { max-width: none; }
  h1 { font-size: calc(var(--print-size) * 1.95); margin-bottom: .22rem; letter-spacing: -0.02em; }
  h2 { font-size: calc(var(--print-size) * 1.2); margin: 0; letter-spacing: .1em; }
  h3 { font-size: calc(var(--print-size) * 1.05); }
  p, ul, ol { margin-bottom: .32rem; orphans: 2; widows: 2; }
  .lead { font-size: calc(var(--print-size) * 1.05); }
  /* columns, not grid: grid rows stretch every box to the tallest one and waste a page */
  .tiers, .tiers-detail, .steps {
    display: block !important; column-count: 2; column-gap: .6rem; border-top: 0 !important;
  }
  .tier {
    border: 0; border-top: 1px solid #999 !important;
    padding: .24rem 0 .28rem !important; margin: 0;
  }
  .tier .idx, .steps li::before { color: #000; }
  .tier .price { font-size: calc(var(--print-size) * 1.35); margin: .06rem 0 .18rem; }
  .steps li { padding: .1rem 0 .3rem 1.6rem !important; border: 0 !important; }
  .steps li::before { position: absolute; }
  .tint, .claims, .band { background: transparent !important; color: #000 !important; }
  .band h2, .band h3, .band .plain, .band a { color: #000 !important; }
  .band .btn { border: 0 !important; }
  .claims li { border: 0 !important; padding: 0 .6rem 0 0 !important; }
  a { color: #000; text-decoration: none; }
  .btn { padding: 0; background: transparent !important; color: #000 !important; font-weight: 700; }
  .fox { display: none !important; }
  .btn::after { content: ""; }
  .btn::before { display: none; }
  .print-url::after { content: ": " attr(href); font-weight: 400; }
  @page { margin: .4in; }
}