/* ═══════════════════════════════════════════════════════════════════════════
   impossiblemeansgo.asia — the design system for the company site.

   WHY THIS IS A SECOND STYLESHEET AND NOT AN EDIT TO style.css.
   css/style.css dresses the Las Vegas invitation: near-black, gold, an italic
   serif, a particle canvas. That is correct for an invitation to a private room
   and it keeps it — the event page moved to /vegas and still loads it, byte for
   byte. This file dresses a company: the pages that argue Organizational
   Independence, the framework explainer, the offers and every legal document.
   Editing one stylesheet to serve both would have made every change to the
   event page a risk to the privacy policy.

   THE PALETTE IS SAMPLED FROM THE FRAMEWORK DIAGRAM, NOT TYPED FROM A SCREEN
   READING. The Organizational Independence diagram sits in the middle of the
   homepage and already gives every stage a colour that means something to
   anyone who has seen Atiba teach it. Those exact values were read out of
   frameworks/media/organizational-independence.png (1536x1024) by sampling its
   saturated pixels, so the page and the picture agree rather than nearly
   agreeing:

     Alignment   #095993   the blue of stage one
     Movement    #24702B   the green of stage two
     Measurement #A76602   the amber of stage three
     Learning    #444272   the purple of the loop
     Trust       #61676D   the grey of the plinth
     (wash)      #BDE4FD   the light blue tint inside the diagram

   Three values are DECIDED rather than sampled, because the diagram is drawn on
   plain white and has no page furniture in it: the warm paper base #FAFAF8, the
   ink navy #0F1B2D that all type is set in, and the near-black band #0B1626.

   GOLD IS KEPT AND DEMOTED. #C49E45 survives as a signature at low dose — the
   trademark mark, the hairline above a section label, the active nav underline.
   It is never a background, never a glow and never on a button, because at
   2.4:1 on paper it cannot legally carry text. Atiba's instruction was that he
   loves the colours and we overused them; this keeps them and stops making the
   whole site out of them.

   CONTRAST IS A BUILD GATE, not a judgement. scripts/check-contrast.js
   computes every text-on-background pair in this file and fails the deploy
   below AA. That is why --measurement-text exists: the sampled amber is 4.44:1
   on paper, which is under the 4.5 floor for body text, so a darkened
   derivative carries small amber type and the sampled value carries large type
   and graphics.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Sampled from the diagram */
  --alignment: #095993;
  --movement: #24702B;
  --measurement: #A76602;
  --learning: #444272;
  --trust: #61676D;
  --wash: #BDE4FD;
  --rule-grey: #C4C7CA;

  /* Darkened derivative: the sampled amber is under AA at body size */
  --measurement-text: #8F5702;

  /* ── THE PILLAR TINTS (2026-10-10) ───────────────────────────────────────
     The four pillars as FIELDS rather than hairlines, on the Organizational
     Independence page only. Each tint is its pillar's own hue, taken to the
     deepest value that still leaves body --ink at 11:1 or better; each -ink is
     that hue darkened until it clears 4.5:1 on its own tint; each -numeral is
     the lightest value that still clears the 3:1 large-text floor there,
     because the numerals are landmarks and a landmark that shouts stops
     helping. Every one of these is asserted in scripts/check-contrast.js.

     TRUST DELIBERATELY HAS NO TINT. It is the plinth: no stage-rule class, no
     card and no band on the page carries it, and --trust is already spent as
     the muted-text colour. A token nothing renders is a gate certifying
     something it does not protect.

     MEASUREMENT'S EDGE IS THE DEEPENED AMBER, not the sampled one: --measurement
     is 2.99:1 on its own tint, under the graphical floor by a hundredth. */
  --alignment-tint: #AFD4EE;
  --alignment-ink: #0D5A91;
  --alignment-numeral: #2873A9;

  --movement-tint: #A0DFA6;
  --movement-ink: #236629;
  --movement-numeral: #3B7D41;

  --measurement-tint: #EDCB97;
  --measurement-ink: #7B4C05;
  --measurement-numeral: #96661C;

  --learning-tint: #CFCEE9;
  --learning-ink: #545289;
  --learning-numeral: #6D6B99;

  /* The page's muted grey is 3.67–3.72:1 on those tints — a floor it passes at
     5.48:1 on paper. This is the same grey, darkened to clear 4.5 on all four
     (5.14–5.21) while staying visibly lighter than body ink, so muted text
     stays subordinate instead of collapsing into the body colour. */
  --muted-on-tint: #4C5157;

  /* THE NEUTRAL NUMERAL (2026-10-10). The section numerals were invisible on
     every background but a tint: the pale pillar values measured 1.69-2.38 on
     paper and on white, --line-strong measured 1.51, and the near-black band's
     own #33425A measured 1.79, all against a 3:1 large-text floor. This is the
     ink navy at thirty percent of its saturation, taken to the lightest step
     that still clears 3.2 on paper, on white AND on the wash -- which makes it
     the only value needed for a numeral with no pillar: 4.11 on paper, 4.30 on
     white, 3.21 on the wash, 4.22 on the near-black band. So `.band-ink
     .numeral` is deleted rather than given a value.
     IT IS 2.76-2.80 ON THE FOUR TINTS, which is under the floor, and that is a
     deliberate exclusion rather than an oversight: no plain numeral renders
     inside a flooded band. check-contrast.js carries four CONTROLS asserting it
     must not reach 3.0 there, so the day somebody puts one in a tinted band the
     build says so. */
  --numeral-neutral: #6C7B92;

  /* Decided — the diagram has no page furniture to sample */
  --base: #FAFAF8;
  --ink: #0F1B2D;
  --ink-band: #0B1626;

  /* Kept, demoted. TWO VALUES, and the second one is not a drift.
     #C49E45 is the brand gold and it is 7.19:1 on the near-black band, where it
     has always lived. On warm paper the same value is 2.41:1 — under even the
     3:1 floor for a graphical element — so the hairline and the trademark mark
     on a light background use a deepened gold that measures 3.10:1 and reads
     as the same colour. scripts/check-contrast.js asserts both, and asserts
     that the brand value still fails as body type, which is the rule that
     keeps gold a signature rather than a text colour.
     TWO OF THESE FIGURES WERE WRONG UNTIL 2026-10-10 and were copied out of
     here into a plan before anyone measured them: the band figure read 5.6 and
     the deepened-gold figure read 3.13. Recomputed with the same formula the
     gate uses. The 2.41 was always right. */
  --gold: #C49E45;
  --gold-ink: #AE8A36;

  --paper-raised: #FFFFFF;
  --line: #E3E2DD;
  --line-strong: #CFCEC7;

  --wrap: 1160px;
  --measure: 68ch;

  --radius: 4px;
  --radius-lg: 10px;

  --step: clamp(56px, 7vw, 104px);
}

/* ─── RESET ─────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }
a { color: var(--alignment); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* An email address is one unbreakable word. At 320px -- the narrowest phone we
   support -- a 37-character address is wider than the content box and pushes the
   whole page sideways, which is what /contact and /accessibility were doing.
   Scoped to the links that actually carry one, so ordinary prose keeps breaking
   at spaces. */
a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; }

:focus-visible {
  outline: 3px solid var(--alignment);
  outline-offset: 2px;
}

/* ─── TYPE ──────────────────────────────────────────────────────────────── */
/* One display face and one text face, and real jumps between the levels so a
   section heading and a card heading cannot be confused at a glance. */

h1, h2, h3, h4, .display {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.25; }
h4 { font-size: 1.05rem; line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink);
}

.muted { color: var(--trust); }
.small { font-size: 0.9rem; line-height: 1.6; }

strong, b { font-weight: 650; }

/* The one place gold carries a hairline: above a section label. */
.eyebrow {
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--trust);
  margin: 0 0 18px;
  padding-top: 14px;
  border-top: 2px solid var(--gold-ink);
  display: inline-block;
}

.tm { font-size: 0.5em; vertical-align: super; color: var(--gold-ink); letter-spacing: 0; }
.band-ink .tm, .site-footer .tm { color: var(--gold); }

/* ─── LAYOUT ────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

section { padding-block: var(--step); }

/* Shape 1 — the split: words one side, an object the other. */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.split.center { align-items: center; }

/* Shape 2 — the narrow editorial column. */
.column { max-width: var(--measure); }
.column.wide { max-width: 80ch; }

/* Shape 3 — the tile grid. */
.tiles {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tiles.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Exactly two columns. auto-fit puts four cards on a 1160px row as three plus an
   orphan, which reads as a mistake rather than as a grid. */
.tiles.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .tiles.pair { grid-template-columns: 1fr; } }
.tiles.four { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Shape 4 — the full-bleed band. Two ink bands per page maximum: dark is
   punctuation here, which is the only way it stays emphatic. */
.band { background: var(--paper-raised); border-block: 1px solid var(--line); }
.band-ink {
  background: var(--ink-band);
  color: var(--base);
}
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--base); }
.band-ink a { color: var(--wash); }
.band-ink .muted { color: #A9B2BD; }
.band-ink .eyebrow { color: #A9B2BD; border-top-color: var(--gold); }

/* THE WASH OPENS EVERY PAGE, AND IT IS THE DIAGRAM'S OWN BLUE (2026-10-10).
   It ran from #F2F8FE, which is two percent away from the paper underneath it,
   so the site's own light blue was never actually spent as a field. --wash is
   sampled from the framework diagram and was already in the palette.
   #F2F8FE WAS WRITTEN IN THREE PLACES and all three moved -- here, in
   .band-hero below, and in .band-hero's override inside the 900px media query.
   Miss that third one and the phone keeps opening on near-white while the
   desktop opens on blue, with every gate green. */
.band-wash { background: linear-gradient(180deg, var(--wash) 0%, var(--base) 100%); }

/* The hero backdrop: every line in the company running to one node. It is a
   background image rather than markup so it can never be read out, tabbed to,
   or printed, and it sits under the type at an opacity the contrast gate's
   floors are unaffected by. */
.band-hero {
  position: relative;
  background:
    url("/img/hero-lattice.svg") center right / cover no-repeat,
    linear-gradient(180deg, var(--wash) 0%, var(--base) 100%);
}
@media (max-width: 900px) {
  /* On a phone the node lands behind the headline. The gradient alone is enough. */
  .band-hero { background: linear-gradient(180deg, var(--wash) 0%, var(--base) 100%); }
}

/* ─── SECTION NUMERALS ──────────────────────────────────────────────────
   A design device and a navigation aid: nine sections of continuous prose
   read as one wall, and a numeral gives the eye somewhere to land. Set in the
   display face at the weight of a heading, in the stage colour where the
   section belongs to a stage. */
.numbered { display: flex; align-items: baseline; gap: 16px; }
.numeral {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--numeral-neutral);
  letter-spacing: -0.02em;
}
/* One value per pillar, every background. A numeral keeps ONE identity across
   the site rather than changing colour with what it happens to sit on, which
   is what a landmark is for. Measured on tint / paper / white / wash / ink
   band: alignment 3.27 4.88 5.10 3.81 3.56, movement 3.24 4.79 5.01 3.74 3.63,
   measurement 3.22 4.77 4.98 3.72 3.64, learning 3.24 4.77 4.98 3.72 3.64.
   There is deliberately no `.band-ink .numeral` override. */
.numeral.alignment { color: var(--alignment-numeral); }
.numeral.movement { color: var(--movement-numeral); }
.numeral.measurement { color: var(--measurement-numeral); }
.numeral.learning { color: var(--learning-numeral); }

/* ─── GLYPHS ────────────────────────────────────────────────────────────
   Small built line-drawings, inline so they inherit the colour of whatever
   they sit in. They are decoration with aria-hidden on every one: the words
   beside them already say it, and an icon that repeats a label out loud is
   noise to a screen reader. */
.glyph { width: 30px; height: 30px; display: block; margin-bottom: 14px; }
.glyph line, .glyph path, .glyph circle, .glyph rect, .glyph polyline {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.glyph .solid { fill: currentColor; stroke: none; }
.situation .glyph { color: var(--alignment); }
.card .glyph { color: var(--trust); }

/* ─── THE CLOSING LINE ──────────────────────────────────────────────────
   Five steps, set as a run rather than a sentence, because the framework's own
   closing line is a sequence and reads as one. */
.steps {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: 36px;
}
.step {
  padding: 22px 20px;
  background: rgba(250,250,248,.05);
  border-top: 3px solid var(--trust);
}
.step:nth-child(1) { border-top-color: var(--alignment); }
.step:nth-child(2) { border-top-color: var(--movement); }
.step:nth-child(3) { border-top-color: var(--measurement); }
.step:nth-child(4) { border-top-color: var(--learning); }
.step:nth-child(5) { border-top-color: var(--gold); }
.step-n {
  font-family: Inter, sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: .14em;
  color: #8D98A5; display: block; margin-bottom: 8px;
}
.step p {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.15rem; font-weight: 600; line-height: 1.2; margin: 0;
}

/* ─── THE FIGURE STRIP ──────────────────────────────────────────────────
   Four facts, each one checkable, set large. It is the one place on the page
   where a number is the design. */
.figures {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fig { background: var(--paper-raised); padding: 26px 22px; }
.fig b {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600; line-height: 1;
  color: var(--ink);
  margin-bottom: 10px;
}
.fig span { display: block; font-size: 0.92rem; color: var(--trust); line-height: 1.45; }

/* ─── COMPONENTS ────────────────────────────────────────────────────────── */

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.card h3 { margin-bottom: 10px; }
.card > :last-child { margin-bottom: 0; }

/* A tile that is a link: the whole thing is the target. */
a.card { text-decoration: none; color: inherit; display: block; transition: border-color .18s ease, transform .18s ease; }
a.card:hover { border-color: var(--alignment); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { a.card:hover { transform: none; } }

.stage-rule { border-top: 3px solid var(--trust); padding-top: 18px; }
.stage-rule.alignment { border-color: var(--alignment); }
.stage-rule.movement { border-color: var(--movement); }
.stage-rule.measurement { border-color: var(--measurement); }
.stage-rule.learning { border-color: var(--learning); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 16px 26px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--alignment); color: #FFFFFF; }
.btn-primary:hover { background: #07487A; color: #FFFFFF; }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--base); }
.band-ink .btn-ghost { border-color: var(--base); color: var(--base); }
.band-ink .btn-ghost:hover { background: var(--base); color: var(--ink-band); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.pull {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--measurement);
  display: block;
  margin-bottom: 8px;
}

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { margin-bottom: 12px; padding-left: 26px; position: relative; }
.list-plain li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 2px;
  background: var(--trust);
}
.list-plain li:last-child { margin-bottom: 0; }

.kv { margin: 0; }
.kv dt { font-weight: 650; margin-top: 18px; }
.kv dt:first-child { margin-top: 0; }
.kv dd { margin: 4px 0 0; color: var(--trust); }

/* ─── THE SITUATION TILES (homepage section 2) ──────────────────────────── */

.situation {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--alignment);
  border-radius: var(--radius);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.situation:hover { box-shadow: 0 6px 24px rgba(15,27,45,.08); }
.situation p { font-size: 1.05rem; margin: 0; }
.situation .situation-tag {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--trust);
  margin-bottom: 10px;
}

/* ─── THE ORG-CHART DIAGRAM (homepage section 4) ────────────────────────── */
/* Built markup, never an image — the owner's name appearing in two empty roles
   is the argument, and an image of it cannot be read by a screen reader or
   resized on a phone. */

.position {
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.position-title {
  font-family: Inter, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--trust);
  margin: 0 0 16px;
}
.roles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.role {
  border: 1px solid var(--line);
  border-top: 3px solid var(--trust);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--base);
}
.role.strategic { border-top-color: var(--alignment); }
.role.tactical { border-top-color: var(--movement); }
.role.analytical { border-top-color: var(--measurement); }
.role h4 { margin-bottom: 6px; }
.role .role-q { font-size: 0.9rem; color: var(--trust); margin: 0 0 12px; }
.role .held-by {
  font-family: Inter, sans-serif;
  font-size: 0.82rem;
  font-weight: 650;
  margin: 0;
}
.role .held-by.owner { color: var(--measurement-text); }
.role .held-by.hired { color: var(--trust); font-weight: 500; }

/* ─── THE FRAMEWORK BAND (homepage section 5) ───────────────────────────── */

.framework { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.brain-line, .trust-line {
  font-family: Inter, sans-serif;
  font-size: 0.95rem;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: rgba(68,66,114,.07);
  border: 1px solid rgba(68,66,114,.2);
}
.trust-line { background: rgba(97,103,109,.08); border-color: rgba(97,103,109,.25); }
.band-ink .brain-line { background: rgba(189,228,253,.08); border-color: rgba(189,228,253,.22); }
.band-ink .trust-line { background: rgba(250,250,248,.06); border-color: rgba(250,250,248,.18); }

.loop-line {
  font-family: Inter, sans-serif;
  font-weight: 650;
  color: var(--learning);
  margin-top: 8px;
}
.band-ink .loop-line { color: #B8B3DC; }

.figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  padding: 14px;
}
.figure img { display: block; border-radius: var(--radius); }
.figure figcaption { font-size: 0.85rem; color: var(--trust); margin-top: 12px; }

/* ─── NAV ───────────────────────────────────────────────────────────────── */

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--base);
  padding: 12px 18px; z-index: 200;
}
.skip:focus { left: 12px; top: 12px; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,250,248,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
}
.brand {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: Inter, sans-serif;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--line-strong); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--gold-ink); font-weight: 650; }
.nav-links .nav-cta {
  background: var(--alignment);
  color: #FFFFFF;
  padding: 10px 18px;
  border-radius: var(--radius);
  border-bottom: none;
  font-weight: 600;
}
.nav-links .nav-cta:hover { background: #07487A; border-bottom: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 9px 13px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--base);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-top: 1px solid var(--line); }
  .nav-links a { display: block; padding: 14px 0; border-bottom: none; }
  .nav-links .nav-cta { text-align: center; margin-top: 14px; }
  .nav-links li:first-child { border-top: none; }
}

/* ─── FOOTER ────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink-band);
  color: #C9D1DB;
  padding-block: 58px 34px;
  font-size: 0.92rem;
}
.site-footer a { color: #C9D1DB; text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.footer-cols {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.site-footer h2 {
  font-family: Inter, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8D98A5;
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-base {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(201,209,219,.2);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  color: #8D98A5;
  font-size: 0.86rem;
}
.footer-base p { margin: 0; }
.footer-prefs {
  background: none;
  border: 1px solid rgba(201,209,219,.35);
  border-radius: var(--radius);
  color: #C9D1DB;
  font: inherit;
  font-size: 0.86rem;
  padding: 6px 12px;
  cursor: pointer;
}
.footer-prefs:hover { border-color: #FFFFFF; color: #FFFFFF; }

/* ─── COOKIE CONSENT ───────────────────────────────────────────────────
   Moved to css/chrome.css on 2026-10-09. The sheet appears on EVERY page on
   this deployment, including the event pages and the survey, which do not
   load this file - so its styles cannot live here. */

/* ─── FORMS ─────────────────────────────────────────────────────────────── */

.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 650; margin-bottom: 6px; }
.field .hint { display: block; font-size: 0.88rem; color: var(--trust); margin-bottom: 8px; }
.field input[type="email"], .field input[type="text"], .field select, .field textarea {
  width: 100%;
  font: inherit;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--alignment); }

.form-note {
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  margin-top: 20px;
}
.form-note[hidden] { display: none; }
.form-note.ok { border-left: 4px solid var(--movement); }
.form-note.bad { border-left: 4px solid var(--measurement); }

/* ─── LEGAL PAGES ───────────────────────────────────────────────────────── */

.legal { max-width: 76ch; }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 44px; }
.legal h3 { margin-top: 28px; }
.legal table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.93rem; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { font-family: Inter, sans-serif; font-size: 0.8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--trust); }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.toc { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 24px; }
.toc ol { margin: 0; }

/* ─── REVEAL ────────────────────────────────────────────────────────────── */
/* Gated on has-js, which the inline script in every head sets. The page sells
   completely with JavaScript switched off — the old stylesheet hid
   [data-reveal] unconditionally, so a reader with no JavaScript got a blank
   page, and that is the failure this guard removes. */

html.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
  /* has-js is set by an inline script, so it says scripting is ON, not that
     js/site.js arrived. If site.js never runs, this un-hides everything at
     2.5s; site.js cancels it with reveal-live once the reveal is wired. */
  animation: reveal-failsafe 0s linear 2.5s forwards;
}
html.has-js.reveal-live [data-reveal] { animation: none; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
html.has-js [data-reveal].revealed { opacity: 1; transform: none; }

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

/* ─── RESPONSIVE ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  body { font-size: 16.5px; }
}

@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { gap: 10px; }
  .consent { left: 8px; right: 8px; bottom: 8px; padding: 18px; }
}

/* ─── THE PILLAR FIELDS — THE WHOLE COMPANY SITE ────────────────────────
   THESE RULES WERE SCOPED TO `body.oi` UNTIL 2026-10-10 AND THE HOOK IS NOW
   GONE. It was right while one page was being restyled: this stylesheet
   dresses sixteen pages, eleven pillar cards live outside that page, and an
   unhooked rule would have restyled three of them in the same deploy with
   nobody looking. The goal is now the whole site, so the rules are keyed to
   MARKUP instead — a page gets the treatment when it carries `.band-<pillar>`
   or `.card.stage-rule.<pillar>`, and not otherwise. What replaces the hook as
   proof is e2e/colour-capture.mjs: every rendered colour on all sixteen pages,
   captured before and after, with only intended changes allowed through.

   The rule, in one line: a tint is either the FIELD or the GROUND, never both.
   A pillar card on paper or on a white .band becomes the tint. A card sitting
   INSIDE a flooded band stays white and takes a coloured edge.

   AND EVERY ELEMENT THAT PAINTS ITS OWN COLOUR HAS TO BE NAMED HERE, because
   it never inherits the field's. About twelve rules in this file set their own
   `color:`; three of them land on a background this system changes —
   `.eyebrow`, `.situation-tag` and `.kv dd` — and each was found a review
   round later than the last. The contrast gate CANNOT help: the muted grey on
   a tint is one of its controls, a pair asserted to fail, so it can never also
   report a page for rendering it. This list is the only defence. ────────── */

/* The flooded question bands. The .band hairline comes off where the tint now
   marks the edge — four bands meant to read as a set cannot have three with a
   rule and one without. */
.band-alignment,
.band-movement,
.band-measurement,
.band-learning { border-block: 0; }

.band-alignment   { background: var(--alignment-tint); }
.band-movement    { background: var(--movement-tint); }
.band-measurement { background: var(--measurement-tint); }
.band-learning    { background: var(--learning-tint); }

/* The eyebrow is a 2px GOLD rule above GREY text, and both halves fail on a
   tint — gold at 2.08–2.11 against a 3:1 floor, grey at 3.67–3.72 against 4.5.
   Inside a flooded band the whole label takes the pillar's own ink, which is
   also the more meaningful result: the label names the pillar. */
.band-alignment   .eyebrow { color: var(--alignment-ink);   border-top-color: var(--alignment-ink); }
.band-movement    .eyebrow { color: var(--movement-ink);    border-top-color: var(--movement-ink); }
.band-measurement .eyebrow { color: var(--measurement-ink); border-top-color: var(--measurement-ink); }
.band-learning    .eyebrow { color: var(--learning-ink);    border-top-color: var(--learning-ink); }

/* A pillar card on paper or on a white .band becomes the field. It keeps a top
   rule in its CARD-EDGE colour, which is the saturated value for three pillars
   and the deepened amber for measurement — the saturated amber is the 2.99:1
   the tokens block already rejected on this exact background. */
.card.stage-rule.alignment {
  background: var(--alignment-tint);
  color: var(--alignment-ink);
  border-color: var(--alignment-tint);
  border-top-color: var(--alignment);
}
.card.stage-rule.movement {
  background: var(--movement-tint);
  color: var(--movement-ink);
  border-color: var(--movement-tint);
  border-top-color: var(--movement);
}
.card.stage-rule.measurement {
  background: var(--measurement-tint);
  color: var(--measurement-ink);
  border-color: var(--measurement-tint);
  border-top-color: var(--measurement-text);
}
.card.stage-rule.learning {
  background: var(--learning-tint);
  color: var(--learning-ink);
  border-color: var(--learning-tint);
  border-top-color: var(--learning);
}

/* Headings inside a tinted card follow the card, not the page. h2 is in the
   list because /contact's and /events' cards head with one; only the
   Organizational Independence page uses h3. */
.card.stage-rule.alignment   :is(h2, h3, h4, strong) { color: var(--alignment-ink); }
.card.stage-rule.movement    :is(h2, h3, h4, strong) { color: var(--movement-ink); }
.card.stage-rule.measurement :is(h2, h3, h4, strong) { color: var(--measurement-ink); }
.card.stage-rule.learning    :is(h2, h3, h4, strong) { color: var(--learning-ink); }

/* The eyebrow inside a TINTED CARD, which is a different case from the band
   rule above and was missed because of it. Deleting the inline colours on the
   /events cards without this would drop all four labels to --trust, which is
   3.67–3.72 on the tints against a 4.5 floor — the fix making it worse. On the
   pillar ink they measure 4.67 / 4.53 / 4.72 / 4.64. */
.card.stage-rule.alignment   .eyebrow { color: var(--alignment-ink);   border-top-color: var(--alignment-ink); }
.card.stage-rule.movement    .eyebrow { color: var(--movement-ink);    border-top-color: var(--movement-ink); }
.card.stage-rule.measurement .eyebrow { color: var(--measurement-ink); border-top-color: var(--measurement-ink); }
.card.stage-rule.learning    .eyebrow { color: var(--learning-ink);    border-top-color: var(--learning-ink); }

/* The glyph is --trust, which clears the 3:1 graphical floor on a tint and
   fails the 4.5 text floor. That ambiguity is worth removing rather than
   asserting, so it takes the card's ink like everything else in the card. */
.card.stage-rule.alignment   .glyph { color: var(--alignment-ink); }
.card.stage-rule.movement    .glyph { color: var(--movement-ink); }
.card.stage-rule.measurement .glyph { color: var(--measurement-ink); }
.card.stage-rule.learning    .glyph { color: var(--learning-ink); }

/* .muted declares its colour on the element, so setting the card's colour
   never reaches it — the selector has to be named. */
.card.stage-rule .muted { color: var(--muted-on-tint); }

/* ─── THE SITUATION TILES AS FIELDS (homepage section 2) ─────────────────
   Four tiles, four pillars. Three things inside each one have to move with the
   fill, and the third would never have failed a floor: the tile's 4px left
   edge is one hard-coded --alignment for all four, so three of the four would
   have rendered their own tint with another pillar's rule down the side. It is
   not an invisible colour, it is the wrong one, which is why no gate could
   have reported it. */
.situation.alignment   { background: var(--alignment-tint);   color: var(--alignment-ink);   border-color: var(--alignment-tint);   border-left-color: var(--alignment); }
.situation.movement    { background: var(--movement-tint);    color: var(--movement-ink);    border-color: var(--movement-tint);    border-left-color: var(--movement); }
.situation.measurement { background: var(--measurement-tint); color: var(--measurement-ink); border-color: var(--measurement-tint); border-left-color: var(--measurement-text); }
.situation.learning    { background: var(--learning-tint);    color: var(--learning-ink);    border-color: var(--learning-tint);    border-left-color: var(--learning); }

.situation.alignment   :is(.glyph, strong) { color: var(--alignment-ink); }
.situation.movement    :is(.glyph, strong) { color: var(--movement-ink); }
.situation.measurement :is(.glyph, strong) { color: var(--measurement-ink); }
.situation.learning    :is(.glyph, strong) { color: var(--learning-ink); }

/* .situation-tag paints its own --trust: 3.67–3.72 on the tints. 5.14–5.21 here. */
.situation.alignment   .situation-tag,
.situation.movement    .situation-tag,
.situation.measurement .situation-tag,
.situation.learning    .situation-tag { color: var(--muted-on-tint); }

/* ─── THE WASH BAND, WHICH NOW OPENS EVERY PAGE ──────────────────────────
   Gold is 2.42:1 on the wash and the muted grey is 4.27:1, so both step aside
   exactly as they do on a tint. */
:is(.band-wash, .band-hero) .eyebrow { color: var(--alignment-ink); border-top-color: var(--alignment-ink); }
:is(.band-wash, .band-hero) .muted { color: var(--muted-on-tint); }

/* AND THE SECOND HALF IS LOAD-BEARING. The homepage hero holds a white
   aside.card with its own eyebrow, whose ground is the card and not the wash.
   A single descendant rule would recolour it — a colour change on an element
   whose background never moved, which is the shape of the specificity defect
   that shipped on 2026-10-10. Inside a card, the page's own gold and grey. */
:is(.band-wash, .band-hero) .card .eyebrow { color: var(--trust); border-top-color: var(--gold-ink); }
:is(.band-wash, .band-hero) .card .muted { color: var(--trust); }

/* A white card on the wash: --line is 1.03:1 there, so the edge does no work
   at all. The alignment edge measures 5.48. */
:is(.band-wash, .band-hero) .card { border-color: var(--alignment); }

/* ─── FIGURE AND GROUND ──────────────────────────────────────────────────
   A card INSIDE a flooded band is the figure, so it stays white and takes a
   visible edge. White on a tint is only ~1.5:1 — the border does this work,
   not the fill, which is why no pair asserts the fill.

   THE :is(.alignment, …) ON THE END IS LOAD-BEARING AND IS NOT DECORATION.
   Without it this selector scores one class lower than the tinted-card rule
   above, which therefore wins, and every card inside a flooded band renders
   its band's own tint — tint on tint, the one thing this whole rule forbids,
   with the card dissolving into the band. That is exactly what shipped on
   2026-10-10 and what the rendered page caught; the contrast gate cannot see
   it, because both colours are legal and it never asks which sits on which. */
:is(.band-alignment, .band-movement, .band-measurement, .band-learning)
  .card.stage-rule:is(.alignment, .movement, .measurement, .learning) {
  background: var(--paper-raised);
  color: var(--ink);
}
:is(.band-alignment, .band-movement, .band-measurement, .band-learning)
  .card.stage-rule:is(.alignment, .movement, .measurement, .learning)
  :is(h2, h3, h4, strong) { color: var(--ink); }

/* Back on white, so muted text and the eyebrow are the page's own again. */
:is(.band-alignment, .band-movement, .band-measurement, .band-learning)
  .card.stage-rule:is(.alignment, .movement, .measurement, .learning)
  .muted { color: var(--trust); }
:is(.band-alignment, .band-movement, .band-measurement, .band-learning)
  .card.stage-rule:is(.alignment, .movement, .measurement, .learning)
  .eyebrow { color: var(--trust); border-top-color: var(--gold-ink); }

/* The card keeps its own pillar's edge, which is how a movement card inside the
   alignment band still reads as movement. Saturated on white, which already
   passes and is what every other page does. */
:is(.band-alignment, .band-movement, .band-measurement, .band-learning) .card.stage-rule.alignment   { border-color: var(--alignment); }
:is(.band-alignment, .band-movement, .band-measurement, .band-learning) .card.stage-rule.movement    { border-color: var(--movement); }
:is(.band-alignment, .band-movement, .band-measurement, .band-learning) .card.stage-rule.measurement { border-color: var(--measurement-text); }
:is(.band-alignment, .band-movement, .band-measurement, .band-learning) .card.stage-rule.learning    { border-color: var(--learning); }

/* A PLAIN card with no pillar, inside a flooded band. It stays white by the
   same rule — and it needs the band's edge for the same reason, which the
   first version of this system missed because the Organizational Independence
   page has no such card. --line is 1.19–1.20:1 on the four tints, so a plain
   card there has no visible edge at all: four testimonial cards on /results
   and one on the homepage. */
.band-alignment   .card { background: var(--paper-raised); border-color: var(--alignment); }
.band-movement    .card { background: var(--paper-raised); border-color: var(--movement); }
.band-measurement .card { background: var(--paper-raised); border-color: var(--measurement-text); }
.band-learning    .card { background: var(--paper-raised); border-color: var(--learning); }

/* The figure strip, if one is ever placed in a flooded band. Its 1px gaps show
   --line through at 1.19:1, which collapses four tiles into one slab. */
.band-alignment   .figures { background: var(--alignment);        border-color: var(--alignment); }
.band-movement    .figures { background: var(--movement);         border-color: var(--movement); }
.band-measurement .figures { background: var(--measurement-text); border-color: var(--measurement-text); }
.band-learning    .figures { background: var(--learning);         border-color: var(--learning); }

/* ─── THE DOCUMENT PAGES ─────────────────────────────────────────────────
   .legal was already live on the five light policy pages before this change —
   accessibility, cookie-policy, disclaimer, refund-policy and data-request all
   carry `class="wrap legal"`. The three legal documents join them, which is
   what lets legal.css come off those pages without re-typesetting them.

   SO EVERY RULE ADDED HERE MUST NOT REACH THE FIVE. `.legal > section` is a
   CHILD selector on purpose: the three legal documents hold their sections
   directly inside the wrapper, and the five light pages hold none at all. */
.legal > section { padding-block: 0; margin-bottom: 34px; scroll-margin-top: 24px; }
.legal > section:last-child { margin-bottom: 0; }
.legal .toc h2,
.legal .callout h2 {
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.legal .toc h2 { color: var(--trust); }

.effective { font-size: 0.9rem; color: var(--trust); margin-bottom: 10px; }
.operator {
  font-size: 0.9rem;
  color: var(--trust);
  border-left: 3px solid var(--gold-ink);
  padding: 8px 0 8px 16px;
  margin: 0 0 30px;
}
.intro { margin-bottom: 28px; }

/* The callout holds the clauses a mobile carrier reviewer is hunting for, so
   it is a filled field rather than a hairline — being FOUND is its whole job.
   Gold cannot carry text on any background, so the field is the alignment
   tint. */
.callout {
  background: var(--alignment-tint);
  color: var(--alignment-ink);
  border: 1px solid var(--alignment);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 34px;
}
.callout :is(h2, h3, strong) { color: var(--alignment-ink); }
/* .kv dd paints its own --trust, so it never inherits the callout's ink. On
   sms-terms that is six paragraphs — the consent, frequency, cost, STOP and
   HELP lines — at 3.67:1 against a 4.5 floor, on the one page whose job is to
   be approved by a carrier. 5.14 here. The gate can never report this: the
   grey-on-tint pair is one of its own controls. */
.callout .kv dd { color: var(--muted-on-tint); }
.callout .kv dt { color: var(--alignment-ink); }

@media print {
  .site-nav, .consent, .btn-row { display: none; }
  body { background: #FFFFFF; }
  /* Tinted backgrounds are left to the browser's print-backgrounds setting, so
     where a reader has it on the page prints as coloured slabs. The top rule
     survives, so the pillar is still readable on paper.
     THIS BLOCK WAS SCOPED TO body.oi TOO, and unhooking the rules above
     without unhooking these would have left every newly flooded band and every
     newly tinted card with no print reset at all. .band-hero is here because
     it layers a background IMAGE over the gradient, which at the old near-white
     value was invisible and at the sampled blue is not. */
  :is(.band-alignment, .band-movement, .band-measurement, .band-learning),
  .band-wash, .band-hero,
  .card.stage-rule, .situation, .callout { background: #FFFFFF; }
  .band-hero { background-image: none; }
  .card.stage-rule, .situation, .callout,
  :is(.band-alignment, .band-movement, .band-measurement, .band-learning) :is(.eyebrow, .numeral),
  :is(.band-wash, .band-hero) .eyebrow { color: var(--ink); }
}