/* Systems Impact — site styles.
   Extracted verbatim from the former inline <style> in index.html.
   Single source for /en/, /fr/ and the use-cases pages. */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600&family=Public+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

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

:root {
  /* ── Direction A · Forêt (design-system/foret/tokens.css) ── */
  --ground: #EEF0EB;
  --ground-2: #E4E8E1;
  --surface: #FFFFFF;
  --surface-2: #F6F7F4; /* off-white for whole sections; cards stay --surface */
  --ink: #14201C;
  --ink-2: #3B4A44;
  --muted: #74817A;
  --line: #D3DAD3;
  --line-2: #BFC8BF;
  --forest: #0A4E3F;
  --forest-d: #083D32;
  --forest-2: #236B5C;
  --forest-tint: #DCE8E2;
  --ochre: #C99A2E;
  --ochre-d: #8F6A17;
  --ochre-tint: #F5E6C8;
  --display: 'Schibsted Grotesk', system-ui, sans-serif;
  --sans: 'Public Sans', system-ui, sans-serif;
  --figures: 'IBM Plex Mono', ui-monospace, monospace;
  /* v1 names kept as aliases so the rules below keep resolving; phase 3 renames
     them. --accent maps to the text-safe ochre: raw ochre is for marks only, and
     the stage / dashboard rules that draw with it say --ochre explicitly. */
  --paper: var(--ground);
  --paper-warm: var(--ground-2);
  --accent: var(--ochre-d);
  --accent-d: var(--ochre-d);
  --glow: var(--ochre-tint);
  --serif: var(--display);
  --mono: var(--sans);
}

html {
  scroll-behavior: smooth;
  font-size: 16px
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}


a {
  color: inherit;
  text-decoration: none
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink)
}

h1 {
  font-size: clamp(2.6rem, 6.2vw, 5rem)
}

h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem)
}

h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem)
}

.italic {
  font-style: italic;
  color: var(--forest)
}

/* Headings stay one colour and upright; the emphasis span only marks a line break there. */
h1 .italic,
h2 .italic,
h3 .italic,
.aiauto-grid .lead .italic {
  font-style: normal;
  color: inherit
}

p {
  font-size: clamp(.98rem, 1.15vw, 1.05rem);
  line-height: 1.7;
  color: var(--ink-2)
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2
}

.container--narrow {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2
}

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .6rem
}

/* NAV */
header.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(251, 249, 244, .78);
  border-bottom: 1px solid transparent;
  transition: border-color .3s
}

header.nav.scrolled {
  border-bottom-color: var(--line)
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.brand {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 10px
}

.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-d) 80%);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--accent);
  animation: pulse 3.6s ease-in-out infinite
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.08)
  }
}

/* gap was 28px when this nav held 5 links. It now holds 6 + a language switcher,
   and FR labels are longer, so 28px overflowed .nav-inner and wrapped the bar to
   two lines. 20px restores headroom in both locales. */
.nav-links {
  display: flex;
  gap: 20px;
  align-items: center
}

.nav-links a {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--ink-2);
  text-transform: lowercase;
  white-space: nowrap
}

.nav-links a:hover {
  color: var(--accent)
}

/* HAMBURGER */
.hamburger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  z-index: 52;
  position: relative
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s, opacity .2s
}

.hamburger span+span {
  margin-top: 5px
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
  opacity: 0
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .05em;
  padding: .85rem 1.3rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .25s, background .25s, box-shadow .25s
}

/* Desktop only. Below the overlay breakpoint the bar is just brand + hamburger +
   CTA, and it relies on the brand and CTA wrapping to two lines to fit a 375px
   screen — pinning them to one line there pushes the CTA off-viewport. */
@media (min-width:1025px) {

  .brand,
  .nav-inner>.btn {
    flex-shrink: 0;
    white-space: nowrap
  }
}

.btn:hover {
  transform: translateY(-1px);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 8px 24px -10px var(--accent)
}

.btn--ghost {
  background: transparent;
  color: var(--ink)
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink)
}

.btn .arr {
  transition: transform .25s
}

.btn:hover .arr {
  transform: translateX(3px)
}

/* HERO */
.hero {
  padding: 200px 0 110px;
  position: relative
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center
}

.hero-tag {
  margin-bottom: 28px
}

/* The headline is two sentences on two lines; each line rises with its own --i
   stagger. FR and EN differ freely in length. */
.hero h1 .h-line {
  display: block;
  animation: rise .9s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * .12s)
}

/* French headlines run ~15-20% longer and contain long unbreakable words; the
   clamp floor leaves no room to shrink at 320px. */
/* Two full sentences need a step down from the display size, and no automatic
   hyphenation: "competi-tive" is not a break anyone wants in a headline. */
.hero h1 {
  color: var(--forest);
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  overflow-wrap: break-word;
  hyphens: manual
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.hero-sub {
  max-width: 520px;
  margin-top: 30px;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink-2)
}

.hero-sub strong {
  color: var(--ink);
  font-weight: 500
}

.hero-sub + .hero-sub {
  margin-top: 16px
}

.hero-sub--strong {
  color: var(--ink)
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
  align-items: center
}

/* STAGE — MYCELIUM */
.stage {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 600px;
  justify-self: end;
  width: 100%
}

.stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible
}

.myc-thread {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: grow 9s ease-in-out infinite;
  pathLength: 100
}

@keyframes grow {
  0% {
    stroke-dashoffset: 100;
    opacity: 0
  }

  18% {
    opacity: .85
  }

  62% {
    stroke-dashoffset: 0;
    opacity: .9
  }

  100% {
    stroke-dashoffset: -100;
    opacity: 0
  }
}

.myc-thread.t-orange {
  stroke: var(--accent);
  stroke-opacity: .55;
  stroke-width: 1.1
}

.myc-thread.t-forest {
  stroke: var(--forest);
  stroke-opacity: .4;
  stroke-width: .9
}

.myc-thread.t-fine {
  stroke: var(--accent);
  stroke-opacity: .35;
  stroke-width: .7
}

.myc-node {
  fill: var(--accent);
  transform-origin: center;
  transform-box: fill-box;
  animation: breathe 4.5s ease-in-out infinite
}

.myc-node.large {
  r: 6
}

.myc-node.med {
  r: 4.5
}

.myc-node.small {
  r: 3.2
}

.myc-node.alt {
  fill: var(--forest)
}

@keyframes breathe {

  0%,
  100% {
    opacity: .65;
    transform: scale(1)
  }

  50% {
    opacity: 1;
    transform: scale(1.25)
  }
}

.spore {
  fill: var(--accent);
  opacity: 0;
  animation: drift 8s ease-in-out infinite
}

.spore.alt {
  fill: var(--forest)
}

@keyframes drift {
  0% {
    opacity: 0;
    transform: translate(0, 0)
  }

  25% {
    opacity: .9
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx, 30px), var(--dy, 30px))
  }
}

.flow-particle {
  r: 2.6;
  fill: var(--accent)
}

.flow-particle.f {
  r: 2.2;
  fill: var(--forest)
}

/* WORKED WITH */
.worked-with {
  padding: 56px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.worked-with .label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 32px
}

.logos-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: scroll-logos 60s linear infinite
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

.logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
  max-width: 150px;
  filter: grayscale(1);
  opacity: .68;
  transition: filter .35s, opacity .35s;
  flex-shrink: 0
}

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

/* SECTION */
section {
  padding: 130px 0;
  position: relative
}

.section-head {
  margin-bottom: 48px
}

.section-head .eyebrow {
  margin-bottom: 24px;
  display: inline-flex
}

.section-head h2 .italic {
  display: block
}

/* AI & AUTOMATION (text-first quote-like) */
.aiauto {
  background: var(--paper-warm)
}

.aiauto-grid {
  display: grid;
  grid-template-columns: .45fr .55fr;
  gap: 64px;
  align-items: start
}

.aiauto-grid .lead {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink)
}

.aiauto-grid .lead .italic {
  display: block
}

.aiauto-grid .body {
  display: flex;
  flex-direction: column;
  gap: 22px
}

.aiauto-grid .body p {
  font-size: 1.05rem;
  line-height: 1.7
}

.aiauto-grid .body .track {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-2);
  letter-spacing: .02em;
  border-left: 2px solid var(--accent);
  padding: 14px 18px;
  background: var(--paper);
  line-height: 1.6
}

.aiauto-grid .body .track strong {
  color: var(--accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .66rem;
  display: block;
  margin-bottom: 6px
}

/* AI-NATIVE */
.ainat {
  background: var(--paper-warm);
}

.ainat-body {
  display: block;
  max-width: 860px;
  margin-top: 24px
}

.ainat-body p {
  font-size: 1.15rem;
  line-height: 1.7
}

.ainat-callout {
  margin-top: 48px;
  padding: 40px 48px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center
}

.ainat-callout .symbol {
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.5rem;
  line-height: .7;
  color: var(--accent)
}

.ainat-callout p {
  color: rgba(255, 255, 255, .78);
  font-size: 1.05rem;
  font-family: var(--serif);
  font-style: italic;
  line-height: 1.4
}

.ainat-callout strong {
  color: var(--paper);
  font-weight: 500
}

.engine-section {
  background: var(--paper-warm);
  padding: 130px 0;
  border-top: 1px solid var(--line);
}

.engine-header {
  margin-bottom: 56px;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.engine-visual {
  max-width: 85%;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
}

.engine-visual img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

/* HOW WE WORK */
.how {
  background: var(--paper-warm)
}

.how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  overflow: hidden;
  margin-top: 24px
}

.how-card {
  background: var(--paper);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 260px
}

.how-card .num {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 500
}

.how-card h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400
}

.how-card p {
  font-size: .98rem;
  line-height: 1.6
}

/* SIGNALS / SYMPTOMS */
.signals {
  background: var(--paper-warm)
}

.signals-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px
}

.signals-head .eyebrow {
  margin-bottom: 24px;
  display: inline-flex
}

.signals-head h2 .italic {
  display: block
}

/* Accordion: the quote is the title, the typical signals open on click. */
.sig {
  border-top: 1px solid var(--line-2)
}

.sig-item {
  border-bottom: 1px solid var(--line-2)
}

.sig-h {
  margin: 0;
  font: inherit
}

.sig-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 200px 1fr 40px;
  align-items: center;
  gap: 28px;
  padding: 30px 8px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink)
}

.sig-btn:hover .sig-quote,
.sig-btn[aria-expanded="true"] .sig-quote {
  color: var(--forest)
}

.sig-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px
}

.sig-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: .35em
}

.sig-tag {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.sig-quote {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  transition: color .25s
}

.sig-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  justify-self: end;
  transition: border-color .25s, background .25s
}

.sig-icon::before,
.sig-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform .3s, background .25s
}

.sig-icon::after {
  transform: translate(-50%, -50%) rotate(90deg)
}

.sig-btn:hover .sig-icon {
  border-color: var(--accent)
}

.sig-btn[aria-expanded="true"] .sig-icon {
  background: var(--ink);
  border-color: var(--ink)
}

.sig-btn[aria-expanded="true"] .sig-icon::before,
.sig-btn[aria-expanded="true"] .sig-icon::after {
  background: var(--paper)
}

.sig-btn[aria-expanded="true"] .sig-icon::after {
  transform: translate(-50%, -50%) rotate(0deg)
}

/* The panel animates through grid-template-rows 0fr -> 1fr. */
.sig-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1)
}

.sig-panel[hidden] {
  display: grid
}

.sig-panel.open {
  grid-template-rows: 1fr
}

.sig-panel-inner {
  overflow: hidden;
  min-height: 0;
  padding-left: calc(200px + 28px + 8px);
  padding-right: 8px
}

.sig-panel.open .sig-panel-inner {
  padding-bottom: 34px
}

.sig-label {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px
}

.sig-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
  margin: 0;
  padding: 0
}

.sig-list li {
  position: relative;
  padding-left: 20px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-2)
}

.sig-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--accent)
}

@media (max-width:760px) {
  .sig-btn {
    grid-template-columns: 1fr 36px;
    gap: 12px 16px;
    padding: 24px 0
  }

  .sig-meta {
    grid-column: 1;
    flex-direction: row;
    align-items: baseline;
    gap: 12px
  }

  .sig-icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 32px;
    height: 32px
  }

  .sig-quote {
    grid-column: 1;
    font-size: 1.2rem
  }

  .sig-panel-inner {
    padding-left: 0;
    padding-right: 0
  }

  .sig-panel.open .sig-panel-inner {
    padding-bottom: 26px
  }
}

/* OUR APPROACH (deep) */
.approach-deep {
  background: var(--paper)
}

.approach-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px
}

.approach-head .eyebrow {
  margin-bottom: 24px;
  display: inline-flex
}

.approach-head h2 .italic {
  display: block
}

.approach-lead {
  max-width: 760px;
  margin: 0 auto 14px;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink-2)
}

.approach-cue {
  text-align: center;
  margin: 0 auto 80px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--forest)
}

.model-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto
}

.model-text h3,
.engine-block h3,
.action-block h3 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin-bottom: 20px;
  color: var(--ink)
}

.model-text p,
.engine-block p,
.action-block p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 16px
}

.model-text p strong {
  color: var(--ink);
  font-weight: 500
}

.approach-divider {
  position: relative;
  height: 1px;
  max-width: 280px;
  margin: 100px auto;
  background: var(--line-2)
}

.approach-divider span {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  padding: 0 16px;
  color: var(--accent);
  font-size: 1.2rem
}

.engine-block,
.action-block {
  max-width: 780px;
  margin: 0 auto 56px
}

.action-block .tradeoffs em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--forest);
  font-size: 1.1rem
}

.approach-closing {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
  max-width: 820px;
  margin: 80px auto 0;
  padding-top: 60px;
  border-top: 1px solid var(--line-2);
  letter-spacing: -.01em
}

/* HUMAN IN THE LOOP */
.approach-human {
  max-width: 1080px;
  margin: 96px auto 0;
  padding-top: 72px;
  border-top: 1px solid var(--line-2)
}

.approach-human .approach-lead {
  max-width: 820px
}

.approach-human .approach-lead strong {
  color: var(--ink);
  font-weight: 500
}

.human-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 44px 0 0
}

.human-card {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 34px 30px;
  position: relative
}

.human-num {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--accent);
  display: block;
  margin-bottom: 16px
}

.human-card h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 12px
}

.human-card p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2)
}

.approach-human-closing {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 780px;
  margin: 48px auto 0
}

.approach-human-closing .italic {
  color: var(--forest);
  font-style: italic
}

/* THE ENGINE */
.engine {
  background: var(--paper-warm);
  position: relative
}

.engine-intro {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 56px
}

.engine-intro .eyebrow {
  margin-bottom: 24px;
  display: inline-flex
}

.engine-intro h2 {
  color: var(--ink)
}

.engine-intro h2 .italic {
  color: inherit
}

.engine-intro p {
  color: var(--ink-2);
  margin-top: 20px;
  font-size: 1.06rem;
  line-height: 1.7
}

.engine-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto 36px
}

.engine-synthesis {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.4;
  color: var(--ink)
}

.engine-synthesis .italic {
  color: var(--accent);
  font-style: italic
}

.engine-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .3s, border-color .3s, box-shadow .3s
}

.engine-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
  box-shadow: 0 12px 32px -16px rgba(20, 18, 16, .25)
}

.engine-card-status {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .72rem;
  border-radius: 999px;
  line-height: 1
}

.engine-card-status.live {
  color: var(--forest);
  background: rgba(35, 107, 92, .12)
}

.engine-card-status.soon {
  color: var(--accent-d);
  background: rgba(214, 97, 42, .12)
}

.engine-card h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0
}

.engine-card p {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0
}

.engine-card-foot {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: auto
}

/* ENGINE DASHBOARD (recreated in brand palette) */
.dash-wrap {
  max-width: 1180px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch
}

.dash {
  min-width: 940px;
  background: var(--paper);
  border-radius: 14px;
  border: 1px solid var(--line-2);
  overflow: hidden;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink);
  --r-high: #c0492b;
  --r-crit: #99291a;
  --r-med: #b9842a
}

/* one-by-one reveal */
.dp {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
  will-change: opacity, transform
}

.dp.show {
  opacity: 1;
  transform: none
}

/* topbar */
.dash-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 16px;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line)
}

.dash-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--serif);
  font-size: 13px
}

.dash-logo .dot {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-d))
}

.dash-title {
  font-weight: 500;
  font-size: 12px
}

.dash-beta {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .1em;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  margin-left: 6px
}

.dash-usecase {
  margin-left: 6px;
  line-height: 1.25
}

.dash-usecase .k {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .12em;
  color: var(--muted)
}

.dash-usecase .v {
  font-weight: 500;
  font-size: 11.5px
}

.dash-spacer {
  flex: 1
}

.dash-session {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 3px
}

.dash-session .on::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--forest);
  margin-right: 5px
}

.dash-btn {
  font-family: var(--mono);
  font-size: 9px;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: .2s
}

.dash-btn:hover {
  border-color: var(--accent);
  color: var(--accent)
}

.dash-ava {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--forest))
}

.dash-body {
  display: grid;
  grid-template-columns: 150px 1fr
}

/* sidebar */
.dash-sidebar {
  background: var(--paper-warm);
  border-right: 1px solid var(--line);
  padding: 10px 0;
  display: flex;
  flex-direction: column
}

.dash-nav button {
  text-align: left;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  padding: 8px 14px;
  cursor: pointer;
  transition: .18s;
  display: flex;
  gap: 9px;
  align-items: center;
  width: 100%
}

.dash-nav button:hover {
  background: rgba(214, 97, 42, .06);
  color: var(--ink)
}

.dash-nav button.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(214, 97, 42, .08);
  font-weight: 500
}

.dash-nav .ic {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--line-2)
}

.dash-nav button:hover .ic,
.dash-nav button.active .ic {
  background: var(--accent)
}

.dash-conf {
  margin-top: auto;
  padding: 16px 14px 8px;
  text-align: center
}

.dash-gauge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: conic-gradient(var(--forest) 0 62%, var(--line-2) 62% 100%);
  display: grid;
  place-items: center;
  position: relative
}

.dash-gauge::before {
  content: '';
  position: absolute;
  inset: 6px;
  background: var(--paper-warm);
  border-radius: 50%
}

.dash-gauge span {
  position: relative;
  font-weight: 600;
  font-size: 12px;
  color: var(--forest)
}

.dash-conf .lbl {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .06em;
  color: var(--muted);
  line-height: 1.5
}

/* main */
.dash-main {
  display: grid;
  grid-template-columns: 1fr 282px;
  gap: 12px;
  padding: 13px;
  align-items: start;
  background: var(--paper)
}

.dash-content {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0
}

.dash-rail {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.dp-grid3 {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 12px
}

.dp-pillars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px
}

.dp-grid-mid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.15fr;
  gap: 12px
}

.dp-grid-bot {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1.7fr 1.2fr 1fr;
  gap: 12px
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px;
  transition: box-shadow .25s, border-color .25s;
  cursor: pointer
}

.panel:hover {
  border-color: var(--line-2);
  box-shadow: 0 8px 20px -12px rgba(20, 18, 16, .28)
}

.ph {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 5px
}

.quote-big {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink)
}

.check-list,
.bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.check-list li {
  padding-left: 16px;
  position: relative
}

.check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--forest);
  font-size: 10px
}

.bullet-list li {
  padding-left: 14px;
  position: relative
}

.bullet-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent)
}

/* pillars */
.pillar {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--cat, var(--line-2));
  border-radius: 9px;
  padding: 11px 10px 12px;
  transition: .25s;
  cursor: pointer
}

.pillar:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -12px rgba(20, 18, 16, .4)
}

.pillar .pname {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px
}

.pillar .pname::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat, var(--line-2));
  flex: none
}

.pillar p {
  font-size: 10px;
  line-height: 1.42;
  color: var(--ink-2);
  margin: 0 0 10px
}

.pillar .imp {
  font-family: var(--mono);
  font-size: 7.5px;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase
}

.pillar .impv {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  margin-top: 2px
}

.impv.high {
  color: var(--r-high)
}

.impv.crit {
  color: var(--r-crit)
}

.impv.med {
  color: var(--r-med)
}

/* flux map */
.flux-map {
  position: relative;
  width: 100%;
  height: 215px;
  margin-bottom: 2px
}

.flux-land {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(86%) sepia(18%) saturate(380%) hue-rotate(2deg) brightness(94%)
}

.flux-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.legend {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 9px;
  color: var(--ink-2);
  flex-wrap: wrap
}

.legend i {
  display: inline-block;
  width: 14px;
  border-top: 2px solid;
  margin-right: 4px;
  vertical-align: middle
}

.badge-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 8px
}

.badge-stat b {
  color: var(--r-high);
  font-size: 13px
}

/* friction */
.warn-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px
}

.warn-list li {
  padding-left: 18px;
  position: relative;
  font-size: 10px;
  line-height: 1.35
}

.warn-list li::before {
  content: '▲';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--r-med);
  font-size: 8px
}

/* signaux table */
.sig-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5px
}

.sig-table th {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  font-weight: 500;
  padding: 0 4px 6px
}

.sig-table td {
  padding: 5px 4px;
  border-top: 1px solid var(--line);
  line-height: 1.25
}

.trend-up {
  color: var(--r-high);
  font-weight: 600
}

.trend-flat {
  color: var(--muted)
}

.risk {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 9px
}

.risk.high {
  color: var(--r-high)
}

.risk.med {
  color: var(--r-med)
}

/* dependency diagram */
.dep-svg {
  width: 100%;
  height: 150px;
  display: block
}

/* interview */
.iv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 11px
}

.iv-tags button {
  font-family: var(--mono);
  font-size: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fff;
  cursor: pointer;
  transition: .18s;
  color: var(--ink-2)
}

.iv-tags button:hover,
.iv-tags button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff
}

.iv-qa {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.iv-row {
  display: flex;
  gap: 7px;
  font-size: 10px;
  line-height: 1.35
}

.iv-row .who {
  font-family: var(--mono);
  font-size: 7px;
  padding: 2px 5px;
  border-radius: 4px;
  height: fit-content;
  white-space: nowrap
}

.iv-row .who.q {
  background: rgba(10, 78, 63, .12);
  color: var(--forest)
}

.iv-row .who.a {
  background: rgba(214, 97, 42, .12);
  color: var(--accent-d)
}

.iv-more {
  margin-top: 11px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent);
  cursor: pointer;
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  padding: 7px
}

.iv-more:hover {
  background: rgba(214, 97, 42, .06)
}

.pill-rec {
  background: var(--forest);
  color: #fff;
  font-family: var(--mono);
  font-size: 7.5px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto
}

/* quick wins */
.qw {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5px
}

.qw th {
  font-family: var(--mono);
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: right;
  font-weight: 500;
  padding: 0 3px 6px
}

.qw th:first-child {
  text-align: left
}

.qw td {
  padding: 5px 3px;
  border-top: 1px solid var(--line);
  line-height: 1.3
}

.qw td.c {
  text-align: right
}

.qw .ok {
  color: var(--forest);
  margin-right: 4px
}

.tag {
  font-family: var(--mono);
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 4px
}

.tag.h {
  background: rgba(192, 73, 43, .12);
  color: var(--r-high)
}

.tag.m {
  background: rgba(185, 132, 42, .15);
  color: var(--r-med)
}

.tag.l {
  background: rgba(10, 78, 63, .12);
  color: var(--forest)
}

/* scenarios */
.scn {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5px
}

.scn th {
  font-family: var(--mono);
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  text-align: left;
  padding: 0 4px 6px;
  font-weight: 500
}

.scn td {
  padding: 7px 4px;
  border-top: 1px solid var(--line)
}

.scn tr.sel {
  background: rgba(214, 97, 42, .07)
}

.scn tr.sel td:first-child {
  font-weight: 600;
  color: var(--accent)
}

.scn .num {
  font-family: var(--mono);
  font-weight: 600
}

.bar {
  height: 5px;
  border-radius: 3px;
  background: var(--line-2);
  position: relative;
  min-width: 38px
}

.bar>i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%
}

.bar.g>i {
  background: var(--forest);
  left: 18%
}

.bar.o>i {
  background: var(--r-med);
  left: 52%
}

.bar.r>i {
  background: var(--r-high);
  left: 80%
}

/* deployment */
.dep-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px
}

.dep-col .dh {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .05em;
  color: var(--accent);
  margin-bottom: 6px;
  text-transform: uppercase
}

.dep-step {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  font-size: 9px;
  line-height: 1.3;
  margin-bottom: 6px;
  text-align: center
}

/* cta */
.dash-foot {
  display: flex;
  justify-content: flex-end;
  padding: 12px 13px;
  border-top: 1px solid var(--line);
  background: var(--paper-warm)
}

.dash-cta {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 9px;
  padding: 12px 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: .25s
}

.dash-cta:hover {
  background: var(--accent)
}

.dash-cta .arr {
  transition: .25s
}

.dash-cta:hover .arr {
  transform: translateX(4px)
}

.dash-note {
  font-size: 8.5px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 8px
}

.dash-cap {
  text-align: center;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted)
}

@media (max-width:900px) {
  .engine-blocks {
    grid-template-columns: 1fr
  }
}

/* 6-LAYER STAGE */
.layers-stage {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 520px;
  width: 100%;
  margin: 0 auto
}

.layers-stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible
}

.l-thread {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: l-grow 9s ease-in-out infinite;
  pathLength: 100
}

@keyframes l-grow {
  0% {
    stroke-dashoffset: 100;
    opacity: 0
  }

  18% {
    opacity: .8
  }

  62% {
    stroke-dashoffset: 0;
    opacity: .85
  }

  100% {
    stroke-dashoffset: -100;
    opacity: 0
  }
}

.l-thread.t-orange {
  stroke: var(--accent);
  stroke-opacity: .55;
  stroke-width: 1.1
}

.l-thread.t-forest {
  stroke: var(--forest);
  stroke-opacity: .42;
  stroke-width: .95
}

.l-thread.t-fine {
  stroke: var(--accent);
  stroke-opacity: .3;
  stroke-width: .7
}

.l-node {
  fill: var(--paper);
  stroke: var(--accent);
  stroke-width: 1.5;
  transform-origin: center;
  transform-box: fill-box;
  animation: l-breathe 4.5s ease-in-out infinite
}

.l-node.alt {
  stroke: var(--forest)
}

@keyframes l-breathe {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.1)
  }
}

.l-node-dot {
  fill: var(--accent);
  transform-origin: center;
  transform-box: fill-box;
  animation: l-dot 4.5s ease-in-out infinite
}

.l-node-dot.alt {
  fill: var(--forest)
}

@keyframes l-dot {

  0%,
  100% {
    opacity: .55;
    transform: scale(.85)
  }

  50% {
    opacity: 1;
    transform: scale(1.25)
  }
}

.l-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--ink);
  font-weight: 500
}

.l-center-ring {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: .25;
  stroke-width: 1;
  stroke-dasharray: 2 5;
  transform-origin: 300px 300px;
  animation: l-rotate 28s linear infinite
}

@keyframes l-rotate {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

.l-center-pulse {
  fill: var(--accent);
  transform-origin: 300px 300px;
  animation: l-pulse 3.6s ease-in-out infinite
}

@keyframes l-pulse {

  0%,
  100% {
    opacity: .07;
    transform: scale(.92)
  }

  50% {
    opacity: .18;
    transform: scale(1.12)
  }
}

.l-center-text {
  font-family: var(--serif);
  font-style: italic;
  fill: var(--ink);
  font-size: 17px
}

.l-center-small {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .22em;
  fill: var(--muted);
  font-weight: 500
}

.l-flow-particle {
  r: 2.6;
  fill: var(--accent)
}

.l-flow-particle.f {
  r: 2.2;
  fill: var(--forest)
}


/* OUR CONVICTIONS */
.convictions-section {
  background: var(--paper)
}

.conviction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px
}

.conviction-card {
  background: var(--paper-warm);
  padding: 40px 32px;
  border-radius: 18px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s
}

.conviction-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -12px rgba(10, 78, 63, .06)
}

.conviction-card::before {
  content: '✦';
  position: absolute;
  top: 32px;
  right: 32px;
  font-size: 1.4rem;
  color: var(--accent);
  opacity: 0.25;
  transition: opacity .4s, transform .5s
}

.conviction-card:hover::before {
  opacity: 1;
  transform: rotate(45deg)
}

.conviction-card p {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0;
  position: relative;
  z-index: 2;
  padding-right: 24px
}

/* START */
.start {
  text-align: center;
  padding: 140px 0 110px;
  background: var(--paper)
}

.start h2 {
  margin: 14px auto 22px;
  max-width: 18ch
}

.start p {
  max-width: 560px;
  margin: 0 auto 32px;
  font-size: 1.1rem
}

.start .meta {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .06em
}

/* FOOTER */
footer {
  border-top: 1px solid var(--line);
  padding: 60px 0 40px;
  background: var(--paper)
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .05em
}

.foot a {
  color: var(--ink-2)
}

.foot a:hover {
  color: var(--accent)
}

@media (max-width:1024px) {
  .conviction-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:900px) {
  .conviction-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:900px) {
  .hero {
    padding: 110px 0 60px
  }

  .hero-grid,
  .aiauto-grid,
  .ainat-body,
  .how-grid,
  .model-grid,
  .ainat-callout {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .layers-stage {
    max-width: 420px
  }

  .approach-cue {
    margin-bottom: 56px
  }

  .human-grid {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .approach-human {
    margin-top: 64px;
    padding-top: 48px
  }

  .approach-divider {
    margin: 60px auto
  }

  .approach-closing {
    margin-top: 50px;
    padding-top: 40px
  }

  .stage {
    justify-self: start;
    max-width: 100%
  }

  /* HAMBURGER visible */
  section {
    padding: 64px 0
  }

  /* DASHBOARD RESPONSIVE */
  .dash {
    min-width: 0
  }

  .dash-topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px
  }

  .dash-session,
  .dash-btn,
  .dash-ava {
    display: none
  }

  .dash-body {
    grid-template-columns: 1fr
  }

  .dash-sidebar {
    display: none
  }

  .dash-main {
    grid-template-columns: 1fr;
    padding: 10px
  }

  .dash-rail {
    grid-column: 1;
    grid-row: auto
  }

  .dp-grid3 {
    grid-template-columns: 1fr
  }

  .dp-pillars {
    grid-template-columns: repeat(2, 1fr)
  }

  .dp-grid-mid {
    grid-template-columns: 1fr
  }

  .dp-grid-bot {
    grid-template-columns: 1fr
  }

  .dep-steps {
    grid-template-columns: 1fr
  }
}

@media (max-width:600px) {
  .conviction-grid {
    grid-template-columns: 1fr
  }
}

@media (max-width:480px) {
  .container,
  .container--narrow {
    padding: 0 16px
  }

  .hero {
    padding: 100px 0 48px
  }

  section {
    padding: 48px 0
  }

  .dp-pillars {
    grid-template-columns: 1fr
  }

  .pillar .pname {
    font-size: 9.5px
  }

  .pillar p {
    font-size: 11px
  }

  .ph {
    font-size: 9px
  }

  .dash-topbar {
    padding: 8px 10px
  }

  .dash-usecase {
    display: none
  }
}

/* ─── Nav: use-cases link + EN/FR switcher ───────────────────────────────────
   The switcher lives INSIDE .nav-links so it inherits the mobile overlay for
   free (it becomes a row in the fixed overlay) and the hamburger's
   close-on-click handler, which binds navLinks.querySelectorAll('a'), already
   covers it. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.lang-switch::before {
  content: '';
  width: 1px;
  height: 12px;
  background: var(--line-2);
  margin-right: 2px
}

/* .nav-links a forces lowercase; locale codes must stay uppercase. */
.lang-switch a {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted)
}

.lang-switch a:hover {
  color: var(--accent)
}

.lang-switch a[aria-current] {
  color: var(--ink)
}

/* ─── Nav overlay breakpoint: 900px -> 1024px ────────────────────────────────
   Relocated verbatim from the @media (max-width:900px) block, which also holds
   .hero, section, .dash-* and .dp-* — moving that block wholesale would have
   reflowed the entire page. The nav went from 5 links to 6 + a switcher, and FR
   labels are longer, so it collides with the CTA before 900px. Only these five
   rules moved; nothing else changed. */
@media (max-width:1024px) {
  .lang-switch::before {
    display: none
  }

  .lang-switch {
    gap: 14px
  }

  .hamburger {
    display: block
  }

  /* NAV OVERLAY */
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 51;
    background: rgba(251, 249, 244, .97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease
  }

  .nav-links.open {
    opacity: 1;
    pointer-events: auto
  }

  .nav-links a {
    font-size: 1.1rem;
    letter-spacing: .08em
  }

  header.nav.menu-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    border-bottom-color: transparent
  }
}

/* ─── Use-cases page ─────────────────────────────────────────────────────────
   Ported from the dev branch's UseCaseCard.astro / UseCasesSection.astro. Their
   scoped CSS referenced --paper/--line/--ink/--serif/--mono/--forest/--accent/
   --glow, all of which this stylesheet already defines, so the rules transfer
   unchanged. The section's own .hero/.hero-sub overrides were dropped on purpose
   — the page reuses this site's existing .hero, .container, .eyebrow and
   .hero-sub so it reads as the same site. */
/* The homepage hero pairs a headline with artwork and needs its 110px base; this
   page runs straight into the filter chips, so that much air reads as a gap. */
.hero--page {
  padding-bottom: 40px
}

.uc {
  padding-top: 0;
  padding-bottom: 110px
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 56px
}

.chip {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  transition: .2s
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent)
}

.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper)
}

.uc-group-block {
  margin-bottom: 56px
}

.uc-group-title {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line)
}

.uc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.uc-slot {
  display: flex
}

.uc-slot[hidden],
.uc-group-block[hidden] {
  display: none
}

.uc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  height: 100%
}

.uc-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
  box-shadow: 0 14px 34px -20px rgba(20, 18, 16, .3)
}

.uc-card h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink)
}

.uc-what {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-2)
}

.uc-pitch {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--forest);
  border-left: 2px solid var(--line-2);
  padding-left: 14px
}

.uc-roi {
  margin-top: auto;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--accent);
  background: var(--glow);
  padding: .35rem .7rem;
  border-radius: 999px;
  align-self: flex-start
}

.disclaimer {
  max-width: 720px;
  margin: 24px auto 0;
  text-align: center;
  font-size: .82rem;
  color: var(--muted);
  font-style: italic
}

@media (max-width:980px) {
  .uc-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .uc-grid {
    grid-template-columns: 1fr
  }
}

/* ─── Language splash (/) and 404 ────────────────────────────────────────────
   The splash normally never paints: .htaccess redirects "/" by Accept-Language,
   and an inline script redirects before paint. This styles the no-JS fallback. */
.splash,
.notfound {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 22px;
  text-align: center;
  padding: 40px 32px;
  position: relative;
  z-index: 2
}

.splash-brand {
  font-size: 1.6rem;
  margin-bottom: 10px
}

.splash-line {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.15;
  color: var(--ink);
  max-width: 20ch
}

.splash-line+.splash-line {
  color: var(--muted);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem)
}

.splash-langs,
.notfound-actions {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center
}

.notfound-code {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent)
}

.notfound h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  max-width: 16ch
}

/* ─── Homepage: the two axes (offers) ────────────────────────────────────────
   Axis 01 lists the four entry points as cards on warm paper; axis 02 is a
   single statement on forest green so the two read as distinct blocks. */
.axis-head {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: start;
  max-width: 960px;
  margin-bottom: 56px
}

.axis-num {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: .9;
  color: var(--accent);
  letter-spacing: -.03em
}

.axis-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem)
}

.axis-intro {
  margin-top: 20px;
  font-size: 1.08rem;
  max-width: 720px
}

.axis-prepare {
  background: var(--paper-warm)
}

.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px
}

.offer-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 32px 30px;
  transition: transform .3s, box-shadow .3s, border-color .3s
}

.offer-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: 0 16px 38px -22px rgba(20, 18, 16, .32)
}

.offer-name {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.05;
  margin: 0
}

.offer-sub {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: -4px 0 0
}

.offer-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 6px 0 0
}

.offer-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 12px 0 0
}

.offer-tags li {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .03em;
  color: var(--forest);
  background: rgba(35, 107, 92, .1);
  border: 1px solid rgba(35, 107, 92, .18);
  border-radius: 999px;
  padding: .38rem .75rem
}

.axis-build {
  background: var(--forest);
  color: var(--paper)
}

.axis-build .axis-num {
  color: var(--glow)
}

.axis-build h2 {
  color: var(--paper)
}

.axis-build .axis-head {
  margin-bottom: 0
}

.build-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
  margin-top: 24px
}

.build-body p {
  font-size: 1.08rem;
  line-height: 1.75;
  color: rgba(251, 249, 244, .82)
}

.build-body p:first-child {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.4;
  color: var(--paper)
}

/* ─── Homepage: method summary (full page at /method/) ───────────────────── */
.msum {
  background: var(--paper)
}

.msum-grid {
  display: grid;
  grid-template-columns: .45fr .55fr;
  gap: 64px;
  align-items: start
}

.msum-grid .eyebrow {
  margin-bottom: 18px
}

.msum-grid h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem)
}

.msum-grid p {
  font-size: 1.08rem;
  margin-bottom: 26px
}

/* ─── Homepage: use-case summary (full library at /use-cases/) ───────────── */
.uc-summary {
  background: var(--paper-warm)
}

.lead-center {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
  font-size: 1.06rem;
  color: var(--ink-2)
}

.center-cta {
  text-align: center;
  margin-top: 48px
}

.uc-grid--4 {
  grid-template-columns: repeat(4, 1fr)
}

.uc-group {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

@media (max-width:980px) {
  .uc-grid--4 {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:860px) {
  .axis-head {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .offer-grid {
    grid-template-columns: 1fr
  }

  .msum-grid {
    grid-template-columns: 1fr;
    gap: 22px
  }
}

@media (max-width:560px) {
  .uc-grid--4 {
    grid-template-columns: 1fr
  }
}

/* ─── About page ─────────────────────────────────────────────────────────────
   Company description + the three associates. Reuses .hero--page, .msum-grid,
   .section-head and the .start / footer blocks; only the team grid is new. */
.about-who {
  background: var(--paper-warm)
}

a.eyebrow:hover {
  color: var(--accent-d)
}

.team {
  background: var(--paper)
}

.team-lead {
  max-width: 720px;
  margin-top: 22px;
  font-size: 1.08rem
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px
}

.team-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 30px
}

.team-photo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 4px var(--paper);
  margin-bottom: 6px
}

.team-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink)
}

.team-focus {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent)
}

.team-card p {
  font-size: .98rem;
  line-height: 1.65;
  color: var(--ink-2)
}

@media (max-width:980px) {
  .team-grid {
    grid-template-columns: 1fr
  }
}

/* ═══ PHASE 1 · Direction A Forêt: component overrides ═════════════════════
   The tokens above do most of the work; this block re-states the rules whose
   shape (not colour) reads as the v1 kit: serif 400 headings, italic emphasis,
   tracked mono eyebrows, lowercase nav, pill buttons, 18px shadowed cards, the
   pulsing dot. Kept as one block so the review is one diff and a revert is one
   delete; once approved, phase 3 folds each rule into the one it overrides. */

/* Type */
h1, h2, h3 { font-weight: 500; letter-spacing: -.02em; line-height: 1.08 }
h1 { line-height: 1.02 }
h3,
.human-card h3, .uc-card h3, .engine-card h3, .how-card h3, .team-name { font-weight: 600 }
.model-text h3, .engine-block h3, .action-block h3, .offer-name,
.sig-quote, .conviction-card p, .approach-closing, .engine-synthesis, .approach-human-closing,
.build-body p:first-child, .aiauto-grid .lead, .splash-line, .axis-num, .human-num,
.l-center-text, .quote-big, .dash-logo { font-weight: 500 }
.brand { font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em }
body { color: var(--ink-2) }
h1, h2, h3, .hero-sub--strong, .sig-btn { color: var(--ink) }
.hero h1 { color: var(--forest); font-size: clamp(2.1rem, 3.8vw, 3.4rem) }
.msum-grid h2 { font-size: clamp(1.8rem, 3vw, 2.5rem) }

/* Emphasis by weight, never italic, never a second colour inside a heading */
.italic, .uc-pitch, .approach-cue, .action-block .tradeoffs em, .ainat-callout .symbol,
.ainat-callout p, .quote-big, .l-center-text, .disclaimer,
.approach-human-closing .italic, .engine-synthesis .italic { font-style: normal }
.engine-synthesis .italic, .approach-human-closing .italic, .action-block .tradeoffs em,
.approach-cue { color: var(--forest); font-weight: 600 }
.uc-pitch { color: var(--ink); font-weight: 500; border-left-color: var(--forest-2) }

/* Eyebrow: Public Sans 600, .08em, ochre-d, an 8px ochre square in front */
.eyebrow { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--ochre-d); gap: 10px }
.eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--ochre); flex: none }
.sig-label, .uc-group, .uc-group-title, .offer-sub, .how-card .num, .sig-tag, .engine-card-foot,
.dash-cap, .notfound-code, .worked-with .label, .team-focus, .aiauto-grid .body .track strong,
.engine-card-status { font-weight: 600; letter-spacing: .08em }

/* Nav: sentence case, forest underline on hover, grey-green glass */
header.nav { background: rgba(238, 240, 235, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) }
.nav-links a { text-transform: none; font-size: .875rem; font-weight: 500; letter-spacing: 0; padding-bottom: 2px }
.nav-links a:hover { color: var(--forest); box-shadow: inset 0 -2px 0 var(--forest) }
.lang-switch a { letter-spacing: .04em }
.lang-switch a:hover, .foot a:hover { color: var(--forest) }
@media (max-width:1024px) { .nav-links { background: rgba(238, 240, 235, .97) } }

/* Brand mark: the prototype's constellation. Five forest nodes around an ochre
   hub whose halo breathes; on hover the net turns 20°, the lines come up to full
   strength, the nodes go ochre and the hub sends out a wave. Markup lives inline
   in each page's .brand (and the use-cases pages lift it with the nav). */
.brand-mark { display: block; overflow: visible; flex: none; width: 28px; height: 28px; border-radius: 0; background: none; box-shadow: none; animation: none }
.bm-net { transform-origin: 14px 14px; transition: transform .6s cubic-bezier(.2, .8, .2, 1) }
.bm-lines { stroke: var(--forest); stroke-width: 1; stroke-opacity: .45; fill: none; transition: stroke-opacity .4s }
.bm-node { fill: var(--forest); transition: fill .4s }
.bm-halo { fill: var(--ochre); fill-opacity: .18; transform-origin: 14px 14px; animation: bm-breathe 4s ease-in-out infinite }
.bm-wave { fill: none; stroke: var(--ochre); stroke-width: 1; opacity: 0 }
.bm-hub { fill: var(--ochre) }
.brand:hover .bm-net { transform: rotate(20deg) }
.brand:hover .bm-lines { stroke-opacity: 1 }
.brand:hover .bm-node { fill: var(--ochre) }
.brand:hover .bm-wave { animation: bm-pulse 1.1s ease-out infinite }
@keyframes bm-breathe { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes bm-pulse { 0% { r: 2.6; opacity: 1 } 100% { r: 14; opacity: 0 } }

/* Buttons: 6px, forest fill, darker forest on hover, no lift. Ghost = ink border. */
.btn { font-family: var(--sans); font-size: .85rem; font-weight: 600; letter-spacing: 0; padding: .8rem 1.25rem; border-radius: 6px; background: var(--forest); border-color: var(--forest); color: #fff }
.btn:hover { transform: none; background: var(--forest-d); border-color: var(--forest-d); box-shadow: none }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink) }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink) }
.btn:focus-visible, .sig-btn:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px }
.chip { border-radius: 4px; font-family: var(--sans); font-weight: 500; letter-spacing: 0 }
.chip:hover { border-color: var(--forest); color: var(--forest) }
.chip.active { background: var(--forest); border-color: var(--forest); color: #fff }

/* Chips and tags: 4px, tinted fills, never raw ochre as text */
.uc-roi, .offer-tags li, .engine-card-status { border-radius: 4px; letter-spacing: .02em; text-transform: none; font-weight: 600 }
.uc-roi { color: var(--ochre-d); background: var(--ochre-tint) }
.offer-tags li { color: var(--forest); background: var(--forest-tint); border-color: var(--forest-tint) }
.engine-card-status.live { color: var(--forest); background: var(--forest-tint) }
.engine-card-status.soon { color: var(--muted); background: var(--ground-2) }

/* Cards: white on the grey-green ground, 10px, hairline; hover = forest-2 border, no shadow */
.conviction-card, .offer-card, .human-card, .uc-card, .engine-card, .team-card, .how-grid, .how-card,
.ainat-callout { border-radius: 10px }
.conviction-card, .offer-card, .human-card, .uc-card, .engine-card, .team-card, .how-card { background: var(--surface); border-color: var(--line) }
.conviction-card:hover, .offer-card:hover, .uc-card:hover, .engine-card:hover { transform: none; box-shadow: none; border-color: var(--forest-2) }
.conviction-card::before { display: none }
.team-photo { box-shadow: 0 0 0 4px var(--surface) }
.aiauto-grid .body .track { background: var(--surface); border-left-color: var(--forest) }
.axis-build { color: #fff }
.axis-build .axis-num { color: var(--ochre) }
.axis-build h2, .build-body p:first-child { color: #fff }
.build-body p { color: rgba(255, 255, 255, .82) }

/* Hero mycelium and six-layer stage: same motion, ochre where it was clay */
.myc-thread.t-orange, .myc-thread.t-fine, .l-thread.t-orange, .l-thread.t-fine, .l-node, .l-center-ring { stroke: var(--ochre) }
.myc-node, .spore, .flow-particle, .l-node-dot, .l-center-pulse, .l-flow-particle { fill: var(--ochre) }
.myc-node.alt, .spore.alt, .flow-particle.f, .l-node-dot.alt, .l-flow-particle.f { fill: var(--forest) }
.l-node.alt { stroke: var(--forest) }
.l-label { letter-spacing: .08em; font-weight: 600 }

/* Engine dashboard: the mock keeps its mono figures; frame 8px, tiles 6px, forest UI */
.dash { --mono: var(--figures); border-radius: 8px }
.panel, .pillar { border-radius: 6px }
.panel:hover, .pillar:hover { transform: none; box-shadow: none; border-color: var(--forest-2) }
.dash-logo .dot { background: var(--forest); border-radius: 2px }
.dash-beta { background: var(--forest) }
.dash-ava { background: linear-gradient(135deg, var(--forest-2), var(--forest)) }
.dash-btn:hover { border-color: var(--forest); color: var(--forest) }
.dash-nav button:hover { background: rgba(10, 78, 63, .06) }
.dash-nav button.active { color: var(--forest); border-left-color: var(--forest); background: var(--forest-tint) }
.dash-nav button:hover .ic, .dash-nav button.active .ic { background: var(--forest) }
.iv-tags button { border-radius: 4px }
.iv-tags button:hover, .iv-tags button.active { background: var(--forest); border-color: var(--forest) }
.iv-row .who.a { background: var(--ochre-tint); color: var(--ochre-d) }
.iv-more { color: var(--forest) }
.iv-more:hover { background: rgba(10, 78, 63, .06) }
.scn tr.sel { background: var(--forest-tint) }
.scn tr.sel td:first-child { color: var(--forest) }
.dep-col .dh { color: var(--forest) }
.dash-cta { border-radius: 6px; font-family: var(--sans); font-weight: 600; letter-spacing: 0 }
.dash-cta:hover { background: var(--forest) }
/* Technology & AI category was clay; the pillar carries it inline, so !important is the
   only CSS-only way to move it. Phase 2 edits the markup and drops this line. */
.pillar[style*="D6612A"] { --cat: #2E6F8E !important }


/* ═══ 2026-10 restructure: futures hero, use-cases accordion, offer details,
   use-cases library, principles, game page ════════════════════════════════
   Same tokens and roles as phase 1: forest for structure and interaction,
   ochre for marks. */

/* Hero stage: one start, choices, three futures. The faint network is static;
   site.js draws the journeys (.fut-line, .fut-dead, .fut-head) and toggles
   .lit / .reached / .hl. */
.fut { overflow: visible }
.fut-path { fill: none; stroke: var(--forest); stroke-opacity: .18; stroke-width: 1; stroke-dasharray: 2 4; transition: stroke-opacity .3s, stroke-width .3s }
.fut-line { fill: none; stroke: var(--forest); stroke-width: 1.8; stroke-linecap: round; stroke-opacity: .85 }
.fut-dead { fill: none; stroke: var(--ochre-d); stroke-width: 1.2; stroke-linecap: round; stroke-opacity: .6 }
.fut-dead-dot { fill: var(--ochre); animation: fut-dot .5s ease-out both }
@keyframes fut-dot { from { opacity: 0; r: 1 } to { opacity: .8; r: 3 } }
.fut-head { fill: var(--ochre); filter: drop-shadow(0 0 6px var(--ochre)) }
.fut-journey { transition: opacity .7s }
.fut-journey.fade { opacity: 0 }
.fut-choice { fill: var(--ground); stroke: var(--forest); stroke-width: 1.4; transition: fill .3s, stroke .3s, r .3s; cursor: default }
.fut-choice.lit, .fut-choice.hl { fill: var(--ochre-tint); stroke: var(--ochre-d); r: 7 }
/* Today: the brand constellation, forest nodes around an ochre hub */
.fut-hub { fill: var(--ochre); r: 5 }
.fut-today-line { stroke: var(--forest); stroke-width: .9; stroke-opacity: .5 }
.fut-today-node { fill: var(--forest); r: 2.6 }
.fut-today.lit .fut-today-node { fill: var(--ochre) }
.fut-today.lit .fut-today-line { stroke-opacity: 1 }
.fut-today-node, .fut-today-line { transition: fill .4s, stroke-opacity .4s }
/* The reached future tints its corner of the stage: ochre, forest, deep ochre */
.fut-aura { opacity: 0; transition: opacity .9s; filter: blur(42px) }
.fut-future[data-node="f1"] .fut-aura { fill: var(--ochre) }
.fut-future[data-node="f2"] .fut-aura { fill: var(--forest-2) }
.fut-future[data-node="f3"] .fut-aura { fill: var(--ochre-d) }
.fut-future.reached .fut-aura { opacity: .16 }
.fut-ring { fill: none; stroke: var(--ochre); stroke-width: 1.2; opacity: 0; transform-origin: center; transform-box: fill-box }
.fut-ring--start { animation: fut-ring 3.6s ease-out infinite; r: 16 }
.fut-future.reached .fut-ring { animation: fut-ring 1.2s ease-out 2 }
@keyframes fut-ring { 0% { opacity: .9; transform: scale(.6) } 100% { opacity: 0; transform: scale(2.8) } }
.fut-goal { fill: var(--ochre); fill-opacity: .55; transition: fill-opacity .3s, r .3s }
.fut-future.reached .fut-goal, .fut-future.hl .fut-goal { fill-opacity: 1; r: 8 }
.fut-glow { fill: var(--ochre); opacity: 0; transition: opacity .6s }
.fut-future.reached .fut-glow { opacity: .22 }
.fut-label { font-family: var(--sans); font-size: 15px; font-weight: 600; fill: var(--forest); fill-opacity: .7; paint-order: stroke; stroke: var(--ground); stroke-width: 5px; stroke-linejoin: round; transition: fill-opacity .3s }
.fut-future.reached .fut-label, .fut-future.hl .fut-label { fill-opacity: 1 }
.fut-label--today { fill: var(--muted); fill-opacity: 1; font-weight: 500 }
/* Hover on a choice: everything else recedes, the paths through it come forward */
.fut-hl .fut-path { stroke-opacity: .07 }
.fut-hl .fut-path.hl { stroke-opacity: .7; stroke-width: 1.6; stroke-dasharray: none }
.fut-hl .fut-future:not(.hl) .fut-label { fill-opacity: .3 }
.fut-hl .fut-future:not(.hl) .fut-goal { fill-opacity: .2 }
@media (max-width:600px) { .fut-label { font-size: 19px } }
@media (prefers-reduced-motion: reduce) {
  .hero h1 .h-line, .fut-ring--start { animation: none !important }
  .fut-path { stroke-opacity: .35 }
}

/* Flip cards: the homepage use cases and offers. Both faces share one grid cell,
   so a card is as tall as its longer face and the text never spills; rows are
   1fr, so every card in a grid is the same height whatever its copy. site.js
   turns them and moves `inert` to the hidden face. */
.uc-home .signals-head { margin-bottom: 24px }
.ucf-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 20px }
.ucf-grid, .offer-grid { perspective: 1400px }
.ucf-card { display: grid }
.ucf-inner { display: grid; transition: transform .65s cubic-bezier(.45, 0, .2, 1); transform-style: preserve-3d; will-change: transform }
/* Both faces live on their own compositing layer from the start, so the turn
   never has to rasterize the back mid-flip (that was a visible hitch in Safari). */
.ucf-face { will-change: transform; transform: translateZ(0) }
.ucf-card.turning { animation: ucf-lift .65s cubic-bezier(.45, 0, .2, 1) }
@keyframes ucf-lift { 50% { transform: scale(1.035) } }
.ucf-card.flipped .ucf-inner { transform: rotateY(180deg) }
.ucf-face { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 22px; border-radius: 14px; -webkit-backface-visibility: hidden; backface-visibility: hidden }
.ucf-front { background: var(--surface); border: 1px solid var(--line); transition: border-color .3s }
.ucf-card:hover .ucf-front { border-color: var(--forest-2) }
.ucf-back { background: var(--forest); color: #fff; transform: rotateY(180deg) translateZ(0) }
/* Belt and braces: Safari has ignored backface-visibility on faces like these
   more than once, which shows the forest back mirrored over the front. The
   hidden face is also made invisible, switched at the midpoint of the turn. */
.ucf-card:not(.flipped) .ucf-back, .ucf-card.flipped .ucf-front { visibility: hidden; transition: visibility 0s .32s }
.ucf-card.flipped .ucf-back, .ucf-card:not(.flipped) .ucf-front { visibility: visible; transition: visibility 0s .32s }
.ucf-top { display: flex; justify-content: space-between; align-items: center }
.ucf-num { font-family: var(--figures); font-size: .8rem; font-weight: 500; color: var(--ochre-d) }
.ucf-tag { padding: 4px 8px; border-radius: 4px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); background: var(--forest-tint) }
.ucf-title { font-size: 1.2rem; font-weight: 600; line-height: 1.25 }
.ucf-pitch { font-size: .95rem; line-height: 1.55; color: var(--ink-2) }
.ucf-flip { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 8px 0 0; background: none; border: 0; cursor: pointer; font: 600 .88rem var(--sans); color: var(--forest); align-self: flex-start }
.ucf-flip::after { content: ''; position: absolute; inset: 0; border-radius: 14px }
.ucf-flip:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; border-radius: 4px }
.ucf-turn { display: inline-block; font-size: 1.1rem; transition: transform .5s }
.ucf-card:hover .ucf-turn { transform: rotate(180deg) }
.ucf-back a { position: relative; z-index: 2 }
.ucf-label { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ochre-tint) }
.ucf-text { font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .88) }
.ucf-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 }
.ucf-list li { position: relative; padding-left: 20px; font-size: .9rem; line-height: 1.45 }
.ucf-list li::before { content: '✓'; position: absolute; left: 0; color: var(--ochre) }
.ucf-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px }
.ucf-more { font-size: .85rem; font-weight: 600; color: #fff; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5) }
.ucf-more:hover { box-shadow: inset 0 -2px 0 #fff }
.ucf-flip--back { margin: 0; padding: 0; font-size: 1.3rem; color: #fff; align-self: auto }
/* The eighth tile closes the 4×2 grid with an invitation */
.ucf-cta { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 22px; border-radius: 14px; border: 1.5px dashed var(--ochre-d); background: var(--ochre-tint) }
.ucf-cta-mark { font-size: 2.4rem; line-height: 1; font-weight: 300; color: var(--ochre-d) }
.ucf-cta .btn { margin-top: auto; align-self: flex-start }
/* Icons: forest lines, ochre accents, a little motion on hover */
.ucf-ic { width: 60px; height: 60px; margin: 8px 0 4px; overflow: visible }
.ucf-ic .s { fill: none; stroke: var(--forest); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.ucf-ic .a { fill: none; stroke: var(--ochre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.ucf-ic .af { fill: var(--ochre) }
.ucf-ic * { transform-box: fill-box; transform-origin: center }
.ic-sweep { transform-box: view-box; transform-origin: 32px 32px; animation: ic-spin 5s linear infinite }
@keyframes ic-spin { to { transform: rotate(360deg) } }
.ic-blip { animation: ic-blip 2.5s ease-in-out infinite }
.ic-blip:nth-of-type(2) { animation-delay: .8s }
.ic-blip:nth-of-type(3) { animation-delay: 1.6s }
@keyframes ic-blip { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
.ic-bar { transform-origin: bottom; transform: scaleY(.6); transition: transform .5s cubic-bezier(.2, .8, .2, 1) }
.ic-bar:nth-of-type(3) { transition-delay: .08s }
.ic-bar:nth-of-type(4) { transition-delay: .16s }
.ucf-card:hover .ic-bar { transform: scaleY(1) }
.ic-check, .ic-trail, .ic-trend { stroke-dasharray: 60; stroke-dashoffset: 0; transition: stroke-dashoffset .1s }
.ucf-card:hover .ic-check, .ucf-card:hover .ic-trail, .ucf-card:hover .ic-trend { animation: ic-draw .8s ease-out }
@keyframes ic-draw { from { stroke-dashoffset: 60 } to { stroke-dashoffset: 0 } }
.ucf-card:hover .ic-coin { animation: ic-coin .8s ease-in-out }
@keyframes ic-coin { 0%, 100% { transform: translateY(0) } 40% { transform: translateY(-6px) rotate(-12deg) } }
.ucf-card:hover .ic-spark { animation: ic-spark .9s ease-out }
@keyframes ic-spark { 0% { transform: translateY(6px); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
/* Entrance: cards rise in turn as the grid scrolls in (only once JS has opted in) */
.ucf-rise > * { opacity: 0; transform: translateY(16px); transition: opacity .7s ease-out, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 60ms) }
.ucf-rise.in > * { opacity: 1; transform: none }
.ucf-rise > .ucf-cta { transition-delay: 420ms }
@media (max-width:1100px) { .ucf-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width:560px) { .ucf-grid { grid-template-columns: 1fr; grid-auto-rows: auto } }
@media (prefers-reduced-motion: reduce) {
  .ucf-inner, .ucf-rise > * { transition: none }
  .ucf-ic *, .ucf-card:hover .ucf-ic * { animation: none !important }
}

/* Offers: an eyebrow instead of a number, flip cards of equal height */
.axis-head--plain { grid-template-columns: 1fr }
.axis-head--plain .eyebrow { margin-bottom: 20px }
.offer-grid { grid-auto-rows: 1fr }
.offer-front .offer-body { flex: none }
.offer-front .offer-tags { margin-top: 4px }
.offer-front { gap: 12px; padding: 34px 32px 26px; border-radius: 10px }
.offer-back { padding: 30px 32px 22px; border-radius: 10px }
.offer-flip .ucf-flip::after { border-radius: 10px }
.offer-detail { display: grid; gap: 6px; margin: 0 }
.offer-detail dt { margin-top: 10px; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ochre-tint) }
.offer-detail dt:first-child { margin-top: 0 }
.offer-detail dd { margin: 0; font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .88) }
.offer-detail .sig-list li { font-size: .95rem; color: rgba(255, 255, 255, .88) }
.offer-detail .sig-list li::before { color: var(--ochre) }
.offer-detail a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px }
@media (max-width:560px) { .offer-grid { grid-auto-rows: auto } }

/* Use-cases library: every case open, three columns */
.ucx { padding-top: 0 }
.ucx-case { padding: 48px 0; border-top: 1px solid var(--line-2); scroll-margin-top: 96px }
.ucx-case:last-child { border-bottom: 1px solid var(--line-2) }
.ucx-head { max-width: 760px; margin-bottom: 28px }
.ucx-head h2 { margin: 10px 0 12px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500 }
.ucx-pitch { font-size: 1.08rem; color: var(--ink-2) }
.ucx-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px }
@media (max-width:860px) { .ucx-cols { grid-template-columns: 1fr; gap: 24px } }

/* Method principles: a short title and a plain sentence, not a slogan */
.conviction-card h3 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 600; line-height: 1.25 }
.conviction-card h3 + p { padding-right: 0; font-family: var(--sans); font-size: 1rem; font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--ink-2) }

/* Game page */
.game-how { background: var(--paper-warm) }
.game-formats .sig-list li { font-size: 1.05rem }
.game-after { margin-top: 24px; font-size: 1.05rem; color: var(--ink-2) }

/* ─── Section rhythm: ground / white / tint, never the same twice in a row ───
   Home: hero and logos on ground, use cases on ground-2 (white cards), offers on
   off-white (tinted cards), method on forest tint, contact on off-white, footer on ground.
   Method: approach white, convictions ground-2, contact white. Game: how ground-2,
   formats ground, contact white. About: who ground-2, team ground, contact white.
   Use cases: library on ground-2, contact white. */
.uc-home { background: var(--ground-2) }
.axis-prepare { background: var(--surface-2) }
.offer-front { background: var(--ground); border-color: var(--line) }
.offer-flip:hover .offer-front { border-color: var(--forest-2) }
.msum { background: var(--forest-tint) }
.msum-grid h2 { color: var(--forest) }
.start { background: var(--surface-2) }
.approach-deep { background: var(--surface-2) }
.convictions-section { background: var(--ground-2) }
.ucx { background: var(--ground-2); padding-top: 64px }
.ucx-case:first-child { border-top: 0; padding-top: 0 }
.ucx-case:last-child { border-bottom: 0 }
.game-how { background: var(--ground-2) }
.game-formats { background: var(--ground) }
.ucf-card:hover .ucf-front { border-color: var(--forest-2) }