/* Matranga Codeworks component styles — styles.css from matranga-codeworks/mcw-site@1e6de97,
   with :root tokens and @font-face moved to tokens.json. */
/* ==========================================================================
   Frank Matranga / Matranga Codeworks
   Shared stylesheet for all pages.

   Theme note: the source design exposed an `accent` switcher (Pine / Petrol /
   Indigo / Oxblood). Pine was the default, so its values are baked in below.
   To reskin the whole site, change the six accent tokens in :root — every
   page reads them through var().
   ========================================================================== */

:root {
  /* Colour tokens and @font-face now come from tokens.css (tokens.json).
     The two family names map onto the tokens.css families. */
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  /* Metrics — not expressible as tokens (clamp / easing). */
  --gut:  clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* --------------------------------------------------------------- base ---- */

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 400;
}

img { max-width: 100%; display: block; }

a {
  color: var(--acc2);
  text-decoration: none;
  transition: color .2s ease, background-size .3s ease, border-color .2s ease;
}
a:hover { color: var(--acc); }

h1, h2, h3 { font-weight: 700; margin: 0; }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
::selection { background: var(--acc); color: var(--paper); }

/* Skip link — keyboard users land here first. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.1rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.skip:focus { left: 0; color: var(--paper); }

/* Film-grain overlay. Disabled by default, matching the design's saved state.
   Add `data-grain` to <body> on any page to switch it back on. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  display: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.7'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: .7;
}
body[data-grain] .grain { display: block; }

/* ---------------------------------------------------------- animation ---- */

@keyframes mcRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mcPulse {
  0%   { box-shadow: 0 0 0 0   rgba(46, 93, 70, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(46, 93, 70, 0); }
  100% { box-shadow: 0 0 0 0   rgba(46, 93, 70, 0); }
}

.rise    { animation: mcRise .7s var(--ease) both; }
.rise-1  { animation-delay: .06s; }
.rise-2  { animation-delay: .14s; }
.rise-3  { animation-delay: .22s; }
.rise-4  { animation-delay: .30s; }

/* Applied by site.js, then released as each section scrolls into view. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

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

/* ------------------------------------------------------------- layout ---- */

.wrap {
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* Vertical rhythm. The design used a handful of distinct section heights;
   these keep them exact rather than flattening them to one value. */
.pad-xs  { padding-block: clamp(2.5rem, 5vw, 4rem); }
.pad-s   { padding-block: clamp(3rem,   7vw, 6rem); }
.pad-m   { padding-block: clamp(3.5rem, 8vw, 6rem); }
.pad-mm  { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.pad-l   { padding-block: clamp(3.5rem, 8vw, 7rem); }
.pad-xl  { padding-block: clamp(4rem,   9vw, 7rem); }
.pad-xxl { padding-block: clamp(4rem,   9vw, 8rem); }

.ruled { border-bottom: 2px solid var(--ink); }

.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: flex-start;
}
.split--end   { align-items: flex-end; }
.split--base  { align-items: baseline; }
.split--apart { justify-content: space-between; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
.grid--tight,
.grid--cards,
.grid--wide,
.grid--tiers,
.grid--cols { display: grid; }
.grid--tight { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2.5vw, 1.8rem); }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.grid--wide  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.4rem, 3vw, 2rem); }
.grid--tiers { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; align-items: stretch; }
.grid--cols  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.8rem, 4vw, 3rem); }

.flex-1  { flex: 1 1 300px; min-width: 0; }
.flex-2  { flex: 1 1 320px; min-width: 0; }
.flex-3  { flex: 1 1 340px; min-width: 0; }
.flex-4  { flex: 1 1 400px; min-width: 0; }
.flex-5  { flex: 1 1 460px; min-width: 0; }
.flex-6  { flex: 1 1 260px; min-width: 0; }
.flex-none { flex: 0 0 auto; }

/* ---------------------------------------------------------- masthead ----- */

.topbar { display: flex; height: 6px; }
.topbar i { display: block; flex: 5; background: var(--acc); }
.topbar b { display: block; flex: 1; background: var(--ink); }

.masthead { border-bottom: 2px solid var(--ink); }
.masthead__inner {
  max-width: 1220px;
  margin-inline: auto;
  padding: 1.1rem var(--gut);
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}

.wordmark {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }
.wordmark i { font-style: normal; color: var(--acc); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.6rem;
  align-items: baseline;
  font-size: .95rem;
  font-weight: 500;
}
.nav a {
  color: var(--ink);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--acc), var(--acc));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.nav a:hover { background-size: 100% 2px; }
.nav a[aria-current="page"],
.nav .nav__cta {
  color: var(--acc2);
  font-weight: 600;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
  background-image: none;
}

/* ------------------------------------------------------------ footer ----- */

.footer { background: var(--ink); color: var(--muted-2); border-top: 1px solid var(--rule-dark-2); }
.footer .wrap {
  padding-block: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer span:first-child { color: var(--on-dark-2); }
.footer a { color: var(--muted-2); border-bottom: 1px solid var(--rule-dark-2); padding-bottom: 2px; }
.footer a:hover { color: var(--acc3); border-bottom-color: var(--acc3); }

/* ---------------------------------------------------------- typography --- */

.t-hero { font-size: clamp(2.7rem, 7vw,   5.6rem); line-height: .98;  letter-spacing: -.035em; text-wrap: balance; }
.t-page { font-size: clamp(2.5rem, 6.5vw, 5rem);   line-height: .99;  letter-spacing: -.035em; text-wrap: balance; }
.t-mega { font-size: clamp(2.8rem, 8vw,   6rem);   line-height: .95;  letter-spacing: -.035em; }
.t-xl   { font-size: clamp(2.2rem, 5vw,   4rem);   line-height: .98;  letter-spacing: -.035em; }
.t-lg   { font-size: clamp(2.1rem, 4.5vw, 3.6rem); line-height: 1;    letter-spacing: -.03em; }
.t-lg2  { font-size: clamp(2rem,   4.5vw, 3.6rem); line-height: 1;    letter-spacing: -.035em; }
.t-md   { font-size: clamp(1.9rem, 4vw,   3.2rem); line-height: 1.05; letter-spacing: -.025em; }
.t-md2  { font-size: clamp(1.9rem, 4vw,   3.2rem); line-height: 1.02; letter-spacing: -.03em; }
.t-md3  { font-size: clamp(1.9rem, 3.6vw, 3rem);   line-height: 1.04; letter-spacing: -.03em; }
.t-md4  { font-size: clamp(1.9rem, 4vw,   3.2rem); line-height: 1.08; letter-spacing: -.03em; }
.t-sm   { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.08; letter-spacing: -.025em; }
.t-xs   { font-size: clamp(1.6rem, 3vw,   2.4rem); line-height: 1.1;  letter-spacing: -.02em; }
.t-xxs  { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; }

/* The short accent rule that sits above a hero heading or eyebrow. */
.t-hero::before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  background: var(--acc);
  margin-bottom: 1.6rem;
}

.lead {
  margin: 2rem 0 0;
  font-size: clamp(1.12rem, 1.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-2);
}
.copy   { margin: 0; font-size: 1.05rem; line-height: 1.5;  color: var(--ink-2); }
.copy-l { margin: 0; font-size: clamp(1.08rem, 1.4vw, 1.28rem); line-height: 1.55; color: var(--ink-2); }
.prose  { display: grid; gap: 1rem; font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); }
.prose p { margin: 0; }

.mono { font-family: var(--mono); }

.eyebrow {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acc2);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.eyebrow--xs { margin-bottom: 1.6rem; }
.eyebrow--sm { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.eyebrow--md { margin-bottom: clamp(2rem, 5vw, 2.5rem); }
.eyebrow--lg { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.eyebrow--onDark { color: var(--acc3); }
.eyebrow--rule::before {
  content: '';
  display: block;
  width: 52px;
  height: 4px;
  background: var(--acc);
  margin-bottom: 1.1rem;
}

.label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.label--onDark { color: var(--muted-2); }

.note {
  font-family: var(--mono);
  font-size: .7rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Measure utilities — kept as explicit steps so the design's line lengths survive. */
.mw-14 { max-width: 14ch; } .mw-16 { max-width: 16ch; } .mw-18 { max-width: 18ch; }
.mw-20 { max-width: 20ch; } .mw-22 { max-width: 22ch; } .mw-24 { max-width: 24ch; }
.mw-26 { max-width: 26ch; } .mw-32 { max-width: 32ch; } .mw-34 { max-width: 34ch; }
.mw-40 { max-width: 40ch; } .mw-44 { max-width: 44ch; } .mw-46 { max-width: 46ch; }
.mw-48 { max-width: 48ch; } .mw-50 { max-width: 50ch; } .mw-52 { max-width: 52ch; }
.mw-54 { max-width: 54ch; } .mw-56 { max-width: 56ch; } .mw-58 { max-width: 58ch; }
.mw-60 { max-width: 60ch; } .mw-62 { max-width: 62ch; }

/* ------------------------------------------------------------ buttons ---- */

.btn {
  display: inline-block;
  background: var(--acc);
  color: var(--btn-ink);
  padding: 1rem 1.7rem;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, background .2s ease;
}
.btn:hover {
  background: var(--acc2);
  color: var(--btn-ink);
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ink);
}
/* On a dark ground the ink border disappears, so the accent carries the shadow. */
.btn--onDark { border-color: transparent; box-shadow: 5px 5px 0 var(--acc3); }
.btn--onDark:hover { box-shadow: 2px 2px 0 var(--acc3); }

.link-quiet {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  border-bottom: 2px solid var(--rule);
  padding-bottom: 2px;
}
.link-quiet:hover { border-bottom-color: var(--acc); color: var(--acc); }

.link-arrow {
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 2px;
}
.link-arrow:hover { border-bottom-color: var(--acc); color: var(--acc); }

.link-hair { border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.link-hair:hover { border-bottom-color: var(--acc); color: var(--acc); }
.link-hair--alt:hover { border-bottom-color: var(--acc-b); color: var(--acc-b); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  align-items: center;
}

.mail-lg {
  display: inline-block;
  color: var(--on-dark);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2.6rem);
  letter-spacing: -.03em;
  border-bottom: 3px solid var(--acc-b);
  padding-bottom: 4px;
}
.mail-lg:hover { color: var(--acc3); }
.mail-md { font-size: clamp(1.4rem, 3.2vw, 2.4rem); }
.mail-sm {
  color: var(--on-dark);
  font-weight: 600;
  font-size: 1.05rem;
  border-bottom: 2px solid var(--acc-b);
  padding-bottom: 3px;
}
.mail-sm:hover { color: var(--acc3); }

/* --------------------------------------------------------------- bands --- */

.band-dark { background: var(--ink); color: var(--on-dark); }
.band-dark--ruled {
  background:
    repeating-linear-gradient(90deg, var(--hatchw) 0 1px, transparent 1px 68px),
    var(--ink);
}
.band-accent {
  background:
    repeating-linear-gradient(45deg, var(--hatch) 0 2px, transparent 2px 10px),
    var(--acc-b);
  color: var(--acc-b-ink);
}

.pullquote { margin: 0; font-weight: 700; letter-spacing: -.035em; }
.pullquote--xl { max-width: 22ch; font-size: clamp(2.1rem, 5.5vw, 4.4rem); line-height: 1.02; }
.pullquote--lg { max-width: 26ch; font-size: clamp(1.8rem, 4.5vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; }

.quote-mark {
  font-weight: 800;
  font-size: clamp(6rem, 15vw, 12rem);
  line-height: .5;
  color: var(--acc-b-ink);
  opacity: .16;
  margin-bottom: .1rem;
}

.on-dark      { color: var(--on-dark); }
.on-dark-soft { color: var(--on-dark-2); }
.on-dark-lead {
  margin: 1.6rem 0 2.4rem;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--on-dark-2);
}

/* ---------------------------------------------------------- spec sheet --- */

.spec {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  box-shadow: 12px 12px 0 var(--acc);
  position: relative;
}
.spec::before,
.spec::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
}
.spec::before { top: 14px; left: 14px; border-top: 3px solid var(--acc3); border-left: 3px solid var(--acc3); }
.spec::after  { bottom: 14px; right: 14px; border-bottom: 3px solid var(--acc3); border-right: 3px solid var(--acc3); }

.spec__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.2rem 2rem;
}
.spec__price {
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--acc3);
  white-space: nowrap;
}
.spec__lede {
  max-width: 58ch;
  margin: 1.8rem 0 0;
  font-size: clamp(1.08rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--on-dark-2);
}
.spec__pledge {
  margin: 1.6rem 0 0;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.5;
  color: var(--on-dark);
  font-weight: 500;
  border-left: 3px solid var(--acc3);
  padding-left: 1rem;
}

.spec-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 2.4rem 0 0;
  border-top: 1px solid var(--rule-dark);
  font-family: var(--mono);
}
.spec-dl > div { padding: 1.2rem 1.5rem; border-left: 1px solid var(--rule-dark); }
.spec-dl > div:first-child { padding-left: 0; border-left: 0; }
.spec-dl > div:last-child  { padding-right: 0; }
.spec-dl dt { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.spec-dl dd { margin: .4rem 0 0; font-size: 1.05rem; color: var(--on-dark); }

/* ---------------------------------------------------------- mark lists --- */

.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.marks li {
  display: flex;
  gap: .8rem;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--on-dark);
}
.marks li::before { content: '—'; font-weight: 700; color: var(--acc3); flex: none; }
.marks--q    li::before { content: '?'; }
.marks--plus li::before { content: '+'; }
.marks--soft li { color: var(--on-dark-2); }
.marks--onPaper li { color: var(--ink-2); }
.marks--onPaper li::before { color: var(--acc); }
.marks--roomy { gap: .75rem; }
.marks--roomy li { font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.4; }
.marks--compact { gap: .55rem; }
.marks--compact li { font-size: 1.02rem; gap: .7rem; }
.marks--compact li::before { font-weight: 400; }

/* --------------------------------------------------------- status pill --- */

.status {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid var(--ink);
  padding: .55rem .95rem;
  background: rgba(46, 93, 70, .06);
}
.status__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acc);
  animation: mcPulse 2.4s ease-out infinite;
}
.status__text {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--ink);
}
.status__text b {
  font-weight: 400;
  color: var(--acc2);
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* -------------------------------------------------------------- ledger --- */

.ledger { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.ledger__row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--rule);
  transition: padding .25s ease, background-color .25s ease;
}
.ledger__row:hover { background-color: rgba(0, 0, 0, .04); padding-left: 1.1rem; }
.ledger__head { display: flex; align-items: baseline; gap: .9rem; }
.ledger__num { font-family: var(--mono); font-size: .9rem; color: var(--acc); }
.ledger__title { font-weight: 700; font-size: 1.55rem; letter-spacing: -.02em; }
.ledger__price { font-family: var(--mono); font-size: 1rem; color: var(--ink); white-space: nowrap; }

/* --------------------------------------------------------------- cards --- */

.card {
  display: block;
  color: var(--ink);
  border: 2px solid var(--rule);
  padding: 1.5rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { color: var(--ink); transform: translateY(-5px); box-shadow: 6px 6px 0 var(--acc); }
.card--feature {
  border-color: var(--acc);
  background: rgba(0, 0, 0, .03);
  box-shadow: 6px 6px 0 var(--ink);
}
.card--feature:hover { box-shadow: 9px 9px 0 var(--ink); }
.card__kicker {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .9rem;
}
.card--feature .card__kicker { color: var(--acc2); }
.card__title { margin: 0 0 .7rem; font-weight: 700; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.02em; }
.card__body { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--ink-2); }

/* ------------------------------------------------------------ beliefs ---- */

.belief {
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-top: 4px solid var(--acc);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: transform .22s ease, box-shadow .22s ease;
}
.belief:hover { transform: translateY(-6px); box-shadow: 8px 8px 0 var(--acc); }
.belief--alt { border-top-color: var(--acc-b); }
.belief--alt:hover { box-shadow: 8px 8px 0 var(--acc-b); }
.belief__num { font-family: var(--mono); font-size: .9rem; color: var(--acc); margin-bottom: .7rem; }
.belief--alt .belief__num { color: var(--acc-b); }
.belief h3 { font-size: 1.45rem; letter-spacing: -.02em; margin-bottom: .7rem; max-width: 20ch; }
.belief p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.belief__aside {
  margin: .9rem 0 0 !important;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted) !important;
}

/* --------------------------------------------------------------- chips --- */

.chips {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .8rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
}
.chip {
  display: inline-block;
  border: 1px solid var(--rule);
  padding: .4rem .7rem;
  color: var(--ink-2);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.chip:hover { transform: translateY(-2px); border-color: var(--acc); background-color: rgba(46, 93, 70, .06); }

.chipnav {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .8rem;
  margin-top: 2.4rem;
  font-family: var(--mono);
  font-size: .8rem;
}
.chipnav a { border: 1px solid var(--ink); padding: .5rem .9rem; color: var(--ink); }
.chipnav a:hover { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------- local list --- */

.local-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: .9rem;
  line-height: 1.4;
}
.local-list li {
  border-top: 1px solid var(--rule);
  padding: .9rem 0;
  color: var(--ink);
  transition: padding-left .2s ease, color .2s ease;
}
.local-list li:last-child { border-bottom: 1px solid var(--rule); }
.local-list li:hover { padding-left: .8rem; color: var(--acc); }
.local-list small { display: block; margin-top: .3rem; color: var(--muted); font-size: .82rem; line-height: 1.5; }

/* -------------------------------------------------------------- images --- */

/* Image slots carried over from the design. Each frame keeps the hatched
   placeholder behind the image, so a missing file degrades to the placeholder
   instead of a broken-image icon (see site.js). */
.hatch { background: repeating-linear-gradient(45deg, #DEDACE 0 11px, #D5D1C4 11px 22px); }

.photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--ink);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.photo:hover { transform: translateY(-5px); box-shadow: 8px 8px 0 var(--acc); }
.photo img,
.photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--empty::after,
.slot--empty::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* --ink-3, not --muted: this label sits on the hatch, whose darker stripe
     (#D5D1C4) drops --muted to 3.76:1. --ink-3 holds 5.03:1 there. */
  color: var(--ink-3);
}

.photo-cap {
  margin-top: .7rem;
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.45;
  color: var(--acc2);
}

.slot { position: relative; }
.slot img { width: 100%; height: 100%; object-fit: contain; }

.signature { width: clamp(200px, 32vw, 300px); height: clamp(70px, 10vw, 100px); }
.signature-cap {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Hero portrait. Hidden in the design's saved state — remove the `hidden`
   attribute in the markup and drop the image into images/ to bring it back. */
.portrait {
  flex: 1 1 360px;
  min-width: 280px;
  margin: 0;
  position: relative;
  align-self: stretch;
  min-height: clamp(400px, 62vh, 660px);
  border-left: 2px solid var(--ink);
}
.portrait--tall { flex-basis: 380px; min-width: 300px; min-height: clamp(420px, 64vh, 680px); }
.portrait > .slot { width: 100%; height: 100%; }
.portrait > .slot img { object-fit: cover; }
.portrait figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .55rem .9rem;
  display: flex;
  gap: 1.2rem;
}
.portrait figcaption i { font-style: normal; color: var(--acc3); }

/* --------------------------------------------------------------- tiers --- */

.tier {
  border: 2px solid var(--rule);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
}
.tier--feature {
  border-color: var(--ink);
  background: rgba(0, 0, 0, .03);
  box-shadow: 8px 8px 0 var(--acc);
}
.tier__head { display: flex; align-items: baseline; gap: .8rem; }
.tier__num { font-family: var(--mono); font-size: .85rem; color: var(--acc); }
.tier h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -.02em; }
.tier__price {
  font-family: var(--mono);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--acc2);
  font-weight: 500;
  margin-top: .8rem;
}
.tier p { margin: 1.1rem 0 1.4rem; font-size: 1.02rem; line-height: 1.5; color: var(--ink-2); }

/* --------------------------------------------------------- case studies --- */

.case__num { font-family: var(--mono); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 600; color: var(--acc); line-height: 1; }
.case__tag {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc2);
  margin-top: 1rem;
  border: 1px solid var(--acc2);
  display: inline-block;
  padding: .35rem .7rem;
}
.case__title { margin-top: 1.4rem; }
.case__sub {
  margin: .9rem 0 0;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 34ch;
}
.case__body {
  border: 1px solid var(--rule);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  gap: 1.6rem;
}
.case__body--feature { border-color: var(--acc); background: rgba(46, 93, 70, .05); }
.case__label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}
.case__body--feature .case__label { color: var(--acc2); }
.case__body p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); }
.case__related {
  margin: .7rem 0 0;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
}

/* ---------------------------------------------------------- home hero ---- */

.hero { overflow: hidden; }
.hero__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-left: var(--gut);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.hero__copy {
  flex: 1 1 540px;
  min-width: 0;
  max-width: 820px;
  padding-block: clamp(3rem, 7vw, 6.5rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}
.hero__copy--about { flex-basis: 520px; padding-block: clamp(3rem, 7vw, 6rem); }

/* ----------------------------------------------------------- hero art ---- */

/* The home hero's right-hand panel: a desktop app and a mobile app, drawn in
   the site's own language (2px ink frames, hard offset shadows, mono tags).
   Their interfaces build themselves on a 10s loop. Everything is sized in
   container-query units of the .devices stage, so the scene scales as one
   piece. The base styles ARE the finished state — every keyframe starts
   hidden and ends here — so prefers-reduced-motion (animation: none, above)
   and any browser that drops the animation show both apps complete. */
.hero__art {
  flex: 1 1 340px;
  max-width: 640px;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem) var(--gut) clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem);
  border-left: 2px solid var(--ink);
}
@media (max-width: 960px) {
  .hero__art {
    flex-basis: calc(100% + var(--gut));
    max-width: none;
    margin-left: calc(-1 * var(--gut));
    border-left: 0;
    border-top: 2px solid var(--ink);
    padding: clamp(1.8rem, 5vw, 2.6rem) var(--gut);
  }
}

.devices {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 5 / 4;
}
.dev {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 2px solid var(--ink);
}
.dev--desktop { left: 0; top: 5cqw; width: 84cqw; height: 66cqw; box-shadow: 1.4cqw 1.4cqw 0 var(--acc); }
.dev--phone   { right: 2cqw; bottom: 0; width: 30cqw; height: 60cqw; border-radius: 4cqw; box-shadow: 1.2cqw 1.2cqw 0 var(--ink); }

.dev__tag {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 2.4cqw;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: clamp(.56rem, 2.3cqw, .7rem);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: .35em .7em;
}
.dev--phone .dev__tag { left: 50%; transform: translate(-50%, -50%); }

/* Desktop chrome */
.dev__bar {
  height: 6cqw;
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  padding: 0 2.2cqw;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}
.dev__bar i { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; border: 1.5px solid var(--ink); }
.dev__bar i:first-child { background: var(--acc); }
.dev__body { flex: 1; display: flex; min-height: 0; }
.dev__side {
  width: 22cqw;
  flex: none;
  padding: 2.8cqw 2.2cqw;
  display: flex;
  flex-direction: column;
  gap: 2.2cqw;
  border-right: 2px solid var(--ink);
}
.dev__main { flex: 1; min-width: 0; padding: 3cqw; display: flex; flex-direction: column; gap: 2.2cqw; }

/* Phone chrome */
.dev__notch { height: 5cqw; flex: none; display: flex; align-items: center; justify-content: center; }
.dev__notch i { width: 9cqw; height: 1.6cqw; border-radius: 1cqw; background: var(--ink); }
.dev__screen { flex: 1; min-height: 0; padding: 1cqw 2.4cqw 2.4cqw; display: flex; flex-direction: column; gap: 2cqw; }
.dev__tabs {
  height: 6cqw;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 1cqw;
  border-top: 2px solid var(--ink);
  background: var(--paper);
  border-radius: 0 0 calc(4cqw - 2px) calc(4cqw - 2px);   /* the phone can't clip (its tag straddles the top edge), so round the bar itself */
}
.dev__tabs i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; border: 1.5px solid var(--ink); }
.dev__tabs i:first-child { background: var(--acc); }

/* Interface pieces */
.ui { display: block; flex: none; }
.ui--nav   { height: 2.2cqw; width: 82%; background: var(--rule); transform-origin: left; }
.ui--nav:nth-child(2) { width: 64%; }
.ui--nav:nth-child(3) { width: 74%; }
.ui--nav:nth-child(4) { width: 56%; }
.ui--on    { background: var(--acc); }
.ui--title { height: 3cqw; width: 48%; background: var(--ink); transform-origin: left; }
.ui-chart  { height: 17cqw; display: flex; align-items: flex-end; gap: 1.6cqw; border-bottom: 2px solid var(--ink); }
.ui--bar   { flex: 1; height: var(--h); background: var(--acc); transform-origin: bottom; }
.ui--hi    { background: var(--acc-b); }
.ui--row   { height: 2.2cqw; background: var(--rule); transform-origin: left; }
.ui--row:nth-of-type(2) { width: 86%; }
.ui--row:nth-of-type(3) { width: 68%; }
.ui--btn   { height: 4.8cqw; width: 36%; margin-top: auto; background: var(--acc); box-shadow: .6cqw .6cqw 0 var(--ink); }
.ui--card  { height: 8cqw; background: var(--paper); border: 1.5px solid var(--ink); border-left: .8cqw solid var(--acc); }
.dev__screen .ui--title { height: 2.6cqw; width: 62%; }
.dev__screen .ui--btn   { width: 100%; height: 5.2cqw; }

/* The loop. One 10s cycle; each group has its own entrance window so the
   scene rebuilds in order — sidebar, title, chart, rows, button, then the
   phone — holds, and clears together. The two content areas fade out at the
   end and stay dark through the first 5% of the next cycle, which hides the
   jump from "finished" back to "hidden" (including the ≤.3s intra-group
   stagger done with animation-delay). */
.dev__body, .dev__screen { animation: mcClear 10s linear infinite; }
.dev--desktop .ui--nav   { animation: mcDeskNav   10s var(--ease) infinite both; }
.dev--desktop .ui--title { animation: mcDeskTitle 10s var(--ease) infinite both; }
.ui--bar                 { animation: mcDeskBars  10s var(--ease) infinite both; }
.ui--row                 { animation: mcDeskRows  10s var(--ease) infinite both; }
.dev--desktop .ui--btn   { animation: mcDeskBtn   10s var(--ease) infinite both; }
.dev--phone .ui--title   { animation: mcPhoneTitle 10s var(--ease) infinite both; }
.ui--card                { animation: mcPhoneCards 10s var(--ease) infinite both; }
.dev--phone .ui--btn     { animation: mcPhoneBtn  10s var(--ease) infinite both; }

.ui--nav:nth-child(2), .ui--bar:nth-child(2), .ui--row:nth-of-type(2), .ui--card:nth-of-type(2) { animation-delay: .1s; }
.ui--nav:nth-child(3), .ui--bar:nth-child(3), .ui--row:nth-of-type(3), .ui--card:nth-of-type(3) { animation-delay: .2s; }
.ui--nav:nth-child(4), .ui--bar:nth-child(4) { animation-delay: .3s; }
.ui--bar:nth-child(5) { animation-delay: .4s; }
.ui--bar:nth-child(6) { animation-delay: .5s; }

@keyframes mcClear      { 0%, 6%  { opacity: 0; } 10%, 91% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes mcDeskNav    { 0%, 8%  { opacity: 0; transform: scaleX(0); } 13%, 100% { opacity: 1; transform: none; } }
@keyframes mcDeskTitle  { 0%, 13% { opacity: 0; transform: scaleX(0); } 17%, 100% { opacity: 1; transform: none; } }
@keyframes mcDeskBars   { 0%, 18% { transform: scaleY(0); }             24%, 100% { transform: none; } }
@keyframes mcDeskRows   { 0%, 28% { opacity: 0; transform: scaleX(0); } 33%, 100% { opacity: 1; transform: none; } }
@keyframes mcDeskBtn    { 0%, 35% { opacity: 0; transform: scale(.8); } 39%, 100% { opacity: 1; transform: none; } }
@keyframes mcPhoneTitle { 0%, 44% { opacity: 0; transform: scaleX(0); } 48%, 100% { opacity: 1; transform: none; } }
@keyframes mcPhoneCards { 0%, 49% { opacity: 0; transform: translateY(1.5rem); } 55%, 100% { opacity: 1; transform: none; } }
@keyframes mcPhoneBtn   { 0%, 58% { opacity: 0; transform: scale(.8); } 62%, 100% { opacity: 1; transform: none; } }

/* ----------------------------------------------------------- one-offs ---- */

.kicker-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; }
.kicker-row .num { font-family: var(--mono); font-size: .9rem; color: var(--acc); }
.kicker-row .txt { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acc2); }

.rule-top { border-top: 1px solid var(--rule); padding-top: 1.6rem; }
.aside-note {
  margin: 1.8rem 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-2);
  border-left: 3px solid var(--acc);
  padding-left: 1rem;
}

.why__pair { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.why__pair p:first-child {
  flex: 1 1 360px;
  margin: 0;
  font-size: clamp(1.12rem, 1.5vw, 1.4rem);
  line-height: 1.55;
  color: var(--on-dark-2);
}
.why__pair p:last-child {
  flex: 1 1 300px;
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.25;
  font-weight: 500;
  color: var(--on-dark);
  letter-spacing: -.02em;
}
.why__pair em { font-style: normal; color: var(--acc3); }

.closer {
  margin: 2rem 0 0;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 32ch;
  font-weight: 500;
  letter-spacing: -.01em;
}

/* -------------------------------------------------------- testimonials --- */

/* The feature quote takes the full row; the rest flow beside each other. All
   are real client words — see the note in README before adding any.
   The quotation marks are generated (open-quote / close-quote) and the opening
   one hangs into the margin by its own width, so the first line of text sits
   flush with the lines beneath it. Nothing decorative lives in the markup. */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
}

.quote {
  margin: 0;
  background: var(--paper-2);
  border: 2px solid var(--rule);
  border-top: 4px solid var(--acc);
  padding: clamp(1.6rem, 3.2vw, 2.4rem);
  display: flex;
  flex-direction: column;
  quotes: '\201C' '\201D' '\2018' '\2019';
  transition: transform .22s ease, box-shadow .22s ease;
}
.quote:hover { transform: translateY(-5px); box-shadow: 8px 8px 0 var(--acc); }

.quote blockquote {
  margin: 0;
  flex: 1;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-indent: -.31em;   /* the advance width of “ in Bricolage — hangs it in the margin */
  text-wrap: pretty;
}
.quote blockquote::before { content: open-quote; }
.quote blockquote::after  { content: close-quote; }

/* Attribution: name in the text face, context in the mono label voice, under
   a short accent rule instead of a full-width divider. */
.quote figcaption { margin-top: 1.6rem; line-height: 1.4; }
.quote figcaption::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--acc);
  margin-bottom: .85rem;
}
.quote__who {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.quote__where {
  display: block;
  margin-top: .35rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Feature variant: display-size quote, attribution bottom-right beside it when
   the card is wide enough for both, stacked beneath it when it isn't. Plain
   flex-wrap does the switching, so it behaves inside any container. */
.quote--feature {
  grid-column: 1 / -1;
  background: rgba(46, 93, 70, .05);
  border-color: var(--acc);
  box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(1.8rem, 3.6vw, 2.8rem) clamp(1.8rem, 4vw, 3.2rem);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.8rem clamp(2rem, 4vw, 3.5rem);
}
.quote--feature:hover { box-shadow: 9px 9px 0 var(--ink); }
.quote--feature blockquote {
  flex: 1 1 34rem;
  min-width: 0;
  max-width: 46ch;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.32;
  font-weight: 500;
  letter-spacing: -.022em;
  color: var(--ink);
}
.quote--feature figcaption {
  flex: 0 1 auto;
  max-width: 18rem;
  margin-top: 0;
}
/* The feature card's tinted ground costs ~0.6:1 — --muted lands at 4.28 there,
   so the citation steps darker to stay over the AA floor. */
.quote--feature .quote__where { color: var(--ink-3); }

/* --------------------------------------------------------- client names --- */

.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .9rem clamp(1.4rem, 3vw, 2.6rem);
  border-block: 1px solid var(--rule);
  padding-block: 1.3rem;
}
.clients__label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.clients__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem clamp(1.2rem, 2.5vw, 2.2rem);
}
.clients__list li {
  font-weight: 600;
  font-size: clamp(.95rem, 1.3vw, 1.1rem);
  letter-spacing: -.01em;
  color: var(--ink);
}

/* ------------------------------------------------------- booking embed --- */

/* The Google scheduler, inline. Only the /calendar/appointments/schedules/…
   ?gv=true form is frameable — the calendar.app.google short link sends
   X-Frame-Options: SAMEORIGIN and renders blank in an iframe. */
.booking {
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--acc);
  background: white;
  overflow: hidden;
}
/* Shown when the frame is blocked or JS/third-party cookies are off. */
.booking__fallback {
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ----------------------------------------------------------------- faq --- */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 1.3rem 2.8rem 1.3rem 0;
  font-weight: 600;
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--ink);
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--acc); }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--acc);
}
.faq details[open] summary::after { content: '–'; }
.faq details[open] summary { color: var(--acc2); }

.faq__a {
  margin: 0 0 1.5rem;
  max-width: 62ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.faq__a + .faq__a { margin-top: -.7rem; }

/* --------------------------------------------------------- screenshots --- */

/* Same degrade-to-placeholder contract as .photo (see site.js) — a missing
   file shows the hatched frame and its label, never a broken-image icon. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
.photo--wide { aspect-ratio: 16 / 10; }
.photo--wide img,
.photo--wide video { object-fit: cover; object-position: top center; }

/* ------------------------------------------------- secondary action ------ */

/* Paper-ground counterpart to .btn — same silhouette, no accent fill, so the
   primary (booking) always reads first and this reads clearly second. */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--btn-ink);
  box-shadow: 1px 1px 0 var(--ink);
}

/* -------------------------------------------------------- segment router --- */

/* The "who this is for" cards on the home page double as a router: each one is
   a link to wherever that reader should go next. Kept visually bare on purpose
   — the bordered .card look is already spoken for by Selected work further
   down the same page, and two card grids on one page read as a template. */
/* Flex column so the arrow link pins to the bottom of the row — otherwise a
   segment whose title wraps to two lines pushes its link out of alignment
   with the rest. */
.route {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  border-top: 2px solid var(--rule);
  padding-top: 1.1rem;
  transition: border-color .22s ease;
}
.route:hover { color: var(--ink); border-top-color: var(--acc); }
.route__title {
  margin: 0 0 .7rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  transition: color .22s ease;
}
.route:hover .route__title { color: var(--acc2); }
.route__go {
  display: block;
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .22s ease, transform .22s ease;
}
.route:hover .route__go { color: var(--acc2); transform: translateX(4px); }

/* ------------------------------------------------------ path timeline --- */
/* Home-page figure (#path): the first weeks of an engagement, week by week.
   Built from HTML/CSS rather than SVG so text stays at page sizes and wraps.
   Every x position is a fraction of the track (--x / --w in 0–1). The name
   column is --name-w wide and collapses to 0 on narrow screens, where each
   name sits above its track. Emphasis form: Discovery wears the accent; the
   build is a de-emphasis gray that fades out because its length is set by
   the plan, and it has no rounded end because it doesn't end on the chart.

   Color, validated (dataviz validator, surface --paper):
     --acc vs --muted-2 · CVD ΔE 15.8 (floor 8) · normal-vision ΔE 19.0
     (floor 15) — both pass. --muted-2 on paper is 2.94:1, under the 3:1 mark
     floor, which is why every mark carries a visible label and the <details>
     table duplicates the figure. (The "--muted-2 is on-dark only" rule is
     about text; this is a labeled fill.) --muted was tried and fails hard
     against the accent (normal ΔE 9.4, CVD 5.3) — don't swap it in. */

.timeline {
  --name-w: 11rem;
  --bar-h: 20px;
  --gate-room: 2rem;               /* space under the rows for the gate label */
  margin: 0;
  max-width: 62rem;
}

.timeline__key {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
  margin-bottom: 1.4rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.timeline__key span { display: inline-flex; align-items: center; gap: .55rem; }
.timeline__swatch { display: inline-block; width: 16px; height: 10px; border-radius: 0 3px 3px 0; }
.timeline__swatch--fixed { background: var(--acc); }
.timeline__swatch--open  { background: var(--muted-2); border-radius: 0; }

/* Shared x placement: the name column, then a fraction of what's left. */
.timeline__tick,
.timeline__line,
.timeline__gate { position: absolute; left: calc(var(--name-w) + (100% - var(--name-w)) * var(--x)); }

.timeline__axis {
  position: relative;
  height: 1.4rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.timeline__tick { top: 0; transform: translateX(-50%); white-space: nowrap; }
.timeline__tick--start { transform: none; }
.timeline__tick--end   { transform: translateX(-100%); }
.timeline__tick--gate  { color: var(--ink); }

.timeline__body { position: relative; padding-bottom: var(--gate-room); }
.timeline__line {
  top: 0;
  bottom: var(--gate-room);
  width: 1px;
  background: var(--rule);          /* x = 0: the baseline the bars grow from */
}
.timeline__line--minor { background: var(--rule-2); }
.timeline__gate { top: 0; bottom: var(--gate-room); width: 1px; background: var(--ink); }
.timeline__gate span {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: .6rem;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

.timeline__rows { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline__row {
  display: grid;
  grid-template-columns: var(--name-w) 1fr;
  align-items: center;
  min-height: 3.1rem;
}
.timeline__name {
  position: relative;               /* paints over the gridlines */
  justify-self: start;
  padding-right: 1rem;
  background: var(--paper);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.timeline__track { position: relative; height: 3.1rem; }

.timeline__bar,
.timeline__dot {
  position: absolute;
  top: 50%;
  left: calc(100% * var(--x));
  transform: translateY(-50%);
  cursor: default;
}
.timeline__bar { height: var(--bar-h); width: calc(100% * var(--w)); }
.timeline__bar--fixed { background: var(--acc); border-radius: 0 4px 4px 0; }   /* square at the baseline, rounded data end */
.timeline__bar--open  { background: linear-gradient(90deg, var(--muted-2) 0 35%, rgba(138, 133, 120, 0) 100%); }
.timeline__dot {
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 2px var(--paper);   /* surface ring */
}
/* Hit targets are bigger than the marks. */
.timeline__bar::before,
.timeline__dot::before { content: ''; position: absolute; inset: -12px; }
.timeline__bar:hover,
.timeline__bar:focus-visible,
.timeline__dot:hover,
.timeline__dot:focus-visible { filter: brightness(1.14); }

.timeline__val {
  position: absolute;
  top: 50%;
  left: calc(100% * var(--x) + 12px);
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--ink);                /* on the gray fill: 4.9:1 */
}
.timeline__val--dot { left: calc(100% * var(--x) + 16px); }

.timeline__cap {
  margin: 1.5rem 0 0;
  max-width: 58ch;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* The table twin. Same shape as the FAQ disclosure so it reads as one site. */
.timeline__table {
  margin-top: 1.4rem;
  max-width: 62rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.timeline__table summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: .95rem 2.4rem .95rem 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc2);
}
.timeline__table summary::-webkit-details-marker { display: none; }
.timeline__table summary:hover { color: var(--acc); }
.timeline__table summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--acc);
}
.timeline__table[open] summary::after { content: '–'; }
.timeline__table table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2rem;
  font-size: .98rem;
  line-height: 1.45;
}
.timeline__table th,
.timeline__table td {
  text-align: left;
  vertical-align: top;
  padding: .7rem 1rem .7rem 0;
  border-top: 1px solid var(--rule-2);
}
.timeline__table thead th {
  border-top: 0;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.timeline__table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.timeline__table td { color: var(--ink-2); }
.timeline__table td:nth-child(2),
.timeline__table td:nth-child(3) { font-family: var(--mono); font-size: .86rem; white-space: nowrap; color: var(--ink); }

@media (max-width: 640px) {
  .timeline { --name-w: 0rem; }
  .timeline__row { grid-template-columns: 1fr; min-height: 0; padding-top: .5rem; }
  .timeline__name { padding: 0 .5rem .05rem 0; font-size: .95rem; }
  .timeline__track { height: 2.5rem; }
  .timeline__tick--odd,
  .timeline__line--minor,
  .timeline__cont { display: none; }
  .timeline__table tbody th,
  .timeline__table td { white-space: normal; font-size: .92rem; }
  .timeline__table td:nth-child(2),
  .timeline__table td:nth-child(3) { white-space: normal; font-size: .8rem; }
}

@media (forced-colors: active) {
  .timeline__bar,
  .timeline__dot,
  .timeline__swatch,
  .timeline__line,
  .timeline__gate { forced-color-adjust: none; }
  .timeline__bar--fixed,
  .timeline__dot,
  .timeline__swatch--fixed,
  .timeline__gate { background: CanvasText; }
  .timeline__bar--open,
  .timeline__swatch--open { background: transparent; border: 1px solid CanvasText; }
  .timeline__line { background: GrayText; }
  .timeline__dot { box-shadow: 0 0 0 2px Canvas; }
}

/* ------------------------------------------------------------ tooltip --- */
/* Hover / tap / focus readout for any [data-tip] element; site.js creates
   and positions it. Fixed-position so it never moves the layout, and absent
   with JS off (the timeline's <details> table carries the same values). */

.tip {
  position: fixed;
  z-index: 70;
  max-width: 30ch;
  padding: .75rem .95rem .8rem;
  background: var(--ink);
  color: var(--on-dark-2);
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.tip[hidden] { display: none; }
.tip b {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--mono);
  font-weight: 400;
  font-size: .84rem;
  letter-spacing: .02em;
  color: var(--on-dark);
}

/* ==========================================================================
   APP UI — CRM, tasks and client portal
   Intentional additions, not in mcw-site. Same language as the site (paper,
   ink, pine; square corners; hard offset shadows; mono for scanning) at app
   density: 15px body, 32/40px controls, spacing from the --space-* scale.
   Every value reads a token, so a token edit restyles the app.
   ========================================================================== */

/* -------------------------------------------------------------- shell ---- */

.shell {
  display: grid;
  grid-template-columns: var(--sidenav-w) minmax(0, 1fr);
  grid-template-rows: var(--appbar-h) minmax(0, 1fr);
  grid-template-areas: "side bar" "side main";
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.5;
}
.shell--portal {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "bar" "main";
}
.shell__main { grid-area: main; min-width: 0; padding: var(--space-6); }
.shell--portal .shell__main { width: 100%; max-width: var(--wrap-max); margin-inline: auto; }

/* Compact density: one attribute shrinks every control in its subtree. */
[data-density="compact"] { --control-md: 32px; --control-sm: 28px; }

.sidenav {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4) 0 var(--space-5);
  background: var(--ink);
  color: var(--on-dark-2);
  overflow-y: auto;
}
.sidenav__brand {
  display: flex;
  align-items: center;
  height: calc(var(--appbar-h) - var(--space-4));
  padding: 0 var(--space-5);
  color: var(--on-dark);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}
.sidenav__brand i { font-style: normal; color: var(--acc3); }
.sidenav__group { display: grid; gap: 2px; }
.sidenav__label {
  padding: 0 var(--space-5) var(--space-2);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.sidenav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-md);
  padding: 0 var(--space-5);
  color: var(--on-dark-2);
  font-weight: 500;
  border-left: var(--border-accent) solid transparent;
}
.sidenav a:hover { color: var(--on-dark); background: var(--rule-dark-2); }
.sidenav a[aria-current="page"] {
  color: var(--on-dark);
  font-weight: 600;
  background: var(--rule-dark-2);
  border-left-color: var(--acc3);
}
.sidenav__count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--muted-2);
}
.sidenav a[aria-current="page"] .sidenav__count { color: var(--acc3); }

.appbar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: var(--paper);
  border-bottom: var(--border-frame) solid var(--ink);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.appbar__search { flex: 1 1 auto; max-width: 28rem; }
.appbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.shell--portal .appbar { border-top: 6px solid var(--acc); }
.appbar .wordmark { font-size: 1.15rem; }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto var(--appbar-h) minmax(0, 1fr); grid-template-areas: "side" "bar" "main"; }
  .sidenav { flex-direction: row; align-items: center; gap: 0; padding: 0; overflow-x: auto; }
  .sidenav__label { display: none; }
  .sidenav__group { display: flex; }
  .sidenav a { border-left: 0; border-bottom: var(--border-accent) solid transparent; white-space: nowrap; }
  .sidenav a[aria-current="page"] { border-bottom-color: var(--acc3); }
  .shell__main { padding: var(--space-4); }
}

/* -------------------------------------------------------- page header ---- */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: var(--border-hair) solid var(--rule);
}
.page-head__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-head__crumbs a { color: var(--acc2); }
.page-head__crumbs span + span::before,
.page-head__crumbs a + span::before,
.page-head__crumbs a + a::before { content: '/'; margin-right: var(--space-2); color: var(--muted); }
.page-head__title { font-size: 1.625rem; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; }
.page-head__meta { margin: var(--space-1) 0 0; font-size: .8125rem; color: var(--muted); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* -------------------------------------------------------------- panel ---- */

.panel {
  background: var(--paper-2);
  border: var(--border-hair) solid var(--rule);
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: calc(var(--control-md) + var(--space-4));
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-hair) solid var(--rule);
}
.panel__title { margin: 0; font-size: 1.125rem; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; }
.panel__body { padding: var(--space-4); }
.panel__body--flush { padding: 0; }
.panel__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-hair) solid var(--rule);
}
/* One panel per view may be the focus: ink frame and a hard pine offset. */
.panel--focus { border: var(--border-frame) solid var(--ink); box-shadow: var(--shadow-card-hover); }

/* ------------------------------------------------------------ toolbar ---- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}
.toolbar__spacer { flex: 1 1 auto; }
.toolbar__count { font-family: var(--mono); font-size: .8125rem; color: var(--muted); }

/* Segmented control: a row of square options sharing one frame. */
.seg { display: inline-flex; border: var(--border-hair) solid var(--control-border); }
.seg button,
.seg a {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--control-sm) - 2px);
  padding: 0 var(--space-3);
  border: 0;
  border-left: var(--border-hair) solid var(--control-border);
  background: var(--field);
  color: var(--ink-2);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
}
.seg > :first-child { border-left: 0; }
.seg [aria-pressed="true"],
.seg [aria-current="page"] { background: var(--ink); color: var(--on-dark); }

/* ------------------------------------------------------------ buttons ---- */

button.btn { font-family: inherit; line-height: inherit; cursor: pointer; }
.btn--sm,
.btn--md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  font-size: .875rem;
  line-height: 1.2;
  box-shadow: var(--shadow-control);
  white-space: nowrap;
}
.btn--sm { min-height: var(--control-sm); padding: 0 var(--space-3); }
.btn--md { min-height: var(--control-md); }
.btn--sm:hover,
.btn--md:hover { transform: translate(2px, 2px); box-shadow: var(--shadow-control-pressed); }
.btn--ghost.btn--sm,
.btn--ghost.btn--md { box-shadow: var(--shadow-control-pressed); }
.btn--ghost.btn--sm:hover,
.btn--ghost.btn--md:hover { transform: none; box-shadow: var(--shadow-control-pressed); }
.btn--danger { background: var(--danger); color: var(--btn-ink); }
.btn--danger:hover { background: var(--ink); color: var(--btn-ink); }
.btn--quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--acc2);
}
.btn--quiet:hover { background: var(--row-selected); color: var(--acc2); transform: none; box-shadow: none; }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--rule-2);
  color: var(--ink-3);
  border-color: var(--rule);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* Square icon button. The glyph is text (→ + × ⋯ ↓); always set aria-label. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-sm);
  height: var(--control-sm);
  padding: 0;
  border: var(--border-hair) solid transparent;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--control-border); color: var(--ink); background: var(--field); }

/* -------------------------------------------------------------- forms ---- */

.form { display: grid; gap: var(--space-4); max-width: var(--measure-form); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); }

.field { display: grid; gap: var(--space-1); }
.field__label { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.field__label .req { color: var(--danger); margin-left: 2px; }
.field__hint { font-size: .8125rem; color: var(--muted); }
.field__error { font-size: .8125rem; font-weight: 600; color: var(--danger); }
.field__error::before { content: '× '; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: var(--border-hair) solid var(--control-border);
  border-radius: var(--radius-none);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
}
.textarea { min-height: 6.5rem; padding: var(--space-2) var(--space-3); line-height: 1.5; resize: vertical; }
.input--sm, .select--sm { min-height: var(--control-sm); font-size: .875rem; }
.input::placeholder,
.textarea::placeholder { color: var(--muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: var(--border-frame) solid var(--acc); outline-offset: 1px; border-color: var(--ink); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset var(--border-accent) 0 0 var(--danger); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--rule-2); color: var(--ink-3); border-color: var(--rule); cursor: not-allowed; }

.select {
  appearance: none;
  padding-right: calc(var(--space-3) * 2 + 10px);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Search: an input with a leading mono glyph. */
.search { position: relative; }
.search::before {
  content: '/';
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  color: var(--muted);
  pointer-events: none;
}
.search .input { padding-left: calc(var(--space-3) + 1.1rem); }

/* Checkbox, radio, switch — native inputs, restyled. Label text is required. */
.choice { display: inline-flex; align-items: flex-start; gap: var(--space-2); font-size: .9375rem; color: var(--ink); cursor: pointer; }
.choice input { flex: none; margin: 2px 0 0; }
.choice__hint { display: block; font-size: .8125rem; color: var(--muted); }

.check,
.radio {
  appearance: none;
  width: 18px;
  height: 18px;
  border: var(--border-frame) solid var(--ink);
  background: var(--field);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
.radio { border-radius: var(--radius-round); }
.check::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--btn-ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0);
}
.check:checked { background: var(--acc); border-color: var(--acc); }
.check:checked::before { transform: scale(1); }
.check:indeterminate { background: var(--acc); border-color: var(--acc); }
.check:indeterminate::before { transform: scale(1); clip-path: inset(40% 0); }
.radio::before { content: ''; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--acc); transform: scale(0); }
.radio:checked::before { transform: scale(1); }
.check:focus-visible, .radio:focus-visible { outline: var(--border-frame) solid var(--acc); outline-offset: 2px; }
.check:disabled, .radio:disabled { border-color: var(--rule); background: var(--rule-2); cursor: not-allowed; }

.switch {
  appearance: none;
  position: relative;
  width: 38px;
  height: 22px;
  border: var(--border-frame) solid var(--ink);
  background: var(--rule-2);
  cursor: pointer;
  transition: background .16s ease;
}
.switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--ink);
  transition: transform .16s var(--ease), background .16s ease;
}
.switch:checked { background: var(--acc); }
.switch:checked::before { transform: translateX(16px); background: var(--btn-ink); }
.switch:focus-visible { outline: var(--border-frame) solid var(--acc); outline-offset: 2px; }

/* -------------------------------------------------------------- badge ---- */

/* Status always reads in words; the square mark and colour only repeat it. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--space-2);
  border: var(--border-hair) solid currentColor;
  background: var(--neutral-bg);
  color: var(--neutral);
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; background: currentColor; flex: none; }
.badge--info    { color: var(--info);    background: var(--info-bg); }
.badge--success { color: var(--success); background: var(--success-bg); }
.badge--warning { color: var(--warning); background: var(--warning-bg); }
.badge--danger  { color: var(--danger);  background: var(--danger-bg); }
.badge--solid   { color: var(--btn-ink); background: var(--acc); border-color: var(--acc); }
.badge--plain::before { display: none; }

/* ------------------------------------------------------------- avatar ---- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--control-sm);
  height: var(--control-sm);
  background: var(--acc2);
  color: var(--btn-ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.avatar--sm { width: 24px; height: 24px; font-size: .625rem; }
.avatar--lg { width: var(--control-lg); height: var(--control-lg); font-size: 1rem; }
.avatar--client { background: var(--acc-b); color: var(--acc-b-ink); }
.avatar--muted { background: var(--rule-2); color: var(--ink-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatars { display: inline-flex; }
.avatars .avatar { box-shadow: 0 0 0 2px var(--paper-2); }
.avatars .avatar + .avatar { margin-left: -6px; }

/* ---------------------------------------------------------- data table --- */

.dtable-wrap { overflow-x: auto; background: var(--paper-2); border: var(--border-hair) solid var(--rule); }
.dtable { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.4; }
.dtable th,
.dtable td {
  padding: var(--space-2) var(--space-3);
  height: var(--control-md);
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--border-hair) solid var(--rule-2);
}
.dtable thead th {
  position: sticky;
  top: 0;
  background: var(--paper);
  border-bottom: var(--border-frame) solid var(--ink);
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.dtable thead th button { all: unset; cursor: pointer; }
.dtable thead th button:focus-visible { outline: var(--border-frame) solid var(--acc); outline-offset: 2px; }
.dtable th[aria-sort] { color: var(--ink); }
.dtable th[aria-sort="ascending"] button::after  { content: ' ↑'; color: var(--acc); }
.dtable th[aria-sort="descending"] button::after { content: ' ↓'; color: var(--acc); }
.dtable tbody tr:hover { background: var(--paper); }
.dtable tbody tr[aria-selected="true"] { background: var(--row-selected); box-shadow: inset var(--border-accent) 0 0 var(--acc); }
.dtable tbody tr[aria-selected="true"] .dtable__sub { color: var(--ink-3); }
.dtable__check { width: 1%; }
.dtable__num { text-align: right !important; font-family: var(--mono); font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable__mono { font-family: var(--mono); font-size: .8125rem; white-space: nowrap; }
.dtable__primary { font-weight: 600; color: var(--ink); }
.dtable__primary a { color: var(--ink); }
.dtable__primary a:hover { color: var(--acc); }
.dtable__sub { display: block; font-size: .8125rem; font-weight: 400; color: var(--muted); }
.dtable__actions { width: 1%; white-space: nowrap; text-align: right; }
.dtable tfoot td { font-weight: 600; border-top: var(--border-frame) solid var(--ink); border-bottom: 0; }

/* Bulk bar replaces the toolbar while rows are selected. */
.bulkbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--on-dark);
  font-size: .875rem;
}
.bulkbar__count { font-family: var(--mono); color: var(--acc3); }

/* --------------------------------------------------------- pagination --- */

.pager { display: flex; align-items: center; gap: var(--space-1); font-family: var(--mono); font-size: .8125rem; }
.pager a,
.pager span[aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-sm);
  height: var(--control-sm);
  padding: 0 var(--space-2);
  color: var(--ink-2);
  border: var(--border-hair) solid transparent;
}
.pager a:hover { border-color: var(--control-border); color: var(--ink); }
.pager span[aria-current] { background: var(--ink); color: var(--on-dark); }
.pager__info { margin-right: auto; color: var(--muted); }

/* --------------------------------------------------------------- tabs ---- */

.tabs { display: flex; gap: var(--space-5); border-bottom: var(--border-frame) solid var(--rule); margin-bottom: var(--space-5); overflow-x: auto; }
.tabs a,
.tabs button {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  margin-bottom: calc(-1 * var(--border-frame));
  border-bottom: var(--border-frame) solid transparent;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.tabs a:hover, .tabs button:hover { color: var(--ink); border-bottom-color: var(--control-border); }
.tabs [aria-selected="true"],
.tabs [aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--acc); }
.tabs a:focus-visible, .tabs button:focus-visible { outline: var(--border-frame) solid var(--acc); outline-offset: 2px; }
.tabs__count { font-family: var(--mono); font-size: .75rem; color: var(--muted); }

/* --------------------------------------------------------------- stat ---- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-4); }
.stat {
  padding: var(--space-4);
  background: var(--paper-2);
  border: var(--border-hair) solid var(--rule);
  border-top: var(--border-frame) solid var(--ink);
}
.stat__label { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stat__value { margin-top: var(--space-2); font-size: 2rem; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat__delta { margin-top: var(--space-2); font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.stat__delta b { font-weight: 600; }
.stat__delta--up b   { color: var(--success); }
.stat__delta--down b { color: var(--danger); }

/* ----------------------------------------------------------- progress ---- */

.progress { display: grid; gap: var(--space-1); }
.progress__head { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--ink-2); }
.progress__value { font-family: var(--mono); color: var(--ink); }
.progress__track { height: 8px; background: var(--rule-2); }
.progress__fill { height: 100%; width: var(--value, 0%); background: var(--acc); }

/* ------------------------------------------------------------ stepper ---- */

/* Engagement stages for the client portal. State is in words, not colour. */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); counter-reset: step; }
.stepper li {
  counter-increment: step;
  position: relative;
  padding: var(--space-3) var(--space-3) 0 0;
  border-top: var(--border-cap) solid var(--rule-2);
}
.stepper li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: var(--space-2);
  border: var(--border-frame) solid var(--rule);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--muted);
}
.stepper__name { display: block; font-weight: 700; letter-spacing: -.01em; color: var(--ink-2); }
.stepper__state { display: block; margin-top: 2px; font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stepper .is-done { border-top-color: var(--acc); }
.stepper .is-done::before { content: '✓'; background: var(--acc); border-color: var(--acc); color: var(--btn-ink); }
.stepper .is-current { border-top-color: var(--ink); }
.stepper .is-current::before { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.stepper .is-current .stepper__name { color: var(--ink); }
.stepper .is-current .stepper__state { color: var(--acc2); }

/* -------------------------------------------------------- detail list ---- */

.details { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: var(--space-2) var(--space-5); margin: 0; font-size: .9375rem; }
.details dt { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.details dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------ activity feed ---- */

.feed { list-style: none; margin: 0; padding: 0; position: relative; }
.feed::before { content: ''; position: absolute; left: 11px; top: 4px; bottom: 4px; width: var(--border-hair); background: var(--rule); }
.feed__item { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); padding-bottom: var(--space-4); }
.feed__mark {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: var(--border-frame) solid var(--ink);
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 600;
  color: var(--ink);
}
.feed__mark--accent { background: var(--acc); border-color: var(--acc); color: var(--btn-ink); }
.feed__head { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; font-size: .875rem; color: var(--ink-2); }
.feed__head b { color: var(--ink); font-weight: 600; }
.feed__time { margin-left: auto; font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.feed__body {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--paper-2);
  border: var(--border-hair) solid var(--rule-2);
  font-size: .875rem;
  color: var(--ink-2);
}

/* ---------------------------------------------------------- alert/toast -- */

.alert {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hair) solid currentColor;
  border-left-width: var(--border-cap);
  background: var(--neutral-bg);
  color: var(--neutral);
}
.alert--info    { color: var(--info);    background: var(--info-bg); }
.alert--success { color: var(--success); background: var(--success-bg); }
.alert--warning { color: var(--warning); background: var(--warning-bg); }
.alert--danger  { color: var(--danger);  background: var(--danger-bg); }
.alert__title { font-weight: 700; font-size: .9375rem; }
.alert__title::before {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-right: var(--space-2);
}
.alert--info .alert__title::before    { content: 'Note'; }
.alert--success .alert__title::before { content: 'Done'; }
.alert--warning .alert__title::before { content: 'Check'; }
.alert--danger .alert__title::before  { content: 'Problem'; }
.alert__body { grid-column: 1; margin: 0; font-size: .875rem; color: var(--ink-2); }
.alert__actions { grid-column: 1; display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.alert .icon-btn { grid-column: 2; grid-row: 1; color: var(--ink-2); }

.toasts {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-3);
  width: min(24rem, calc(100vw - 2 * var(--space-5)));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--on-dark);
  border-left: var(--border-cap) solid var(--acc3);
  box-shadow: var(--shadow-toast);
  font-size: .875rem;
}
.toast__body { flex: 1; }
.toast__body small { display: block; color: var(--on-dark-2); }
.toast a { color: var(--acc3); font-weight: 600; }
.toast .icon-btn { color: var(--on-dark-2); }
.toast .icon-btn:hover { background: var(--rule-dark-2); border-color: var(--rule-dark); color: var(--on-dark); }

/* --------------------------------------------------------- dialog/menu --- */

.dialog {
  width: min(32rem, calc(100vw - 2 * var(--space-5)));
  padding: 0;
  background: var(--paper-2);
  color: var(--ink);
  border: var(--border-frame) solid var(--ink);
  box-shadow: var(--shadow-dialog);
}
.dialog::backdrop { background: var(--scrim); }
.dialog__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5) 0; }
.dialog__title { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.dialog__body { padding: var(--space-3) var(--space-5) var(--space-5); font-size: .9375rem; color: var(--ink-2); }
.dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: var(--border-hair) solid var(--rule); background: var(--paper); }

.menu {
  min-width: 12rem;
  padding: var(--space-1) 0;
  background: var(--paper-2);
  border: var(--border-hair) solid var(--ink);
  box-shadow: var(--shadow-menu);
  z-index: var(--z-dropdown);
}
.menu a,
.menu button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-sm);
  padding: 0 var(--space-3);
  font-size: .875rem;
  color: var(--ink);
  cursor: pointer;
}
.menu a:hover, .menu button:hover,
.menu a:focus-visible, .menu button:focus-visible { background: var(--row-selected); }
.menu kbd { margin-left: auto; font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.menu hr { border: 0; border-top: var(--border-hair) solid var(--rule); margin: var(--space-1) 0; }
.menu .is-danger { color: var(--danger); }
.menu__label { padding: var(--space-2) var(--space-3) var(--space-1); font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------- empty state --- */

.empty {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--border-hair) dashed var(--control-border);
  background: repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 10px), var(--paper);
}
.empty__title { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; }
.empty__body { margin: 0; max-width: 46ch; font-size: .9375rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- tasks -- */

.tasks { list-style: none; margin: 0; padding: 0; background: var(--paper-2); border: var(--border-hair) solid var(--rule); }
.task {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--control-md) + var(--space-2));
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-hair) solid var(--rule-2);
}
.task:last-child { border-bottom: 0; }
.task:hover { background: var(--paper); }
.task__title { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.task__title a { color: inherit; }
.task__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: 2px; font-size: .8125rem; color: var(--muted); }
.task__due { font-family: var(--mono); font-size: .75rem; }
.task__due--overdue { color: var(--danger); font-weight: 600; }
.task__side { display: flex; align-items: center; gap: var(--space-3); }
.task.is-done .task__title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--control-border); font-weight: 500; }

/* --------------------------------------------------------------- kanban -- */

.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: var(--space-4); overflow-x: auto; align-items: start; padding-bottom: var(--space-2); }
.board__col { background: var(--paper); border-top: var(--border-frame) solid var(--ink); }
.board__head { display: flex; align-items: baseline; justify-content: space-between; padding: var(--space-2) 0 var(--space-3); }
.board__name { font-weight: 700; font-size: .9375rem; }
.board__count { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.board__cards { display: grid; gap: var(--space-2); min-height: var(--control-lg); }
.board__cards.is-over { outline: var(--border-frame) dashed var(--acc); outline-offset: 4px; }
.kcard {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--paper-2);
  border: var(--border-hair) solid var(--rule);
  color: var(--ink);
  cursor: grab;
}
.kcard:hover { border-color: var(--ink); }
.kcard.is-dragging { border: var(--border-frame) solid var(--ink); box-shadow: var(--shadow-card-hover); cursor: grabbing; }
.kcard__client { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kcard__title { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.kcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* --------------------------------------------------------- portal files -- */

.files { list-style: none; margin: 0; padding: 0; border-top: var(--border-hair) solid var(--rule); }
.file {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-hair) solid var(--rule);
}
.file__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--border-frame) solid var(--ink);
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.file__name { font-weight: 600; color: var(--ink); }
.file__meta { display: block; font-family: var(--mono); font-size: .75rem; color: var(--muted); }

/* -------------------------------------------------------- message thread - */

.thread { display: grid; gap: var(--space-4); }
.msg { max-width: 38rem; }
.msg__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); font-size: .8125rem; color: var(--ink-2); }
.msg__head b { color: var(--ink); }
.msg__time { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.msg__body { padding: var(--space-3) var(--space-4); background: var(--paper-2); border: var(--border-hair) solid var(--rule); font-size: .9375rem; color: var(--ink-2); }
.msg--own { justify-self: end; }
.msg--own .msg__head { justify-content: flex-end; }
.msg--own .msg__body { background: var(--row-selected); border-color: var(--acc); }
.composer { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--border-frame) solid var(--ink); }
.composer__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }