/* =========================================================================
   BrandedReputation — site.css
   Page composition. Depends on core.css tokens.
   ========================================================================= */

/* ---------- 1. Masthead ------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding-block: 1.125rem;
  transition: background var(--med) var(--ease), backdrop-filter var(--med) var(--ease);
}

.masthead.is-stuck {
  background: rgba(247, 247, 244, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}

/* A fixed header has to work on every ground it passes over. The page has one
   hard tonal cut, and over it the bar inverts rather than just getting more
   opaque, which produced a grey smear and swallowed half the wordmark. */
.masthead.is-over-light {
  background: rgba(9, 11, 17, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.masthead.is-over-light .wordmark { color: #FFFFFF; }
.masthead.is-over-light .wordmark .sub { color: #9AA1B4; }
.masthead.is-over-light .menu-toggle { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.masthead.is-over-light .menu-toggle span { background: #FFFFFF; }
.masthead.is-over-light .pill-ghost {
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}
.masthead.is-over-light .pill-ghost:hover { background: rgba(255, 255, 255, 0.08); }

.masthead .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.wordmark .glyph {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  background: var(--core);
  box-shadow: 0 0 14px 1px rgba(74, 123, 255, 0.85);
  flex: none;
  align-self: center;
}

.wordmark .sub { color: var(--dim); font-weight: 400; }

.masthead-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Below this the pill and the toggle stop fitting, and the toggle was being
   pushed off the right edge entirely. The menu carries the same link. */
@media (max-width: 560px) {
  .masthead-actions .pill-ghost { display: none; }
}

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.25rem;
  padding: 0 0.6875rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hairline-firm);
}
.menu-toggle span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--ink);
  transition: transform var(--med) var(--ease), opacity var(--fast) var(--ease);
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* ---------- 2. Glass overlay nav (refs 08 / 10) ------------------------- */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  align-items: start;
  justify-items: end;
  padding: 1rem var(--gutter);
  background: rgba(247, 247, 244, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--med) var(--ease), visibility var(--med);
}

.nav-overlay[data-open="true"] { opacity: 1; visibility: visible; }

.nav-card {
  width: min(26rem, 100%);
  padding: 1.5rem 1.75rem 1.5rem;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(243, 244, 248, 0.92));
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              inset 0 0 0 1px rgba(11, 13, 18, 0.08),
              0 30px 70px -20px rgba(11, 13, 18, 0.28);
  transform: translateY(-12px) scale(0.98);
  opacity: 0;
  transition: transform var(--med) var(--ease), opacity var(--med) var(--ease);
}

.nav-overlay[data-open="true"] .nav-card { transform: none; opacity: 1; }

.nav-card .close {
  display: block;
  margin-left: auto;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--hairline-firm);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
}
.nav-card .close:hover { color: var(--ink); }

.nav-links {
  list-style: none;
  margin: 0.75rem 0 1.5rem;
  display: grid;
  gap: 0.125rem;
}

.nav-links a {
  display: block;
  font-size: clamp(1.5rem, 4.4vw, 2rem);
  font-weight: 250;
  letter-spacing: -0.03em;
  line-height: 1.32;
  color: var(--ink);
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.nav-links a:hover { color: var(--halo); transform: translateX(3px); }

.nav-contact {
  display: grid;
  gap: 0.875rem;
  padding-top: 1.375rem;
  border-top: 1px solid var(--hairline);
}

.nav-contact div { display: grid; gap: 0.1rem; }
.nav-contact dt { font-size: 0.9375rem; color: var(--ink); }
.nav-contact dd { margin: 0; font-size: 0.875rem; color: var(--dim); }
.nav-contact a:hover { color: var(--muted); }

.nav-card .pill-mono { margin-top: 1.375rem; }

/* ---------- 3. Hero ----------------------------------------------------- */

/* -------------------------------------------------------------------------
   The hero is a FIELD, not a two-column layout with a widget in it.

   The luminous form is drawn full-bleed and allowed to run off the right and
   bottom edges, the way the spheres do in ref 01. Type is anchored to the left
   edge of the field and kept small. The measurement marks belong to the
   viewport corners, not to a box.
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 9rem 5.5rem;
  overflow: hidden;
  background: var(--void);
  isolation: isolate;
}

#field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero .shell {
  position: relative;
  z-index: 4;
  width: 100%;
}

.hero-copy {
  display: grid;
  gap: 1.375rem;
  align-content: start;
  max-width: 33rem;
}

/* Restraint is the point. Ref 01 sets its line at a fraction of the canvas. */
.hero-copy .display {
  font-size: clamp(1.875rem, 3.1vw, 2.875rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
}

.hero-copy .lede {
  font-size: 0.9375rem;
  line-height: 1.62;
  max-width: 30rem;
}

/* On a phone there is no room for a column of type AND a mass beside it. The
   composition changes rather than shrinking: the form drops below the copy and
   rises from the bottom edge (ref 04), and the scrim runs vertically so it
   protects the text without smothering the light. */
@media (max-width: 780px) {
  .hero {
    align-items: flex-start;
    /* The bottom padding is the clear band the rim needs. Without it the
       fine print sits on the brightest part of the light. */
    padding-block: 7.5rem 5.5rem;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
      180deg,
      var(--void) 0%,
      rgba(247, 247, 244, 0.96) 54%,
      rgba(247, 247, 244, 0.35) 82%,
      transparent 100%
    );
    pointer-events: none;
  }

  /* Two lines of eyebrow is a wrap accident, not a design. */
  .hero-copy .eyebrow { font-size: 0.5625rem; letter-spacing: 0.14em; }
  .hero-copy .eyebrow::before { width: 1rem; }

  /* Tighten so the light has somewhere to be. */
  .hero-copy { gap: 1.125rem; }
  .hero-copy .lede { font-size: 0.875rem; line-height: 1.58; }
  .scan { margin-top: 0.375rem; gap: 0.75rem; }
}

/* ---------- 4. Scan form ------------------------------------------------ */

.scan {
  margin-top: 0.875rem;
  display: grid;
  gap: 0.875rem;
  max-width: 34rem;
}

.scan-fields {
  display: grid;
  gap: 1px;
  background: var(--hairline-firm);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.05);
}

@media (min-width: 560px) {
  .scan-fields { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.field { position: relative; background: var(--field); }

.field label {
  position: absolute;
  top: 0.6875rem;
  left: 1rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  pointer-events: none;
}

.field input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 1.75rem 1rem 0.8125rem;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.field input::placeholder { color: #A8AEBC; }
.field input:focus { outline: none; }
.field:focus-within { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--core); }
.field:focus-within label { color: var(--core); }

.scan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.scan-note { color: var(--dim); font-size: 0.8125rem; }

.scan-error {
  display: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #A8240A;
  padding: 0.625rem 0.875rem;
  border-radius: 10px;
  background: #FDECE7;
  box-shadow: inset 0 0 0 1px rgba(227, 58, 18, 0.26);
}
.scan-error[data-shown="true"] { display: block; }

/* ---------- 5. Grid instrument ------------------------------------------ */

/* -------------------------------------------------------------------------
   Field annotations. These float directly on the void at the extremes of the
   viewport. No panel, no border, no background — the marks ARE the chrome.
   ------------------------------------------------------------------------- */

.field-note {
  position: absolute;
  z-index: 5;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(11, 13, 18, 0.62);
  white-space: nowrap;
  pointer-events: none;
  transition: color var(--med) var(--ease);
}

.field-note.tc { top: 6.5rem; left: 50%; transform: translateX(-50%); }
.field-note.br { bottom: 2.25rem; right: var(--gutter); }

/* An instrument that is honest about not showing live data. */
.field-note.is-demo { color: #A2701F; }

@media (max-width: 780px) {
  .field-note.tc { display: none; }
}

/* Legend appears only once real ranks exist, bottom-left, hairline separated. */
.field-legend {
  position: absolute;
  z-index: 5;
  bottom: 2.25rem;
  left: var(--gutter);
  display: none;
  align-items: center;
  gap: 1.125rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 13, 18, 0.5);
  pointer-events: none;
}
.hero[data-state="result"] .field-legend { display: flex; }

.field-legend span { display: inline-flex; align-items: center; gap: 0.4375rem; }
.field-legend i { width: 5px; height: 5px; border-radius: 50%; display: block; }

@media (max-width: 620px) {
  .field-legend { display: none !important; }
}

/* ---------- 6. Scan result ---------------------------------------------- */

.result {
  display: none;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
}
.result[data-shown="true"] { display: block; }

/* Focus is moved here programmatically so a screen reader lands on the answer.
   That must not paint a ring: the user never pressed Tab to get here. */
.result:focus { outline: none; }
.result { scroll-margin-block-end: 2.5rem; }

.result-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
}

@media (min-width: 560px) {
  .result-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat { display: grid; gap: 0.5rem; align-content: start; }
.stat .unit { order: -1; }
.stat .datum { color: var(--ink); }
.stat.is-you .datum { color: var(--signal); }
.stat small { font-size: 0.75rem; color: var(--dim); line-height: 1.4; }

.result-verdict {
  margin-top: 1.75rem;
  padding: 1.125rem 1.25rem;
  border-radius: 12px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px rgba(27, 59, 255, 0.16);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.result-verdict strong { color: var(--ink); font-weight: 500; }

.result-cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ---------- 7. Mechanic band -------------------------------------------- */

.band-mechanic { background: var(--void); }

/* Weight bars carry the Whitespark scores. Real values only.
   No top margin: band-head already supplies the gap, and stacking both left a
   dead band the height of a paragraph. */
.weights { display: grid; gap: 0; }

.weight {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  padding: 0.9375rem 0;
  border-bottom: 1px solid var(--hairline);
}

/* The track was taking 1fr and stretching to ~700px, at which width the gap
   between 181 and 170 is invisible and the bar stops doing any work. Capped so
   the comparison is actually readable. */
@media (min-width: 720px) {
  .weight { grid-template-columns: 2.75rem minmax(0, 16rem) minmax(0, 15rem) 3rem 5.5rem; }
}

/* Tier labels. A filtered slice of a ranked list reads as an accident without
   them: the reader's first question was "what happened to 1 through 5?". The
   groups turn the ranks from a mystery index into evidence for a claim. */
.weight-head {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--core);
  padding: var(--s4) 0 0.875rem;
}
.weight-head:first-of-type { padding-top: var(--s3); }

.weight-cols {
  padding-block: 0 0.625rem;
  border-bottom-color: var(--hairline-firm);
}
.weight.weight-cols .rank,
.weight.weight-cols .name,
.weight.weight-cols .score {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.weight .rank {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--dim);
  letter-spacing: 0.04em;
}

.weight .name {
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.weight .name em { font-style: normal; color: var(--halo); }

.weight .track {
  position: relative;
  height: 2px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  display: none;
}
@media (min-width: 720px) { .weight .track { display: block; } }

.weight .track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--core), var(--beam));
  border-radius: inherit;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--slow) var(--ease);
}
.weights[data-revealed="true"] .weight .track i { transform: scaleX(1); }

.weight .score {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
  display: none;
}
@media (min-width: 720px) { .weight .score { display: block; } }

.weight.is-low .name { color: var(--dim); }
.weight.is-low .track i { background: var(--dim); }

/* ---------- 8. Light cut (ref 06) — the one permitted light band -------- */

/* The one hard tonal cut per page. On paper it goes the other way: a black
   band, full bleed, once. Ref 06 does exactly this in reverse. */
.band-status {
  position: relative;
  background: linear-gradient(180deg, #0B0D12 0%, #05070C 100%);
  color: #FFFFFF;
  overflow: hidden;
}

.band-status::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.band-status .shell { position: relative; z-index: 2; }
.band-status .eyebrow { color: #8A92A6; }
.band-status .eyebrow::before { background: rgba(255, 255, 255, 0.22); }
.band-status .lede { color: #A9B0C0; }
.band-status .display-s { font-weight: 250; }
.band-status .display-s .lead { color: #6E7689; }

.band-status .rows { border-top-color: rgba(255, 255, 255, 0.1); }
.band-status .row { border-bottom-color: rgba(255, 255, 255, 0.1); }
.band-status .row .marker { color: #6E7689; }
.band-status .row .marker::before { background: var(--halo); }
.band-status .row h3 { color: #FFFFFF; }
.band-status .row p { color: #A9B0C0; }

.band-status .pill { --pill-bg: #FFFFFF; --pill-fg: #0B0D12; }

/* ---------- 9. Campaign band -------------------------------------------- */

.band-campaign { background: var(--void); position: relative; overflow: hidden; }

.band-campaign .source {
  width: min(56rem, 110vw);
  aspect-ratio: 1;
  left: -20%;
  top: 12%;
  background: radial-gradient(circle at center, rgba(27, 59, 255, 0.09), transparent 64%);
}


.band-campaign .shell { position: relative; z-index: 4; }

/* ---------- 10. Close ---------------------------------------------------- */

.band-close {
  position: relative;
  background: var(--void);
  overflow: hidden;
  text-align: left;
}

.band-close .source {
  width: min(64rem, 120vw);
  aspect-ratio: 1;
  left: 50%;
  translate: -50% 0;
  bottom: -62%;
  background: radial-gradient(circle at center, rgba(27, 59, 255, 0.10), rgba(27, 59, 255, 0.03) 46%, transparent 68%);
}


.band-close .shell { position: relative; z-index: 4; display: grid; gap: var(--s3); justify-items: start; }

/* ---------- 11. Footer --------------------------------------------------- */

.footer {
  background: var(--void);
  border-top: 1px solid var(--hairline);
  padding-block: var(--s5) var(--s4);
}

.footer .shell {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 780px) {
  .footer .shell { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.footer-links a:hover { color: var(--muted); }

.footer .fine { max-width: 46ch; }

/* ---------- 12. Reveal --------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================================
   Consultation page
   ========================================================================= */

.consult-hero { min-height: auto; padding-block: 9.5rem 6rem; }

.consult-shell {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 1000px) {
  .consult-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 25.5rem); }
}

.consult-hero .hero-copy { max-width: 36rem; }

/* Takeaways. A checklist would be a stock pattern; these are hairline rows with
   a measurement tick, matching the rest of the instrument. */
.takeaways {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--hairline);
}
.takeaways li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.875rem;
  padding: 1.0625rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.9375rem;
  line-height: 1.56;
  color: var(--muted);
}
.takeaways b { color: var(--ink); font-weight: 450; }

.takeaways .tick {
  position: relative;
  width: 11px;
  height: 11px;
  margin-top: 0.4375rem;
}
.takeaways .tick::before,
.takeaways .tick::after {
  content: "";
  position: absolute;
  background: var(--beam);
}
.takeaways .tick::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.takeaways .tick::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

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

.book-panel {
  padding: 1.75rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 2px 4px rgba(11, 13, 18, 0.04),
              0 30px 60px -30px rgba(11, 13, 18, 0.22);
  position: relative;
}

/* No CSS glow here. `z-index:-1` inside `isolation:isolate` was trapped behind
   the panel's own background and never rendered, and a bare radial gradient is
   exactly the flat, grainless light this project bans. The real grained body is
   drawn on the canvas behind the panel instead, so the glass has something to
   be lit by. See field.js, layout 'panel'. */

.book-head { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }
.book-head .datum { color: var(--ink); }
.book-head .datum sup {
  font-family: var(--mono);
  font-size: 0.26em;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-left: 0.35em;
  vertical-align: super;
}

.book-fields {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hairline);
  margin-bottom: 1rem;
}
@media (min-width: 480px) {
  .book-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-fields .field-wide { grid-column: 1 / -1; }
}

.book-form .pill { width: 100%; justify-content: space-between; }
.book-note { margin-top: 0.875rem; }

.book-done { display: grid; gap: 0.75rem; padding: 1.25rem 0; }
.book-done .display-s { font-size: 1.375rem; }

@media (max-width: 780px) {
  .consult-hero { padding-block: 7.5rem 4rem; }
  .consult-hero::before { display: none; }
}

/* Prose inside the panel is prose. `.fine` is the mono footnote voice and a
   paragraph of mono at 12px is a wall, not a note. */
.panel-sub {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 34ch;
}
.book-note { max-width: none; color: var(--dim); }
.panel-sub a { color: var(--muted); border-bottom: 1px solid var(--hairline-firm); }
.panel-sub a:hover { color: var(--ink); }

/* At 320 the panel padding plus a full-width pill pushed the arrow cap past the
   panel edge and clipped it. Give the narrow case its own measurements. */
@media (max-width: 430px) {
  .book-panel { padding: 1.25rem; }
  .book-form .pill {
    font-size: 0.875rem;
    padding-left: 1.125rem;
    gap: 0.625rem;
  }
  .book-form .pill .cap { width: 1.625rem; height: 1.625rem; }
  .consult-hero .hero-copy .display { font-size: 1.75rem; }
}

/* -------------------------------------------------------------------------
   The lever column.

   This is the argument, not a decoration. Everything that outranks reviews is
   either configuration you finish once or geography you cannot move. Reviews
   are the first factor on the list you can keep working on. Colour carries it:
   the fixed block is grey, and the bars turn on exactly where the work starts.
   ------------------------------------------------------------------------- */

.weight .lever {
  display: none;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: right;
}
@media (min-width: 720px) { .weight .lever { display: block; } }

.weight .lever.is-locked { color: #A2701F; }

.weight.is-fixed .name { color: var(--muted); }
.weight.is-fixed .rank,
.weight.is-fixed .score { color: var(--dim); }
.weight.is-fixed .track i { background: #C3C8D4; }

.weight.is-live .name { color: var(--ink); }
.weight.is-live .track i { background: linear-gradient(90deg, var(--core), var(--beam)); }
.weight.is-live .lever { color: var(--core); }

.weight-head.is-live { color: var(--core); }

/* =========================================================================
   Article
   ========================================================================= */

.article {
  padding-top: 8.5rem;
  position: relative;
  overflow: hidden;
}

/* A single grained source behind the header only. The body of a long read stays
   clean: anything drifting behind running text is noise, not atmosphere. */
.article::before {
  content: "";
  position: absolute;
  top: -34rem;
  left: 50%;
  translate: -46% 0;
  width: min(58rem, 130vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(27, 59, 255, 0.14), rgba(75, 59, 232, 0.05) 46%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.article::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40rem;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: 0.2;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.article-head,
.article-body { position: relative; z-index: 2; }

.article-head { padding-bottom: var(--s5); }

/* Header and body share one left edge. They were centring independently, so the
   column visibly stepped between the standfirst and the headline above it. */
.article-head .shell,
.article-body {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.article-head .shell { display: grid; gap: var(--s3); }
.article-head .shell > * { max-width: 40rem; }
.article-head .display-s { max-width: 22ch; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 0.5rem;
}

.article-body { padding-bottom: var(--s6); }
.article-body > * { max-width: 40rem; }

.article-body .standfirst {
  font-size: 1.0625rem;
  line-height: 1.66;
  color: var(--ink);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--hairline);
}

.article-body h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.24;
  margin-top: var(--s5);
}

/* Each section carries the figure it is arguing from. Mono, as data always is. */
.score-line {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin-top: 0.625rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
}
.score-line .datum { font-size: 1.125rem; color: var(--halo); }

.article-body p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.72;
  margin-top: 1.125rem;
  text-wrap: pretty;
}
.article-body h2 + .score-line + p { margin-top: 1.375rem; }

.article-cta {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--s3);
}

/* An earlier scripted edit removed this media query's opening line and left the
   rule and its closing brace behind. Everything after it parsed as part of a
   block that never opened, which is why article pages were quietly losing
   rules. Restored as its own query. */
@media (max-width: 900px) {
  .article-head .shell { padding-left: var(--gutter); }
}

/* =========================================================================
   Stakes diagram

   A section that is almost entirely picture. The site had four consecutive
   bands of identically shaped prose, and this is the one that carries the
   proposition without asking anyone to read a paragraph first.
   ========================================================================= */

.band-stakes { background: var(--void); }

.stakes-head { max-width: 34rem; display: grid; gap: var(--s2); }

.podium {
  margin: var(--s5) 0 0;
  padding: 0;
  width: 100%;
  max-width: 44rem;
}
.podium svg { width: 100%; height: auto; display: block; overflow: visible; }

.stakes-note {
  margin-top: var(--s4);
  max-width: 42ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (min-width: 1000px) {
  .band-stakes .shell {
    display: grid;
    /* 24rem, not 21: at 21 the muted first line of the headline broke across
       two lines and the two-tone treatment stopped reading as two tones. */
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }
  .stakes-head  { grid-column: 1; grid-row: 1; }
  .podium       { grid-column: 2; grid-row: 1; margin-top: 0; }
  /* Full width, its own row. It is prose and it needs a measure. */
  .ctr          { grid-column: 1 / -1; grid-row: 2; }
  .stakes-note  { grid-column: 1; grid-row: 2; margin-top: 0; }
}

/* -------------------------------------------------------------------------
   The chain.
   Four short declarative beats instead of a paragraph. Each is a real sentence
   with a subject and a verb, and the last one carries both promises: the
   ranking and the recognition.
   ------------------------------------------------------------------------- */

.chain {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  counter-reset: chain;
  max-width: 32rem;
}

.chain li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
}

.chain li::before {
  counter-increment: chain;
  content: "";
  width: 5px;
  height: 1px;
  background: var(--dim);
  transform: translateY(-0.35em);
}

/* The payoff line is the one that gets the ink. */
.chain li:last-child { color: var(--ink); }
.chain li:last-child::before { background: var(--beam); width: 12px; }

@media (max-width: 780px) {
  .chain li { font-size: 0.875rem; }
}

/* The pledge. Google made review gating an explicit violation in April 2026, so
   stating this plainly is a promise to the customer and a claim competitors who
   gate cannot make. It sits with the offer, not buried in a footer. */
.pledge {
  margin-top: 0.375rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--hairline-firm);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--dim);
  max-width: 34rem;
}

/* The table note explains the Weight and Survey rank columns, so it sits with
   the table. It was orphaned 400px below it, under two unrelated prose rows. */
.table-note {
  margin-top: 1.5rem;
  max-width: 66ch;
  padding-left: 2.75rem;      /* line up with the Factor column, not the index */
}
@media (max-width: 720px) {
  .table-note { padding-left: 0; }
}

.rows-after { margin-top: var(--s5); }

/* 40px top and bottom made a 182px row out of two short paragraphs. */
.row { padding-block: 1.75rem; }


/* =========================================================================
   Profile audit.

   No cards. A finding is a row on an instrument: a mono index, the factor,
   what we saw, what to do, and the survey's own rank and score so nobody has
   to take the ordering on faith. The whole page is one column because the
   reader works down it in order, which is the point of ranking it.
   ========================================================================= */

.audit-head {
  padding-block: calc(var(--s5) + 3.5rem) var(--s5);
  border-bottom: 1px solid var(--hairline);
}

.audit-head .lede { margin-top: var(--s2); }

.audit-form { margin-top: var(--s4); max-width: 44rem; }

/* scroll-margin, because scrollIntoView otherwise parks the first line of the
   report under the fixed masthead, and the first line is the demo warning. */
.audit-out { padding-block: var(--s5); scroll-margin-top: 5.5rem; }
.audit-out[data-shown="false"] { display: none; }
.audit-out:focus { outline: none; }

.demo-flag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  box-shadow: inset 0 0 0 1px var(--signal);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  display: inline-block;
  margin-bottom: var(--s3);
}

/* ---------- coverage ---------------------------------------------------- */

.audit-cover {
  display: grid;
  gap: var(--s3);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--hairline);
}

.cover-note {
  color: var(--muted);
  font-size: 0.9375rem;
  max-width: 46ch;
}

.cover-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.cover-stat { display: grid; gap: 0.3rem; }

.cover-value {
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--core);
}

.cover-rivals { display: grid; gap: 0.55rem; }

.cover-rivals-head {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

.cover-rivals li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.9375rem;
}

.rival-name { color: var(--ink); }
.rival-figures { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); }

/* ---------- blocks ------------------------------------------------------ */

.audit-block { padding-top: var(--s4); }
.audit-block-head { margin-bottom: var(--s3); display: grid; gap: 0.6rem; }

/* ---------- one fix ----------------------------------------------------- */

.fixes { border-top: 1px solid var(--hairline); }

.fix {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}

.fix-index {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  min-width: 2rem;
  padding-top: 0.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.fix-index::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--beam);
  flex: none;
  transform: translateY(-2px);
}

.fix-body { display: grid; gap: 0.7rem; min-width: 0; }

.fix-head { display: grid; gap: 0.5rem; }

.fix h3 {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.28;
}

.fix-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fix-tags span {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hairline-firm);
  color: var(--dim);
}

/* Effort is the column the reader is actually shopping in, so it is the one
   that carries colour. Weight and rank are credentials, not choices. */
.tag-effort { color: var(--core); box-shadow: inset 0 0 0 1px var(--core); }

.fix-observed { color: var(--ink); font-size: 0.9375rem; max-width: 58ch; }
.fix-do { color: var(--muted); font-size: 0.9375rem; max-width: 58ch; text-wrap: pretty; }
.fix-why { max-width: 58ch; }

#audit-more { margin-top: var(--s3); }

/* ---------- the folds --------------------------------------------------- */

.audit-fold { border-bottom: 1px solid var(--hairline); }
.audit-fold[hidden] { display: none; }

.audit-fold > summary {
  cursor: pointer;
  padding: var(--s3) 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.audit-fold > summary::-webkit-details-marker { display: none; }
.audit-fold > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate var(--fast) var(--ease);
}
.audit-fold[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.audit-fold > summary:hover { color: var(--ink); }
.audit-fold > summary:focus-visible { outline: 2px solid var(--core); outline-offset: 3px; }

.hair-list { padding-bottom: var(--s3); display: grid; }

.hair-list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--s2);
  padding: 0.75rem 0;
  border-top: 1px solid var(--hairline);
  align-items: start;
}

.hair-rank {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--dim);
  padding-top: 0.15rem;
}

.hair-name { display: block; font-size: 0.9375rem; color: var(--ink); }
.hair-note { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 0.2rem; }

/* ---------- the close --------------------------------------------------- */

.audit-cta {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--s2);
  justify-items: start;
}
.audit-cta .pill { margin-top: var(--s2); }

@media (max-width: 560px) {
  .fix { grid-template-columns: 1fr; gap: 0.75rem; }
  .fix-index { padding-top: 0; }
  .hair-list li { grid-template-columns: 2.25rem 1fr; }
}


/* =========================================================================
   The bloom.

   First attempt drew a perfect circle with concentric distance rings. It was
   defensible on paper, as the geometry of visibility falling off from a pin,
   and it looked like a battleship radar. The lesson is worth keeping: a
   diagram of light is not light. Concentric structure reads as a target
   whatever it is meant to represent.

   What works is the treatment already on the closing band, which is shapeless.
   Three overlapping ellipses at different sizes, positions and hues, so the
   silhouette is irregular and there is no perceivable centre. Light in a room
   has no edge you can point at.

   The section carries `.grain`, so this is never a bare gradient.
   ========================================================================= */

.bloom {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bloom::before {
  content: "";
  position: absolute;
  inset: -10%;
  /* Two faults fixed here, and the second is the one that mattered.
     Purple: indigo at any real weight turns ultramarine into lavender, which
     is the hero gradient CLAUDE.md bans by name. The palette has one accent
     and this now uses it.
     Placement: it sat in the right half as an object beside the type, touching
     nothing. Light falls ON things. It now originates behind and below the
     copy and bleeds up across it, which is why the closing band works and this
     did not. */
  background:
    radial-gradient(30% 30% at 30% 74%, rgba(27, 59, 255, 0.26), transparent 66%),
    radial-gradient(22% 22% at 52% 66%, rgba(27, 59, 255, 0.16), transparent 64%),
    radial-gradient(26% 16% at 16% 58%, rgba(74, 123, 255, 0.12), transparent 68%);
  filter: blur(26px);
}

/* On the consultation page the panel is the subject, so the light goes under
   it rather than beside the type. */
.bloom-panel::before,
.bloom-panel::after,
.bloom-panel .pin { --bloom-x: 74%; --bloom-y: 50%; --bloom-size: min(82rem, 132vw); }

/* Stronger than the hero's. The panel covers the core, so the part that has to
   read is the falloff around its edges, and that is the shallow end of the
   curve. */
.bloom-panel::before {
  background: radial-gradient(
    circle at center,
    rgba(27, 59, 255, 0.30) 0%,
    rgba(27, 59, 255, 0.22) 16%,
    rgba(27, 59, 255, 0.145) 31%,
    rgba(27, 59, 255, 0.075) 47%,
    rgba(27, 59, 255, 0.026) 63%,
    transparent 80%
  );
}

/* The pin lives under the panel here, so it would never be seen. Hidden rather
   than moved: vermillion marks a position, and inventing a second one to keep
   the decoration would be exactly the fake telemetry we do not ship. */
.bloom-panel .pin { display: none; }

@media (max-width: 720px) {
  .bloom::before,
  .bloom::after,
  .bloom .pin { --bloom-x: 50%; --bloom-y: 38%; --bloom-size: min(46rem, 165vw); }
  .bloom-panel::before,
  .bloom-panel::after,
  .bloom-panel .pin { --bloom-x: 50%; --bloom-y: 30%; --bloom-size: min(46rem, 165vw); }
}


/* -------------------------------------------------------------------------
   Premium pass on the hero furniture.

   The chain was marked with an en dash and the pledge with a left border rule.
   Both are what you reach for without thinking, and both look it. The chain
   now steps its own weight so the eye is pulled to the last beat, which is the
   one carrying both promises. The pledge becomes quiet set-back type rather
   than a quoted block, because it is a commitment and not a testimonial.
   ------------------------------------------------------------------------- */

.chain li::before { content: ""; width: 14px; height: 1px; background: var(--hairline-firm); }
.chain li { color: var(--muted); transition: none; }
.chain li:last-child { color: var(--ink); }
.chain li:last-child::before { width: 22px; background: var(--core); }

.pledge {
  border-left: 0;
  padding-left: 0;
  color: var(--dim);
  font-size: 0.875rem;
  line-height: 1.75;
  max-width: 52ch;
}

/* Room to breathe around the one thing on the page you can act on. */
/* The note sits beside the button, not under it. Without a flex basis it
   stretched to fill the row, overflowed, and wrapped its own text below the
   button, which is what broke the line. */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

.hero-cta-note {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  flex: 0 1 20ch;
  min-width: 0;
}


/* -------------------------------------------------------------------------
   Hero: left-anchored, full height.

   This replaces five successive passes that were fighting each other. The hero
   was centred, then patched because the chain rows would not centre, then
   because the pledge failed contrast on the brightest part of the light, then
   because the button sat left of the page axis, then because four ragged
   centre lines of different lengths make a diamond. Every patch was a correct
   fix to a real fault. The fault underneath all of them was the centring.

   The proof was the close band: same type, same light, same palette, anchored
   to a left edge, and it read as the strongest thing on the page while the
   hero read as tentative. CLAUDE.md says display type is anchored to layout
   edges and not centred by default. It was right.

   Full height means the composition fills the first screen, not that the box
   is tall. The type is sized so the block reaches the fold on its own, and the
   light rises from the lower right and passes behind the last lines of it, so
   the words sit on the light rather than above a smudge.
   ------------------------------------------------------------------------- */

.hero { padding-block: 8.5rem 4.5rem; }

.hero .hero-copy {
  text-align: left;
  margin-inline: 0;
  max-width: 48rem;
}

.hero .eyebrow { justify-content: flex-start; }
.hero .eyebrow::before { display: block; }

/* The hero out-types every other section, because it is the first thing read
   and the close band is the last. It had been capped a full step BELOW the
   close band, which is why the page appeared to get stronger as it went on. */
.hero .hero-copy .display {
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.94;
  letter-spacing: clamp(-0.048em, -0.03em - 0.24vw, -0.032em);
  max-width: 16ch;
  margin-inline: 0;
  text-wrap: balance;
}

.hero .chain {
  width: auto;
  max-width: 44rem;
  margin-inline: 0;
  justify-items: start;
  text-align: left;
  gap: 0.5rem;
  margin-top: var(--s3);
}

.hero .chain li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.75rem;
  text-align: left;
  padding-left: 0;
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
}

/* The marker is back and it means something again: it anchors to the left edge
   the block now has. The last beat keeps the ink weight and the accent rule,
   because it is the one carrying both promises. */
.hero .chain li::before {
  display: block;
  content: "";
  width: 14px;
  height: 1px;
  background: var(--hairline-firm);
  transform: translateY(-0.35em);
}
.hero .chain li:last-child::before { width: 22px; background: var(--core); }

.hero .pledge {
  margin-inline: 0;
  text-align: left;
  max-width: 46ch;
  color: var(--muted);
  margin-top: var(--s3);
}

/* Button and note back on one line. Stacking them was a workaround for having
   no edge to hang them off, and there is an edge now. */
.hero .hero-cta {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s3);
  margin-top: var(--s4);
}
.hero .hero-cta-note { flex: 0 1 26ch; text-align: left; max-width: 26ch; }

/* The light is NOT part of this change. Leo approved the bottom-weighted
   multi-ellipse after rejecting four others: concentric rings ("cheap and ugly
   radar"), a right-half blob that read purple, a full-hero spread ("too much,
   looks tacky") and a single soft circle. Anchoring the type left made a
   lower-right source tempting and that is version two again. Ask first. */
.hero .bloom::before {
  inset: -22%;
  background:
    radial-gradient(40% 40% at 50% 96%, rgba(27, 59, 255, 0.46), transparent 66%),
    radial-gradient(28% 28% at 68% 84%, rgba(27, 59, 255, 0.30), transparent 64%),
    radial-gradient(32% 22% at 32% 86%, rgba(74, 123, 255, 0.24), transparent 68%),
    radial-gradient(24% 18% at 50% 70%, rgba(122, 151, 255, 0.14), transparent 66%);
  filter: blur(34px);
}

@media (max-width: 1000px) {
  .hero .hero-copy .display { max-width: 19ch; }
}

@media (max-width: 720px) {
  .hero { padding-block: 7.5rem 4rem; }
  .hero .hero-copy .display { font-size: clamp(2.125rem, 9vw, 2.875rem); max-width: 100%; }
  .hero .chain { width: 100%; max-width: 100%; }
  .hero .hero-cta { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .hero .hero-cta-note { flex: none; max-width: 40ch; }
  .hero .bloom::before {
    inset: -18%;
    background:
      radial-gradient(60% 26% at 50% 96%, rgba(27, 59, 255, 0.38), transparent 68%),
      radial-gradient(44% 20% at 66% 86%, rgba(74, 123, 255, 0.24), transparent 66%);
  }
}

/* -------------------------------------------------------------------------
   Click share by position.

   The one place on the page that answers "why do I care about the top three".
   The fourth row is drawn as an outline rather than a fill because it is not a
   position anybody holds: it is the whole tail below the pack sharing one
   figure. Filling it would read as a fourth slot worth half of first.
   ------------------------------------------------------------------------- */

.ctr {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
}

.ctr-bars { display: grid; gap: 0.5rem; }

.ctr-bars li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
}

.ctr-bars .pos {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.ctr-bars i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--core), var(--beam));
  width: var(--w);
  min-width: 0;
}

.ctr-bars .pc {
  font-family: var(--mono);
  font-size: 1.0625rem;
  color: var(--core);
  white-space: nowrap;
}
.ctr-bars .pc sup { font-size: 0.55em; color: var(--dim); }

.ctr-bars .is-out .pc { color: var(--dim); }
.ctr-bars .is-out i {
  background: none;
  box-shadow: inset 0 0 0 1px var(--hairline-firm);
  width: var(--w);
}

.ctr-lead {
  font-size: clamp(1.125rem, 2vw, 1.4375rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.ctr-say p { color: var(--muted); max-width: 56ch; font-size: 0.9375rem; }
/* .ctr-say p wins on specificity over .fine, so the source line was rendering
   at body size in mono and competing with the argument it supports. A source
   has to be visible, not loud. */
.ctr-say .fine {
  margin-top: var(--s3);
  max-width: 64ch;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--dim);
}

@media (min-width: 760px) {
  .ctr {
    grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}


/* -------------------------------------------------------------------------
   The consultation hero is not the homepage hero.

   Centring the hero copy was a deliberate decision for the homepage, where the
   display type has nothing beside it and the light falls symmetrically under
   it. This page puts that same copy in the left half of a two column layout,
   with a booking panel holding a hard vertical edge to its right. Centred
   ragged lines against that edge read as a mistake, and the takeaway list, the
   one part of the page doing the selling, lost its left edge entirely.
   ------------------------------------------------------------------------- */

.hero.consult-hero .hero-copy {
  text-align: left;
  margin-inline: 0;
  max-width: none;
}
.hero.consult-hero .eyebrow { justify-content: flex-start; }
.hero.consult-hero .eyebrow::before { display: block; }
.hero.consult-hero .hero-copy .display {
  margin-inline: 0;
  max-width: 20ch;
  /* Half the width of the homepage hero, so it cannot take the homepage size. */
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  line-height: 0.98;
}
.hero.consult-hero .lede { margin-inline: 0; }


/* -------------------------------------------------------------------------
   The value stack.

   Five obstacles, five removals. It is a hairline list, not a grid of cards:
   CLAUDE.md forbids icon-card feature grids by name, and a card grid would
   also flatten five things that are meant to be read in order.

   The objection carries the visual weight of a quote because it IS one. It is
   the reader's sentence, set slightly larger and in the muted tone, and the
   answer sits underneath it in ink. That inversion is the whole point: his
   problem is bigger on the page than our solution.
   ------------------------------------------------------------------------- */

.stack { border-top: 1px solid var(--hairline); }

.stack-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--hairline);
}

.stack-row .marker {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  padding-top: 0.5rem;
  min-width: 2.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.stack-row .marker::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--core);
  flex: none;
}

.stack-body { display: grid; gap: 0.5rem; }

.objection {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--muted);
  max-width: 30ch;
  text-wrap: balance;
}

.stack-row h3 {
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.3;
  color: var(--ink);
  margin: 0.35rem 0 0;
}

.stack-row > .stack-body > p:not(.objection) {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 56ch;
  text-wrap: pretty;
}

/* Two columns from the same breakpoint the rows use, so the page keeps one
   rhythm: his words on the left, the answer on the right. */
@media (min-width: 860px) {
  .stack-body {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .objection { grid-row: 1 / span 2; max-width: 22rem; }
  .stack-row h3 { margin-top: 0.15rem; }
}


/* -------------------------------------------------------------------------
   What we do.

   Five mechanisms, each drawn. This replaces three bands of prose that argued
   for a conclusion the reader had already accepted by the time he reached
   them, and it replaces the objection/answer pairs, which were a sales-page
   shape rather than a description of the work.

   The drawings are instrumentation, not decoration, and every number in them
   is real: 187 dots because the survey scores 187 factors, a seven day gap
   because the ask fires at seven days, nine cells because the scan runs a 3x3.
   The grid says EXAMPLE SCAN on it, because presenting an invented grid as a
   result is the fake telemetry CLAUDE.md names as slop on its own.

   Alternating sides rather than one repeated column: the forbidden pattern is
   sameness, and five identical rows would be it.
   ------------------------------------------------------------------------- */

.band-do .band-head { margin-bottom: var(--s5); }

.do {
  display: grid;
  gap: var(--s4);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--hairline);
  align-items: center;
}
.do:first-of-type { border-top: 0; }

.do-art { margin: 0; min-width: 0; }
.do-art svg { width: 100%; height: auto; display: block; overflow: visible; }

.art-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.art-note .hot { color: var(--core); }

.do-say { min-width: 0; display: grid; gap: 0.75rem; }

.do-say .unit {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
}

.do-say h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}

.do-say > p:not(.unit):not(.fine) {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 54ch;
  margin: 0;
  text-wrap: pretty;
}

.do-say .fine { margin-top: 0.35rem; max-width: 54ch; }

@media (min-width: 900px) {
  .do {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
  /* Even numbers put the drawing on the right. Ordered in the markup so the
     reading order stays picture-then-words on a phone, where there is only
     one column and the drawing has to introduce the sentence. */
  .do-flip .do-art { order: 2; }
}

/* The five lit factors arrive one at a time, once, on reveal. Not a loop:
   motion here says "these are the ones", and once it has said it, it stops. */
.do-art .lit {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in .do-art .lit { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .do-art .lit { opacity: 1; transform: none; transition: none; }
}