:root {
  --paper: #f1f2f4;
  --paper-2: #e6e8ec;
  --ink: #0b0c0e;
  --ink-2: #3d4149;
  --mute: #868b95;
  --rule: rgba(11, 12, 14, .14);
  --acc: #2b47f5;          /* cobalt — used sparingly */
  --acc-lt: #8fa0ff;       /* accent on dark */
  --serif: "Saira", "M PLUS 1", sans-serif;     /* display: matches the logo */
  --mincho: "M PLUS 1", "Saira", sans-serif;    /* Japanese headings */
  --sans: "Saira", "M PLUS 1", system-ui, sans-serif;
  --pad: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.22, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.9;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
em { font-family: var(--serif); font-style: normal; font-weight: 600; }
::selection { background: var(--ink); color: var(--paper); }


/* NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px var(--pad);
  mix-blend-mode: difference; color: #f1f2f4;
}
.logo { display: block; line-height: 0; }
.logo svg { height: 20px; width: auto; fill: currentColor; }
.nav nav { display: flex; gap: 32px; font-size: 13px; letter-spacing: .04em; font-weight: 500; }
.nav nav a { position: relative; }
.nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* HERO */
.hero { min-height: 100svh; padding: 120px var(--pad) 48px; display: flex; flex-direction: column; justify-content: space-between; border-bottom: 1px solid var(--rule); }
.hero-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); letter-spacing: .04em; text-transform: uppercase; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.hero-title { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 7.4vw, 124px); line-height: 1.02; letter-spacing: -.03em; margin: 6vh 0 4vh; }
.hero-title .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .ln > span { display: inline-block; transform: translateY(105%); animation: up 1.3s var(--ease) forwards; }
.hero-title .ln:nth-child(2) > span { animation-delay: .12s; }
.hero-title em { color: var(--acc); font-weight: 500; }
@keyframes up { to { transform: none; } }
.hero-foot { display: grid; grid-template-columns: 1fr 1.1fr; gap: 6vw; align-items: end; }
.hero-lead { font-family: var(--mincho); font-weight: 400; font-size: clamp(15px, 1.2vw, 17px); line-height: 2.1; color: var(--ink-2); max-width: 30em; opacity: 0; animation: fade 1.2s .7s forwards; }
@keyframes fade { to { opacity: 1; } }
.hero-fig { justify-self: end; width: min(100%, 460px); opacity: 0; animation: fade 1.2s .4s forwards; }
.hero-fig figcaption { font-size: 11px; color: var(--mute); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); letter-spacing: .02em; }
.onto-fig { width: 100%; height: auto; display: block; overflow: visible; }
.onto-fig .edges path { fill: none; stroke: var(--ink); stroke-width: .8; stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 2.4s var(--ease) forwards; }
.onto-fig .edges path:nth-child(odd) { animation-delay: .3s; }
.onto-fig .edges path:nth-child(3n) { animation-delay: .6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.onto-fig .nodes circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.onto-fig .nodes .agent { fill: var(--acc); stroke: var(--acc); }
.onto-fig .labels text { font-family: var(--sans); font-size: 11px; letter-spacing: .04em; fill: var(--ink-2); letter-spacing: .02em; }
.onto-fig .labels .agent-l { fill: var(--acc); font-family: var(--serif); font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.onto-fig .pulse { fill: none; stroke: var(--acc); stroke-width: .8; transform-origin: 280px 190px; animation: ring 3s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(4); opacity: 0; } }

/* MARQUEE */
.marquee { overflow: hidden; border-bottom: 1px solid var(--rule); padding: 22px 0; }
.track { display: flex; gap: 40px; width: max-content; animation: slide 40s linear infinite; font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.01em; white-space: nowrap; }
.track i { font-style: normal; color: var(--mute); }
@keyframes slide { to { transform: translateX(-50%); } }

/* SECTIONS */
.section { padding: clamp(80px, 12vw, 160px) var(--pad); border-bottom: 1px solid var(--rule); }
.label { display: flex; gap: 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin-bottom: clamp(40px, 6vw, 80px); }
.label span { color: var(--ink); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* APPROACH */
.approach { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6vw; align-items: end; }
.statement { font-family: var(--mincho); font-weight: 500; font-size: clamp(24px, 3.1vw, 46px); line-height: 1.6; letter-spacing: .02em; }
.statement span { display: inline-block; }
.statement em { font-family: var(--mincho); font-weight: 500; color: var(--acc); }
.approach-body p { color: var(--ink-2); max-width: 32em; }

.layers { margin-top: clamp(64px, 8vw, 120px); border-top: 1px solid var(--ink); }
.layer { display: grid; grid-template-columns: 80px 1fr 1.2fr; align-items: baseline; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--rule); transition: padding .6s var(--ease); }
.layer:hover { padding-left: 16px; }
.l-no { font-size: 12px; color: var(--mute); }
.l-name { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.8vw, 56px); line-height: 1; letter-spacing: -.02em; }
.l-desc { color: var(--ink-2); font-size: 14px; }
.layer.core { background: var(--paper-2); margin: 0 calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad); }
.layer.core .l-name em { color: var(--acc); }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--rule); }
.compare > div { padding: 32px 32px 8px 0; }
.compare > div + div { padding-left: 32px; border-left: 1px solid var(--rule); }
.compare h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -.01em; margin-bottom: 16px; }
.compare ul { list-style: none; }
.compare li { padding: 10px 0; border-bottom: 1px dashed var(--rule); color: var(--mute); font-size: 14px; }
.compare .with h3 em, .compare .with h3 { color: var(--ink); }
.compare .with li { color: var(--ink); }
.compare .with li::before { content: "→ "; color: var(--acc); }

/* SERVICES */
.services { list-style: none; border-top: 1px solid var(--ink); }
.svc { position: relative; display: grid; grid-template-columns: 80px 1.2fr 1fr; gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--rule); cursor: default; isolation: isolate; }
.svc::before { content: ""; position: absolute; inset: 0 calc(var(--pad) * -1); background: var(--ink); z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.svc:hover::before { transform: scaleY(1); }
.svc:hover { color: var(--paper); }
.svc:hover .svc-body p, .svc:hover .svc-no { color: #b4b8c0; }
.svc:hover .svc-en em { color: var(--acc-lt); }
.svc-no { font-size: 12px; color: var(--mute); padding-top: 14px; transition: color .4s; }
.svc-en { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 4.4vw, 64px); line-height: 1; letter-spacing: -.025em; transition: transform .6s var(--ease); }
.svc:hover .svc-en { transform: translateX(14px); }
.svc-en em { color: var(--acc); transition: color .4s; }
.svc-body h4 { font-family: var(--mincho); font-weight: 500; font-size: 17px; margin-bottom: 8px; }
.svc-body p { color: var(--ink-2); font-size: 14px; transition: color .4s; }

/* PROCESS */
.process { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.process li { padding: 28px 28px 8px 0; border-right: 1px solid var(--rule); }
.process li + li { padding-left: 28px; }
.process li:last-child { border-right: 0; }
.process li:nth-child(2) { transition-delay: .1s; } .process li:nth-child(3) { transition-delay: .2s; } .process li:nth-child(4) { transition-delay: .3s; }
.p-no { font-family: var(--serif); font-weight: 500; font-size: 13px; letter-spacing: .1em; color: var(--acc); }
.process h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.02em; line-height: 1.1; margin: 28px 0 12px; }
.process p { color: var(--ink-2); font-size: 14px; }

/* CONTACT */
.contact { background: var(--ink); color: var(--paper); border-bottom: 0; }
.contact .label { color: #7d828c; }
.contact .label span { color: var(--paper); }
.contact-title { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 7.6vw, 124px); line-height: 1.02; letter-spacing: -.035em; }
.contact-title em { color: var(--acc-lt); font-weight: 500; }
.contact-row { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 24px; margin-top: clamp(48px, 6vw, 88px); padding-top: 24px; border-top: 1px solid rgba(241,242,244,.2); }
.contact-row p { font-family: var(--mincho); color: #b4b8c0; }
.mail { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 3vw, 44px); letter-spacing: -.01em; line-height: 1.1; position: relative; }
.mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform-origin: left; transition: transform .6s var(--ease); }
.mail:hover::after { transform: scaleX(.3); }

/* COMPANY */
.company { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6vw; }
.company dl { border-top: 1px solid var(--ink); }
.company dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.company dt { color: var(--mute); font-size: 13px; }
.company dd { font-family: var(--mincho); font-weight: 400; font-size: 15px; }
.map { border-top: 1px solid var(--ink); padding-top: 20px; }
.map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; filter: grayscale(1) contrast(.95); }
.src { color: var(--mute); font-size: 11px; margin-top: 24px; }

/* FOOTER */
.foot { padding: 64px var(--pad) 28px; }
.foot-mark { display: block; width: 100%; height: auto; fill: var(--ink); }
.foot-row { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--mute); }
.foot-row a:hover { color: var(--ink); }

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero-foot, .approach, .company { grid-template-columns: 1fr; gap: 40px; }
  .hero-fig { justify-self: stretch; }
  .svc { grid-template-columns: 48px 1fr; }
  .svc-body { grid-column: 2; }
  .process { grid-template-columns: 1fr 1fr; }
  .process li:nth-child(2) { border-right: 0; }
  .process li:nth-child(3) { padding-left: 0; }
  .process li:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  .nav nav a:not(.nav-cta) { display: none; }
  .hero-meta span:last-child { display: none; }
  .layer { grid-template-columns: 36px 1fr; gap: 12px; }
  .l-desc { grid-column: 2; }
  .compare { grid-template-columns: 1fr; }
  .compare > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .process { grid-template-columns: 1fr; }
  .process li, .process li + li { padding: 24px 0 8px; border-right: 0; }
  .process li + li { border-top: 1px solid var(--rule); }
  .process h3 { margin-top: 12px; }
  .company dl > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .hero-lead, .hero-fig { opacity: 1; transform: none; }
  .hero-title .ln > span { transform: none; }
  .onto-fig .edges path { stroke-dashoffset: 0; }
}