/* ========================================================================
   MP Ventures — mp.ventures
   ------------------------------------------------------------------------
   A deliberately different visual language from mercp.com. The consultancy
   site is dark, restrained and agency-toned; this is a founder-facing
   product offer, so it inverts to a warm, light ground with an editorial
   serif — closer in feel to ycombinator.com's warm cream/near-black and
   jeevesy.com's friendly, generous, app-like surfaces.

   Shared with Mercurial Phoenix: the logo mark, favicon, headshot, and
   General Sans (kept as the UI/body face so the brand still reads as MP).
   Everything else here — palette, display face, panel rhythm, component
   shapes — is this property's own.
   ======================================================================== */
:root {
  /* Warm paper ground rather than mercp.com's near-black. */
  --cream: #f7f3ea;
  --cream-deep: #efe8da;
  --surface: #fffdf9;

  --ink: #17150f;
  --ink-soft: #4e4839;
  --umber: #6f6a5b;

  /* MP orange, warmed to sit on cream. -deep is the accessible variant
     used for text on cream and for button fills under white text. */
  --orange: #e4551d;
  --orange-deep: #b8420e;
  --orange-wash: #fbe8dd;

  /* Jeevesy's brass, carried in as the second accent — marks the
     tech-for-good lane and the numbered process steps. */
  --brass: #b8914f;
  --brass-text: #8a6a2f;
  --brass-light: #e0c48a;
  --brass-wash: #f5ecda;

  /* Deep grounded green for the one full-bleed dark panel. */
  --forest: #2b4438;
  --forest-deep: #1e3128;

  --hairline: rgba(23, 21, 15, 0.10);
  --hairline-strong: rgba(23, 21, 15, 0.18);
  --hairline-on-dark: rgba(255, 253, 249, 0.20);

  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "General Sans", "Helvetica Neue", Arial, sans-serif;

  --container-w: 1160px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  /* Generous, app-like radii — Jeevesy's shape language, not mercp's. */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Depth instead of hairline boxes. */
  --shadow-sm: 0 1px 2px rgba(23, 21, 15, 0.04), 0 10px 24px -18px rgba(23, 21, 15, 0.30);
  --shadow-md: 0 2px 6px rgba(23, 21, 15, 0.05), 0 22px 48px -26px rgba(23, 21, 15, 0.38);
  --shadow-lg: 0 4px 12px rgba(23, 21, 15, 0.06), 0 40px 80px -34px rgba(23, 21, 15, 0.45);

  /* The quotidian page shows job ids and timestamps out of the app; they read
     as machine text or they read as decoration. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --header-h: 78px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform 0.2s var(--ease);
}

.skip-link:focus { transform: translateY(0); }
main:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--orange-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.panel-dark :focus-visible,
.mobile-drawer :focus-visible,
.site-footer :focus-visible { outline-color: var(--brass-light); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
p { margin: 0; text-wrap: pretty; }

/* ========================================================================
   Typography — editorial serif for display, General Sans for everything
   structural. The pairing is what keeps this warm without going soft.
   ======================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  /* A display line that has to break should break evenly, never shed a
     single trailing word. Headings short enough to fit are unaffected —
     balance never adds a line. */
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 4.8vw, 3.7rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }

/* Emphasised phrase inside a display heading. */
h1 em, h2 em {
  font-style: italic;
  color: var(--orange-deep);
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

@media (min-width: 720px) {
  .container { padding-inline: var(--space-4); }
}

.container-narrow {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}

section { padding-block: var(--space-6); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

/* ========================================================================
   Full-bleed panel rotation. Sections alternate cream / warm white, with
   the forest and orange panels used once each so the dark moments land.
   ======================================================================== */
.panel-surface { background: var(--surface); }
.panel-cream-deep { background: var(--cream-deep); }

.panel-dark {
  background: var(--forest);
  color: var(--cream);
}

.panel-dark h1, .panel-dark h2, .panel-dark h3 { color: var(--cream); }
.panel-dark .eyebrow { color: var(--brass-light); }
.panel-dark p { color: rgba(247, 243, 234, 0.78); }

.panel-warm {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #cf4512 0%, #b53c0c 55%, #9c3409 100%);
  color: #fff;
}

.panel-warm h2 { color: #fff; }
.panel-warm p { color: rgba(255, 255, 255, 0.88); }
.panel-warm .eyebrow { color: rgba(255, 255, 255, 0.82); }

/* ========================================================================
   Buttons
   ======================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              color 0.25s var(--ease), border-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--orange-deep);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(184, 66, 14, 0.7);
}

.btn-primary:hover {
  background: #9c3609;
  box-shadow: 0 16px 32px -14px rgba(184, 66, 14, 0.75);
}

.btn-ink { background: var(--ink); color: var(--cream); }
.btn-ink:hover { background: #000; }

/* Quiet secondary on light grounds. */
.btn-ghost-dark {
  border-color: var(--hairline-strong);
  color: var(--ink);
  background: transparent;
}

.btn-ghost-dark:hover { border-color: var(--ink); background: rgba(23, 21, 15, 0.04); }

/* Quiet secondary on dark/coloured panels. */
.btn-ghost-light {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: transparent;
}

.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

.btn-cream { background: var(--cream); color: var(--ink); }
.btn-cream:hover { background: #fff; }

.btn-lg { padding: 1em 1.9em; font-size: 1rem; }

/* ========================================================================
   Header / nav — light and warm, so the first thing a visitor sees is
   the opposite of mercp.com's dark masthead.
   ======================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(247, 243, 234, 0.85);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

body.is-scrolled .site-header {
  border-bottom-color: var(--hairline);
  background: rgba(247, 243, 234, 0.94);
}

body.nav-open .site-header { background: var(--ink); border-bottom-color: transparent; }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
}

.brand-mark { height: 34px; width: auto; flex-shrink: 0; }

.brand-word {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.015em;
  line-height: 1.05;
  white-space: nowrap;
}

.brand-word .of-mp {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6em;
  letter-spacing: 0.04em;
  color: var(--umber);
  margin-top: 0.15em;
}

body.nav-open .brand { color: var(--cream); }
body.nav-open .brand-word .of-mp { color: rgba(247, 243, 234, 0.6); }

.site-nav { display: none; align-items: center; gap: var(--space-3); }

.site-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.94rem;
  white-space: nowrap;
  color: var(--ink-soft);
  position: relative;
  transition: color 0.2s var(--ease);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--ink); }

/* Seven links plus the CTA no longer fit a 900px header — below this the
   drawer carries the nav instead.

   The gap stays at --space-3 at every width. It used to widen to --space-4
   from 1240px, which had room while the nav held seven links; the eighth
   (Quotidian) tips it, and because the container is already capped at
   1160px by then there is no wider viewport that rescues it — the nav
   simply wrapped to two lines from 1240px up. Links are nowrap so a future
   ninth link overflows visibly rather than quietly breaking "Why now"
   across two lines. */
@media (min-width: 1080px) {
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
}

.header-actions { display: flex; align-items: center; gap: var(--space-2); }

.header-actions .btn { display: none; }
@media (min-width: 560px) { .header-actions .btn { display: inline-flex; } }

.nav-toggle {
  background: none;
  border: none;
  padding: 0.5rem;
  margin-right: -0.5rem;
  cursor: pointer;
}

.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background 0.25s var(--ease);
}

body.nav-open .nav-toggle .bar { background: var(--cream); }
body.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 45;
  background: var(--ink);
  color: var(--cream);
  padding: var(--space-4) var(--space-3) var(--space-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.mobile-drawer.is-open { opacity: 1; pointer-events: auto; }
.mobile-drawer[inert] { visibility: hidden; }

.mobile-drawer nav { display: flex; flex-direction: column; gap: var(--space-2); }

.mobile-drawer a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  color: rgba(247, 243, 234, 0.86);
}

.mobile-drawer a[aria-current="page"] { color: var(--orange); }
.mobile-drawer .btn { margin-top: var(--space-3); align-self: flex-start; font-family: var(--font-body); font-size: 0.95rem; }

@media (min-width: 900px) { .mobile-drawer { display: none; } }

/* ========================================================================
   Hero — light, asymmetric, with the operator card carrying the assurance
   claim. Deliberately not mercp.com's centred dark slab.
   ======================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding-block: calc(var(--header-h) + var(--space-5)) var(--space-6);
}

/* Soft warm bloom rather than a hard radial glow on black. */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 88% 6%, rgba(228, 85, 29, 0.16), transparent 68%),
    radial-gradient(40% 40% at 4% 88%, rgba(184, 145, 79, 0.16), transparent 70%);
}

.hero .container { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); }
}

.hero h1 { margin-top: var(--space-3); max-width: 17ch; }
.hero-lede {
  margin-top: var(--space-3);
  font-size: 1.14rem;
  color: var(--ink-soft);
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.hero-fineprint {
  margin-top: var(--space-3);
  font-size: 0.88rem;
  color: var(--umber);
  max-width: 46ch;
}

/* Terms-at-a-glance pills under the hero copy. */
.hero-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-4);
}

.hero-term {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 249, 0.9);
  border: 1px solid var(--hairline);
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.hero-term .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

/* The operator card — puts the named, accountable person in the hero,
   because that accountability is the actual product. */
.operator-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 420px;
  width: 100%;
  margin-inline: auto;
}

.operator-card-media {
  position: relative;
  background: var(--cream-deep);
}

.operator-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(228, 85, 29, 0.16) 0%, rgba(184, 145, 79, 0.24) 100%);
  mix-blend-mode: multiply;
}

.operator-card-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 20%;
  background: var(--cream-deep);
}

.operator-card-body { padding: var(--space-3) var(--space-3) var(--space-4); }

.operator-card-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.operator-card-role {
  margin-top: 0.1rem;
  font-size: 0.85rem;
  color: var(--orange-deep);
  font-weight: 600;
}

.operator-card-quote {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-soft);
}

.operator-card-list {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 0.5rem;
}

.operator-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.operator-card-list .tick { color: var(--brass-text); flex-shrink: 0; font-weight: 700; }

/* Two claims sit in this card and they answer different objections, so they
   get a tab each rather than one long scroll. "How I work" is the method —
   what the month actually buys. "Track record" is the standing to sell it:
   the career that makes a fixed-fee promise credible in the first place.
   Stacking both would have doubled the card's height and pushed the hero's
   call to action below the fold, which is the one thing this section cannot
   afford.

   Progressive enhancement runs the other way from the usual: the panels
   carry no hidden state in the markup, so with JavaScript off both simply
   stack and stay readable. It is the tablist that ships hidden, and main.js
   reveals it as its first act — dead tabs are worse than no tabs. */
.operator-tabs {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--cream-deep);
  border-radius: var(--radius-pill);
}

.operator-tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem 0.55rem;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--umber);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.operator-tab:hover { color: var(--ink); }

.operator-tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.operator-panel { margin-top: var(--space-3); }

/* The record panel runs about 55px taller than the method one, and letting the
   card resize under the cursor on a click is the cheapest-looking thing a hero
   can do. Once JS is in, the two panels are stacked into a single grid cell:
   the cell takes the height of the taller, so the card never moves. The
   inactive panel keeps its space but goes visibility:hidden, which drops it
   from the tab order and from the accessibility tree exactly as [hidden]
   would. is-tabbed is added by main.js, so with JS off the wrapper stays in
   normal flow and the panels stack and read rather than overlapping. */
.operator-panels.is-tabbed { display: grid; }
.operator-panels.is-tabbed > .operator-panel { grid-area: 1 / 1; }
.operator-panels.is-tabbed > .operator-panel.is-inactive { visibility: hidden; }

/* The panel already carries the gap under the tabs. */
.operator-panel > :first-child { margin-top: 0; }

/* The career, oldest first: the arc from an e-learning startup in Sydney to
   a venture studio in London is itself the "20+ years" claim, and reversed
   it reads as a list of jobs instead. */
.operator-cv {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

/* The year column is cut to hold "Early 2000s" on one line, so the six rows
   share a single scannable left edge. The card is max-width 420px and centred,
   so its width only varies on viewports narrower than that — hence one
   breakpoint, sized to where the card stops being full width. */
.operator-cv li {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0.45rem;
  align-items: baseline;
}

.cv-year {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--brass-text);
}

@media (min-width: 440px) {
  .operator-cv li { grid-template-columns: 5.4rem 1fr; gap: 0.5rem; }
  .cv-year { font-size: 0.75rem; }
}

.cv-what {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.cv-what strong { color: var(--ink); font-weight: 600; }

/* City rides at the end of the line rather than under the year: "Early 2000s"
   and "New York" cannot share a column narrow enough to leave the
   descriptions room to breathe. */
.cv-where { color: var(--umber); white-space: nowrap; }
.cv-where::before { content: " \00b7  "; }

/* ========================================================================
   Assurance bar — two rows, because they are two different claims.
   Row one is lineage: the venture studios this way of working came out of,
   Mercurial Phoenix among them. Row two is output: the startups and products
   actually shipped. Merging them into one row blurred the two into a single
   undifferentiated logo soup, which is what it was doing before.
   ======================================================================== */
.assurance-bar {
  background: var(--surface);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.assurance-row + .assurance-row {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.assurance-label {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--umber);
  margin-bottom: var(--space-3);
}

.assurance-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
}

.logo-chip { flex-shrink: 0; display: flex; align-items: center; height: 30px; }

.logo-chip img {
  height: 100%;
  width: auto;
  max-width: 128px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease);
}

.logo-chip img:hover { opacity: 1; filter: grayscale(0); }

.logo-chip-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink-soft);
  white-space: nowrap;
  opacity: 0.72;
  transition: opacity 0.25s var(--ease);
}

.logo-chip-text:hover { opacity: 1; }

/* basket.ai's only surviving mark is its square app icon — the domain now
   sits parked, so the icon on its F6S profile is the last copy of it. A bare
   26px square reads as an unidentified favicon in a row of wordmarks, so the
   chip pairs the mark with the name set exactly as the text chips set theirs. */
.logo-chip-lockup {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink-soft);
  white-space: nowrap;
  opacity: 0.72;
  transition: opacity 0.25s var(--ease);
}

.logo-chip-lockup img {
  height: 26px;
  width: 26px;
  border-radius: 7px;
  filter: grayscale(1);
  transition: filter 0.25s var(--ease);
}

.logo-chip-lockup:hover { opacity: 1; }
.logo-chip-lockup:hover img { filter: grayscale(0); }

/* Mercurial Phoenix sits in the lineage row as a peer to the studios beside
   it, so it takes the same greyscale-until-hover treatment as everything
   else — a single chip at full colour would read as a rendering fault, not
   as emphasis.

   This is logo-mark-solid.png: the transparent-ground mark the site header
   and footer already carry, not the orange-filled tile. The tile is the
   wrong artwork for this row twice over — it sits among wordmarks as a solid
   block, and greyscaling it yields a grey slab with the bird knocked out of
   it rather than a grey bird.

   That artwork is a 600x600 canvas with the bird inset: 520x404 of ink at
   (40, 98). Sizing the box to 35px therefore lands the bird itself at the
   30x23 the other marks occupy, and the ~2px of transparent gutter each side
   is pulled back out so the gap to the wordmark matches basket.ai's lockup.
   The name is set in General Sans 700, which is how mercp.com sets its own
   wordmark: faithful to the brand without pulling that site's display face
   across. */
.logo-chip-mp img {
  width: 35px;
  height: 35px;
  border-radius: 0;
  object-fit: contain;
  margin-inline: -2px;
}

/* A Collector's Refuge has no portable logomark, so its mark is set the way
   acollectorsrefuge.com's own masthead sets it: Marcellus, uppercase, 0.3em
   tracking. In this strip it is set to the shortform, "ACR" — every other
   chip here is a compact mark, and the full four-word name ran wider than
   the rest of the row put together, which read as a caption that had wandered
   into a logo strip rather than as a peer of the marks beside it. The full
   wordmark is still what the work cards carry (.wordmark-acr, below), on both
   the homepage and /work, where there is room for a name to be a name.

   Three glyphs where there were twenty-two, so the size goes up: at the
   strip's original 1.02rem the shortform sat visibly smaller than the
   artwork either side of it. */
.logo-chip-acr {
  font-family: "Marcellus", var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  /* 0.3em of trailing track would otherwise push the chip off-centre. */
  text-indent: 0.3em;
  opacity: 0.72;
  transition: opacity 0.25s var(--ease);
}

.logo-chip-acr:hover { opacity: 1; }

/* Jeevesy's chip is the live composite mark (see .wordmark-jeevesy below),
   not a flat export. The strip's whole conceit is greyscale-at-rest that
   resolves to full colour under the cursor, and a single-colour PNG has
   nothing to resolve to — hovering it did visibly nothing. Built from the
   masks, the hover reveals what the mark actually is: the brass hand and
   the brass nodes scattered through the brain. greyscale() applies to the
   element's painted output, so the same rest/hover treatment as every
   other chip works here without a second set of artwork.

   Both classes are chained so these win over .wordmark-jeevesy's own colour
   and sizing, which is set further down the sheet. 1.75rem puts the lockup
   at roughly the 30px the flat export occupied, so the row's rhythm is
   unchanged. */
.wordmark-jeevesy.logo-chip-jeevesy {
  flex-shrink: 0;
  font-size: 1.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
  filter: grayscale(1);
  opacity: 0.72;
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease);
}

.wordmark-jeevesy.logo-chip-jeevesy:hover { opacity: 1; filter: grayscale(0); }

.logo-chip-text .chip-note {
  margin-left: 0.4em;
  font-weight: 500;
  font-size: 0.78em;
  color: var(--umber);
}

/* ========================================================================
   Proof band — the single dark full-bleed moment on the homepage.
   ======================================================================== */
.proof-bar { background: var(--forest); color: var(--cream); }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.proof-item .num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brass-light);
}

.proof-item .label {
  margin-top: 0.5rem;
  color: rgba(247, 243, 234, 0.74);
  font-size: 0.92rem;
}

/* ========================================================================
   Section headers
   ======================================================================== */
/* The heading takes the container's full width; the standfirst keeps the
   old 700px measure. At 700px a 43-character line like "Being honest about
   fit is part of the deal." broke one word early, which read as an accident
   rather than a choice. Headings long enough to genuinely need two lines
   still get them — balanced, from the rule up in Typography. */
.section-head { margin-bottom: var(--space-5); }
.section-head h2 { margin-top: var(--space-2); }
.section-head p {
  margin-top: var(--space-3);
  color: var(--ink-soft);
  font-size: 1.06rem;
  max-width: 700px;
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center p { margin-inline: auto; }
.section-head.center .eyebrow { justify-content: center; }

/* ========================================================================
   Why now — the then/now shift
   ------------------------------------------------------------------------
   Deliberately not another card grid: the page already runs six of them, and
   the argument here is a pairing, not a set. Three rows, each holding one
   observation on both sides of the same line. The "now" side takes the ink
   and the accent rule; the "until recently" side is set back in umber so the
   contrast does the reading for you.
   ======================================================================== */
.shift-list { border-top: 1px solid var(--hairline-strong); }

.shift-row {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.shift-label {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.shift-when {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber);
}

.shift-side p { color: var(--umber); font-size: 1rem; }

.shift-side.is-now {
  padding-left: var(--space-3);
  border-left: 2px solid var(--orange);
}

.shift-side.is-now .shift-when { color: var(--orange-deep); }
.shift-side.is-now p { color: var(--ink); }

.why-now-close { margin-top: var(--space-5); max-width: 74ch; }
.why-now-close p { color: var(--ink-soft); font-size: 1.06rem; }
.why-now-close p + p { margin-top: var(--space-3); }
.why-now-close em { font-style: italic; font-weight: 600; color: var(--orange-deep); }

@media (max-width: 900px) {
  .shift-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .shift-label { font-size: 1.1rem; margin-bottom: 0.25rem; }
  .shift-side.is-now { padding-left: var(--space-2); }
}

/* ========================================================================
   Comparison table
   ======================================================================== */
.compare-scroll {
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.compare-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 0.92rem; }

.compare-table th, .compare-table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.compare-table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--umber);
}

.compare-table thead th { padding-block: var(--space-3); }

.compare-table td:first-child, .compare-table tbody th:first-child {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  font-size: 0.9rem;
}

.compare-table thead th.col-us {
  background: var(--orange-deep);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  border-bottom-color: var(--orange-deep);
}

.compare-table thead th.col-us:first-of-type { border-top-left-radius: var(--radius-md); }

.compare-table td.col-us {
  background: var(--orange-wash);
  font-weight: 600;
  color: var(--ink);
}

.compare-table td { color: var(--ink-soft); }

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }

.compare-table tbody tr:last-child td.col-us { border-bottom-left-radius: 0; }

/* ========================================================================
   Process — numbered cards, brass numerals
   ======================================================================== */
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 860px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }

.process-step {
  position: relative;
  padding: var(--space-4) var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.process-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.process-step .step-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--brass-text);
}

.process-step .step-when {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.process-step h3 { font-size: 1.15rem; }
.process-step p { color: var(--ink-soft); font-size: 0.93rem; }

/* ========================================================================
   Method — the engine room. The one full-bleed forest *section* (the proof
   band above it is a strip, not a section), because the pipeline is the
   argument that makes a four-week fixed price credible, and it should
   land with weight immediately before the price is named.
   ======================================================================== */
.method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (min-width: 720px) { .method-grid { grid-template-columns: 1fr 1fr; } }

.method-card {
  background: rgba(247, 243, 234, 0.05);
  border: 1px solid var(--hairline-on-dark);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.method-card .method-tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-light);
}

.method-card h3 { font-size: 1.15rem; line-height: 1.3; }
.method-card p { font-size: 0.94rem; margin: 0; }

/* The bubble treatment for a highlighted claim inside #method. mp-25 removed
   the proof paragraph that was its only user; the class is kept, at Omar's
   instruction, so the treatment is here when something is put in it again.
   Nothing on the site carries it at present — that is deliberate, not dead
   code left behind by an incomplete removal. */
.method-proof {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(184, 145, 79, 0.12);
  border: 1px solid rgba(224, 196, 138, 0.28);
  font-size: 0.95rem;
}

.method-proof p { margin: 0; }
.method-proof strong { color: var(--cream); font-weight: 600; }

/* The counterweight: everything above is automated, and none of it has
   judgement. Set apart from the cards so the contrast is the point. */
.method-human {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline-on-dark);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: start;
}

@media (min-width: 860px) {
  .method-human { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-4); }
}

.method-human h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  margin: 0;
}

.method-human h3 em { font-style: italic; color: var(--brass-light); }
.method-human p + p { margin-top: var(--space-2); }

/* ========================================================================
   Pricing
   ======================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 800px) { .pricing-grid { grid-template-columns: 1fr 1fr; } }

.price-card {
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.price-card.is-featured {
  background: var(--ink);
  color: var(--cream);
  box-shadow: var(--shadow-lg);
}

.price-card.is-featured .price-card-note { color: rgba(247, 243, 234, 0.7); }
.price-card.is-featured .eyebrow { color: var(--brass-light); }
.price-card.is-featured .amount .unit { color: rgba(247, 243, 234, 0.6); }
.price-card.is-featured li { color: rgba(247, 243, 234, 0.88); }

.price-card .amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: var(--space-1);
}

.price-card .amount .unit {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--umber);
}

.price-card-note { color: var(--ink-soft); font-size: 0.95rem; }

.price-card ul { display: grid; gap: 0.6rem; margin-top: var(--space-2); }

.price-card li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.price-card li .tick { flex-shrink: 0; color: var(--brass-text); font-weight: 700; }
.price-card.is-featured li .tick { color: var(--brass-light); }

.price-card .btn { margin-top: var(--space-3); align-self: flex-start; }

.scoping-note {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--brass-wash);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.scoping-note h3 { font-size: 1.25rem; }
.scoping-note p { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.95rem; max-width: 62ch; }

/* ========================================================================
   Included / not included
   ======================================================================== */
.included-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 800px) { .included-grid { grid-template-columns: 1fr 1fr; } }

.included-col {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.included-col.not-included { background: transparent; box-shadow: none; border: 1px dashed var(--hairline-strong); }

.included-col h3 { font-size: 1.1rem; }
.included-col ul { margin-top: var(--space-3); display: grid; gap: 0.6rem; }
.included-col li { display: flex; gap: 0.65rem; font-size: 0.93rem; color: var(--ink-soft); }
.included-col li .tick { color: var(--brass-text); flex-shrink: 0; font-weight: 700; }
.included-col.not-included li { color: var(--umber); }
.included-col.not-included li .tick { color: var(--umber); }

/* ========================================================================
   After launch — what happens when the fixed month ends.

   This is the objection nobody asks out loud on the call: "and then what,
   once you've gone?" Leaving it unanswered is what makes a fixed-fee build
   feel like a cliff edge. Three options, stated at the same altitude so
   none of them reads as the trap: walk away, pay monthly, or share revenue
   instead of paying monthly. Deliberately unpriced — a second price card
   here would compete with the one number the page is built to land.
   ======================================================================== */
.after-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (min-width: 900px) { .after-grid { grid-template-columns: repeat(3, 1fr); } }

.after-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.after-tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-text);
  background: var(--brass-wash);
  border-radius: var(--radius-pill);
  padding: 0.35em 0.85em;
}

.after-card h3 { font-size: 1.2rem; }
.after-card p { color: var(--ink-soft); font-size: 0.95rem; }

.after-footnote {
  margin-top: var(--space-4);
  margin-inline: auto;
  max-width: 68ch;
  text-align: center;
  color: var(--umber);
  font-size: 0.95rem;
}

/* ========================================================================
   Work / exemplar cards
   ======================================================================== */
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 800px) { .work-grid { grid-template-columns: 1fr 1fr; } }
.work-grid.is-stacked { grid-template-columns: 1fr; }

.work-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.work-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.work-card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.work-card h3 { font-size: 1.5rem; }
.work-card p { color: var(--ink-soft); font-size: 0.95rem; }

/* Each exemplar is titled in its own brand's own wordmark, so the caliber
   claim is legible at a glance — not a serif approximation of one.

   ACR has no portable logomark, so its wordmark is set the way its own
   masthead sets it: Marcellus, uppercase, 0.3em tracking. Spelled out in
   full here, on both the homepage and /work — the card gives a name the room
   the assurance strip does not, and the strip's shortform (.logo-chip-acr)
   is a concession to that row's width, not a rename. */
.work-card h3.wordmark-acr {
  font-family: "Marcellus", var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Jeevesy's wordmark is a composite, not a typeface: lowercase "jeevesy"
   with the "e" replaced by the hand-and-brain mark. Reproduced here exactly
   as jeevesy.com builds it — the same two pieces of artwork, masked and
   stacked in one box, over the same system-font stack the app itself sets
   the word in. Rebuilding it in Source Serif would be a stand-in; this is
   the mark. */
.wordmark-jeevesy {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  text-transform: lowercase;
}

.wordmark-jeevesy .glyph {
  position: relative;
  display: inline-block;
  width: 0.62em;
  height: 0.92em;
  margin: 0 0.03em;
  transform: translateY(0.1em);
}

.wordmark-jeevesy .glyph span {
  position: absolute;
  inset: 0;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.wordmark-jeevesy .glyph .brain {
  background: var(--ink);
  -webkit-mask-image: url(../img/logos/jeevesy-glyph-brain.png);
  mask-image: url(../img/logos/jeevesy-glyph-brain.png);
}

/* Jeevesy's own brass accent (#bd9452), not this site's brass token —
   the mark keeps its colours wherever it appears. */
.wordmark-jeevesy .glyph .accent {
  background: #bd9452;
  -webkit-mask-image: url(../img/logos/jeevesy-glyph-accent.png);
  mask-image: url(../img/logos/jeevesy-glyph-accent.png);
}

.work-card h3.wordmark-jeevesy { font-size: 1.5rem; }
.work-card h3.wordmark-jeevesy.is-lg { font-size: 1.85rem; }

.work-card p.work-card-method {
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--brass-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brass-wash);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.work-card p.work-card-method strong { color: var(--ink); font-weight: 600; }

.work-card .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: var(--space-3); }

.work-card .tag {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill);
  background: var(--cream-deep);
  color: var(--ink-soft);
}

.work-card-link {
  margin-top: var(--space-1);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--orange-deep);
  align-self: flex-start;
}

.work-card-link:hover { text-decoration: underline; }

/* ========================================================================
   Fit — who this is for, who it isn't
   ======================================================================== */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 800px) { .fit-grid { grid-template-columns: 1fr 1fr; } }

.fit-card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.fit-card h3 { font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }

.fit-card h3::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fit-card.is-yes h3::before { background: var(--brass); }
.fit-card.is-no h3::before { background: var(--umber); }

.fit-card.is-no { background: transparent; box-shadow: none; border: 1px dashed var(--hairline-strong); }

.fit-card ul { margin-top: var(--space-3); display: grid; gap: 0.6rem; }

.fit-card li {
  font-size: 0.93rem;
  color: var(--ink-soft);
  padding-left: 1.1rem;
  position: relative;
}

.fit-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--umber);
}

.fit-card.is-no li { color: var(--umber); }

/* ========================================================================
   FAQ
   ======================================================================== */
.faq-list { display: grid; gap: 0.6rem; max-width: 840px; }

.faq-item {
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
}

.faq-question .plus { flex-shrink: 0; width: 22px; height: 22px; position: relative; }

.faq-question .plus::before, .faq-question .plus::after {
  content: "";
  position: absolute;
  background: var(--orange-deep);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.faq-question .plus::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-1px); }
.faq-question .plus::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); }

.faq-item.is-open .plus::after { transform: translateX(-1px) rotate(90deg); opacity: 0; }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}

.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }

.faq-answer p {
  padding: 0 var(--space-4) var(--space-3);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ========================================================================
   Closing CTA — ends bright rather than dark.
   ======================================================================== */
.closing-cta { position: relative; overflow: hidden; text-align: center; }

.closing-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 70%);
}

.closing-cta-inner { position: relative; z-index: 1; max-width: 960px; margin-inline: auto; }
.closing-cta h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.closing-cta p { margin-top: var(--space-3); font-size: 1.1rem; max-width: 62ch; margin-inline: auto; }
.closing-cta .hero-actions { margin-top: var(--space-4); justify-content: center; }

/* ========================================================================
   Page hero (inner pages) — light, matching the homepage register.
   ======================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding-block: calc(var(--header-h) + var(--space-5)) var(--space-5);
}

.page-hero .hero-glow { position: absolute; inset: 0; }
.page-hero .container { position: relative; }
/* No measure cap here: an inner-page h1 is the only thing on its row, so a
   20ch box was breaking headlines the row had ample room to hold. The
   standfirst below keeps its 60ch measure, which is what sets the hierarchy. */
.page-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); margin-top: var(--space-2); }
.page-hero p { margin-top: var(--space-3); color: var(--ink-soft); font-size: 1.1rem; max-width: 60ch; }

/* ========================================================================
   About / operator
   ======================================================================== */
.operator-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 940px) {
  .operator-layout { grid-template-columns: 0.72fr 1fr; align-items: start; }
}

.operator-photo {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--cream-deep);
  box-shadow: var(--shadow-md);
}

.operator-copy h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.operator-copy .operator-role { margin-top: 0.4rem; }
.operator-copy p { color: var(--ink-soft); font-size: 1.05rem; }

/* Inline links in body copy. The global reset strips link colour, so prose
   links need it handed back or they read as plain text. orange-deep is the
   accessible orange: 4.96:1 on cream, 5.41:1 on surface. */
.operator-copy p a,
.method-human p a,
.method-proof p a,
.faq-answer p a,
.why-now-close p a,
.work-card p a,
.process-step p a,
.after-card p a,
.included-col li a {
  color: var(--orange-deep);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184, 66, 14, 0.4);
  transition: text-decoration-color 0.2s var(--ease);
}

.operator-copy p a:hover,
.method-human p a:hover,
.method-proof p a:hover,
.faq-answer p a:hover,
.why-now-close p a:hover,
.work-card p a:hover,
.process-step p a:hover,
.after-card p a:hover,
.included-col li a:hover { text-decoration-color: currentColor; }

/* On forest, orange-deep is unreadable; brass carries the same role. */
.panel-dark p a { color: var(--brass-light); text-decoration-color: rgba(224, 196, 138, 0.45); }
.operator-copy p + p { margin-top: var(--space-3); }
.operator-copy .lead { margin-top: var(--space-3); }

.credentials-grid {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 560px) { .credentials-grid { grid-template-columns: 1fr 1fr; } }

.credential-item {
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.credential-item .num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--orange-deep);
}

.credential-item .label { margin-top: 0.4rem; font-size: 0.86rem; color: var(--ink-soft); }

.prose { max-width: 72ch; }
.prose p + p, .prose ul { margin-top: var(--space-3); }
.prose p { color: var(--ink-soft); font-size: 1.05rem; }

.values-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }

@media (min-width: 640px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }

.value-card {
  padding: var(--space-4) var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.value-card h3 { font-size: 1.12rem; }
.value-card p { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.93rem; }

/* ========================================================================
   Booking / contact
   ======================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 980px) { .contact-layout { grid-template-columns: 1.05fr 0.95fr; align-items: start; } }

.booking-panel {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  min-height: 580px;
  display: flex;
  flex-direction: column;
}

.booking-embed { flex: 1; min-height: 580px; border: none; width: 100%; }

.booking-fallback {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  color: var(--umber);
  font-size: 0.9rem;
}

.booking-fallback a { color: var(--orange-deep); font-weight: 600; }

.contact-side { display: flex; flex-direction: column; gap: var(--space-3); }

.contact-direct {
  padding: var(--space-4);
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius-lg);
}

.contact-direct .eyebrow { color: var(--brass-light); }

.contact-direct .email-link {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--cream);
  border-bottom: 2px solid var(--brass);
}

.contact-direct .email-link:hover { border-bottom-color: var(--cream); }

.contact-direct ul { margin-top: var(--space-3); display: grid; gap: 0.55rem; }

.contact-direct li {
  display: flex;
  gap: 0.55rem;
  color: rgba(247, 243, 234, 0.78);
  font-size: 0.9rem;
}

.contact-direct li .tick { color: var(--brass-light); flex-shrink: 0; font-weight: 700; }

.scope-cta { padding: var(--space-4); background: var(--brass-wash); border-radius: var(--radius-lg); }
.scope-cta h3 { font-size: 1.12rem; }
.scope-cta p { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.92rem; }

.contact-form { padding: var(--space-4); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.contact-form h3 { font-size: 1.12rem; margin-bottom: var(--space-3); }

.form-field { display: grid; gap: 0.4rem; margin-bottom: var(--space-3); }

.form-field label { font-family: var(--font-body); font-size: 0.84rem; font-weight: 600; color: var(--ink); }

.form-field input, .form-field textarea, .form-field select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75em 0.95em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--hairline-strong);
  background: var(--cream);
  color: var(--ink);
  resize: vertical;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--orange-deep);
  background: var(--surface);
}

.form-note { margin-top: var(--space-2); font-size: 0.83rem; color: var(--umber); }

/* The honeypot. Positioned off-screen rather than display:none or
   hidden — a script that bothers to check computed styles skips the
   obviously-hidden field, which is the one field we want it to fill. */
.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The live region under the submit button. It stays in the page at all
   times — a region has to be present before its text changes for the change
   to be announced — so it carries no box of its own until there is a state
   to show. An empty block generates no line box, so it costs no space. */
.form-status { font-size: 0.9rem; line-height: 1.55; }

.form-status.is-pending { margin-top: var(--space-2); color: var(--umber); }

.form-status.is-success,
.form-status.is-error {
  margin-top: var(--space-2);
  padding: 0.8em 1em;
  border-radius: var(--radius-sm);
  border-left: 3px solid;
  font-weight: 500;
}

.form-status.is-success {
  background: var(--brass-wash);
  border-left-color: var(--brass-text);
  color: var(--ink);
}

.form-status.is-error {
  background: var(--orange-wash);
  border-left-color: var(--orange-deep);
  color: var(--orange-deep);
}

.contact-form button[type="submit"][disabled] {
  opacity: 0.55;
  pointer-events: none;
  transform: none;
}

/* The bare page api/enquiry.js renders when a no-JS submission fails. It
   ships without the site's header or footer, so it sets its own top
   padding; everything else it borrows from here. */
.form-outcome { padding-block: var(--space-6); }
.form-outcome h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); margin-top: var(--space-2); }
.form-outcome p { margin-top: var(--space-3); color: var(--ink-soft); font-size: 1.05rem; }
.form-outcome a { color: var(--orange-deep); font-weight: 600; }
.form-outcome-actions { margin-top: var(--space-4); }
.form-outcome-actions .btn { color: var(--cream); }

/* /contact/thanks/ — where a no-JS submission lands on success. */
.thanks-next { max-width: 720px; }
.thanks-next h2 { font-size: 1.5rem; }

.thanks-links { margin-top: var(--space-3); display: grid; gap: var(--space-2); }

.thanks-links li {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
  padding-left: var(--space-3);
  border-left: 2px solid var(--hairline);
}

.thanks-links a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--brass); }
.thanks-links a:hover { border-bottom-color: var(--orange-deep); }

.thanks-note { margin-top: var(--space-4); font-size: 0.9rem; color: var(--umber); }
.thanks-note a { color: var(--orange-deep); font-weight: 600; }

/* ========================================================================
   Footer
   ======================================================================== */
.site-footer { background: var(--ink); color: var(--cream); }

/* Brand, nav and the London clock. Three parts side by side once there is
   room for all of them; below that the clock drops to its own ruled strip
   rather than pretending to be a third nav column. */
.footer-top {
  padding-block: var(--space-6) var(--space-5);
  display: grid;
  align-items: start;
  gap: var(--space-4);
}

.footer-brand .brand { color: var(--cream); flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.footer-brand .brand-mark { height: 42px; }
.footer-brand .brand-word .of-mp { color: rgba(247, 243, 234, 0.55); }
.footer-brand p { margin-top: var(--space-3); color: rgba(247, 243, 234, 0.65); max-width: 38ch; font-size: 0.93rem; }

.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-nav-col { display: grid; gap: 0.65rem; align-content: start; }

.footer-nav-col .footer-nav-head {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-light);
}

.footer-nav-col a { font-size: 0.93rem; color: rgba(247, 243, 234, 0.78); transition: color 0.2s var(--ease); }
.footer-nav-col a:hover { color: var(--cream); }

.footer-bottom {
  padding-block: var(--space-3);
  border-top: 1px solid var(--hairline-on-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  justify-content: space-between;
  font-size: 0.84rem;
  color: rgba(247, 243, 234, 0.6);
}

.footer-bottom a { color: rgba(247, 243, 234, 0.8); }
.footer-bottom a:hover { color: var(--cream); }

/* The live London clock. Same readout mercp.com carries in its footer, and
   the same reason for it — one operator, one timezone, say so plainly —
   but set in this property's own type and palette rather than ported: the
   editorial serif in cream, with the MP orange on the status dot and the
   brass the footer's column heads already use on the zone label. It states
   the location, which is why footer-bottom no longer repeats it. */
.footer-clock {
  display: grid;
  justify-items: start;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline-on-dark);
}

.clock-status {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream);
}

.clock-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  animation: clock-pulse 2.4s var(--ease) infinite;
}

/* The global prefers-reduced-motion rule at the top of this file already
   stops this; no per-component override needed. */
@keyframes clock-pulse {
  0% { box-shadow: 0 0 0 0 rgba(228, 85, 29, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(228, 85, 29, 0); }
  100% { box-shadow: 0 0 0 0 rgba(228, 85, 29, 0); }
}

.clock-zone {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.6rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-light);
}

.clock-zone svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Tabular figures so the seconds tick in place instead of nudging the
   whole readout sideways every second. */
.clock-time {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}

@media (min-width: 640px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) auto; }
  .footer-clock { grid-column: 1 / -1; }
}

/* While the clock spans the full width it would otherwise leave most of
   that width empty, so the two labels and the readout take either end of
   the strip rather than stacking down its left edge. */
@media (min-width: 640px) and (max-width: 1039.98px) {
  .footer-clock {
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-4);
  }

  .clock-status { grid-column: 1; grid-row: 1; }
  .clock-zone { grid-column: 1; grid-row: 2; }
  .clock-time { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

@media (min-width: 1040px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: var(--space-5);
  }

  .footer-clock {
    grid-column: auto;
    justify-items: end;
    padding-top: 0;
    border-top: 0;
  }
}

/* Centred CTA row inside a closing panel. */
.cta-center { text-align: center; }

/* about.html — role line under the operator's name. */
.operator-role { color: var(--orange-deep); }

/* ========================================================================
   Panel colour overrides — kept last so they win over the component rules
   above regardless of which component lands inside a coloured panel.
   ======================================================================== */
.panel-dark p,
.panel-dark .section-head p,
.panel-dark .prose p { color: rgba(247, 243, 234, 0.78); }

.panel-warm p,
.panel-warm .section-head p,
.panel-warm .hero-fineprint { color: rgba(255, 255, 255, 0.88); }

.panel-warm .eyebrow { color: rgba(255, 255, 255, 0.85); }
.panel-dark .eyebrow { color: var(--brass-light); }

/* The default orange emphasis is 2.8:1 on forest — under the 3:1 floor even
   at display sizes. Brass carries the same warmth at 6.3:1. */
.panel-dark h1 em,
.panel-dark h2 em { color: var(--brass-light); }
.panel-warm h1 em,
.panel-warm h2 em { color: rgba(255, 255, 255, 0.92); }

/* On the orange panel the primary action inverts to cream, or it would be
   orange-on-orange. */
.panel-warm .btn-primary {
  background: var(--cream);
  color: var(--orange-deep);
  box-shadow: 0 10px 26px -12px rgba(23, 21, 15, 0.45);
}

.panel-warm .btn-primary:hover { background: #fff; box-shadow: 0 16px 34px -14px rgba(23, 21, 15, 0.5); }
.panel-warm .btn-ghost-dark { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.panel-warm .btn-ghost-dark:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

.panel-dark .btn-primary { background: var(--orange); color: #fff; }
.panel-dark .btn-primary:hover { background: var(--orange-deep); }

/* ========================================================================
   Overflow guards. Grid items default to min-width:auto, so an intrinsically
   wide child — notably the <select>, which sizes to its longest option —
   can push a track past the viewport. Contact page hit this on mobile.
   ======================================================================== */
.contact-layout > *,
.hero-grid > *,
.pricing-grid > *,
.included-grid > *,
.after-grid > *,
.fit-grid > *,
.work-grid > *,
.process-grid > * { min-width: 0; }

.form-field input,
.form-field textarea,
.form-field select { width: 100%; max-width: 100%; }

/* ========================================================================
   Booking panel. Until a scheduler URL is configured the panel renders a
   designed invitation rather than an embedded dead link; js/main.js swaps
   in the iframe when data-booking-url is set.
   ======================================================================== */
.booking-panel.has-embed { padding: 0; }

.booking-placeholder {
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  flex: 1;
}

.booking-placeholder h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.booking-placeholder p { color: var(--ink-soft); font-size: 1rem; max-width: 46ch; }

.booking-points {
  display: grid;
  gap: 0.6rem;
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.booking-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

.booking-points .tick { color: var(--brass-text); flex-shrink: 0; font-weight: 700; }

.booking-placeholder .booking-fallback {
  text-align: left;
  padding: 0;
  margin-top: var(--space-2);
  font-size: 0.86rem;
  color: var(--umber);
}

/* The email address is a block so it clears the "Prefer email?" label. */
.contact-direct .eyebrow { display: flex; }
.contact-direct .email-link { display: block; }

/* about.html — same warm wash over the headshot as the hero card, so the
   photo's cool studio backdrop sits inside the warm palette. */
.operator-photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.operator-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(228, 85, 29, 0.13) 0%, rgba(184, 145, 79, 0.20) 100%);
  mix-blend-mode: multiply;
}

.operator-photo-frame .operator-photo { border-radius: 0; box-shadow: none; }

/* On narrow screens the hero actions read better as equal-width blocks
   than as two differently-sized pills. */
@media (max-width: 520px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .closing-cta .hero-actions .btn { width: auto; align-self: center; }
}

/* ========================================================================
   quotidian/ — the app handed over with every build, feature by feature.
   ------------------------------------------------------------------------
   Alternating copy/media bands in the manner of jeevesy.com's product tour,
   but built from this property's own parts. No screenshots: the app is not
   built yet and a photograph of a pre-release window would age the moment it
   moved, so each band carries a small mock drawn in markup — a job card, the
   agents pane, the landing gate, a pre-review, the board columns, a
   suggestion. Every one of them is a surface of the app. Nothing here draws
   the files or the commands underneath it, deliberately: what a client is
   handed is the window, and the mocks advertise what they are handed.

   The bands stay on cream and are separated by a hairline rather than
   striped, because six alternating panels in a row reads as wallpaper and
   the sections either side of the run are already coloured.
   ======================================================================== */
.qd-intro { padding-bottom: 0; }

.qd-feature { padding-block: var(--space-5); }
.qd-feature + .qd-feature > .container { border-top: 1px solid var(--hairline); padding-top: var(--space-5); }

.qd-feature > .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.qd-feature > .container > * { min-width: 0; }

@media (min-width: 940px) {
  .qd-feature > .container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: center;
  }
  /* Media leads on the reversed bands; on narrow screens the copy always
     comes first, because a mock with no sentence above it explains nothing. */
  .qd-feature.is-reverse .qd-feature-copy { order: 2; }
}

.qd-feature-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--space-2); }

.qd-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--orange-wash);
  color: var(--orange-deep);
  flex-shrink: 0;
}

.qd-feature-icon svg { width: 21px; height: 21px; }

.qd-feature-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.qd-feature-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.qd-feature-tag .dot.is-brass { background: var(--brass); }

.qd-feature-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }
.qd-feature-copy > p { margin-top: var(--space-2); color: var(--ink-soft); }

.qd-feature-list { margin-top: var(--space-3); display: grid; gap: 0.65rem; }

.qd-feature-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.qd-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--brass);
}

/* ------------------------------------------------------------------------
   The mocks. One frame, six bodies.
   ------------------------------------------------------------------------ */
.qd-mock {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.qd-mock-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem var(--space-2);
  background: var(--cream-deep);
  border-bottom: 1px solid var(--hairline);
}

/* Traffic lights, so the frame reads as an app window rather than a browser —
   tinted from this site's own three accents rather than the system colours,
   which would be the only saturated red on the page. */
.qd-mock-dots { display: inline-flex; gap: 0.32rem; flex-shrink: 0; }
.qd-mock-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline-strong); }
.qd-mock-dots i:nth-child(1) { background: var(--orange); }
.qd-mock-dots i:nth-child(2) { background: var(--brass-light); }
.qd-mock-dots i:nth-child(3) { background: #8aa896; }

/* Centred in the UI face rather than left-set in mono: a desktop app centres
   its window title, and that one detail is most of what separates this frame
   from a browser chrome. The padding is the dots' own width (3 x 9px + two
   0.32rem gaps + the head's 0.7rem) given back on the other side, so the
   title sits centred in the frame rather than in the space left over. */
.qd-mock-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding-right: 48px;
  font-size: 0.76rem;
  font-weight: 600;
  /* ink-soft rather than umber: at this size it is small text, and umber on
     the cream-deep title bar comes to 4.4:1 — just under the floor. */
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qd-mock-body { padding: var(--space-3); margin: 0; }

/* A job card, and the same card once it is ready to land. Both are panes of
   the app: a state line, a title, and the trail or the checklist under it. */
.qd-card-state {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-text);
}

.qd-card-state.is-done { color: var(--forest); }

.qd-card-state .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.qd-card-title {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--ink);
}

/* The trail: what has happened to this job, oldest first. */
.qd-trail { margin-top: var(--space-2); display: grid; gap: 0.5rem; }

.qd-trail li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.qd-trail-t {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--umber);
  flex-shrink: 0;
  padding-top: 0.18em;
  /* The times are a fixed width so the entries line up as a column. */
  min-width: 3.1rem;
}

/* The line still waiting on a person, marked rather than merely last. */
.qd-trail li.is-open { color: var(--ink); }

.qd-trail li.is-open > span:last-child {
  border-left: 2px solid var(--orange);
  padding-left: 0.6rem;
}

.qd-card-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-3); }

/* The gate's checklist. Each row is one thing that had to be true. */
.qd-checks { margin-top: var(--space-2); display: grid; gap: 0.4rem; }

.qd-checks li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--cream);
}

.qd-checks li b {
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
  color: var(--forest);
}

.qd-checks li.is-no b { color: var(--orange-deep); }

.qd-gate-foot {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
  color: var(--umber);
}

/* Three agents, each on its own copy of the work. */
.qd-lanes { display: grid; gap: 0.55rem; }

.qd-lane {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--cream);
}

.qd-lane-id {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--orange-deep);
  flex-shrink: 0;
}

.qd-lane-job {
  font-size: 0.8rem;
  color: var(--umber);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qd-lane-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.qd-lane-state.is-live { color: var(--orange-deep); }
.qd-lane-state.is-done { color: var(--forest); }

.qd-lane-state .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: qd-pulse 2.4s var(--ease) infinite;
}

@keyframes qd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.qd-lane-foot { margin-top: 0.2rem; font-size: 0.8rem; color: var(--umber); }

.qd-lanes > * { min-width: 0; }

/* Under ~520px the job title gets a line of its own rather than squeezing
   the id and the status onto a row that cannot hold all three. */
@media (max-width: 520px) {
  .qd-lane { flex-wrap: wrap; row-gap: 0.3rem; }
  .qd-lane-job { order: 3; flex-basis: 100%; }
}

/* The pre-review card. */
.qd-review-lead { font-size: 0.92rem; color: var(--ink-soft); }
.qd-review-lead strong { color: var(--ink); }

.qd-review-head {
  margin-top: var(--space-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-text);
}

.qd-review ul { margin-top: 0.5rem; display: grid; gap: 0.4rem; }

.qd-review li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.qd-review li::before { content: "?"; position: absolute; left: 0; color: var(--orange-deep); font-weight: 700; }

.qd-review-foot {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
  color: var(--umber);
}

/* The board: a filter bar, then three columns of it. */
.qd-bar { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }

.qd-pill {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--umber);
}

.qd-pill.is-on { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.qd-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.qd-cols > * { min-width: 0; }

/* The count sits beside its own label rather than pushed to the far edge:
   across three narrow columns a right-aligned number reads as the start of
   the next column's heading. */
.qd-col-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--umber);
  margin-bottom: 0.5rem;
}

.qd-col-head span { color: var(--ink-soft); }

.qd-chip {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
  margin-bottom: 0.4rem;
}

.qd-chip.is-live { border-left-color: var(--orange); }
.qd-chip.is-done { border-left-color: var(--forest); }
.qd-chip.is-ghost { opacity: 0.55; }

.qd-chip-act {
  display: block;
  margin-top: 0.4rem;
  padding: 0.22rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--forest);
  color: var(--cream);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
}

/* An overseer suggestion, waiting on a person. */
/* A label in the app's own chrome, not machine text: the same treatment as
   .qd-card-state, which is the equivalent line on the other cards. */
.qd-suggest-mark {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-text);
}

.qd-suggest-title {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--ink);
}

.qd-suggest-why { margin-top: 0.6rem; font-size: 0.86rem; color: var(--ink-soft); }
.qd-suggest-why strong { color: var(--ink); }

.qd-suggest-acts { display: flex; gap: 0.5rem; margin-top: var(--space-3); }

.qd-btn {
  padding: 0.32rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.qd-btn.is-yes { background: var(--orange-deep); border-color: var(--orange-deep); color: #fff; }

/* The proof note on the forest panel reuses .method-proof, which sets its own
   colours there; only the inline code needs a face and a ground. */
.method-proof code,
.panel-dark code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: rgba(247, 243, 234, 0.12);
}

/* ------------------------------------------------------------------------
   What people actually put on the board.
   ------------------------------------------------------------------------
   The page's own worked answer to "it is not only for code": six example
   jobs, labelled by the part of the business they come from, only one of
   which is a change to the software. They sit under the intro rather than
   inside a mock because they are the client's words, not the app's chrome.
   ------------------------------------------------------------------------ */
.qd-kinds {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 620px) { .qd-kinds { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .qd-kinds { grid-template-columns: repeat(3, 1fr); } }

.qd-kind {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  min-width: 0;
}

.qd-kind-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin-bottom: 0.45rem;
}

.qd-kind p { font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }

.qd-kinds-foot {
  margin-top: var(--space-3);
  max-width: 700px;
  font-size: 0.92rem;
  color: var(--umber);
}

/* ------------------------------------------------------------------------
   Who ends up using it.
   ------------------------------------------------------------------------
   mp-22's fourth pass. The page had argued its whole case at a founder
   with nobody to ask, which reads as a tool for people who cannot do the
   work themselves — and the limit it actually lifts is a small
   cross-functional team's, where everyone already has a job. Three shapes
   of team, three cards; roomier padding than .qd-kind because each one
   carries a heading as well as a line, and three-up only from 900px so a
   card never has to hold a paragraph in a column that narrow.
   ------------------------------------------------------------------------ */
.qd-shapes {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 900px) { .qd-shapes { grid-template-columns: repeat(3, 1fr); } }

.qd-shape {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  min-width: 0;
}

.qd-shape-who {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin-bottom: 0.6rem;
}

.qd-shape h3 { font-size: 1.06rem; }
.qd-shape p { margin-top: 0.5rem; font-size: 0.93rem; line-height: 1.6; color: var(--ink-soft); }

.qd-shapes-foot {
  margin-top: var(--space-3);
  max-width: 700px;
  font-size: 0.95rem;
  color: var(--umber);
}

/* Who is looking. The board mock's filter bar carries a role, because the
   client's instance has more than one person on it. */
.qd-bar-who {
  margin-left: auto;
  align-self: center;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--umber);
}

/* ------------------------------------------------------------------------
   The people pane: who is on the board, and what their role lets them do.
   ------------------------------------------------------------------------ */
.qd-people { display: grid; gap: 0.55rem; }
.qd-people > * { min-width: 0; }

.qd-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--cream);
}

.qd-person-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brass-wash);
  color: var(--brass-text);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.qd-person-name {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}

.qd-person-name em {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--umber);
}

.qd-person-can {
  font-size: 0.72rem;
  color: var(--umber);
  text-align: right;
  flex-shrink: 0;
}

.qd-people-foot {
  margin-top: 0.4rem;
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
  color: var(--umber);
}

/* Under ~520px the permissions line drops beneath the name rather than
   squeezing three columns into a row that cannot hold them. */
@media (max-width: 520px) {
  .qd-person { flex-wrap: wrap; row-gap: 0.35rem; }
  .qd-person-can { flex-basis: 100%; text-align: left; padding-left: calc(30px + 0.7rem); }
}

@media (max-width: 420px) {
  .qd-cols { grid-template-columns: 1fr; }
}