/* =========================================================================
   Agen2ic LLC — agen2ic.ai
   Single stylesheet. No build step, no external requests, no runtime deps.

   BRAND GREEN — DO NOT NORMALIZE THIS TO THE RAW BRAND VALUE
   The canonical brand green is #40F522 (hue 111.5°). garrett.gg runs that
   electric value. Agen2ic runs a restrained derivation of it — same hue,
   pulled down in saturation and lightness:

     --accent       #41BE2D   dark grounds, fills, the mark   7.75:1 on dark
     --accent-deep  #187109   green text on light grounds     6.17:1 on white

   The difference is deliberate. A contracting officer evaluating a task
   order reads a neon site as unserious, so the electric value is not used
   anywhere on this site. If you are here to "fix" the green back to
   #40F522: don't. That is the garrett.gg value, not the Agen2ic one.

   Two greens, because one cannot do both jobs. #41BE2D is only 2.4:1 on
   white — fine as a fill or a mark, unreadable as text. Green TEXT on a
   light ground therefore uses --accent-deep; fills and the mark use
   --accent, with --on-accent (dark ink) sitting on top of the fill.

   Rest of the palette is sampled from the Agen2ic capability statement:
     ink #101614   rule #b4beb9
   Structure is carried by hairline rules and letterspaced mono labels, so
   the site reads like the capability statement rather than a product
   launch.

   THEMING CONTRACT (see the palette blocks below for the full reasoning)
     - DARK is the default: the complete dark palette sits on bare :root.
     - LIGHT is opt-in, via an explicit [data-theme="light"] stamp.
     - prefers-color-scheme is deliberately not consulted for the default.
     - No colour is ever defined only inside a media query.
   ========================================================================= */

/* ---------- THEMING CONTRACT (inverted 2026-09-05) ---------------------
   DARK IS THE DEFAULT. The complete dark palette is on bare :root, so a
   visitor gets dark with no stamp, no script and no media query involved.

   Light is opt-in only, via an explicit [data-theme="light"] stamp set by the
   theme toggle. `prefers-color-scheme` is deliberately NOT consulted for the
   default: most machines report a light preference, so honouring it would
   make light the effective default and "dark is the default" would be false
   for the majority of visitors. That is the operator's call, made knowingly.

   The original brief specified the opposite arrangement (light on bare :root,
   dark under a guarded prefers-color-scheme block). This supersedes it, and
   verify.mjs check 2 was changed in the same commit to assert the new
   semantics rather than the old ones.

   Still true, and still enforced: every colour is defined in a palette block
   that a plain :root selector can reach, never only inside a media query.
   ------------------------------------------------------------------------ */

/* ---------- Dark palette: the DEFAULT, on bare :root -------------------- */
:root {
  --bg:            #0b0f0e;
  --bg-sunken:     #101614;
  --surface:       #131a18;
  --rule:          #232d2a;
  --rule-strong:   #3a4642;
  --text:          #e6ecea;
  --text-muted:    #a6b2ae;
  --text-faint:    #8b9793;
  --accent:            #41BE2D;   /* fills, the mark, 7.75:1 on dark */
  --accent-hover:      #5AD343;
  --accent-deep:       #41BE2D;   /* the green-text role, on dark grounds */
  --accent-deep-hover: #5AD343;
  --accent-tint:       #12210E;
  --hover-fill:        #1A3313;   /* hover feedback, deeper than the panel tint */
  --on-accent:         #101614;
  --focus:             #41BE2D;
  --pending-bg:    #161d1b;
  --pending-text:  #97a39f;
  --pending-rule:  #47534f;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "DejaVu Sans Mono", monospace;

  --wrap:   72rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section: clamp(3.5rem, 7vw, 5.5rem);

  --step-0:  1.125rem;
  --step-1:  clamp(1.25rem,  1.6vw,  1.4rem);
  --step-2:  clamp(1.5rem,   2.2vw,  1.9rem);
  --step-3:  clamp(1.9rem,   3.4vw,  2.6rem);
  --step-4:  clamp(2.4rem,   5vw,    3.5rem);
  --step-5:  clamp(2.5rem,   7.2vw,  4.9rem);

  color-scheme: dark;
}

/* ---------- Light palette: opt-in, explicit stamp only ------------------ */
:root[data-theme="light"] {
  --bg:            #ffffff;
  --bg-sunken:     #f5f8f7;
  --surface:       #ffffff;
  --rule:          #e2e8e5;
  --rule-strong:   #b4beb9;
  --text:          #101614;
  --text-muted:    #4a5450;
  --text-faint:    #5f6a66;
  --accent:            #41BE2D;   /* fills, the mark - never text on light */
  --accent-hover:      #37A226;
  --accent-deep:       #187109;   /* green text on light grounds, 6.17:1 */
  --accent-deep-hover: #0F5405;
  --accent-tint:       #ECF7E8;
  --hover-fill:        #E2F3DC;   /* hover feedback, deeper than the panel tint */
  --on-accent:         #101614;   /* dark ink on the green fill, 7.65:1 */
  --focus:             #187109;
  --pending-bg:    #f2f5f4;
  --pending-text:  #5c6763;
  --pending-rule:  #a8b3ae;

  color-scheme: light;
}

/* ---------- Reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Explicit, token-driven ground. Never transparent. */
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;

  /* Short pages (404) must still put the footer on the floor, not mid-screen. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }
.footer { flex: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.017em;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--accent-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { color: var(--accent-deep-hover); }

/* ---------- Focus: a transparent ring is always present, so focus is a
              colour change on an already-reserved outline. Never removed. */
a, button, summary, [tabindex] {
  outline: 2px solid transparent;
  outline-offset: 3px;
  border-radius: 2px;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline-color: var(--focus);
  outline-width: 3px;
}

/* ---------- Layout primitives ----------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section + .section { border-top: 1px solid var(--rule); }

/* Letterspaced mono eyebrow above a hairline — the core structural motif. */
.eyebrow {
  display: block;
  margin: 0 0 1.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--text-muted);
  max-width: 46ch;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Masthead --------------------------------------------------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  background-color: var(--bg);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  flex-wrap: wrap;
  padding-block: 0.85rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.015em;
  font-size: 1.0625rem;
}
.brand__mark {
  display: block;
  width: 1.55rem;
  height: auto;
  flex: none;
  fill: var(--accent);
}
.brand:hover { color: var(--text); }
.brand:hover .brand__mark { fill: var(--accent-hover); }

.masthead__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  gap: clamp(0.7rem, 2.4vw, 1.75rem);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.masthead__nav a {
  color: var(--text-muted);
  text-decoration: none;
}
.masthead__nav a:hover { color: var(--accent-deep); }
.masthead__nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -1px 0 0 var(--accent);
}

/* ---------- Hero ------------------------------------------------------- */
.hero { padding-block: clamp(3.5rem, 10vw, 7rem) clamp(3rem, 7vw, 5rem); }

.hero__tag {
  display: block;
  margin-bottom: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.hero__claim {
  font-size: var(--step-5);
  max-width: 17ch;
  letter-spacing: -0.032em;
  line-height: 1.02;
  font-weight: 700;
}

.hero__sub {
  margin-top: 1.6rem;
  max-width: 50ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
}

.hero__cta { margin-top: 2.5rem; }

/* ---------- Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background-color: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.btn:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}
.btn__arrow { font-family: var(--font-mono); }

.btn--quiet {
  background-color: transparent;
  color: var(--accent-deep);
  border-color: var(--rule-strong);
}
.btn--quiet:hover {
  background-color: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-deep-hover);
}

/* ---------- Failure modes --------------------------------------------- */
.breaks {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
.break {
  padding-block: 1.9rem;
  border-top: 1px solid var(--rule);
}
.break:first-child { border-top: 0; padding-top: 0; }

.break__idx {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  color: var(--accent-deep);
}
.break__name {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  line-height: 1;
}
.break__body { color: var(--text-muted); max-width: 40ch; font-size: 1.0625rem; }

@media (min-width: 46rem) {
  .breaks {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3.5vw, 2.75rem);
  }
  .break {
    padding-block: 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rule-strong);
  }
  .break:first-child { padding-top: 1.6rem; border-top: 1px solid var(--rule-strong); }
}

/* ---------- Engagements ------------------------------------------------ */
.tiers { border-top: 1px solid var(--rule-strong); }

.tier {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--rule);
}

.tier__name {
  font-size: 1.125rem;
  font-weight: 650;
}
.tier__price {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--accent-deep);
  white-space: nowrap;
}
.tier__meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.tier__body {
  color: var(--text-muted);
  max-width: 52ch;
  margin-top: 0.5rem;
}

@media (min-width: 46rem) {
  .tier {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }
  .tier__name  { grid-column: 1; }
  .tier__price { grid-column: 2; text-align: right; }
  .tier__meta  { grid-column: 2; text-align: right; }
  .tier__body  { grid-column: 1; margin-top: 0.35rem; }
}

.pricing-note {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--text-faint);
  max-width: 52ch;
}

/* ---------- Proof / stats ---------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.stat {
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
}
.stat:first-child { border-top: 0; padding-top: 0; }

.stat__fig {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.65rem, 4.2vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.stat__label {
  display: block;
  margin-top: 0.8rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.45;
  max-width: 26ch;
}

@media (min-width: 40rem) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2rem clamp(1.5rem, 4vw, 3rem); }
  .stat { border-top: 1px solid var(--rule-strong); padding-top: 1.4rem; padding-bottom: 0; }
  .stat:first-child { border-top: 1px solid var(--rule-strong); padding-top: 1.4rem; }
}
@media (min-width: 62rem) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}

.provenance {
  margin-top: 2.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 62ch;
}

/* ---------- Panels (federal teaser, clearance) ------------------------- */
.panel {
  padding: clamp(1.4rem, 3.5vw, 2rem);
  background-color: var(--accent-tint);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
}
.panel__title {
  font-size: 1.0625rem;
  font-weight: 650;
  margin-bottom: 0.7rem;
}
.panel p + p { margin-top: 0.85rem; }
.panel__lead { color: var(--text); }
.panel__fine { color: var(--text-muted); font-size: 0.9375rem; }

.clearance__headline {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  font-weight: 650;
  color: var(--text);
  max-width: 34ch;
}
.clearance__qualifier {
  margin-top: 0.9rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  max-width: 52ch;
}

/* ---------- Definition-style capability lists -------------------------- */
.caps { border-top: 1px solid var(--rule-strong); }
.cap {
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.cap__name {
  font-weight: 650;
  font-size: 1.0625rem;
  margin-bottom: 0.35rem;
}
.cap__body { color: var(--text-muted); max-width: 68ch; }

@media (min-width: 52rem) {
  .cap {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 0 2.5rem;
    align-items: start;
  }
  .cap__name { margin-bottom: 0; }
}

/* ---------- Data table (federal) --------------------------------------- */
.datatable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.datatable caption {
  text-align: left;
  padding-bottom: 0.7rem;
  color: var(--text-faint);
  font-size: 0.875rem;
}
.datatable th,
.datatable td {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
}
.datatable th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  width: 40%;
  padding-right: 1rem;
}
.datatable td { color: var(--text); }

/* Unfilled registration data — must read as obviously not-yet-issued. */
.pending {
  display: inline-block;
  padding: 0.15em 0.55em;
  border: 1px dashed var(--pending-rule);
  border-radius: 2px;
  background-color: var(--pending-bg);
  color: var(--pending-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- NAICS ------------------------------------------------------ */
.naics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.naics li {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.naics b {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
  margin-right: 0.4rem;
}

/* ---------- Contact ---------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2.5rem;
  align-items: start;
}
@media (min-width: 46rem) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) auto; }
}

.contact__list { display: grid; gap: 0.9rem; }
/* Two actions, deliberately. The phone number was removed at the operator's
   request (crawler harvesting), so booking and email are the only channels
   left — and a page whose single call to action points at a host that is
   down has no working contact path at all. */
.contact__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
}
.contact__key {
  min-width: 5.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact__val { font-size: 1.0625rem; }

/* ---------- Footer ----------------------------------------------------- */
.footer {
  border-top: 1px solid var(--rule);
  background-color: var(--bg-sunken);
  padding-block: 2.5rem;
  font-size: 0.875rem;
  color: var(--text-faint);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}
.footer__legal { font-family: var(--font-mono); letter-spacing: 0.04em; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--accent-deep); text-decoration: underline; }

/* ---------- 404 -------------------------------------------------------- */
.notfound {
  padding-block: clamp(4rem, 14vw, 9rem);
}
.notfound__code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 1.4rem;
}
.notfound__title { font-size: clamp(1.75rem, 4.5vw, 2.5rem); }
.notfound__body { margin-top: 1.1rem; color: var(--text-muted); max-width: 44ch; }
.notfound__links {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}


/* ---------- Email button with an inline copy control -------------------
   Looks like one button; is two controls. A <button> cannot legally be
   nested inside an <a> — invalid HTML, and the keyboard lands somewhere
   nobody expects — so this is a group with a hairline divider, and each half
   hovers on its own while the whole pill responds to hover as a unit.

   The copy half ships `hidden` and is revealed by copy.js only once the
   Clipboard API is confirmed present. With JS off it never appears and the
   mailto half is untouched. */
.emailbtn {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  background-color: transparent;
  overflow: hidden;
  transition: border-color 140ms ease, background-color 140ms ease;
}
/* The pill's border responds as a unit — it is one control group — but the
   FILL does not: hovering either half tints only that half, so the copy
   affordance reads as its own target rather than lighting up the mailto link
   beside it. Setting a background here as well would defeat that, because the
   parent's fill sits behind both children. */
.emailbtn:hover { border-color: var(--accent); }
.emailbtn:focus-within { border-color: var(--accent); }

.emailbtn__main {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.25rem;
  color: var(--accent-deep);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 0;
  transition: color 140ms ease, background-color 140ms ease;
}
.emailbtn__main:hover { color: var(--accent-deep-hover); background-color: var(--hover-fill); }

.emailbtn__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  border: 0;
  border-left: 1px solid var(--rule-strong);
  border-radius: 0;
  background-color: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}
.emailbtn__copy:hover { color: var(--accent-deep); background-color: var(--hover-fill); }
.emailbtn__copy:active { background-color: var(--hover-fill); }
.emailbtn__copy svg {
  width: 0.95rem; height: 0.95rem; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}


/* The pill sets `overflow: hidden` to keep the divider and rounded corners
   clean, and that CLIPS a focus ring drawn with the global `outline-offset:
   3px` — measured, not assumed: 0 of 854 changed pixels fell outside the pill.
   Check 5 cannot catch this, because it asserts a COMPUTED style change and
   the computed value is identical whether or not the ring is painted. So the
   ring goes inside the box for these two controls. */
.emailbtn__main:focus-visible,
.emailbtn__copy:focus-visible { outline-offset: -3px; }

/* Result states, set by copy.js. Colour is never the only signal — the label
   text changes too, so this reads without colour perception. */
.emailbtn__copy[data-state="copied"] { color: var(--accent-deep); background-color: var(--accent-tint); }
.emailbtn__copy[data-state="failed"] { color: var(--text); }
.emailbtn__copy[data-state] .icon-copy { display: none; }
.emailbtn__copy .icon-done { display: none; }
.emailbtn__copy[data-state="copied"] .icon-done { display: inline; }

/* ---------- Reduced motion --------------------------------------------
   Disables every animation and transition on the page, including the
   smooth-scroll behaviour, for users who ask for it.                     */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn { transition: none !important; }
}


/* =========================================================================
   SECTIONS ADDED 2026-09-05 — the page was 386 words and read as unfinished.
   A consultancy with no logos, no case studies and no team has to DEMONSTRATE
   expertise instead of citing clients, which means prose. These components
   carry it.

   Every section now gets a real display heading under the mono eyebrow. The
   eyebrow alone was the single biggest reason the page looked like a
   template: a document label is not a headline, and a page whose only
   headline is the hero has one idea on it.
   ========================================================================= */

.section__head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.section__head .eyebrow { margin-bottom: 1rem; }

.section__title {
  font-size: var(--step-3);
  letter-spacing: -0.028em;
  line-height: 1.05;
  max-width: 22ch;
}
.section__lede {
  margin-top: 1rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 56ch;
}

/* ---------- Prose ------------------------------------------------------ */
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.1rem; }
.prose p { color: var(--text-muted); line-height: 1.65; }
.prose strong { color: var(--text); font-weight: 650; }

/* ---------- The cost story --------------------------------------------- */
.story {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .story { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}
.story__pull {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--accent-tint);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
}
.story__pull p {
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.012em;
}

/* ---------- The five-day audit ----------------------------------------- */
.days { border-top: 1px solid var(--rule-strong); }
.day {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem 2rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule);
}
.day__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding-top: 0.3rem;
}
.day__title { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.018em; }
.day__body  { color: var(--text-muted); max-width: 60ch; margin-top: 0.3rem; }
@media (min-width: 46rem) {
  .day { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; }
  .day__label { grid-row: span 2; }
}

/* ---------- Teaching pieces -------------------------------------------- */
.pieces { display: grid; gap: 0; grid-template-columns: 1fr; }
.piece {
  padding-block: 1.9rem;
  border-top: 1px solid var(--rule);
}
.piece:first-child { border-top: 0; padding-top: 0; }
.piece__title {
  font-size: var(--step-2);
  letter-spacing: -0.024em;
  line-height: 1.1;
  margin-bottom: 0.8rem;
  max-width: 20ch;
}
.piece__body { color: var(--text-muted); max-width: 46ch; }
.piece__body p + p { margin-top: 0.85rem; }
@media (min-width: 62rem) {
  .pieces { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
  .piece { border-top: 1px solid var(--rule-strong); padding-top: 1.6rem; padding-bottom: 0; }
  .piece:first-child { border-top: 1px solid var(--rule-strong); padding-top: 1.6rem; }
}

/* ---------- FAQ --------------------------------------------------------
   Real <details>, so it works with no JavaScript at all — the site ships
   none and must keep shipping none under `script-src 'self'`. */
.faq { border-top: 1px solid var(--rule-strong); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.25rem;
  cursor: pointer;
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.018em;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--accent-deep);
  transition: transform 140ms ease;
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { padding-bottom: 1.4rem; color: var(--text-muted); max-width: 62ch; }
.faq__a p + p { margin-top: 0.85rem; }

/* ---------- Reduced motion additions ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none !important; }
}

/* ---------- Print: the federal page is going to get printed ------------ */
@media print {
  :root {
    --bg: #ffffff; --text: #000000; --text-muted: #222222;
    --text-faint: #444444; --accent-tint: #ffffff;
    /* On paper the fill green would flood toner and the mark reads better
       solid, so both accent roles collapse to the deep value. */
    --accent: #187109; --accent-deep: #187109; --accent-deep-hover: #187109;
  }
  .masthead__nav, .hero__cta, .notfound__links { display: none; }
  body { font-size: 10.5pt; }
  .section { padding-block: 1.25rem; }
  a { text-decoration: underline; }
}

/* ---------- Theme toggle ------------------------------------------------
   Ships `hidden` and is revealed by copy.js, for the same reason the copy
   control is: with no JavaScript it could not do anything, and a visible
   control that does nothing is worse than an absent one. Dark needs no
   choice, so a no-JS visitor still gets the intended default. */
.themetoggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  margin-left: 0.25rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background-color: transparent;
  color: var(--text-muted);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.themetoggle:hover {
  color: var(--accent-deep);
  border-color: var(--accent);
  background-color: var(--hover-fill);
}
.themetoggle svg {
  width: 0.85rem; height: 0.85rem; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Below ~30rem the nav plus the toggle no longer fits on one line at 375px:
   measured scrollWidth 406 against a 375 viewport. The toggle drops its text
   and keeps the icon, which is the label the aria-label already carries. */
@media (max-width: 30rem) {
  .themetoggle { padding: 0.4rem; margin-left: 0; }
  .themetoggle [data-theme-label] { display: none; }
  .masthead__nav { gap: 0.7rem; }
}

/* No crossfade while the theme is being swapped. Set for two frames by
   copy.js: a theme change that animates reads as lag rather than polish. */
:root[data-theme-switching] *,
:root[data-theme-switching] *::before,
:root[data-theme-switching] *::after {
  transition: none !important;
}