/* ==========================================================================
   INTELA — Design System
   Executive publication aesthetic: paper, charcoal, deep navy.
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Single type family per language: Hanken Grotesk (Latin) + Noto Sans JP
   (Japanese pages). Hierarchy is built with size, weight, and spacing —
   not typeface changes — per client direction. The true italic face of the
   same family is used only for the personal reflection quotes. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Same italic file under its own family name — used directly by the
   reflection quotes so every browser (Safari included) renders the true
   italic glyphs without relying on font-style matching. */
@font-face {
  font-family: "Hanken Grotesk Italic";
  src: url("../fonts/hanken-grotesk-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Self-hosted Noto Sans JP, subset to the glyphs used on the Japanese
   pages (variable weight). Scoped by unicode-range to Japanese blocks so
   it never downloads on English pages and never touches Latin glyphs
   (those stay on Hanken Grotesk). Removes the last third-party runtime
   dependency — no Google Fonts. */
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/noto-sans-jp-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+FF00-FFEF, U+4E00-9FFF, U+3400-4DBF, U+2015, U+2026, U+2018-201F;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #fdfdfb;
  --ivory: #f4f3ee;
  --ink: #191c21;
  --ink-2: #41464d;
  --ink-3: #60646b;
  --navy: #1b2a4a;
  --navy-deep: #16223c;
  --navy-abyss: #101a30;
  --steel: #9db2d4;          /* accent on dark */
  --hairline: #e4e2da;
  --hairline-dark: rgba(255, 255, 255, 0.14);

  --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  /* Legacy role tokens — both resolve to the sans family so every former
     serif/mono usage stays consistent with the single-family direction. */
  --font-serif: var(--font-sans);
  --font-mono: var(--font-sans);

  /* The minimum is viewport-aware on purpose. A rem-only minimum cannot
     shrink when the reader raises their default font size, so at 200% text
     resize the hero overflowed and — with overflow-x: clip below — the
     clipped words could not be reached by any means. WCAG 1.4.4. */
  --fs-display: clamp(min(2.65rem, 14vw), 1.1rem + 6.2vw, 5.6rem);
  --fs-h2: clamp(min(1.95rem, 10.5vw), 1.15rem + 3.2vw, 3.4rem);
  --fs-h3: clamp(min(1.3rem, 7vw), 1.12rem + 0.75vw, 1.65rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --fs-quote: clamp(min(1.5rem, 8vw), 1.1rem + 1.8vw, 2.5rem);
  --fs-eyebrow: 0.875rem;
  /* One size for all supporting copy — captions, list items, card body, button
     labels. These had drifted to 1 / 1.03125 / 1.05 / 1.075rem, which read as
     "several different sizes on one page" without buying any hierarchy, and
     the smallest of them were hard going for the executive audience. */
  --fs-support: 1.0625rem;

  --space-section: clamp(5rem, 3.75rem + 6vw, 8.5rem);
  --space-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  --gutter: clamp(1.375rem, 4.5vw, 3rem);
  --container: 75rem;
  --nav-h: 6rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-hover: 0.45s var(--ease-out);
}

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

html {
  /* Slightly enlarged root size: the audience includes senior executives,
     so every rem-based size scales up for comfortable reading. */
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

html, body {
  /* Decorative transforms (orbit, image zooms) must never create a
     horizontal scrollbar. `clip` where supported, `hidden` as fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 440;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

::selection { background: var(--navy); color: var(--paper); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 200;
  padding: 0.75em 1.25em;
  background: var(--navy);
  color: #fff;
  font-size: 0.9rem;
  transform: translateY(-300%);
  transition: transform 0.3s;
}
.skip-link:focus { transform: none; }

/* Japanese typography adjustments */
html[lang="ja"] body {
  line-height: 1.95;
  font-feature-settings: "palt";
}
html[lang="ja"] :is(h1, h2, h3) {
  line-height: 1.32;
  letter-spacing: 0.015em;
  font-weight: 600;
}
html[lang="ja"] { --fs-display: clamp(min(1.7rem, 9.5vw), 0.85rem + 4.2vw, 4.35rem); }
.hero__title { overflow-wrap: anywhere; }

/* WCAG 1.4.10 Reflow, at 200% text resize.
   A grid/flex item's automatic minimum size is its longest word, so at large
   text sizes these columns refused to shrink below min-content and pushed past
   .container — and overflow-x: clip then made the overspill unreachable.
   min-width: 0 lets the column shrink; overflow-wrap: anywhere lets a word that
   still cannot fit break rather than set the floor. Both are no-ops at
   comfortable sizes, where nothing is close to overflowing. */
.hero__grid > *,
.hero__lead,
.split > *,
.oi-split > *,
.founder > * { min-width: 0; }
.lead,
.prose p,
.quote,
.outcomes__title,
.exhibit__caption,
.exec-quote,
.callout__label { overflow-wrap: anywhere; }
html[lang="ja"] .hero__title { word-break: keep-all; }
/* keep-all is right at comfortable sizes, but at 200% text resize it is the
   single thing still clipping the Japanese hero — let it break there. */
@media (max-width: 640px) {
  html[lang="ja"] .hero__title { word-break: normal; }
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
  position: relative;
}
.section--ivory { background: var(--ivory); }
.section--dark {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(157, 178, 212, 0.14), transparent 60%),
    var(--navy-deep);
  color: rgba(255, 255, 255, 0.9);
}
.section--dark :is(h2, h3) { color: #fff; }

.section-head { max-width: 46rem; }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- Typography ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 540;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.eyebrow .no { color: var(--navy); }
.eyebrow::after {
  content: "";
  width: 3rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.section-head--center .eyebrow { justify-content: center; }
.eyebrow--center { justify-content: center; }
/* Balance the centered eyebrow: mirror the trailing rule with a leading one
   so the word sits on the true center axis, not left of it. */
.eyebrow--center::before, .section-head--center .eyebrow::before {
  content: "";
  width: 3rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.section--dark .eyebrow { color: var(--steel); }
.section--dark .eyebrow .no { color: #fff; }

.display {
  font-size: var(--fs-display);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 520;
  color: var(--ink);
}
.h2 {
  overflow-wrap: anywhere;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.016em;
  font-weight: 530;
  color: var(--ink);
  text-wrap: balance;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.008em;
  font-weight: 520;
}
.serif-accent {
  /* Formerly a serif-italic accent; neutralized to the single family for
     typeface consistency. Kept as a hook for future emphasis styling. */
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 38em;
}
.section--dark .lead { color: rgba(255, 255, 255, 0.88); }
.section-head :is(.lead, p) { margin-top: 1.5rem; }

.prose p + p { margin-top: 1.25em; }
/* 600, not the browser's 700 — emphasis everywhere, not just inside .prose. */
strong { font-weight: 600; }

.quote {
  font-family: var(--font-sans);
  font-weight: 470;
  font-size: var(--fs-quote);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--navy);
  text-wrap: balance;
}
html[lang="ja"] .quote { line-height: 1.55; letter-spacing: 0.01em; font-weight: 500; }

/* ---------- Links ---------- */
.link {
  --underline: currentColor;
  background-image: linear-gradient(var(--underline), var(--underline));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t-hover);
  padding-bottom: 2px;
}
.link:hover { background-size: 0% 1px; background-position: 100% 100%; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--dark :is(a, button):focus-visible,
.footer :is(a, button):focus-visible { outline-color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 1.05em 1.9em;
  border: 1px solid var(--navy);
  border-radius: 2px;
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-support);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--t-hover), border-color var(--t-hover),
              color var(--t-hover), transform 0.18s ease;
}
.btn .arrow { transition: transform var(--t-hover); flex: none; }
.btn:hover { background: var(--navy-abyss); border-color: var(--navy-abyss); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

@media (max-width: 560px) {
  .btn {
    width: 100%;
    justify-content: center;
  }
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: color-mix(in srgb, var(--navy) 35%, transparent);
}
.btn--ghost:hover {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

.section--dark .btn {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}
.section--dark .btn:hover { background: var(--steel); border-color: var(--steel); }
.section--dark .btn--ghost {
  background: transparent;
  color: #fff;
  /* On dark sections the border must clear WCAG 1.4.11 (3:1 non-text);
     a 14%-white hairline would be ~1.5:1, so use a stronger alpha here. */
  border-color: rgba(255, 255, 255, 0.45);
}
.section--dark .btn--ghost:hover { border-color: #fff; background: transparent; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 0.4s ease, box-shadow 0.4s ease,
              backdrop-filter 0.4s ease;
}
.nav.is-scrolled {
  background: rgba(253, 253, 251, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
/* Mark-only lockup: the wordmark under the icon was removed (it duplicated
   the INTELA set beside it). Sizes keep the icon at the same visual size it
   had inside the taller logo, so the nav rhythm is unchanged. */
.brand img { width: 45px; height: 42px; }
.brand__word {
  font-weight: 640;
  font-size: min(1.45rem, 8vw);
  letter-spacing: 0.34em;
  color: var(--navy);
  transform: translateY(1px);
}
/* The footer is the brand's signature moment — larger lockup than the nav */
.footer .brand img { width: 60px; height: 55px; }
.footer .brand__word { font-size: min(1.8rem, 10vw); }
@media (max-width: 560px) {
  :root { --nav-h: 5rem; }
  .nav .brand img { width: 36px; height: 34px; }
  .nav .brand__word { font-size: min(1.15rem, 7vw); }
  .footer .brand img { width: 49px; height: 45px; }
  .footer .brand__word { font-size: min(1.5rem, 9vw); }
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  font-size: 1rem;
  font-weight: 470;
}
.nav__links .link { --underline: var(--navy); color: var(--ink-2); background-size: 0% 1px; background-position: 100% 100%; }
.nav__links .link:hover { background-size: 100% 1px; background-position: 0 100%; color: var(--ink); }
.nav__links .link[aria-current] { color: var(--ink); background-size: 100% 1px; }
.lang-switch {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.45em 0.9em;
  transition: border-color var(--t-hover), color var(--t-hover);
}
.lang-switch:hover { border-color: var(--navy); color: var(--navy); }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 120;
  width: 44px; height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out), top 0.35s var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 25px; }
body.menu-open .nav-toggle span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.mobile-menu a {
  display: block;
  padding: 0.9rem 0;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 480;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--hairline);
  transform: translateY(1.5rem);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}
body.menu-open .mobile-menu a { transform: none; opacity: 1; }
body.menu-open .mobile-menu a:nth-child(2) { transition-delay: 0.05s; }
body.menu-open .mobile-menu a:nth-child(3) { transition-delay: 0.1s; }
body.menu-open .mobile-menu a:nth-child(4) { transition-delay: 0.15s; }
body.menu-open .mobile-menu a:nth-child(5) { transition-delay: 0.2s; }
body.menu-open { overflow: hidden; }
body.menu-open .nav {
  z-index: 130; /* keep brand + close toggle above the menu overlay */
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--nav-h) + clamp(3.5rem, 9vh, 7rem)); }
.hero__head { max-width: 62rem; }
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em;
  margin-block: -0.06em;
}
.hero__title .line-inner { display: block; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-block) clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-top: clamp(2.25rem, 5vw, 3.75rem);
}
.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  justify-self: start;
}
@media (min-width: 861px) {
  .hero__cta { justify-self: end; align-items: flex-end; text-align: right; }
}
.hero__lead p + p { margin-top: 1.25rem; }
.hero__media {
  margin-top: clamp(3.5rem, 8vw, 6.5rem);
  position: relative;
  overflow: hidden;
}
.hero__media img {
  /* Desktop: render at the photo's own aspect ratio so the full panorama
     (bridge, skyline, water) is always visible — identical in every
     browser, no viewport-dependent cropping. */
  width: 100%;
  height: auto;
  transform-origin: center;
}
@media (max-width: 700px) {
  .hero__media img {
    /* Phones: a 3.6:1 strip would be too thin — use a controlled crop. */
    height: clamp(13rem, 42vh, 20rem);
    object-fit: cover;
    object-position: center 60%;
  }
}

/* Full-width editorial interlude — a quiet visual break between chapters.
   The image is 24% taller than its frame; JS drifts it upward on scroll
   (subtle parallax), revealing the photo from peak to reflection. */
.interlude {
  overflow: hidden;
  height: clamp(18rem, 72vh, 40rem);
}
.interlude img {
  width: 100%;
  height: 124%;
  object-fit: cover;
  will-change: transform;
}
.hero__credit {
  position: absolute;
  right: 0.9rem; bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}
.hero__credit a { color: inherit; }
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(var(--ink-3), transparent);
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Split section (text + diagram) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-block) clamp(2.5rem, 7vw, 6.5rem);
  align-items: center;
}
.split__visual {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--ivory);
  padding: clamp(1.5rem, 3.5vw, 3rem);
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__visual { order: 2; max-width: 34rem; }
}

.diagram text {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Japanese diagram labels are full-width glyphs. The Latin tracking that gives
   the uppercase labels their air adds ~2px per character here, which pushed
   the Level 3 title to within 13px of the sloped edges once the figure grew.
   Japanese sets tight; drop the tracking so the labels sit inside the shapes. */
html[lang="ja"] .diagram text { letter-spacing: 0.02em; }

/* ---------- Card grids ---------- */
.cards {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--paper);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  position: relative;
  transition: background-color var(--t-hover);
}
.card__no {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.card .icon {
  width: 30px; height: 30px;
  stroke: var(--navy);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin: 2rem 0 1.25rem;
  transition: transform var(--t-hover);
}
.card:hover .icon { transform: translateY(-4px); }
.card:hover { background: #fff; }
.card h3 + p, .card .h3 + p {
  margin-top: 0.6rem;
  font-size: var(--fs-support);
  line-height: 1.65;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .cards--3 { grid-template-columns: 1fr; }
}

/* ---------- Capability orbit (dark OI section) ----------
   Organizational Intelligence at the center; its six capabilities revolve
   slowly around it. Pure CSS animation; static hexagon under
   prefers-reduced-motion. */
/* Two-column OI chapter: copy + outcomes left, orbit right (stacks on mobile) */
.oi-split {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  grid-template-areas:
    "copy visual"
    "outcomes visual";
  align-items: center;
  gap: 1rem clamp(2.5rem, 6vw, 5.5rem);
}
.oi-split__copy { grid-area: copy; align-self: end; }
.oi-split__visual { grid-area: visual; }
.oi-split__outcomes { grid-area: outcomes; align-self: start; }
@media (max-width: 980px) {
  .oi-split {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "visual" "outcomes";
  }
}

.orbit {
  position: relative;
  /* never wider than its column (two-col chapter) nor the small viewport */
  width: min(30rem, 100%, 86vw);
  aspect-ratio: 1 / 1;
  margin: 1rem auto;
}
.orbit::before {
  /* faint outer dashed ring for depth — echoes the diagram's HI ring */
  content: "";
  position: absolute;
  inset: 1.5%;
  border: 1px dashed rgba(255, 255, 255, 0.09);
  border-radius: 50%;
}
.orbit__path {
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
}
.orbit__center {
  position: absolute;
  inset: 29%;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1rem;
  background: radial-gradient(circle at 50% 30%, rgba(157, 178, 212, 0.2), rgba(255, 255, 255, 0.04) 72%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-weight: 570;
  font-size: clamp(1.05rem, 0.78rem + 1.25vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.008em;
  box-shadow: 0 0 70px rgba(157, 178, 212, 0.2);
  animation: orbit-breathe 7s ease-in-out infinite alternate;
}
.orbit__satellites {
  position: absolute;
  inset: 11%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: orbit-rotate 90s linear infinite;
}
/* Satellite positions as modifier classes (was inline style="--x;--y") so the
   CSP style-src can stay 'self' with no 'unsafe-inline'. Order matches markup. */
.orbit__sat--1 { --x: 50%;   --y: 0%; }
.orbit__sat--2 { --x: 93.3%; --y: 25%; }
.orbit__sat--3 { --x: 93.3%; --y: 75%; }
.orbit__sat--4 { --x: 50%;   --y: 100%; }
.orbit__sat--5 { --x: 6.7%;  --y: 75%; }
.orbit__sat--6 { --x: 6.7%;  --y: 25%; }
.orbit__sat {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  max-width: 8.5em;
  text-align: center;
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--fs-support);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.35;
  transform: translate(-50%, -50%);
  animation: orbit-counter 90s linear infinite;
}
.orbit__node {
  display: grid;
  place-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, rgba(157, 178, 212, 0.24), rgba(255, 255, 255, 0.02) 72%),
    var(--navy-deep);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.6);
}
.orbit__label {
  text-shadow: 0 2px 10px rgba(16, 26, 48, 0.9);
}
.orbit__sat .icon {
  width: 26px;
  height: 26px;
  stroke: var(--steel);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes orbit-rotate {
  to { transform: rotate(1turn); }
}
@keyframes orbit-counter {
  from { transform: translate(-50%, -50%) rotate(0turn); }
  to { transform: translate(-50%, -50%) rotate(-1turn); }
}
@keyframes orbit-breathe {
  from { box-shadow: 0 0 45px rgba(157, 178, 212, 0.14); }
  to { box-shadow: 0 0 95px rgba(157, 178, 212, 0.3); }
}
@media (max-width: 560px) {
  .orbit__sat { max-width: 6.5em; font-size: 0.9375rem; gap: 0.4rem; }
  .orbit__node { width: 48px; height: 48px; }
  .orbit__sat .icon { width: 21px; height: 21px; }
  .orbit__center { inset: 24%; font-size: 0.8125rem; padding: 0.5rem; }
}
/* Keep the center term unbroken — it wraps only at its explicit <br> */
html[lang="ja"] .orbit__center { word-break: keep-all; }
@media (prefers-reduced-motion: reduce) {
  .orbit__satellites,
  .orbit__sat,
  .orbit__center { animation: none; }
}

/* Dark capability cards */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline-dark);
  border: 1px solid var(--hairline-dark);
  border-radius: 4px;
  overflow: hidden;
  margin-top: var(--space-block);
}
.cap {
  background: var(--navy-deep);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  transition: background-color var(--t-hover);
}
.cap:hover { background: color-mix(in srgb, var(--navy-deep) 82%, #ffffff 5%); }
.cap .icon {
  width: 28px; height: 28px;
  stroke: var(--steel);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 1.1rem;
  transition: transform var(--t-hover), stroke var(--t-hover);
}
.cap:hover .icon { transform: translateY(-3px); stroke: #fff; }
.cap h3 {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 530;
  letter-spacing: 0.01em;
}
.cap p {
  margin-top: 0.4rem;
  font-size: var(--fs-support);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}
@media (max-width: 900px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cap-grid { grid-template-columns: 1fr; }
}

/* Outcomes list (dark section) */
.outcomes {
  margin-top: var(--space-block);
  padding-top: 2.5rem;
  border-top: 1px solid var(--hairline-dark);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 2rem clamp(2rem, 6vw, 5rem);
}
/* Stacked variant for the two-column OI chapter */
.outcomes--stack {
  display: block;
  margin-top: 2.75rem;
  padding-top: 2.25rem;
}
.outcomes--stack ul {
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}
.outcomes__title {
  font-size: var(--fs-support);
  font-weight: 500;
  color: #fff;
  max-width: 22em;
  line-height: 1.55;
}
.outcomes ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 2.5rem;
}
.outcomes li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-size: var(--fs-support);
  color: rgba(255, 255, 255, 0.88);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.outcomes li::before {
  content: "";
  flex: none;
  width: 0.95rem;
  height: 1px;
  background: var(--steel);
  transform: translateY(-0.28em);
}
@media (max-width: 860px) {
  .outcomes { grid-template-columns: 1fr; }
  .outcomes ul { grid-template-columns: 1fr; }
}

/* ---------- Callout ---------- */
.callout {
  margin-top: var(--space-block);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.75rem, 4vw, 3.5rem);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--navy);
  border-radius: 4px;
}
.callout .quote { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.1rem); }
/* Client flagged this kicker as the smallest, faintest thing on the page and
   asked for it at the same size as the copy, "preferably one size up". It now
   matches body copy and sits on the darker ink; the wide tracking alone
   carries the label role. */
.callout__label {
  font-family: var(--font-mono);
  font-size: var(--fs-support);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 1.25rem;
}

/* ---------- Executive Conversations — a quiet grid of executive quotes ---------- */
.exec-quotes {
  list-style: none;
  margin: clamp(2rem, 1.5rem + 2vw, 3.25rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}
.exec-quote {
  margin: 0;
  padding: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem) clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--navy);
  border-radius: 4px;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.62;
  text-wrap: pretty;
}
/* An odd-numbered list would leave the last card stranded beside a gap;
   let it run the full width instead. */
.exec-quotes > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .exec-quotes { grid-template-columns: 1fr; }
}

/* Inline question list (e.g. the new AI-era executive questions) — em-dash
   markers in the brand navy, sitting inside a .prose column. */
.q-list {
  margin: 1.35em 0;
  padding: 0;
  list-style: none;
}
.q-list li {
  position: relative;
  padding-left: 1.5em;
  margin-top: 0.7em;
}
.q-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--navy);
}

.section__actions { margin-top: var(--space-block); }

/* ---------- Founder ---------- */
.founder {
  display: grid;
  /* Portrait column capped smaller (client: photos looked too large);
     text takes the rest. Flip variant mirrors it. Portrait is centered
     against the text so a shorter photo doesn't leave a gap. */
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: var(--space-block) clamp(2.5rem, 7vw, 5.5rem);
  /* Portrait sits at its natural height, top-aligned to the name (client
     preference — no cropping/stretching; a shorter photo is fine). */
  align-items: start;
  /* Cap the whole profile so the text stays readable and the portrait
     stays adjacent to it (no floating gap at wide viewports). */
  max-width: 63rem;
}
.founder__portrait {
  position: relative;
  border-radius: 4px;
  background:
    radial-gradient(140% 110% at 30% 0%, #dfe4ec 0%, #c9d2e0 55%, #b6c2d6 100%);
  overflow: hidden;
}
.founder__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(27, 42, 74, 0.08);
  border-radius: inherit;
}
.founder__portrait img {
  width: 100%;
  display: block;
  filter: drop-shadow(-18px 24px 28px rgba(16, 26, 48, 0.28));
}
/* Framed variant: a full-bleed editorial photo (with its own background)
   rather than a cutout on a gradient. Used for the advisor portrait. */
.founder__portrait--framed {
  background: #eef1f5;
}
.founder__portrait--framed img {
  /* Full rectangular photo at its natural aspect — no shadow, no crop. */
  filter: none;
}
.founder__name { margin-top: 0; }
.founder__role {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.75rem;
}
.founder__bio { margin-top: 2rem; }
.founder__quote,
.founder__reflection {
  margin-top: var(--space-block);
  padding-top: 2.5rem;
  border-top: 1px solid var(--hairline);
}
/* Founder reflection — ONE italic voice at ONE size. All three lines share
   the family's true italic at a single size; hierarchy is carried only by a
   weight step and navy colour on the pivot — so the passage reads as one
   continuous testimony, not three mismatched fragments. The measure is wide
   enough that the pivot line sits on ONE line on desktop and wraps only when
   the viewport is genuinely too narrow. Japanese has no italic, so it rebuilds
   the same arc UPRIGHT via a real weight step + colour. */
.founder__reflection {
  max-width: 50rem;
}
.founder__reflection .callout__label {
  margin-bottom: 2rem;
}
.founder__reflection .founder__quote-intro,
.founder__reflection .quote,
.founder__reflection .founder__quote-close {
  margin: 0;
  font-family: "Hanken Grotesk Italic", var(--font-sans);
  font-style: normal;          /* glyphs are already italic by design */
  font-synthesis: none;        /* never fake a second slant on top */
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: 1.62;
  letter-spacing: -0.006em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.founder__reflection .founder__quote-intro { margin-bottom: 1.1em; }
/* The pivot — same family, same size; lifted only by navy ink, a modest real
   weight step, and a beat of space above and below. No rule/hairline. */
.founder__reflection .quote {
  margin-top: 1.5rem;
  color: var(--navy);
  font-weight: 500;
}
.founder__reflection .quote + .founder__quote-close { margin-top: 1.5rem; }
/* Japanese — no italic exists; same architecture, carried upright via a real
   weight step (400→600, the italic's job in EN) + navy colour, with roomier
   CJK leading and a touch of positive tracking for executive-size comfort. */
html[lang="ja"] .founder__reflection .founder__quote-intro,
html[lang="ja"] .founder__reflection .quote,
html[lang="ja"] .founder__reflection .founder__quote-close {
  font-family: var(--font-sans);   /* upright — cancel the italic family */
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.85;
  letter-spacing: 0.012em;
  color: var(--ink-2);
  text-wrap: normal;               /* CJK wraps at any char; keep natural */
}
html[lang="ja"] .founder__reflection .quote {
  font-weight: 600;                /* upright weight carries the emphasis italic gives in EN */
  color: var(--navy);
  letter-spacing: 0.015em;
}
@media (max-width: 600px) {
  .founder__reflection { max-width: 100%; }
}
@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; }
  .founder__portrait { max-width: 24rem; }
}

/* Mirrored profile (advisor) — text left, portrait right; portraits of the
   two profiles face each other down the page. */
.founder--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
.founder--flip .founder__portrait { order: 2; }
@media (max-width: 900px) {
  .founder--flip { grid-template-columns: 1fr; }
  .founder--flip .founder__portrait { order: 0; }
}

/* ---------- Insights cards ---------- */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--space-block);
}
.insight-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  transition: transform var(--t-hover), box-shadow var(--t-hover), border-color var(--t-hover);
}
/* Pictureless editorial index card: a navy accent rule stands in for art */
.insight-card::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--navy);
}
.insight-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--navy) 25%, var(--hairline));
  box-shadow: 0 30px 60px -30px rgba(27, 42, 74, 0.35);
}
.insight-card__art { overflow: hidden; }
.insight-card__art svg {
  width: 100%;
  height: auto;
  transition: transform 1.2s var(--ease-out);
}
.insight-card:hover .insight-card__art svg { transform: scale(1.045); }
.insight-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}
.insight-card__kicker {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.insight-card h3,
.insight-card .insight-card__title {
  margin-top: 0.25rem;
  font-size: 1.35rem;
  line-height: 1.35;
  font-weight: 520;
  letter-spacing: -0.008em;
}
.insight-card p {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.insight-card__more {
  margin-top: auto;
  padding-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--navy);
}
.insight-card__more .arrow { transition: transform var(--t-hover); }
.insight-card:hover .insight-card__more .arrow { transform: translateX(4px); }
@media (max-width: 900px) {
  .insight-grid { grid-template-columns: 1fr; max-width: 30rem; }
}

/* ---------- Contact ---------- */
.contact { text-align: center; }
.contact .h2 { font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4.4rem); }
.contact .lead { margin-inline: auto; margin-top: 1.75rem; max-width: 34em; }
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
}
.contact__mail {
  display: inline-block;
  margin-top: 2.25rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
}
.contact__mail:hover { color: #fff; }

/* ---------- Footer ---------- */
.footer {
  background: var(--navy-abyss);
  color: rgba(255, 255, 255, 0.6);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem;
  font-size: 0.9rem;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer .brand__word { color: #fff; }
.footer__tagline {
  margin-top: 1.25rem;
  max-width: 26em;
  line-height: 1.7;
}
.footer__nav {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer__nav a { color: rgba(255, 255, 255, 0.7); }
.footer__nav a:hover { color: #fff; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 2.25rem;
  font-size: 0.84375rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.footer__bottom a { color: rgba(255, 255, 255, 0.62); }
.footer__bottom a:hover { color: #fff; }

/* ---------- Article (insights) pages ---------- */
.article-hero {
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vh, 6rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.article-hero .display {
  font-size: clamp(2.1rem, 1.1rem + 3.8vw, 4rem);
  max-width: 20em;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.84375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.article-body {
  max-width: 44rem;
}
/* Same kicker role as .callout__label, so it carries the same size. Was
   0.84375rem (~14px) — the smallest text on the article pages, and the exact
   pattern the client flagged as hard to read on the homepage. */
.article-body .label {
  font-family: var(--font-mono);
  font-size: var(--fs-support);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 3rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.article-body .label::after {
  content: "";
  width: 2.5rem; height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.article-question {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--ivory);
  border-radius: 4px;
  border: 1px solid var(--hairline);
  margin-bottom: 3rem;
}
.article-question .quote { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); }
.reflection {
  margin-top: 3.5rem;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 4px;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.85);
}
.reflection .label { color: var(--steel); margin-top: 0; }
.reflection .quote { color: #fff; }
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
  margin-top: var(--space-section);
}
.article-nav a {
  background: var(--paper);
  padding: 2rem var(--gutter);
  transition: background-color var(--t-hover);
}
.article-nav a:hover { background: var(--ivory); }
.article-nav .dir {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.article-nav .title {
  display: block;
  margin-top: 0.6rem;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.4;
}
.article-nav a:last-child { text-align: right; }
@media (max-width: 700px) {
  .article-nav { grid-template-columns: 1fr; }
  .article-nav a:last-child { text-align: left; }
}

/* ---------- Reveal system (JS-gated so no-JS users see everything) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal],
  html.js [data-hero-fade] {
    opacity: 0;
    transform: translateY(26px);
    will-change: transform, opacity;
  }
  html.js .hero__title .line-inner {
    transform: translateY(112%);
  }
  html.js [data-draw] :is(path, line, circle, ellipse, polyline) {
    /* dash values are set per-element by JS before first paint of the section */
  }
}

/* Keyboard users always get content */
html.no-js [data-reveal],
html.no-js [data-hero-fade] { opacity: 1; transform: none; }

/* Advisor (06) and Insights (07) are both paper-bg; trim the shared seam so
   the doubled section padding doesn't read as an undifferentiated void. */
#advisor { padding-bottom: clamp(2rem, 1rem + 2vw, 3.25rem); }
#insights { padding-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }

/* ---------- Spacing utilities ----------
   These replace one-off inline style="margin-top:…" / "padding-top:…" so the
   Content-Security-Policy style-src can be 'self' with no 'unsafe-inline'. */
.u-mt-0   { margin-top: 0; }
.u-mt-1   { margin-top: 1rem; }
.u-mt-15  { margin-top: 1.5rem; }
.u-mt-175 { margin-top: 1.75rem; }
.u-mt-2   { margin-top: 2rem; }
.u-pt-0   { padding-top: 0; }

/* ---------- Orbit: four-capability layout (Think / Decide / Learn / Adapt) ---------- */
.orbit__sat--n1 { --x: 50%;  --y: 0%; }
.orbit__sat--n2 { --x: 96%;  --y: 50%; }
.orbit__sat--n3 { --x: 50%;  --y: 100%; }
.orbit__sat--n4 { --x: 4%;   --y: 50%; }

/* Mission figure — the three-intelligence overlap, centred and a touch wider
   than a text column so the geometry can breathe. */
/* Widened ~25% (client: the value pyramid is the key figure and read too
   small). Both exhibits that use this wrapper scale with it. */
.tri-figure {
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0;
  max-width: 42.5rem;
}
.diagram--tri { width: 100%; height: auto; }

/* The triple overlap is the point of the Venn (client), so a soft halo sits
   behind it and pulls the eye there. Gradient stops are styled from CSS so the
   dark theme can recolour them the way it recolours the rest of the diagram. */
/* Kept deliberately faint on paper: the solid navy intersection already carries
   the contrast here, so anything stronger reads as a smudge behind the circles
   rather than a glow. The dark theme, where gold genuinely glows on near-black,
   raises this in noir.css. */
.venn-focus__in { stop-color: var(--navy); stop-opacity: 0.07; }
.venn-focus__out { stop-color: var(--navy); stop-opacity: 0; }

/* Capability-to-advantage flow — three steps read left to right (client asked
   for a horizontal figure). Built from real elements rather than a fixed
   viewBox SVG so the labels stay on the type scale at every width, and stack
   vertically on phones where three columns would shrink them. */
/* Spans the container and shares the copy's left edge — centring it under the
   left-aligned section head made it read as indented rather than deliberate.
   Matches how .exec-quotes sits in the same sections. */
.flow-figure {
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
}
.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(0.5rem, 1.4vw, 1.1rem);
}
.flow__step {
  display: grid;
  align-content: center;
  gap: 0.45rem;
  padding: clamp(1.35rem, 2.4vw, 2.1rem) clamp(0.85rem, 1.8vw, 1.6rem);
  text-align: center;
  background: var(--ivory);
  border: 1px solid var(--navy);
  border-radius: 4px;
}
.flow__step--key { background: var(--navy); border-color: var(--navy); }
.flow__title {
  font-size: clamp(1.0625rem, 0.92rem + 0.6vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--navy);
  text-wrap: balance;
}
.flow__step--key .flow__title { color: #fff; }
.flow__sub {
  font-size: var(--fs-support);
  line-height: 1.45;
  color: var(--ink-2);
}
.flow__step--key .flow__sub { color: var(--steel); }
.flow__arrow {
  display: grid;
  place-content: center;
  color: var(--navy);
}
.flow__arrow svg { width: clamp(1.5rem, 3vw, 2.25rem); height: auto; }
/* Stack below ~880px. Three across still technically fits down to ~760, but by
   then the centre plate is squeezed to ~200px and the Japanese label
   (組織インテリジェンス) clears it by a couple of pixels — one font fallback away
   from breaking mid-word. Stacked is more legible at that size anyway. */
@media (max-width: 880px) {
  .flow { grid-template-columns: 1fr; }
  .flow__arrow svg { transform: rotate(90deg); }
}

/* ---------- Exhibits ----------
   Diagrams are presented the way a management consultancy presents evidence:
   a quiet numbered label, a hairline, and an analytical caption underneath.
   It is the single strongest cue of institutional rigour — and costs nothing
   visually, because it uses the type and hairlines already in the system. */
.exhibit { margin-top: clamp(1rem, 0.75rem + 1vw, 1.75rem); }
.exhibit__label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.35rem;
}
.exhibit__caption {
  margin-top: 1.1rem;
  font-size: var(--fs-support);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 34em;
}
.section--dark .exhibit__label {
  color: rgba(255, 255, 255, 0.66);
  border-bottom-color: var(--hairline-dark);
}
.section--dark .exhibit__caption { color: rgba(255, 255, 255, 0.66); }

/* On phones the exhibit panel's inset was eating ~50px of diagram width,
   shrinking the SVG (and therefore its labels). Reclaim it. */
@media (max-width: 700px) {
  .split__visual { padding-left: 0.9rem; padding-right: 0.9rem; }
  .tri-figure { max-width: 100%; }
}

/* ---------- Dark-section corrections ----------
   .quote carries the navy ink that suits paper; on the dark chapter that made
   it navy-on-navy (~1.05:1) and effectively invisible. Give it paper ink. */
.section--dark .quote { color: #fff; }
.section--dark .outcomes__title { color: rgba(255, 255, 255, 0.72); }

/* Orbit labels are short by design — never break them mid-word (Japanese
   wraps at any character, which split 判断する across two lines). */
.orbit__label { white-space: nowrap; }

/* Diagram labels are uppercase by design, but descriptive sub-captions are
   prose — uppercasing + 0.1em tracking made them far wider than their shape
   and they overflowed the band. Opt those lines out. */
.diagram text.dgm-sub {
  text-transform: none;
  letter-spacing: 0.012em;
}

/* Comfortable touch targets: footer and inline links measured ~28px tall.
   They clear the WCAG 24px minimum but sit under the 44px comfort target, so
   give them breathing room on touch widths without loosening desktop density. */
@media (max-width: 860px) {
  .footer__nav .link { padding-block: 0.5rem; }
  .contact__mail { display: inline-block; padding-block: 0.5rem; }
}

/* ---------- Language notice ----------
   Replaces the old automatic redirect. Offers English to a reader whose browser
   does not prefer Japanese, without moving them — so the Japanese homepage stays
   crawlable at its own URL. Fixed to the bottom so it never shifts layout. */
.lang-notice {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  transform: translateX(-50%);
  z-index: 250;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  max-width: min(34rem, calc(100vw - 2 * var(--gutter)));
  padding: 0.9rem 0.9rem 0.9rem 1.35rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  box-shadow: 0 18px 50px -28px rgba(16, 26, 48, 0.45);
}
.lang-notice__text {
  font-size: var(--fs-support);
  line-height: 1.45;
  color: var(--ink-2);
}
.lang-notice__link {
  flex: none;
  font-size: var(--fs-support);
  font-weight: 560;
  color: var(--navy);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.lang-notice__link:hover { opacity: 0.75; }
.lang-notice__close {
  flex: none;
  display: grid;
  place-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.lang-notice__close:hover { color: var(--ink); background: var(--ivory); }
.lang-notice__close svg { width: 15px; height: 15px; display: block; }
@media (max-width: 560px) {
  .lang-notice { flex-wrap: wrap; padding-left: 1.1rem; }
  .lang-notice__text { flex: 1 1 100%; }
}

/* ---------- Advisory (two or more peers) ----------
   With a single advisor the full-width founder row read fine. At three people
   the alternating rows became a repetitive list and the founder stopped
   reading as the founder, so advisors now sit together as peers: the founder
   keeps the feature treatment, the advisory is a grid that scales. */
.advisors {
  display: grid;
  grid-template-columns: 1fr;          /* stacked, per founder review */
  gap: var(--space-block);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.advisor {
  display: grid;
  /* Mirrors .founder's proportions deliberately. The advisory looked unbalanced
     because its photo was less than half the height of its text (249px vs 522px,
     a 303px gap) while the founder's photo nearly matches his (452 vs 495, an
     87px gap). Same column gap and same 654px text measure as the founder block,
     with a smaller portrait so the founder still reads as the founder. */
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--space-block) clamp(2.5rem, 7vw, 5.5rem);
  align-items: start;
  min-width: 0;
  /* Stacked, each row spans the container — so cap the measure. Without this
     the bio runs the full ~1180px and lines hit ~130 characters, well past
     comfortable reading. 46rem matches .section-head, so the advisory text
     block lines up with every other text column on the page. */
  max-width: 61rem;
}
.advisor > * { min-width: 0; }
.advisor__portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  background: radial-gradient(140% 110% at 30% 0%, #dfe4ec 0%, #c9d2e0 55%, #b6c2d6 100%);
}
.advisor__portrait::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(27, 42, 74, 0.08);
  border-radius: inherit;
}
.advisor__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder until a portrait is supplied — deliberate, not a broken image.
   Swap in an <img> and this rule stops applying. */
.advisor__monogram {
  display: grid;
  place-content: center;
  height: 100%;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--navy);
  opacity: 0.55;
}
.advisor__name {
  font-size: min(clamp(1.3rem, 1.05rem + 0.85vw, 1.7rem), 9vw);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 560;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.advisor__role {
  margin-top: 0.35rem;
  font-size: var(--fs-support);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.advisor__bio { margin-top: 1rem; }
.advisor__bio p { font-size: var(--fs-support); line-height: 1.7; color: var(--ink-2); }
.advisor__bio p + p { margin-top: 0.9em; }
/* Tablet: the full-size portrait eats too much of the row — at 768px it left
   the bio at 44 characters. Step it down before the phone layout kicks in. */
@media (max-width: 900px) {
  .advisor { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
             gap: var(--space-block) clamp(1.5rem, 4vw, 2.5rem); }
}
/* On a phone the portrait beside the text leaves the bio ~144px wide at 320px
   — about 16 characters a line. Put the portrait above instead so the text gets
   the full column. */
@media (max-width: 560px) {
  .advisor { grid-template-columns: 1fr; gap: 1rem; }
  .advisor__portrait { width: 9rem; }
}