/* ============================================================================
   M2AI · AURORA — Base / shared foundation for ALL pages.
   Depends on tokens.css (load it FIRST). Hand-written vanilla CSS.

   Sections
     01 Reset & root            06 Buttons
     02 Base typography (JP)     07 Header / nav
     03 Links & selection        08 Footer
     04 Layout & containers      09 Aurora backdrop (stage + cursor glow)
     05 Glass + cards            10 Grafted editorial: VRL index · 明朝 watermark
                                    · named 版面 grid · telemetry strip · meeting beat
     11 Reveal & utilities       12 Responsive    13 Reduced-motion
   ========================================================================== */

/* ── 01 · Reset & root ───────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  background: var(--ink-900);
  color: var(--text-hi);
  line-height: var(--lh-ui);
  font-size: var(--fs-body);
  overflow-x: hidden;                       /* structural guard vs h-scroll     */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;          /* tighten JP punctuation           */
  min-height: 100%;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; }

/* ── 02 · Base typography ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: var(--lh-head); }

/* English / Latin runs — Sora, with palt disabled so Latin keeps native metrics */
.en, [lang="en"] {
  font-family: var(--font-display);
  font-feature-settings: normal;
}
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.mincho { font-family: var(--font-mincho); }

/* Reusable display heads (pages compose these) */
.h-hero {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-hero); line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
}
.h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-h2); line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}
.h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h3); line-height: var(--lh-head); letter-spacing: var(--ls-head);
}
.lead {
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  color: var(--text-mid); max-width: var(--measure-narrow);
}
.prose { max-width: var(--measure); }
.prose p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-mid); }
.prose p + p { margin-top: 22px; }
.prose .hot { color: var(--text-hi); font-weight: 500; }   /* emphasise verbatim core */

/* Eyebrow / caps label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-caps); letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase; color: var(--accent-ink);
}
.eyebrow .bar { width: 34px; height: 1px;
  background: linear-gradient(90deg, currentColor, transparent); opacity: .8; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 14px var(--accent);
  animation: m2-pulse var(--loop-pulse) ease-in-out infinite; }
.eyebrow--warm { color: var(--accent-ink-warm); }

/* The signature gradient text — cyan → warm, ALWAYS this direction.
   Use .grad on display heads / words ("Be Happy", "豊かなシナジー"). */
.grad {
  background: linear-gradient(96deg,
    var(--aurora-cyan) 0%, var(--aurora-teal) 24%, var(--aurora-violet) 50%,
    var(--aurora-peach) 78%, var(--aurora-amber) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: m2-hue var(--loop-hue) ease-in-out infinite;
}
/* On paper the decorative spectrum drops below 3:1 (the warm half disappears),
   so re-point .grad to the deepened AA-safe ink stops. Direction (cyan→warm)
   and animation are preserved; only the stop colours deepen. */
[data-theme="light"] .grad {
  background-image: linear-gradient(96deg,
    var(--grad-ink-cyan) 0%, var(--grad-ink-teal) 24%, var(--grad-ink-violet) 50%,
    var(--grad-ink-peach) 78%, var(--grad-ink-warm) 100%);
}
/* The smiley — the one glowing warm accent. Pair with .en. */
.smile {
  font-family: var(--font-display); font-weight: 400;
  color: var(--aurora-amber); display: inline-block;
  text-shadow: 0 0 36px rgba(255,206,138,.6), 0 0 70px rgba(255,157,126,.34);
  animation: m2-bob var(--loop-bob) ease-in-out infinite;
}
[data-theme="light"] .smile {
  color: var(--aurora-peach);
  text-shadow: 0 0 22px rgba(238,127,99,.34);
}

/* ── 03 · Links & selection ──────────────────────────────────────────────── */
a { color: inherit; text-decoration: none; }
.link {
  color: var(--accent-ink);
  text-underline-offset: 4px; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 45%, transparent);
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.link:hover { text-decoration-color: var(--accent-ink); }

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Keyboard focus — high-contrast ring (WCAG 2.4.7 / 2.4.11). Keyboard nav only.
   Use --accent-ink (dark 14.47:1, light 7.9:1) so the ring clears 3:1 on BOTH
   the night canvas AND paper; raw --accent (cyan #27c4c0) is only 2.08:1 on
   paper and would be invisible on the light company/contact pages. */
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: var(--r-xs); }
a:focus-visible, button:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-ink) 30%, transparent); }
:focus:not(:focus-visible) { outline: none; }

/* Skip link */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: var(--z-skip);
  background: var(--accent); color: #04121a;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  padding: 11px 20px; border-radius: var(--r-sm); transition: top var(--dur-1);
}
.skip:focus { top: 16px; }

/* ── 04 · Layout & containers ────────────────────────────────────────────── */
.shell { position: relative; z-index: var(--z-content); }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--text { max-width: var(--maxw-text); }

.section {
  position: relative; padding-block: var(--section-y);
  /* clip decorative bleed (kanji watermark, local glows) so an off-edge
     element can never create document horizontal scroll. `clip` (not `hidden`)
     does NOT make a scroll container, so sticky/anchored content still works. */
  overflow-x: clip;
}
.section--lg { padding-block: var(--section-y-lg); }
.section__head { margin-bottom: clamp(34px, 5vw, 64px); }

/* faint hairline rule — section divider in the 版面 spirit */
.rule { height: 1px; border: 0; background: var(--rule); }

/* ── 05 · Glass + cards ──────────────────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  -webkit-backdrop-filter: blur(14px) saturate(var(--glass-sat));
  backdrop-filter: blur(14px) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.glass-card {
  position: relative; overflow: hidden;
  padding: clamp(30px, 3.6vw, 52px); border-radius: var(--r-xl);
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-bd);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--glass-hi);
}
/* top hairline = the cyan→warm seam of light across a card edge */
.glass-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent,
    rgba(94,240,230,.6), rgba(255,157,126,.5), transparent);
}
[data-theme="light"] .glass-card::before {
  background: linear-gradient(90deg, transparent,
    rgba(39,196,192,.5), rgba(238,127,99,.4), transparent);
}

/* Chip — floating stat / key phrase */
.chip {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 14px 22px; border-radius: var(--r-md);
  background: var(--glass-bg); border: 1px solid var(--glass-bd);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.chip .k { font-family: var(--font-display); font-size: 20px; font-weight: 600;
  background: linear-gradient(92deg, var(--aurora-cyan), var(--aurora-peach));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.chip .v { font-size: 11.5px; letter-spacing: .14em; color: var(--text-lo); text-transform: uppercase; }

/* Key-phrase pill (e.g. "Meets AI :) Be Happy") */
.keypill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  font-family: var(--font-display); font-size: 14px; color: var(--accent-ink);
}

/* Pillar card */
.pillar {
  position: relative; overflow: hidden;
  padding: 30px 26px; border-radius: var(--r-lg);
  background: var(--glass-bg); border: 1px solid var(--glass-bd);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform var(--dur-3) var(--ease), border-color var(--dur-3), box-shadow var(--dur-3);
}
.pillar:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--aurora-violet) 40%, transparent);
  box-shadow: var(--shadow-3);
}
.pillar .ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 20px;
  background: linear-gradient(150deg, rgba(94,240,230,.18), rgba(123,107,240,.14));
  border: 1px solid var(--glass-bd);
}
/* pillar head — h3 (correct level under the section h2) or legacy h4, same look */
.pillar h4, .pillar h3, .pillar .pillar__h { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); margin-bottom: 9px; color: var(--text-hi); }
.pillar p  { font-size: 14px; color: var(--text-lo); line-height: 1.85; }

/* ── 06 · Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  padding: 15px 30px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid transparent; transition: transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease), border-color var(--dur-2), background var(--dur-2);
  -webkit-tap-highlight-color: transparent;
}
.btn .arr { transition: transform var(--dur-2) var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

/* PRIMARY — dark ink on the gradient (13:1). Never coral+white. */
.btn-primary { color: var(--btn-fg); background: var(--btn-grad); box-shadow: var(--btn-shadow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); }

/* GHOST — glass with a luminous edge on hover */
.btn-ghost {
  color: var(--text-hi); border-color: var(--glass-bd); background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: color-mix(in srgb, var(--aurora-violet) 55%, transparent); box-shadow: var(--glow-violet); }

.btn-block { display: flex; width: 100%; }

/* ── 07 · Header / nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-2), border-color var(--dur-2), backdrop-filter var(--dur-2);
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--ink-800) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--glass-bd);
}
[data-theme="light"] .nav.is-scrolled { background: color-mix(in srgb, var(--ink-900) 82%, transparent); }

.nav__in {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 40px; height: 40px; flex: none; color: var(--accent); }
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: .01em; color: var(--text-hi); }
.brand__name b { color: var(--brand-2); font-weight: 600; }
.brand__reading { font-size: 11px; letter-spacing: var(--ls-brand); color: var(--text-lo); text-transform: uppercase; margin-top: 3px; }

.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links a {
  position: relative; font-family: var(--font-display); font-size: 14px; font-weight: 400;
  letter-spacing: .04em; color: var(--text-mid); padding: 9px 16px; border-radius: var(--r-pill);
  transition: color var(--dur-1);
}
.nav__links a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 1px;
  background: linear-gradient(90deg, var(--aurora-cyan), var(--aurora-peach));
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out);
}
.nav__links a:hover { color: var(--text-hi); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--text-hi); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta {
  margin-left: 10px; border: 1px solid var(--glass-bd); background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 9px 20px; border-radius: var(--r-pill); color: var(--text-hi) !important;
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.nav__cta:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: var(--glow-cyan); }
.nav__cta::after { display: none; }

.nav__toggle {
  display: none; background: none; border: 1px solid var(--glass-bd); border-radius: var(--r-sm);
  width: 44px; height: 44px; cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center;
}
.nav__toggle span { display: block; width: 20px; height: 1.6px; background: var(--text-hi); transition: transform var(--dur-1), opacity var(--dur-1); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* ── 08 · Footer ─────────────────────────────────────────────────────────── */
.foot {
  position: relative; z-index: var(--z-content);
  border-top: 1px solid var(--glass-bd);
  padding-block: clamp(48px, 7vw, 80px); margin-top: clamp(40px, 6vw, 80px);
}
.foot__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.foot__brand .brand__mark { width: 44px; height: 44px; }
.foot__tagline { margin-top: 18px; font-size: 13px; color: var(--text-lo); line-height: 1.9; max-width: 32ch; }
/* the 4th core value, stated verbatim site-wide (brand register, quiet) */
.foot__value { margin-top: 10px; font-size: 13px; color: var(--text-mid); line-height: 1.8; max-width: 32ch; }
.foot__col h5 {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-lo); margin-bottom: 16px; font-weight: 500;
}
.foot__col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.foot__col a, .foot__col span { font-size: 14px; color: var(--text-mid); transition: color var(--dur-1); }
.foot__col a:hover { color: var(--text-hi); }
.foot__facts { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--text-lo); line-height: 1.7; }
.foot__facts b { color: var(--text-mid); font-weight: 500; }
.foot__bar {
  display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: center;
  margin-top: clamp(36px, 5vw, 56px); padding-top: 26px; border-top: 1px solid var(--rule);
}
.foot__bar p { font-size: 12.5px; color: var(--text-lo); }
.foot__bar .en { color: var(--text-mid); }
.foot__bar .smile-mini { color: var(--accent-ink); }

/* ── 09 · Aurora backdrop (the stage) ────────────────────────────────────── */
.aurora-stage {
  position: fixed; inset: 0; z-index: var(--z-stage); overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, #0b1838 0%, var(--ink-800) 38%, var(--ink-900) 100%);
}
[data-theme="light"] .aurora-stage {
  background: radial-gradient(120% 90% at 50% -10%, #ffffff 0%, var(--ink-800) 42%, var(--ink-900) 100%);
}
#flow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--flow-opacity); }

/* Big soft aurora blobs. blur(48px) (was 70px) keeps the look but the raster
   cost drops sharply (blur scales super-linearly with radius). will-change is
   NOT set permanently: 3 always-on 46–60vw compositor layers is excessive and
   pins GPU memory even on the static light pages; the drift animation alone
   promotes them only while animating. */
.ribbon { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .5; mix-blend-mode: screen; }
.ribbon--1 { width: 60vw; height: 60vw; left: -12vw; top: -18vw; background: radial-gradient(circle, var(--aurora-teal), transparent 62%); animation: m2-drift1 var(--loop-drift) var(--ease) infinite alternate; }
.ribbon--2 { width: 54vw; height: 54vw; right: -10vw; top: -8vw; background: radial-gradient(circle, var(--aurora-violet), transparent 60%); animation: m2-drift2 calc(var(--loop-drift) + 4s) var(--ease) infinite alternate; }
.ribbon--3 { width: 46vw; height: 46vw; left: 24vw; bottom: -22vw; background: radial-gradient(circle, var(--aurora-peach), transparent 60%); opacity: .34; animation: m2-drift3 calc(var(--loop-drift) + 2s) var(--ease) infinite alternate; }
[data-theme="light"] .ribbon { opacity: .22; mix-blend-mode: multiply; }
[data-theme="light"] .ribbon--3 { opacity: .16; }

.grain {
  position: absolute; inset: 0; opacity: .05; pointer-events: none; mix-blend-mode: overlay;
  /* numOctaves dropped 2→1: at opacity .05 the second octave is imperceptible
     but roughly doubles the one-time feTurbulence rasterisation cost. Single
     octave keeps the grain texture for far less paint cost. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 120% at 50% 30%, transparent 52%, rgba(2,4,10,0.72) 100%);
}
[data-theme="light"] .vignette { background: radial-gradient(130% 120% at 50% 30%, transparent 60%, rgba(14,42,51,0.06) 100%); }

/* cursor-following "intelligence light" — pointer:fine only (set by motion.js) */
.cursor-glow {
  position: fixed; width: 520px; height: 520px; left: 0; top: 0; z-index: var(--z-cursor);
  pointer-events: none; transform: translate(-50%,-50%); border-radius: 50%;
  mix-blend-mode: screen; opacity: 0; transition: opacity var(--dur-3) ease;
  background: radial-gradient(circle, rgba(94,240,230,0.16) 0%, rgba(123,107,240,0.10) 34%, rgba(255,157,126,0.07) 56%, transparent 70%);
}
[data-theme="light"] .cursor-glow { display: none; }

/* ── 10 · Grafted editorial layer ────────────────────────────────────────── */

/* 10a · Named 版面 grid: [margin · index · body · rail] + hairline gutter rules.
   Wrap a section's inner content; place .vrl-index in col 1, content in col "body". */
.canvas-grid {
  display: grid;
  grid-template-columns: [edge] var(--grid-index) [body] minmax(0,1fr) [rail] var(--grid-rail) [end];
  column-gap: clamp(20px, 3vw, 44px);
  position: relative;
}
.canvas-grid > .col-body { grid-column: body; }
.canvas-grid > .col-rail { grid-column: rail; }
.canvas-grid > .col-full { grid-column: edge / end; }
/* hairline gutter rule between index and body */
.canvas-grid::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--grid-index);
  width: 1px; background: var(--rule); pointer-events: none;
}

/* 10b · Vertical-RL Japanese index column (01–04 / Vision・Service…) */
.vrl-index {
  grid-column: edge; writing-mode: vertical-rl; text-orientation: mixed;
  display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 26px;
  font-feature-settings: "palt" 1; user-select: none;
}
.vrl-index li { display: inline-flex; align-items: center; gap: 12px; }
.vrl-index .num {
  font-family: var(--font-display); font-size: 12px; letter-spacing: .18em;
  color: var(--accent-ink); font-feature-settings: "tnum" 1;
}
.vrl-index .ja { font-size: 14px; letter-spacing: .22em; color: var(--text-lo); }
.vrl-index a { transition: color var(--dur-1); }
.vrl-index a:hover .ja, .vrl-index [aria-current] .ja { color: var(--text-hi); }
.vrl-index a:hover .num, .vrl-index [aria-current] .num { color: var(--accent); }

/* 10c · Giant ultra-faint 明朝 kanji watermark, bleeding off the right edge */
.kanji-watermark {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  right: -0.18em; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mincho); font-weight: 600; line-height: .8;
  font-size: clamp(220px, 38vw, 560px);
  color: var(--watermark);
  -webkit-user-select: none;
}
.kanji-watermark--left { right: auto; left: -0.18em; }
.kanji-watermark--top { top: -0.1em; transform: none; }

/* 10d · Monospace telemetry strip — flow-field readouts (specialist instrument).
   Use SPARINGLY: a hero foot, or a deep service/tech section. Not over the lede. */
.telemetry {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .04em;
  color: var(--text-lo); font-feature-settings: "tnum" 1;
}
.telemetry .t-item { display: inline-flex; align-items: baseline; gap: 8px; }
.telemetry .t-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--accent); align-self: center;
  animation: m2-pulse var(--loop-pulse) ease-in-out infinite;
}
.telemetry .t-label { text-transform: uppercase; letter-spacing: .14em; opacity: .8; }
.telemetry .t-val { color: var(--accent-ink); font-variant-numeric: tabular-nums; min-width: 3.2ch; display: inline-block; }
.telemetry .t-unit { color: var(--text-faint); }

/* 10e · Human × AI "meeting beat" — two presences drift together, overlap = spark.
   Scroll-revealed sub-scene. motion.js may animate .meeting.in; CSS is the resting/keyframe form. */
.meeting { position: relative; height: 220px; max-width: 560px; margin-inline: auto; }
.meeting .being {
  position: absolute; top: 50%; width: 132px; height: 132px; border-radius: 50%;
  transform: translateY(-50%); filter: blur(6px); mix-blend-mode: screen; opacity: .92;
}
.meeting .being--human { left: 6%;  background: radial-gradient(circle, var(--aurora-cyan), transparent 68%); }
.meeting .being--ai    { right: 6%; background: radial-gradient(circle, var(--aurora-amber), transparent 68%); }
.meeting .spark {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%,-50%) scale(0); opacity: 0;
  background: radial-gradient(circle, #fff, var(--aurora-peach) 40%, transparent 72%);
  mix-blend-mode: screen;
  box-shadow: 0 0 40px 16px rgba(255,206,138,.5);
}
.meeting .glyph {                               /* the instantly-legible 人 × AI = :) */
  position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 14px; letter-spacing: .22em;
  color: var(--text-lo); white-space: nowrap;
}
.meeting .glyph b { color: var(--accent-ink); font-weight: 500; }
/* When revealed: drift the two beings inward and ignite the spark. */
.js .meeting .being--human { animation: m2-meet-l 2.6s var(--ease) both paused; }
.js .meeting .being--ai    { animation: m2-meet-r 2.6s var(--ease) both paused; }
.js .meeting .spark        { animation: m2-spark 2.6s var(--ease-out) both paused; }
.meeting.in .being--human, .meeting.in .being--ai, .meeting.in .spark { animation-play-state: running; }
[data-theme="light"] .meeting .being { mix-blend-mode: multiply; opacity: .5; }

/* 10f · Spout breathing motif (the whale's exhale → :) ) — reusable accent.
   A rising column of dots. Echoes the primary mark. */
.spout { display: flex; flex-direction: column-reverse; align-items: center; gap: 9px; width: fit-content; margin-inline: auto; }
.spout i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .25; }
.spout i:nth-child(1) { width: 9px; height: 9px; opacity: .9; animation: m2-pulse 3.4s var(--ease) infinite; }
.spout i:nth-child(2) { animation: m2-pulse 3.4s var(--ease) infinite .2s; }
.spout i:nth-child(3) { animation: m2-pulse 3.4s var(--ease) infinite .4s; }
.spout i:nth-child(4) { animation: m2-pulse 3.4s var(--ease) infinite .6s; }
.spout i:nth-child(5) { animation: m2-pulse 3.4s var(--ease) infinite .8s; }

/* ── 11 · Reveal & utilities ─────────────────────────────────────────────── */
/* Reveal only hides when JS is confirmed live (html.js). No-JS / JS-error ⇒ visible. */
.reveal { transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.js .reveal { opacity: 0; transform: translateY(38px); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; } .reveal.d4 { transition-delay: .4s; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-hi { color: var(--text-hi); } .text-mid { color: var(--text-mid); } .text-lo { color: var(--text-lo); }
.accent-text { color: var(--accent-ink); }      /* cyan AS TEXT, AA-safe        */
.center { text-align: center; }
.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 30px; } .mt-l { margin-top: 56px; }
.no-scroll { overflow: hidden; }                  /* set on <body> when menu open */

/* ── 12 · Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; gap: 0;
    background: color-mix(in srgb, var(--ink-800) 94%, transparent);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    padding: 14px var(--gutter) 26px; border-bottom: 1px solid var(--glass-bd);
    transform: translateY(-130%);
    /* visibility:hidden removes the off-screen menu links from the tab order /
       AT when closed (WCAG 2.4.3 / 2.4.7). Delay it past the slide-out so the
       close animation is still seen; on open it flips to visible instantly. */
    visibility: hidden;
    transition: transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
    align-items: stretch;
    z-index: var(--z-menu);
  }
  .nav__links.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .nav__links a { padding: 15px 4px; font-size: 16px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.05); }
  .nav__links a::after { display: none; }
  .nav__cta { margin: 14px 0 0; text-align: center; }
  .nav__toggle { display: flex; }

  .canvas-grid { grid-template-columns: [edge] 0 [body] minmax(0,1fr) [rail] 0 [end]; }
  .canvas-grid::before { display: none; }
  .vrl-index {
    grid-column: body; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: wrap; gap: 6px 18px;
    margin-bottom: 24px;
  }
  /* the index becomes in-page jump links on mobile — give each a 44px touch
     target so 「理念/中核/共生…」 are comfortably tappable (WCAG 2.5.5). */
  .vrl-index a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 4px; }
  /* footer nav/connect links stack on mobile — lift each to a 44px touch row. */
  .foot__col a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .kanji-watermark { font-size: clamp(180px, 56vw, 360px); }
  .cursor-glow { display: none; }
}
@media (max-width: 560px) {
  .foot__grid { grid-template-columns: 1fr; }
  .chip { padding: 12px 16px; }
  .meeting { height: 180px; }
  .meeting .being { width: 104px; height: 104px; }
}

/* ── 13 · Reduced-motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
  #flow { display: none !important; }            /* JS also skips canvas init     */
  .ribbon { animation: none !important; }
  .grad { animation: none; background-position: 30% 50%; }
  .smile { animation: none; }
  /* Meeting beat: show the resolved state (beings together, spark lit) statically */
  .js .meeting .being--human, .js .meeting .being--ai, .js .meeting .spark { animation: none !important; }
  .meeting .being--human { left: 32%; } .meeting .being--ai { right: 32%; }
  .meeting .spark { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* ── Keyframes (m2- prefixed to avoid page-local collisions) ─────────────── */
@keyframes m2-rise   { from { opacity: 0; transform: translateY(26px); }  to { opacity: 1; transform: none; } }
@keyframes m2-lineUp { from { opacity: 0; transform: translateY(112%); }  to { opacity: 1; transform: none; } }
@keyframes m2-hue    { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes m2-bob    { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-.06em) rotate(-3deg); } }
@keyframes m2-pulse  { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
@keyframes m2-trickle{ 0% { top: -50%; } 100% { top: 120%; } }
@keyframes m2-drift1 { to { transform: translate(8vw, 6vh) scale(1.18); } }
@keyframes m2-drift2 { to { transform: translate(-7vw, 9vh) scale(1.12); } }
@keyframes m2-drift3 { to { transform: translate(5vw, -7vh) scale(1.22); } }
@keyframes m2-trace  { to { stroke-dashoffset: 0; } }
@keyframes m2-meet-l { 0% { left: 6%; } 62% { left: 36%; } 100% { left: 34%; } }
@keyframes m2-meet-r { 0% { right: 6%; } 62% { right: 36%; } 100% { right: 34%; } }
@keyframes m2-spark  { 0%,55% { opacity: 0; transform: translate(-50%,-50%) scale(0); }
                       70% { opacity: 1; transform: translate(-50%,-50%) scale(1.4); }
                       100% { opacity: .85; transform: translate(-50%,-50%) scale(1); } }