/* ===========================================================================
   LudiaHelios.com — site stylesheet
   Depends on ludia-tokens.css, which is the brand source of truth. A colour
   change starts there, never here. Nothing in this file hard-codes a brand hex
   except the two documented exceptions below (the hero corona gradients, which
   need rgba stops a custom property cannot supply to a canvas fallback).

   Structure
     1  reset + base                    7  the map
     2  layout primitives               8  bars, chains, phase bar
     3  navigation + progress + rail    9  the Labs band
     4  the hero (and its motion)      10  call to action + footer
     5  type + section furniture       11  motion, reduced motion, print
     6  surfaces: cards, tiles, lists
   =========================================================================== */

/* Text-safe variants of the categorical series.
   ludia-tokens.css already carries --green-text for this reason: the brand
   accent is built for fills and display type and fails WCAG AA at kicker size.
   The other series colours have the same problem, so each one gets a darker
   sibling here. These are derived, not new brand colours — if the accent moves
   upstream, re-derive them, don't invent them. Measured on --bg #FAFAF7:
   blue 5.6:1, teal 5.9:1, deep green 6.0:1, cyan 4.8:1, lime 4.6:1. */
:root {
  --blue-text:      #0A6E8A;
  --teal-text:      #00705A;
  --deepgreen-text: #445E51;
  --cyan-text:      #1E7482;
  --lime-text:      #66740F;
}

/* ---------------------------------------------------------------- 1. base */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(16px, 1.02vw, 17.5px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: inherit; }

::selection { background: color-mix(in srgb, var(--green) 26%, transparent); }

:focus-visible {
  outline: 2px solid var(--green-text);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--bg);
  padding: .7rem 1.1rem; font-weight: 600; font-size: .9rem;
}
.skip:focus { left: .5rem; top: .5rem; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------ 2. layout primitives */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.wrap.wide { max-width: 1440px; }
.wrap.narrow { max-width: 820px; }

section {
  padding-block: clamp(3.25rem, 7.5vw, 7rem);
  scroll-margin-top: 4.6rem;
  position: relative;
}
section.soft { background: var(--bg-soft); }
section.bone { background: var(--bg-bone); }
section.tint {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--green) 5%, var(--bg)), var(--bg) 62%);
}
section.dark { background: var(--labs-bg); color: var(--labs-ink); }

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 2.6rem 0; }

/* ------------------------------------- 3. navigation, progress, section rail */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.stuck { border-bottom-color: var(--rule); }
.nav .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.2rem; max-width: 1440px;
}

/* The lockup: Ludia mark, hairline, the product name with its own live glyph.
   Two links, not one. The mark goes to ludiaconsulting.com because a mark should
   behave like a mark; the product name goes to this site's home. Making the whole
   lockup leave for the parent company would take the only home link with it. */
.brand { display: flex; align-items: center; gap: .85rem; flex: none; }
.brand a { display: flex; align-items: center; text-decoration: none; color: inherit; }
.brand .prod { gap: .55rem; }
.brand img { height: 26px; width: auto; display: block; transition: opacity .16s ease; }
.brand .mark:hover img { opacity: .68; }
.brand .div { width: 1px; height: 22px; background: var(--rule); }
.brand .word {
  font-size: .95rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.brand .word b { color: var(--green-text); font-weight: 700; }
.brand .prod:hover .word { color: var(--green-text); }

/* the Helios glyph — a small live version of the mark, in the nav */
.glyph { width: 22px; height: 22px; display: block; flex: none; }
.glyph .g-ring { transform-origin: 50% 50%; }
.glyph .g-out { animation: spin 46s linear infinite; }
.glyph .g-mid { animation: spin 64s linear infinite reverse; }

.navlinks {
  margin-left: auto; min-width: 0; display: flex; align-items: center; gap: 1.35rem;
  /* the links scroll; the call to action beside them never does */
  font-size: .87rem; font-weight: 600;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding-block: .3rem;
}
.navlinks::-webkit-scrollbar { display: none; }
.navlinks a { color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--green-text); }
.navlinks .out {
  display: inline-flex; align-items: center; gap: .3rem;
  padding-left: 1.2rem; border-left: 1px solid var(--rule);
}
.navlinks .out i { font-style: normal; font-size: .85em; opacity: .7; }
.navcta {
  /* Outside .navlinks on purpose. Inside the scrolling list it was the last
     item, so it was the first thing to disappear off the right edge — the one
     element on the page that must never be clipped. */
  flex: none; border: 1px solid var(--ink); color: var(--ink);
  padding: .42rem .85rem; border-radius: var(--radius);
  font-size: .87rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.navcta:hover { background: var(--ink); color: var(--bg); }

/* Four short items fit; a menu that has to be opened is a menu that does not get
   used. So the list sheds its least-load-bearing links rather than collapsing.
   These sit AFTER .navlinks .out on purpose: that rule sets display:inline-flex
   at the same specificity, so declared earlier it silently won and the Ludia
   Labs link never hid at all. `a.drop-N` also outranks it outright. */
@media (max-width: 1240px) { .navlinks a.drop-3 { display: none; } }
@media (max-width: 1140px) { .navlinks a.drop-2 { display: none; } }
@media (max-width: 1000px) { .navlinks { gap: .8rem; font-size: .84rem; } }
@media (max-width: 960px)  { .navlinks a.drop-1 { display: none; } }
@media (max-width: 620px)  { .brand .word { display: none; } .brand { gap: .6rem; } }

/* The call to action carries a short form for narrow screens. A clipped
   "Let's start our partners…" is worse than a shorter sentence. */
.navcta .cta-short { display: none; }
@media (max-width: 1240px) {
  .navcta .cta-long { display: none; }
  .navcta .cta-short { display: inline; }
}

/* reading progress — a hairline, not a bar chart */
.progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--green); z-index: 61;
}

/* the section rail: Labs-style numbers down the left edge */
.rail {
  position: fixed; left: .3rem; top: 50%; transform: translateY(-50%);
  z-index: 40; display: none; flex-direction: column; gap: .45rem;
  /* Padding is permanent, not added on hover: growing the box on hover would
     move every item under the cursor, which is the jitter the map readout used
     to cause. Only the background appears. */
  padding: .7rem .45rem; border-radius: var(--radius);
  transition: background .18s ease;
}
.rail a {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  color: color-mix(in srgb, var(--ink-muted) 60%, transparent);
  text-decoration: none;
}
.rail a i { width: 9px; height: 1px; background: currentColor; display: block; flex: none; }
.rail a > span { flex: none; }
.rail a:hover { color: var(--ink); }
.rail a[aria-current="true"] { color: var(--green-text); }
.rail a[aria-current="true"] i { width: 26px; height: 2px; background: var(--green); }
@media (min-width: 1500px) { .rail { display: flex; } }

/* The section name.
   The rail is fixed and the widest wrap on the page is 1440px, so the room a
   label can occupy is exactly half of whatever the viewport has beyond that,
   less the rail's own furniture. Expressing that as a calc rather than a fixed
   width means the label grows on a wide monitor and collapses to nothing before
   it can ever overlap the content — no breakpoint guessing, and no collision. */
.rail a b {
  font-weight: 600; font-size: .78rem; letter-spacing: .02em; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 0; opacity: 0;
  transition: max-width .22s ease, opacity .18s ease;
}
.rail a b::before { content: "— "; opacity: .55; }

@media (min-width: 1880px) {
  .rail a b { max-width: calc((100vw - 1440px) / 2 - 5.8rem); opacity: 1; }
}

/* Below that the names are one hover away rather than gone. The rail floats
   over the page for the moment it is open, so it needs its own ground. */
.rail:hover, .rail:focus-within {
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 6px 26px rgba(10, 10, 10, .07);
}
.rail:hover a b, .rail:focus-within a b { max-width: 11rem; opacity: 1; }

/* --------------------------------------------------------------- 4. hero */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 7vw, 6rem);
  background: var(--bg);
}

/* the moving ground. Two layers: a canvas corona that turns, and a CSS mask
   that keeps it away from the headline. Nothing is veiled — the type sits on
   clean paper and the motion lives in the field around the mark. */
#corona {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(120% 100% at 74% 46%, #000 0%, #000 42%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 74% 46%, #000 0%, #000 42%, transparent 78%);
}
@media (max-width: 900px) {
  #corona {
    -webkit-mask-image: radial-gradient(130% 60% at 50% 78%, #000 0%, #000 46%, transparent 82%);
    mask-image: radial-gradient(130% 60% at 50% 78%, #000 0%, #000 46%, transparent 82%);
  }
}
.hero .wrap { position: relative; z-index: 1; }

.herogrid {
  display: grid; gap: clamp(2rem, 4vw, 3.6rem);
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: center;
}
@media (max-width: 980px) { .herogrid { grid-template-columns: 1fr; } }

.heromark { position: relative; }
.heromark svg { width: 100%; height: auto; display: block; }
.heromark .caption {
  display: block; margin-top: .9rem; font-size: .74rem; line-height: 1.5;
  color: var(--ink-muted); letter-spacing: .01em; text-align: center;
}

h1 {
  font-size: clamp(2.15rem, 4.55vw, 3.75rem);
  line-height: 1.045; letter-spacing: -.032em; font-weight: 700;
  margin: .55rem 0 0; max-width: 17ch; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--green-display); }

.hero .neg {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight: 600;
  margin: 1.15rem 0 0; max-width: 40ch;
}
.hero .sub {
  color: var(--ink-muted); max-width: 52ch; margin: .8rem 0 0;
  font-size: clamp(.97rem, 1.15vw, 1.04rem);
}

.pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; }
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--rule); border-radius: 100px;
  padding: .34rem .8rem; font-size: .78rem; font-weight: 600;
  background: var(--bg);
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.btnrow { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .78rem 1.35rem; border-radius: var(--radius);
  font-weight: 650; font-size: .93rem; text-decoration: none;
  border: 1px solid transparent; transition: transform .16s ease, background .16s ease, color .16s ease;
}
.btn:active { transform: translateY(1px); }
@media (max-width: 430px) {
  .btnrow { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
}
.btn.solid { background: var(--green); color: var(--ink); }
.btn.solid:hover { background: var(--green-display); }
.btn.ghost { border-color: var(--ink); color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }
.btn.dark { background: var(--ink); color: var(--bg); }
.btn.dark:hover { background: #262626; }
.btn.onink { background: var(--neon); color: var(--labs-bg); }
.btn.onink:hover { background: #B9F76A; }
.btn.ghostink { border-color: var(--labs-muted); color: var(--labs-ink); }
.btn.ghostink:hover { background: var(--labs-ink); color: var(--labs-bg); }

/* the four qualities. Words, never counts — a count in the hero is a claim
   about a client the engagement has not produced yet. */
.qualities {
  display: grid; gap: 0; margin-top: clamp(2.4rem, 5vw, 3.6rem);
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
}
.qualities div { padding: 1.15rem 1.35rem 0 0; border-right: 1px solid var(--rule); }
.qualities div:last-child { border-right: 0; }
.qualities b { display: block; font-size: .95rem; margin-bottom: .3rem; }
.qualities span { display: block; font-size: .82rem; color: var(--ink-muted); line-height: 1.5; }
@media (max-width: 860px) {
  .qualities { grid-template-columns: 1fr 1fr; }
  .qualities div:nth-child(2n) { border-right: 0; }
  .qualities div { padding-right: 1rem; padding-bottom: 1rem; }
}
@media (max-width: 480px) {
  .qualities { grid-template-columns: 1fr; }
  .qualities div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .qualities div:last-child { border-bottom: 0; }
}

/* ------------------------------------------ 5. type + section furniture */
.num {
  display: flex; align-items: baseline; gap: .7rem;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; margin: 0 0 1.1rem;
}
.num b { color: var(--green-text); }
.num span { color: var(--ink-muted); font-weight: 600; letter-spacing: .13em; }

h2 {
  font-size: clamp(1.6rem, 2.85vw, 2.5rem);
  line-height: 1.12; letter-spacing: -.024em; font-weight: 700;
  margin: 0; max-width: 24ch; text-wrap: balance;
}
h2 em { font-style: normal; color: var(--green-display); }
h2.wide { max-width: 32ch; }

h3 {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.28; letter-spacing: -.012em; font-weight: 700; margin: 0;
}

.lede {
  font-size: clamp(1rem, 1.2vw, 1.09rem); color: var(--ink-muted);
  max-width: 62ch; margin: 1.1rem 0 0;
}
p { max-width: 62ch; }
.muted { color: var(--ink-muted); }
.tag {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 700; color: var(--green-text);
}
/* A colour that carries meaning gets a swatch, not a tinted label. The wave
   ramp is one hue at three intensities, which is legible as a fill and a WCAG
   failure as 11px type — so the fill goes in the square and the word stays in
   a colour that measures. */
.tag i {
  width: 9px; height: 9px; border-radius: 2px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .14);
}
.hair { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* --------------------------------------------- 6. surfaces: cards, lists */
/* Panels are surfaces, not boxes: a 2.2% black overlay and a hairline. */
.card {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0,0,0,.022), rgba(0,0,0,0));
  padding: clamp(1.15rem, 1.9vw, 1.6rem);
}
.card p { font-size: .9rem; color: var(--ink-muted); margin: .5rem 0 0; }

.grid { display: grid; gap: 1rem; }
/* auto-fit, but never more columns than the class names: a six-card g3 in a
   wide section reads 3 + 3, not 4 + 2 */
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, calc((100% - 1rem) / 2))), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(258px, calc((100% - 2rem) / 3))), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(215px, calc((100% - 3rem) / 4))), 1fr)); }

/* the four areas — the spine of this site */
.areas { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); margin-top: 2.2rem; }
.areas.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .areas.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .areas, .areas.five { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .areas { grid-template-columns: 1fr; } }

.area {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0,0,0,.022), rgba(0,0,0,0));
  padding: 1.35rem 1.3rem 1.2rem; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.area::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--areac, var(--green));
}
.area:hover {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--areac) 55%, var(--rule));
  box-shadow: 0 12px 34px rgba(10,10,10,.07);
}
.area .n {
  font-size: .68rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-muted);
}
.area h3 { margin: .5rem 0 .1rem; font-size: 1.3rem; letter-spacing: -.02em; }
.area .k { font-size: .78rem; font-weight: 650; color: var(--areat, var(--green-text)); }
.area p { font-size: .87rem; color: var(--ink-muted); margin: .7rem 0 1rem; flex: 1; }
.area .meta {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
  border-top: 1px solid var(--rule); padding-top: .8rem;
  font-size: .74rem; color: var(--ink-muted);
}
.area .meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.area .go {
  margin-top: .85rem; font-size: .8rem; font-weight: 650; color: var(--green-text);
}

/* the numbered method steps */
.steps { display: grid; gap: 0; margin-top: 2.2rem; grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1080px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px)  { .steps { grid-template-columns: 1fr; } }
/* Three-step variant, for "how the map is made" on the home page. */
.steps.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) { .steps.three { grid-template-columns: 1fr; } }
.step { border-top: 2px solid var(--rule); padding: .95rem 1.1rem 1.3rem 0; position: relative; }
.step.on { border-top-color: var(--green); }
.step b {
  display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .45rem;
}
.step h3 { font-size: .98rem; }
.step p { font-size: .82rem; color: var(--ink-muted); margin: .45rem 0 0; }
.step.on h3 { color: var(--green-text); }

/* the transformation table: what the team said -> what it became -> what you measure */
.trio { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } }
.trio .card { display: flex; flex-direction: column; }
.trio .said {
  font-size: .93rem; font-style: italic; color: var(--ink);
  border-left: 3px solid var(--green); padding-left: .9rem; margin: .7rem 0 0;
}
.trio dl { margin: .75rem 0 0; font-size: .84rem; }
.trio dt {
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-muted); margin-top: .7rem;
}
.trio dd { margin: .12rem 0 0; }

.badge {
  display: inline-block; padding: .18rem .55rem; border-radius: 100px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff;
}
.badge.ink { color: var(--ink); }

/* the human section: real Process rows */
.human { display: grid; gap: .75rem; margin-top: 2rem; }
.hrow {
  display: grid; gap: .35rem 1.4rem; align-items: start;
  grid-template-columns: minmax(0, 15rem) minmax(0, 15rem) minmax(0, 1fr);
  border-top: 1px solid var(--rule); padding-top: .95rem;
}
@media (max-width: 900px) { .hrow { grid-template-columns: 1fr; } }
.hrow b { font-size: .95rem; }
.hrow .who { font-size: .84rem; color: var(--ink-muted); }
.hrow .why { font-size: .87rem; color: var(--ink); }
.hrow .who::before {
  content: "Owned by"; display: block; font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; color: var(--process); margin-bottom: .1rem;
}

/* ---- Microsoft identification marks ------------------------------------
   The four-square is drawn from the brand tokens, not copied off microsoft.com:
   this site makes zero external requests and Microsoft product artwork is
   governed by their trademark guidelines. Product tiles below carry the product
   NAME plus a Ludia-drawn glyph for the same reason. If a Solutions Partner
   badge is supplied, it replaces the mark in .msident — that badge is both
   safer and more credible than a product logo. */
.msmark { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em; flex: none; }
.msident {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 1rem;
}

/* the Copilot family: what a person actually opens */
.prodrail {
  display: grid; gap: .75rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
/* .msprod, not .prod: the nav lockup already owns `.brand .prod` for the Helios
   home link, and a bare `.prod` rule put a card border and padding round it. */
.msprod {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0,0,0,.022), rgba(0,0,0,0));
  padding: 1rem 1.05rem 1.05rem;
}
.msprod .g { width: 26px; height: 26px; display: block; margin-bottom: .6rem; }
.msprod b { display: block; font-size: .92rem; letter-spacing: -.01em; }
.msprod span { display: block; font-size: .81rem; color: var(--ink-muted); line-height: 1.42; margin-top: .3rem; }

/* ---- the Microsoft stack page ------------------------------------------
   Each card is one product: what it is, then how Helios uses it, then the
   link. The "how" line is the whole reason the page exists — a list of
   Microsoft products anybody can write, and nobody needs another one. */
.msgrid {
  display: grid; gap: 1rem; margin-top: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.mscard {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0,0,0,.022), rgba(0,0,0,0));
  padding: clamp(1.15rem, 1.9vw, 1.55rem); border-top: 3px solid var(--msc, var(--ms-blue));
  display: flex; flex-direction: column;
}
.mscard h3 { margin: .5rem 0 0; }
.mscard .what { font-size: .9rem; color: var(--ink-muted); margin: .7rem 0 0; }
.mscard .how {
  font-size: .9rem; margin: .85rem 0 0; padding-top: .85rem;
  border-top: 1px solid var(--rule);
}
.mscard .how b { color: var(--green-text); }
.msl {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
  font-size: .82rem; font-weight: 650; color: var(--ms-blue-text); text-decoration: none;
  width: fit-content;
}
.msl + .msl { margin-top: .35rem; }
.msl:hover { text-decoration: underline; }
.msl i { font-style: normal; font-size: .85em; opacity: .75; }
.mscard .msl:first-of-type { margin-top: auto; padding-top: .9rem; }

/* the reference list: two columns of links, each with what it actually is */
.reflist {
  display: grid; gap: 0; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  border-top: 1px solid var(--rule);
}
.reflist a {
  display: block; padding: .8rem 1.2rem .8rem 0; text-decoration: none;
  border-bottom: 1px solid var(--rule); color: inherit;
}
.reflist a b {
  display: block; font-size: .92rem; font-weight: 650; color: var(--ms-blue-text);
}
.reflist a span { display: block; font-size: .8rem; color: var(--ink-muted); margin-top: .1rem; }
.reflist a:hover b { text-decoration: underline; }
.reflist a::after { content: " \2197"; color: var(--ink-muted); font-size: .8rem; }

/* ---- the industry switcher (industries.html) ---------------------------
   Four fat tabs rather than pills: each one is a destination with its own map
   behind it, and a pill would undersell that. */
.indtabs {
  display: grid; gap: .6rem; grid-template-columns: repeat(5, 1fr);
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
@media (max-width: 1000px) { .indtabs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .indtabs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .indtabs { grid-template-columns: 1fr; } }
.indtab {
  display: block; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  padding: .85rem 1rem .9rem; border-top-width: 3px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.indtab b { display: block; font-size: .97rem; font-weight: 700; letter-spacing: -.01em; }
.indtab span {
  display: block; font-size: .76rem; color: var(--ink-muted); margin-top: .15rem;
}
.indtab:hover { transform: translateY(-2px); border-color: var(--ink); }
.indtab[aria-selected="true"] {
  background: var(--ink); border-color: var(--ink); border-top-color: var(--green);
}
.indtab[aria-selected="true"] b { color: var(--bg); }
.indtab[aria-selected="true"] span { color: #B9B9B4; }

.indhead { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.indhead h2 { font-size: clamp(1.4rem, 2.3vw, 2rem); max-width: 26ch; }
.indhead .lede { margin-top: .8rem; }

/* a section sub-heading, one step down from h2 */
.subhead {
  font-size: clamp(1.05rem, 1.55vw, 1.28rem); max-width: 34ch;
  letter-spacing: -.014em; margin: .1rem 0 0;
}

/* the industry lens table */
.lens { margin-top: 2rem; border-top: 1px solid var(--rule); }
.lenstabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.4rem 0 1.6rem; }
.lenstab {
  border: 1px solid var(--rule); background: var(--bg); color: var(--ink-muted);
  border-radius: 100px; padding: .38rem .9rem; font: inherit; font-size: .8rem;
  font-weight: 650; cursor: pointer; transition: all .16s ease;
}
.lenstab:hover { border-color: var(--ink); color: var(--ink); }
.lenstab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.lensgrid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
/* The `hidden` attribute is `display: none` in the UA stylesheet, and any author
   `display` beats it — so `.lensgrid { display: grid }` silently un-hid every
   industry panel and the five stacked on top of each other. Re-assert it. */
.lensgrid[hidden] { display: none; }
@media (max-width: 1000px) { .lensgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .lensgrid { grid-template-columns: 1fr; } }
.lenscol { border-top: 2px solid var(--areac, var(--green)); padding-top: .85rem; }
.lenscol b {
  display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--areat, var(--ink)); margin-bottom: .6rem;
}
.lenscol ul { margin: 0; padding: 0; list-style: none; }
.lenscol li {
  font-size: .87rem; padding: .38rem 0; border-bottom: 1px dashed var(--rule-light);
}
.lenscol li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------- 7. the map */
.maphead {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin: 1.6rem 0 1rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--rule); background: var(--bg); color: var(--ink);
  border-radius: 100px; padding: .34rem .8rem; font: inherit; font-size: .78rem;
  font-weight: 650; cursor: pointer; transition: opacity .16s ease, border-color .16s ease;
}
.chip i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.chip[aria-pressed="false"] { opacity: .42; }
.chip:hover { border-color: var(--ink); }
.chip .ct { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* The readout names whatever the pointer is over, so its text changes on every
   segment. Left to wrap, a long item name took this row from one line to two,
   moved the map 27px down the page, and put a different segment under a
   stationary cursor — which changed the readout again. The jitter people
   reported was that loop feeding itself, not the hover animation.

   One line, always, whatever the name: the row can no longer change height, so
   nothing below it can move. */
.readout {
  font-size: .82rem; color: var(--ink-muted); margin-left: auto;
  min-height: 1.2em; line-height: 1.2em; text-align: right;
  flex: 1 1 0; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.maplayout {
  display: grid; gap: clamp(1.2rem, 2.4vw, 2.2rem);
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 1020px) { .maplayout { grid-template-columns: 1fr; } }

#helios-map { width: 100%; height: auto; display: block; touch-action: manipulation; }
#helios-map path { transition: transform .16s ease, opacity .2s ease; cursor: pointer; }
#helios-map path.dim { opacity: .13; pointer-events: none; }
#helios-map path.hot { filter: brightness(1.07); }
#helios-map path.sel { stroke: var(--ink) !important; stroke-width: 2.6 !important; }
#helios-map path:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.panel {
  position: sticky; top: 5.4rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0,0,0,.022), rgba(0,0,0,0));
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  max-height: calc(100vh - 7rem); overflow-y: auto;
}
@media (max-width: 1020px) { .panel { position: static; max-height: none; } }
.panel .kicker {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--green-text); margin: 0;
}
.panel h3 { margin: .3rem 0 0; font-size: 1.18rem; }
.panel dl { margin: 1rem 0 0; font-size: .85rem; }
.panel dt {
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-muted); margin-top: .8rem;
}
.panel dd { margin: .1rem 0 0; }
.panel .fade { animation: fade .26s ease both; }

.itemlist { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.itemlist li { border-top: 1px solid var(--rule); }
.itemlist button {
  display: flex; gap: .6rem; align-items: flex-start; width: 100%;
  background: none; border: 0; padding: .6rem 0; text-align: left;
  font: inherit; cursor: pointer; color: inherit;
}
.itemlist button:hover strong { color: var(--green-text); }
.itemlist .dot { width: 8px; height: 8px; border-radius: 2px; margin-top: .45rem; flex: none; }
.itemlist strong { display: block; font-size: .87rem; font-weight: 650; line-height: 1.35; }
.itemlist small { display: block; font-size: .76rem; color: var(--ink-muted); line-height: 1.4; }

.crumb {
  background: none; border: 0; padding: 0; font: inherit; font-size: .8rem;
  font-weight: 650; color: var(--green-text); cursor: pointer;
}
.crumb:hover { text-decoration: underline; }

/* Positioned by transform rather than left/top: this follows the pointer, and
   left/top forces a layout on every mousemove while a transform is handled on
   the compositor. The 14px offset and the -50% centring that used to live here
   are baked into the transform the script writes. */
.maptip {
  position: fixed; z-index: 90; pointer-events: none; opacity: 0;
  left: 0; top: 0; will-change: transform; transition: opacity .13s ease;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .45rem .65rem; max-width: 17rem;
  box-shadow: 0 8px 30px rgba(10,10,10,.10);
}
.maptip.on { opacity: 1; }
.maptip span { display: block; font-size: .82rem; font-weight: 650; line-height: 1.3; }
.maptip em { display: block; font-style: normal; font-size: .73rem; color: var(--ink-muted); }

.mapkey {
  display: grid; gap: 1rem 2.6rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 1.4rem; border-top: 1px solid var(--rule); padding-top: 1.1rem;
}
.mapkey > div { display: grid; gap: .3rem; align-content: start; }
.mapkey > div > b {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .25rem;
}
.mapkey span {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: .8rem; color: var(--ink-muted); line-height: 1.45;
}
.mapkey span b { color: var(--ink); font-weight: 650; }
.mapkey i {
  width: 10px; height: 10px; border-radius: 2px; flex: none;
  transform: translateY(1px);
}

.mapnote {
  font-size: .78rem; color: var(--ink-muted); margin-top: 1.1rem;
  border-top: 1px solid var(--rule); padding-top: .9rem; max-width: none;
}
.mapnote b { color: var(--ink); }

/* -------------------------------------------- 8. bars, chains, phase bar */
.bars { display: grid; gap: .8rem; margin-top: 2rem; }
.bar { display: grid; grid-template-columns: 15rem 1fr 4.2rem; gap: 1rem; align-items: center; }
@media (max-width: 660px) {
  .bar { grid-template-columns: 1fr 4.2rem; }
  .bar .track { grid-column: 1 / -1; order: 3; }
}
.bar .lb { font-size: .87rem; font-weight: 600; }
.bar .lb small { display: block; font-size: .74rem; font-weight: 400; color: var(--ink-muted); }
.bar .track { height: 12px; background: var(--rule-light); border-radius: 2px; overflow: hidden; }
.bar .track i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  transition: width 1.1s cubic-bezier(.22,.8,.3,1);
  /* the governance ramp ends on a near-bone fill; without a hairline the last
     bar reads as an empty track, which inverts the point of the section */
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .12);
}
.bar .vl { font-size: 1rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.2; }
.bar .vl small { display: block; font-weight: 400; color: var(--ink-muted); font-size: .74rem; }

/* measurement chain: artifact -> function -> business line */
.chain { display: grid; gap: .7rem; margin-top: 2rem; }
.link {
  display: grid; gap: .55rem; align-items: center;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0,0,0,.022), rgba(0,0,0,0));
  padding: .95rem 1.1rem;
}
@media (max-width: 880px) {
  .link { grid-template-columns: 1fr; }
  .link .arrow { transform: rotate(90deg); justify-self: start; }
}
.link .cell b { display: block; font-size: .88rem; line-height: 1.35; }
.link .cell span {
  display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-muted); margin-bottom: .2rem;
}
.link .arrow { color: var(--green); font-size: 1.05rem; line-height: 1; }

/* the five weeks */
.phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 2.2rem; }
/* Five columns need real width. Below that the phases wrap rather than turning
   into five ten-character-wide gutters. */
@media (max-width: 1060px) { .phases { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .phases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px)  { .phases { grid-template-columns: 1fr; } }
.phase { border-top: 3px solid var(--rule); padding: .95rem 1.1rem 1.2rem 0; }
.phase.hot { border-top-color: var(--green); }
.phase b { display: block; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted); }
.phase h3 { font-size: .95rem; margin: .35rem 0 .3rem; }
.phase p { font-size: .81rem; color: var(--ink-muted); margin: 0; }
.phase.hot h3 { color: var(--green-text); }

/* auto-fit rather than a fixed count: this row carries three facts on the
   mechanics page and four on the home page, and neither should leave a hole */
.pricerow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.7rem 2.4rem; align-items: start;
  margin-top: 2.4rem; border-top: 1px solid var(--rule); padding-top: 1.6rem;
}
.pricerow div { max-width: 26ch; }
.pricerow div b { display: block; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -.03em; }
.pricerow div span { display: block; font-size: .8rem; color: var(--ink-muted); }

/* The estimate table on the home page: one row per thing the estimate states
   about an agent, three columns — what, where it comes from, what it is for. */
.est { margin-top: 1.4rem; border-top: 1px solid var(--rule); }
.est > div {
  display: grid; grid-template-columns: 9.5rem 1.2fr 1fr; gap: .6rem 2rem;
  padding: 1rem 0; border-bottom: 1px solid var(--rule); align-items: start;
}
.est > div.hd { padding: .6rem 0; }
.est .hd span {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
}
.est b { font-size: .95rem; }
.est p { font-size: .86rem; color: var(--ink-muted); line-height: 1.5; margin: 0; }
.est p em { font-style: normal; color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .est > div { grid-template-columns: 1fr; gap: .35rem; }
  .est > div.hd { display: none; }
}

/* --------------------------------------------------------- 9. Labs band */
.dark .num b { color: var(--neon); }
.dark .num span, .dark .lede, .dark .muted { color: var(--labs-muted); }
.dark h2 em { color: var(--neon); }
.dark .card {
  border-color: var(--labs-rule);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}
.dark .card p { color: var(--labs-muted); }
.dark .hair { border-top-color: var(--labs-rule); }
.dark .tag { color: var(--neon); }

.ladder { margin-top: 2.2rem; border-top: 1px solid var(--labs-rule); }
.rung {
  display: grid; gap: .3rem 1.2rem; align-items: baseline;
  grid-template-columns: 3.2rem minmax(0, 13rem) minmax(0, 1fr) auto;
  border-bottom: 1px solid var(--labs-rule); padding: 1rem 0;
}
@media (max-width: 760px) { .rung { grid-template-columns: 3.2rem 1fr; } .rung .here { grid-column: 2; } }
.rung .mk { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--labs-muted); }
.rung b { font-size: 1rem; }
.rung span { font-size: .85rem; color: var(--labs-muted); }
.rung.on { background: linear-gradient(90deg, rgba(168,240,74,.10), transparent 70%); }
.rung.on b, .rung.on .mk { color: var(--neon); }
.rung .here {
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--labs-bg); background: var(--neon); padding: .15rem .5rem; border-radius: 100px;
}

/* ---------------------------------------------- 10. call to action, footer */
/* On a solid --green fill the type is --ink, never white: black on #739E42 is
   6.32:1 and white is 3.14:1. Everything on this band is measured against the
   green, which is why nothing here is a translucent ink. */
.cta { background: var(--green); color: var(--ink); }
.cta h2 { max-width: 20ch; }
.cta .lede { color: #17200E; }
.cta .num b, .cta .num span { color: var(--ink); }
.cta .btn.dark { background: var(--ink); color: var(--green); }
.cta .btn.ghost { border-color: var(--ink); }
.ctagrid {
  display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
}
@media (max-width: 860px) { .ctagrid { grid-template-columns: 1fr; } }
.ctafacts { display: grid; gap: .55rem; font-size: .9rem; }
.ctafacts div { display: flex; gap: .7rem; border-top: 1px solid rgba(10,10,10,.22); padding-top: .5rem; }
.ctafacts b { min-width: 6.5rem; }

footer { background: var(--labs-bg); color: var(--labs-muted); padding-block: 3.2rem 2.4rem; }
footer a { color: var(--labs-muted); text-decoration: none; }
footer a:hover { color: var(--neon); }
.footgrid {
  display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) { .footgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footgrid { grid-template-columns: 1fr; } }
.footgrid h4 {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--labs-ink); margin: 0 0 .8rem; font-weight: 700;
}
.footgrid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .87rem; }
/* same split as the nav: the mark leaves for the company, the name comes home */
footer .lock { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
footer .lock a { display: flex; align-items: center; text-decoration: none; }
footer .lock img { height: 24px; display: block; transition: opacity .16s ease; }
footer .lock a:hover img { opacity: .7; }
footer .lock .word {
  font-size: .9rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--labs-ink);
}
footer .lock .word:hover { color: var(--neon); }
footer .blurb { font-size: .87rem; max-width: 34ch; }
.footbase {
  margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--labs-rule);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .78rem;
}
.footbase .sp { margin-left: auto; }

/* ------------------------------------- 11. motion, reduced motion, print */
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* scroll reveal — triggered, never autoplaying */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .06s; } .rv.d2 { transition-delay: .12s; }
.rv.d3 { transition-delay: .18s; } .rv.d4 { transition-delay: .24s; }

/* the hero mark: rings arrive from the inside out, then the outer ring turns.
   Business first, mechanism last — the animation states the argument. */
/* The rings are visible by default and the reveal hides them, not the other way
   round. `animation-fill-mode: both` covers the pre-delay state, so the staged
   inside-out reveal still works — but if the script never runs, or a browser
   refuses to animate, the mark is simply there instead of a blank square. */
#hero-mark .ring { transform-origin: 50% 50%; }
#hero-mark .ring.in { animation: ringin .85s cubic-bezier(.2,.75,.3,1) both; }
#hero-mark .r2.in { animation-delay: .16s; }
#hero-mark .r3.in { animation-delay: .32s; }
#hero-mark .r4.in { animation-delay: .48s; }
#hero-mark .hub.in { animation-delay: .62s; }
@keyframes ringin { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }

#hero-mark .turn { transform-origin: 50% 50%; animation: spin 210s linear infinite; }
#hero-mark .turn-r { transform-origin: 50% 50%; animation: spin 320s linear infinite reverse; }
#hero-mark .sweep { transform-origin: 50% 50%; animation: spin 14s linear infinite; }
#hero-mark .corona-pulse { transform-origin: 50% 50%; animation: pulse 7s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .30; transform: scale(1); } 50% { opacity: .62; transform: scale(1.035); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  #hero-mark .ring { opacity: 1; }
}

@media print {
  .nav, .rail, .progress, #corona, .maptip, .cta .btnrow { display: none !important; }
  body { font-size: 11pt; }
  section { padding-block: 1.2rem; break-inside: avoid; }
  .dark, footer { background: #fff !important; color: #000 !important; }
  .dark .num b, .dark h2 em { color: #4E7A20 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* ===========================================================================
   12. The 2026-10 refresh (Lucas, 2026-10-03)
   The landing page now leads with the business case (the KPI a row moves,
   what it costs, and the call a leader makes), then industry, then the seven
   steps. Everything below is additive: the map, the panel and the industry
   switcher are untouched, so a page built on the old furniture still works.
   =========================================================================== */

/* ---- the family bar: Consulting, Labs, Helios as one motion -------------
   A thin utility strip above the nav, in the Labs register (ludialabs.com uses
   the same #0A0A0A for its statement band and footer). It scrolls away; the nav
   below it stays sticky. The current site carries aria-current and a neon rule,
   so a visitor always knows which of the three they are on. */
.family { background: var(--labs-bg); color: var(--labs-muted); font-size: .76rem; position: relative; z-index: 61; }
.family .wrap {
  max-width: 1440px; display: flex; align-items: center; gap: 1.5rem;
  min-height: 2.15rem; overflow-x: auto; scrollbar-width: none;
}
.family .wrap::-webkit-scrollbar { display: none; }
.family .lbl {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: #8A8A8A; white-space: nowrap;
}
.family a {
  display: inline-flex; align-items: baseline; gap: .45rem; white-space: nowrap;
  color: var(--labs-muted); text-decoration: none; padding-block: .52rem .4rem;
  border-bottom: 2px solid transparent;
}
.family a b { color: var(--labs-ink); font-weight: 650; }
.family a span { color: #8A8A8A; }
.family a:hover b { color: var(--neon); }
.family a[aria-current="page"] { border-bottom-color: var(--neon); }
.family a[aria-current="page"] b { color: var(--neon); }
.family .sp { margin-left: auto; }
@media (max-width: 980px) { .family a span, .family .lbl { display: none; } .family .wrap { gap: 1.1rem; } }

/* ---- hero: the map with one row pulled out of it ------------------------ */
.hero .neg { max-width: 46ch; }
.heroviz { position: relative; }
.heroviz #hero-mark { width: 100%; height: auto; display: block; }

/* One row of the map, as a ledger. The argument of the whole site in one card:
   the work, who decides, what it moves, what it costs, and the call. */
.rowcard {
  position: absolute; left: -8%; bottom: 3%; width: min(436px, 84%);
  background: var(--bg); border: 1px solid var(--rule); border-top: 3px solid var(--agent);
  border-radius: var(--radius); padding: 1rem 1.1rem 1.05rem;
  box-shadow: 0 22px 60px rgba(10,10,10,.14), 0 2px 6px rgba(10,10,10,.05);
  animation: fade .6s .5s ease both;
}
@media (max-width: 980px) {
  .rowcard { position: relative; left: auto; bottom: auto; width: min(460px, 100%); margin: -16% auto 0; }
}
.rowcard .rk {
  display: flex; justify-content: space-between; gap: .6rem; align-items: baseline;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-muted);
}
.rowcard .rk em { font-style: normal; color: var(--green-text); }
.rowcard h3 { margin: .45rem 0 0; font-size: 1.04rem; display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; }
.rowcard .who { font-size: .8rem; color: var(--ink-muted); margin: .25rem 0 0; }
.rowcard .who b { color: var(--ink); font-weight: 650; }
.rowcard .cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: .8rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.rowcard .cols > div { padding: .6rem .7rem .65rem 0; }
.rowcard .cols > div + div { padding-left: .8rem; border-left: 1px solid var(--rule); }
.rowcard .cols span {
  display: block; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-muted); margin-bottom: .2rem;
}
.rowcard .cols p { margin: 0; font-size: .8rem; line-height: 1.42; }
.rowcard .cols p b { font-weight: 650; }
.rowcard .call { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .75rem; }
.rowcard .call > span {
  font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-muted); margin-right: .2rem;
}
.callchip {
  display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--rule);
  border-radius: 100px; padding: .18rem .56rem; font-size: .72rem; font-weight: 650; color: var(--ink-muted);
  white-space: nowrap;
}
.callchip.on { background: var(--green); border-color: var(--green); color: var(--ink); }

/* industry chips in the first screen: industry is visible before the scroll */
.indrow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .45rem; margin-top: 1.6rem; }
.indrow > span {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-muted); margin-right: .25rem;
}
.indchip {
  display: inline-flex; align-items: center; gap: .42rem; text-decoration: none; color: var(--ink);
  border: 1px solid var(--rule); background: var(--bg); border-radius: 100px;
  padding: .3rem .75rem; font-size: .78rem; font-weight: 650;
  transition: border-color .16s ease, transform .16s ease;
}
.indchip i { width: 7px; height: 7px; border-radius: 50%; background: var(--areac, var(--green)); flex: none; }
.indchip:hover { border-color: var(--ink); transform: translateY(-1px); }

/* ---- industry tiles: what leaders there are held to ---------------------- */
.area ul.kpis { list-style: none; margin: .2rem 0 1rem; padding: 0; display: grid; gap: .32rem; flex: 1; }
.area ul.kpis li {
  display: flex; gap: .5rem; align-items: baseline; font-size: .84rem; color: var(--ink); line-height: 1.35;
}
.area ul.kpis li::before {
  content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--areac, var(--green));
  flex: none; transform: translateY(-1px);
}
.area .held {
  font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-muted); margin: .9rem 0 .35rem;
}
.area .lines { font-size: .76rem; color: var(--ink-muted); line-height: 1.45; margin: 0 0 .2rem; }
.areas.five.tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1240px) { .areas.five.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .areas.five.tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .areas.five.tiles { grid-template-columns: 1fr; } }
.aside-line { margin-top: 1.4rem; font-size: .92rem; color: var(--ink-muted); max-width: none; }
.aside-line a, a.inl { color: var(--green-text); font-weight: 650; }

/* area cards on the industries page carry the KPIs too */
.area .measured { font-size: .8rem; color: var(--ink); margin: 0 0 1rem; flex: none; }
.area .measured b {
  display: block; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .2rem;
}

/* ---- the seven steps, in three phases ----------------------------------- */
.flow {
  display: grid; grid-template-columns: 2fr 2fr 3fr; gap: 0 1.6rem; margin-top: 2.4rem;
}
@media (max-width: 1040px) { .flow { grid-template-columns: 1fr; gap: 1.6rem; } }
.fphase { border-top: 3px solid var(--green); padding-top: .9rem; }
.fphase.p2 { border-top-color: var(--green-display); }
.fphase.p3 { border-top-color: var(--ink); }
.fwk { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .4rem; }
.fwk b {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
}
.fwk span { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.fsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fphase.p3 .fsteps { grid-template-columns: 1fr 1fr; column-gap: 1.4rem; }
.fphase.p3 .fsteps li.last { grid-column: 1 / -1; }
@media (max-width: 560px) { .fphase.p3 .fsteps { grid-template-columns: 1fr; } }
.fsteps li {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .75rem; align-items: start;
  padding: .85rem 0 .9rem; border-bottom: 1px solid var(--rule);
}
.fsteps li:last-child { border-bottom: 0; }
.fsteps i {
  font-style: normal; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .86rem; font-weight: 700;
  border: 1.5px solid var(--green); color: var(--green-text); background: var(--bg);
}
.fsteps h3 { font-size: 1rem; }
.fsteps p { font-size: .86rem; color: var(--ink-muted); margin: .3rem 0 0; }
.fsteps li.last {
  background: color-mix(in srgb, var(--green) 9%, var(--bg)); padding-inline: .9rem;
  border-radius: var(--radius); margin-top: .4rem; border-bottom: 0;
}
.fsteps li.last i { background: var(--green); border-color: var(--green); color: var(--ink); }
.fsteps li.last p { color: var(--ink); }

.ownline {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.4rem; align-items: center;
  margin-top: 2.2rem; padding: 1.1rem 1.3rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0,0,0,.022), rgba(0,0,0,0));
}
.ownline .seal {
  width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--ink); font-size: .56rem; font-weight: 800; letter-spacing: .1em;
  text-align: center; line-height: 1.15;
}
.ownline p { margin: 0; font-size: .92rem; max-width: none; }
.ownline p b { font-weight: 700; }
@media (max-width: 560px) { .ownline { grid-template-columns: 1fr; } }

/* ---- the business case: worth vs cost = the call ------------------------- */
.eq {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: .9rem; align-items: stretch; margin-top: 2.4rem;
}
@media (max-width: 900px) { .eq { grid-template-columns: 1fr; } .eqop { justify-self: center; } }
.eqc {
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.2rem 1.25rem 1.3rem;
  background: var(--bg); display: flex; flex-direction: column;
}
.eqc.worth { border-top: 3px solid var(--green); }
.eqc.cost  { border-top: 3px solid var(--workflow); }
.eqc.call  {
  border-top: 3px solid var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 7%, var(--bg)), var(--bg));
}
.eqc h3 { margin: .45rem 0 0; font-size: 1.12rem; }
.eqc p { font-size: .88rem; color: var(--ink-muted); margin: .5rem 0 0; }
.eqc ul { margin: .7rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.eqc li { font-size: .84rem; display: flex; gap: .5rem; align-items: baseline; }
.eqc li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  opacity: .5; flex: none; transform: translateY(-2px);
}
.eqop {
  align-self: center; font-size: 1.6rem; font-weight: 300; color: var(--ink-muted);
  min-width: 2.4rem; text-align: center; line-height: 1;
}
.eqop small {
  display: block; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; margin-top: .25rem;
}

.calls { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 1rem; }
@media (max-width: 900px) { .calls { grid-template-columns: 1fr; } }
.calls .card h3 { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.calls .card h3 i {
  font-style: normal; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .14rem .5rem; border-radius: 100px; border: 1px solid var(--rule); color: var(--ink-muted);
}
.calls .card.fund h3 i { background: var(--green); border-color: var(--green); color: var(--ink); }

.nomodel {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center;
  margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule);
}
@media (max-width: 640px) { .nomodel { grid-template-columns: 1fr; gap: .6rem; } }
.nomodel .big {
  font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: var(--process);
}
.nomodel .big small {
  display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: .45rem; font-weight: 700;
}
.nomodel p { margin: 0; font-size: .98rem; }
.nomodel p + p { margin-top: .45rem; font-size: .88rem; color: var(--ink-muted); }

/* ---- one map, read three ways: CEO, CFO, IT leader ----------------------- */
.leaders { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 2.2rem; }
@media (max-width: 960px) { .leaders { grid-template-columns: 1fr; } }
.leader {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.3rem 1.3rem 1.2rem;
  background: linear-gradient(180deg, rgba(0,0,0,.022), rgba(0,0,0,0));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.leader:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 12px 34px rgba(10,10,10,.07); }
.leader .role {
  display: inline-flex; align-self: flex-start; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; padding: .2rem .55rem; border-radius: 100px; background: var(--ink); color: var(--bg);
}
.leader h3 { margin: .8rem 0 0; font-size: 1.15rem; line-height: 1.25; }
.leader ul { list-style: none; margin: .8rem 0 1rem; padding: 0; display: grid; gap: .45rem; flex: 1; }
.leader li { font-size: .87rem; color: var(--ink-muted); padding-left: 1rem; position: relative; }
.leader li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1.5px; background: var(--green);
}
.leader .go { font-size: .82rem; font-weight: 650; color: var(--green-text); border-top: 1px solid var(--rule); padding-top: .8rem; }

/* ---- proof: two groups of real numbers ---------------------------------- */
.proof { display: grid; gap: 2.4rem; grid-template-columns: 1fr 1fr; margin-top: 2.2rem; }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } }
.pgroup > b {
  display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
  padding-bottom: .6rem; border-bottom: 1px solid var(--rule);
}
.pgroup .pricerow {
  margin-top: 0; border-top: 0; padding-top: 1rem; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pgroup .pricerow div.kept b { color: var(--process); }
.stat-note { font-size: .8rem; color: var(--ink-muted); margin-top: 1.4rem; max-width: none; }

/* ---- one Ludia: the three sites as one motion (dark band) ---------------- */
.oneludia { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 2.2rem; }
@media (max-width: 900px) { .oneludia { grid-template-columns: 1fr; } }
.olcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--labs-rule); border-radius: var(--radius); padding: 1.3rem 1.3rem 1.2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  transition: border-color .18s ease, transform .18s ease;
}
a.olcard:hover { border-color: var(--labs-muted); transform: translateY(-2px); }
.olcard .site {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--labs-muted); display: flex; justify-content: space-between; align-items: center; gap: .6rem;
}
.olcard h3 { margin: .6rem 0 0; font-size: 1.2rem; color: var(--labs-ink); }
.olcard p { font-size: .88rem; color: var(--labs-muted); margin: .5rem 0 1rem; flex: 1; }
.olcard .go { font-size: .82rem; font-weight: 650; color: var(--neon); }
.olcard.here { border-color: var(--neon-dim); background: linear-gradient(180deg, rgba(168,240,74,.08), rgba(168,240,74,0)); }
.olcard .here-tag {
  font-size: .6rem; font-weight: 800; letter-spacing: .12em; color: var(--labs-bg); background: var(--neon);
  padding: .12rem .5rem; border-radius: 100px;
}

/* ---- the explainer video ------------------------------------------------- */
.video { margin: 2.4rem 0 0; }
.video video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--labs-bg);
  border-radius: var(--radius); border: 1px solid var(--rule);
}
.video figcaption { font-size: .8rem; color: var(--ink-muted); margin-top: .6rem; }

/* ---- sub-page head, shared by the detail pages --------------------------- */
.pagehead { padding-block: clamp(2.6rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.2rem); }
.pagehead h1 { max-width: 21ch; font-size: clamp(1.95rem, 3.9vw, 3.1rem); }
.pagehead .lede { font-size: clamp(1.02rem, 1.3vw, 1.15rem); }
.crumbs { font-size: .78rem; color: var(--ink-muted); margin: 0 0 1rem; }
.crumbs a { color: var(--green-text); text-decoration: none; font-weight: 650; }
.crumbs a:hover { text-decoration: underline; }

/* ---- a detailed step, on how-it-works.html ------------------------------ */
.dstep {
  display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, 18rem); gap: .6rem 1.8rem;
  padding: 1.6rem 0; border-top: 1px solid var(--rule); align-items: start;
}
@media (max-width: 900px) { .dstep { grid-template-columns: 3.2rem minmax(0, 1fr); } .dstep aside { grid-column: 2; } }
.dstep .n {
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--green); color: var(--green-text); font-weight: 700; font-size: 1.1rem;
}
.dstep.last .n { background: var(--green); color: var(--ink); }
.dstep .wk { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-muted); }
.dstep h3 { font-size: 1.3rem; margin: .2rem 0 0; }
.dstep p { font-size: .94rem; color: var(--ink-muted); margin: .5rem 0 0; }
.dstep aside { border-left: 2px solid var(--rule); padding-left: 1rem; font-size: .84rem; }
.dstep aside b {
  display: block; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 .2rem;
}
.dstep aside span { display: block; margin-bottom: .7rem; }
.dstep aside span:last-child { margin-bottom: 0; }

@media print { .family { display: none !important; } .rowcard { position: static; box-shadow: none; } }

/* tiles: two-line sector kickers would otherwise push some titles down */
.areas.tiles .area .n { min-height: 2.6em; }
@media (max-width: 560px) { .areas.tiles .area .n { min-height: 0; } }

/* Phones: the links get their own scrolling row under the lockup, so nothing is
   cut mid-word beside the call to action. "For IT leaders" comes back here:
   there is room for it once the row is full width. */
@media (max-width: 620px) {
  .nav .wrap { flex-wrap: wrap; row-gap: 0; min-height: 3.6rem; }
  .navcta { margin-left: auto; }
  .navlinks {
    order: 3; width: 100%; margin-left: 0; gap: 1.15rem; padding: 0 0 .6rem;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .navlinks a.drop-1 { display: inline; }
}

/* ---- the engine: the Microsoft agent platform, layer by layer -----------
   Helios decides what each row becomes; these are the Microsoft tools that run
   it. Drawn as layers rather than a logo wall: each layer says what Helios
   decides there, and each tool says what it does in the engine. Product names
   only, no Microsoft artwork (trademark guidelines; zero external requests). */
.engine { margin-top: 2.4rem; display: grid; gap: .6rem; }
.layer {
  display: grid; grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr); gap: .9rem 1.6rem;
  padding: 1.05rem 1.2rem; border: 1px solid var(--rule); border-left: 4px solid var(--lc, var(--ms-blue));
  border-radius: var(--radius); background: var(--bg);
}
@media (max-width: 820px) { .layer { grid-template-columns: 1fr; } }
.layer .ll > b {
  display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
}
.layer .ll h3 { font-size: 1.04rem; margin: .25rem 0 0; }
.layer .ll p { font-size: .82rem; color: var(--ink-muted); margin: .35rem 0 0; }
.layer .ll p em { font-style: normal; color: var(--ink); font-weight: 650; }
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: .5rem; align-content: start; }
.tool {
  border: 1px solid var(--rule); border-radius: var(--radius); padding: .6rem .7rem .65rem;
  background: linear-gradient(180deg, rgba(0,0,0,.022), rgba(0,0,0,0));
}
.tool b { display: block; font-size: .86rem; letter-spacing: -.005em; }
.tool span { display: block; font-size: .76rem; color: var(--ink-muted); line-height: 1.38; margin-top: .15rem; }
.tool i {
  font-style: normal; font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ms-blue-text); margin-left: .35rem; white-space: nowrap;
}
.layer.l-people { --lc: var(--ms-blue); }
.layer.l-build  { --lc: var(--agent); }
.layer.l-know   { --lc: var(--teal); }
.layer.l-govern { --lc: var(--process); }
.layer.l-base   { --lc: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--ms-blue) 5%, var(--bg)), var(--bg)); }
.engine-note { font-size: .84rem; color: var(--ink-muted); margin-top: 1rem; max-width: none; }

/* engine tiles carry Microsoft's official product icon, unmodified (Lucas,
   2026-10-03: icons wherever a Microsoft product is named). A product with no
   official icon gets an empty slot, never a lookalike. */
.tool { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .65rem; align-items: start; }
.tool img, .tool .noicon { width: 28px; height: 28px; display: block; }
.msprod img.g, .mscard img.mi { width: 30px; height: 30px; display: block; }
.mscard img.mi { margin-bottom: .55rem; }
.msprod img.g { margin-bottom: .6rem; }

/* the footer lines up with the nav and the family bar above it */
footer .wrap { max-width: 1440px; }

/* the tagline (Lucas, 2026-10-03): "AI, delivered." sits above the H1 as the brand
   line; the H1 underneath stays the business case. Display green at 20px+ only. */
.tagline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; margin: 0 0 .2rem;
}
.tagline b {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 750; letter-spacing: -.02em;
  color: var(--green-display); line-height: 1.1;
}
.tagline span {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-muted);
}

/* ---- pre-filled, never from scratch (Lucas, 2026-10-03) -------------------
   Three inputs and the result: Ludia's method, the client's industry and the
   client's own signals arrive as a pre-filled map before the first meeting. */
.prefill {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto minmax(0, 1.15fr);
  gap: .7rem; align-items: stretch; margin-top: 2rem;
}
@media (max-width: 1040px) { .prefill { grid-template-columns: repeat(3, minmax(0, 1fr)); } .prefill .arrow { display: none; } .prefill .out { grid-column: 1 / -1; } }
@media (max-width: 640px) { .prefill { grid-template-columns: 1fr; } }
.prefill .in {
  border: 1px dashed color-mix(in srgb, var(--green) 60%, var(--rule)); border-radius: var(--radius);
  padding: .85rem 1rem .9rem; background: var(--bg); min-width: 0;
}
.prefill .k {
  display: block; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-muted); margin-bottom: .25rem;
}
.prefill .in b { display: block; font-size: .93rem; }
.prefill .in span:not(.k) { display: block; font-size: .8rem; color: var(--ink-muted); margin-top: .2rem; line-height: 1.42; }
.prefill .arrow { align-self: center; font-size: 1.5rem; color: var(--green-text); line-height: 1; }
.prefill .out { border-radius: var(--radius); padding: .85rem 1.1rem .95rem; background: var(--green); color: var(--ink); min-width: 0; }
.prefill .out .k { color: #17200E; }
.prefill .out b { display: block; font-size: 1.05rem; }
.prefill .out span:not(.k) { display: block; font-size: .82rem; margin-top: .2rem; color: #17200E; line-height: 1.42; }

/* ---- the section rail, with names (Lucas, 2026-10-03) ----------------------
   The rail used to show bare numbers and reveal each name on hover. Now the
   names are always there, the rail carries its own ground so it reads over any
   band (dark ones included), and on screens where the rail would sit over the
   text the content steps right to clear it. Only pages that have a rail move. */
:root { --railw: 15.5rem; }
.rail {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 6px 26px rgba(10, 10, 10, .07); border: 1px solid var(--rule);
  left: .5rem; padding: .75rem .7rem;
}
.rail a { color: var(--ink-muted); }
.rail a b { max-width: 10rem; opacity: 1; }
.rail a b::before { content: ""; }
.rail a > span { min-width: 1ch; text-align: right; }
@media (min-width: 1500px) {
  body:has(.rail) main .wrap {
    padding-left: max(var(--pad), calc(var(--railw) + 1.5rem - (100vw - var(--maxw)) / 2));
  }
  body:has(.rail) main .wrap.wide {
    padding-left: max(var(--pad), calc(var(--railw) + 1.5rem - (100vw - 1440px) / 2));
  }
}

/* the row card, now inside the KPIs section rather than over the hero mark */
.roi-top {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 1.6rem 2.4rem; align-items: center; margin-top: 1.1rem;
}
.roi-top .lede { margin-top: 0; }
@media (max-width: 900px) { .roi-top { grid-template-columns: 1fr; } }
.rowcard.inline {
  position: relative; left: auto; bottom: auto; width: 100%; max-width: 30rem; margin: 0;
  animation: none; box-shadow: 0 14px 40px rgba(10,10,10,.09), 0 2px 6px rgba(10,10,10,.04);
}

/* ---- one landing space per section (Lucas, 2026-10-03) ---------------------
   The site is one page. Each section shows the short version and keeps its
   detail in a <details> block right under it, so the nav, the rail and the
   content always point at the same place. The summary is a full-width bar,
   not a text link: it has to read as "there is more here" at a glance. */
details.more {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  scroll-margin-top: 5.2rem;
}
details.more > summary {
  list-style: none; cursor: pointer;
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem;
  padding: 1.1rem 3.4rem 1.1rem 0; position: relative;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary .lbl { font-size: clamp(1.02rem, 1.4vw, 1.18rem); font-weight: 700; letter-spacing: -.012em; }
details.more > summary .hint { font-size: .84rem; color: var(--ink-muted); }
details.more > summary .pm {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  border: 1.5px solid var(--ink); transition: background .16s ease;
}
details.more > summary .pm::before, details.more > summary .pm::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 1.5px;
  background: var(--ink); transform: translate(-50%, -50%); transition: transform .2s ease, background .16s ease;
}
details.more > summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
details.more > summary:hover .pm { background: var(--green); border-color: var(--green); }
details.more[open] > summary .pm { background: var(--ink); }
details.more[open] > summary .pm::before { background: var(--bg); }
details.more[open] > summary .pm::after { transform: translate(-50%, -50%) rotate(0deg); background: var(--bg); }
details.more > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.more-body { padding: clamp(1rem, 2vw, 1.6rem) 0 clamp(1.6rem, 3vw, 2.4rem); }
.more-body > .sub { scroll-margin-top: 5.2rem; }
.more-body > .sub + .sub {
  margin-top: clamp(2.4rem, 4.5vw, 3.6rem); padding-top: clamp(2.4rem, 4.5vw, 3.6rem);
  border-top: 1px solid var(--rule);
}
.kick {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--green-text); margin: 0 0 .7rem; max-width: none;
}
h3.subhead2 {
  font-size: clamp(1.3rem, 2.1vw, 1.8rem); line-height: 1.16; letter-spacing: -.02em;
  max-width: 32ch; text-wrap: balance;
}
.indhead h3.subhead2 { max-width: 30ch; }
.steps-detail { margin-top: 1.4rem; }
.more-body .less {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: clamp(2rem, 3.5vw, 2.8rem);
  font: inherit; font-size: .84rem; font-weight: 650; color: var(--ink-muted);
  background: none; border: 1px solid var(--rule); border-radius: 100px; padding: .45rem 1rem; cursor: pointer;
}
.more-body .less:hover { color: var(--ink); border-color: var(--ink); }
/* the nav follows the scroll on the one page */
.navlinks a.on { color: var(--green-text); }
@media (max-width: 560px) { details.more > summary .hint { display: none; } }

/* ---- what the QA harness asked for (test/, 2026-10-03) ---------------------
   The ludiaconsulting.com standard, now applied here: no text under 12px, small
   green type at 4.5:1 or better on every surface it sits on (cards on the soft
   band included), tap targets of at least 24px on a phone, and paragraphs that
   stop before ~95 characters a line. The micro-labels keep their tracking and
   capitals; they just stop at 12px. */
:root { --green-text: #4A741E; }   /* was #4E7A20: 4.41:1 on a card on the soft band; now 4.78:1 */
.family .lbl, .tagline span, .indrow > span, .num, .kick,
.area .n, .area .held, .area .measured b, .area .meta, .area .meta b,
.panel .kicker, .panel dt, .mapkey b, .prefill .k, .fwk b, .dstep .wk, .dstep aside b,
.tag, .rowcard .rk span, .rowcard .rk em, .badge, .rowcard .cols span, .rowcard .call span, .callchip,
.card h3 i, .nomodel .big small, .chain .cell span, .est .hd span,
.bar .lb small, .bar .vl small, .leader .role, .pgroup > b, .olcard .site, .here-tag, .footgrid h4 { font-size: .75rem; }
.navlinks a { display: inline-block; padding-block: .25rem; }
.indchip { min-height: 1.65rem; }
.brand .prod { min-height: 1.6rem; min-width: 1.6rem; }
footer .lock .word { display: inline-block; padding-block: .2rem; }
.aside-line, .mapnote { max-width: 80ch; }
@media (max-width: 620px) { .hero .sub { font-size: 1rem; } }
#explorer-mapview { scroll-margin-top: 5.2rem; }
.mapkey > div > b, .calls .card h3 i, .olcard .here-tag { font-size: .75rem; }
.rowcard .call .callchip.on { color: var(--ink); }   /* ink on a solid green fill; the muted grey was 2.5:1 */
.footgrid li a { display: inline-block; padding-block: .2rem; }
.ownline p, .engine-note { max-width: 80ch; }
@media (max-width: 620px) { .fsteps p, .aside-line { font-size: 1rem; } }
@media (max-width: 620px) { .ownline p, .dstep p { font-size: 1rem; } }
.stat-note { max-width: 80ch; }
@media (max-width: 620px) { .nomodel p { font-size: 1rem; } }
@media (max-width: 620px) { .nomodel p + p { font-size: 1rem; } }

/* ---- the explainer, in How it works (2026-10-03) ----------------------------
   Ninety seconds, captions burned in, nothing plays until it's asked to
   (preload none: the poster is the only thing it costs on load). */
.watch {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.4rem 2.4rem; align-items: center; margin-top: 2.2rem;
}
@media (max-width: 900px) { .watch { grid-template-columns: 1fr; } }
.watch figure { margin: 0; min-width: 0; }
.watch video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink);
  border-radius: var(--radius); box-shadow: 0 14px 40px rgba(10,10,10,.12), 0 2px 6px rgba(10,10,10,.05);
}
.watch-side { min-width: 0; }
.watch-side h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -.016em; }
.watch-side > p:not(.kick) { color: var(--ink-muted); margin: .6rem 0 0; }

/* ---- How it works in three stages (Lucas, 2026-10-03) -----------------------
   Listen, Strategize, Execute. Each stage says what it is, lists its steps (the
   seven keep their numbers: the explainer narrates them), and says what you
   leave with. Execute adds the quarterly tracking: KPI, cost, investment against
   results. One dark outcome line closes the section. */
.flow.stages { align-items: start; }
.flow.stages .fphase { display: flex; flex-direction: column; }
.flow.stages .fwk { gap: .7rem; margin-bottom: .3rem; }
.flow.stages .fwk span { font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -.02em; }
.flow.stages .fphase.p3 .fsteps { grid-template-columns: 1fr; }
.flow.stages .fsteps li.last { grid-column: auto; }
.stage-lede { font-size: .95rem; color: var(--ink); margin: .2rem 0 .9rem; max-width: 44ch; }
.stage-out { margin-top: 1rem; padding-top: .85rem; border-top: 1px dashed color-mix(in srgb, var(--green) 55%, var(--rule)); }
.stage-out > b {
  display: block; font-size: .75rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green-text); margin-bottom: .3rem;
}
.stage-out p { margin: 0; font-size: .9rem; color: var(--ink); }
.track { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .6rem; }
.track li { position: relative; padding-left: 1.05rem; font-size: .9rem; color: var(--ink-muted); line-height: 1.45; }
.track li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}
.track li strong { color: var(--ink); }
.outcome {
  margin-top: clamp(1.6rem, 3vw, 2.2rem); display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem 1.6rem; align-items: center; background: var(--ink); color: var(--bg);
  border-radius: var(--radius); padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.2rem, 2.4vw, 1.8rem);
}
.outcome .k { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--neon); white-space: nowrap; }
.outcome p { margin: 0; font-size: clamp(1rem, 1.3vw, 1.12rem); color: #D9D9D4; max-width: 80ch; }
.outcome p b { color: var(--bg); }
@media (max-width: 640px) { .outcome { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .stage-lede, .stage-out p, .track li { font-size: 1rem; } }

/* Three unmistakable stages, with numbers you can read from across a room
   (Lucas, 2026-10-03): each stage is its own card with a big filled numeral,
   and every step number is bold on a filled disc. */
.flow.stages { gap: 1.1rem; }
.flow.stages .fphase {
  background: var(--bg); border: 1px solid var(--rule); border-top: 4px solid var(--green);
  border-radius: var(--radius); padding: 1.25rem 1.35rem 1.4rem;
}
.flow.stages .fphase.p2 { border-top-color: var(--green-display); }
.flow.stages .fphase.p3 { border-top-color: var(--ink); }
.stage-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .75rem; }
.stage-n {
  flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.55rem; font-weight: 800; line-height: 1; background: var(--green); color: var(--ink);
}
.p2 .stage-n { background: var(--green-display); }
.p3 .stage-n { background: var(--ink); color: var(--bg); }
.stage-title { margin: 0; }
.stage-k {
  display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-muted);
}
.stage-name { display: block; font-size: clamp(1.45rem, 2.1vw, 1.8rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.flow.stages .fsteps i {
  width: 2.15rem; height: 2.15rem; font-size: 1.02rem; font-weight: 800; color: var(--ink);
  border: 2px solid var(--green); background: color-mix(in srgb, var(--green) 22%, var(--bg));
}
.flow.stages .fsteps li.last i { background: var(--green); }
.flow.stages .fsteps li { grid-template-columns: 2.25rem minmax(0, 1fr); }

/* Estimation in four parts (Lucas, 2026-10-03): what it needs, what it costs to
   build, maintain and run, its priority, its impact. Highlighted, not buried. */
.est4 {
  list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .45rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.est4 li {
  background: color-mix(in srgb, var(--green) 10%, var(--bg)); border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0; padding: .5rem .65rem .55rem;
  font-size: .84rem; color: var(--ink-muted); line-height: 1.4;
}
.est4 li b { display: block; color: var(--ink); font-size: .9rem; margin-bottom: .1rem; }
.dstep .est4 { margin-top: .8rem; max-width: 62ch; }
@media (max-width: 560px) { .est4 { grid-template-columns: 1fr; } .est4 li { font-size: 1rem; } }
/* the four parts sit inside a step list: undo the step-row grid on them */
.fsteps .est4 li, .flow.stages .fsteps .est4 li {
  display: block; grid-template-columns: none; padding: .5rem .65rem .55rem; border-bottom: 0;
}
.fsteps .est4 li:last-child { border-bottom: 0; }