@font-face {
  font-family: 'Qomirai Sans';
  src: url('/assets/fonts/qomirai-sans-regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Qomirai Sans';
  src: url('/assets/fonts/qomirai-sans-bold.woff') format('woff');
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}
@font-face {
  font-family: 'Qomirai Display';
  src: url('/assets/fonts/qomirai-display-regular.woff') format('woff');
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: 'Qomirai Display';
  src: url('/assets/fonts/qomirai-display-bold.woff') format('woff');
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}
@font-face {
  font-family: 'Qomirai Display';
  src: url('/assets/fonts/qomirai-display-italic.woff') format('woff');
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --bg: #08060f;
  --bg-soft: #100b1a;
  --ink: #f1edf6;
  --muted: #b0a6bb;
  --quiet: #897b98;
  --purple: #9c5aff;
  --lavender: #cea8f2;
  --line: rgba(196, 165, 232, .16);
  --gutter: clamp(28px, 5.6vw, 108px);
  --font: 'Qomirai Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  --english: 'Qomirai Display', Arial, sans-serif;
  --mono: 'Courier New', monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.menu-open { overflow: hidden; }
::selection { background: #7645a7; color: white; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--lavender); outline-offset: 7px; }
svg { display: block; }
p, h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }
.skip-link { position: fixed; left: 20px; top: 15px; background: var(--lavender); color: var(--bg); padding: 12px 18px; z-index: 100; transform: translateY(-160%); border-radius: 3px; }
.skip-link:focus { transform: translateY(0); }
.reading-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: linear-gradient(90deg, #7434fa, #e75ef4); transform: scaleX(0); transform-origin: 0 50%; }

/* Navigation */
.site-header { position: absolute; inset: 0 0 auto; z-index: 40; height: 98px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(199, 171, 229, .1); }
.brand { display: inline-flex; align-items: center; width: 168px; flex-shrink: 0; }
.brand-logo { width: 100%; height: auto; overflow: visible; }
.desktop-nav { display: flex; gap: 38px; position: absolute; left: 50%; transform: translateX(-50%); font: 14px var(--english); letter-spacing: .015em; }
.desktop-nav a { position: relative; padding: 14px 0; color: #c3b9ce; transition: color .25s; }
.desktop-nav a span { position: absolute; bottom: 3px; height: 1px; inset-inline: 0; background: var(--lavender); transform: scaleX(0); transform-origin: 0 0; transition: transform .3s; }
.desktop-nav a:hover, .desktop-nav a[aria-current='location'] { color: white; }
.desktop-nav a:hover span, .desktop-nav a[aria-current='location'] span { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 24px; }
.language-switch { display: flex; align-items: center; gap: 10px; font: 11px var(--english); letter-spacing: .08em; }
.language-switch > span { color: #5e4f70; }
.language-switch button { border: 0; background: transparent; padding: 14px 5px; color: #9f90af; font: inherit; }
.language-switch button[aria-pressed='true'] { color: #fff; }
.language-switch button:hover { color: var(--lavender); }
.menu-toggle { display: none; width: 40px; height: 44px; padding: 9px 5px; flex-direction: column; justify-content: center; gap: 7px; border: 0; background: transparent; }
.menu-toggle span { display: block; height: 1px; width: 28px; background: #eee7f8; transition: transform .25s; }
.menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-nav { position: fixed; inset: 79px 0 0; background: rgba(10, 7, 17, .98); backdrop-filter: blur(20px); z-index: 35; padding: 52px var(--gutter); }
.mobile-nav a { display: flex; align-items: center; font: 34px var(--english); border-bottom: 1px solid var(--line); padding: 26px 0; gap: 20px; }
.mobile-nav a > span { font: 11px var(--mono); color: var(--lavender); }
.mobile-nav a svg { margin-left: auto; width: 20px; fill: none; stroke: var(--lavender); stroke-width: 1; }
.mobile-nav > p { font: 15px var(--english); color: var(--muted); margin-top: 50px; }

/* A continuous point-cloud journey, from the first question to everyone. */
.hero { position: relative; min-height: 860px; height: min(100svh, 1080px); isolation: isolate; overflow: hidden; background: #06040d; }
.hero-art { position: absolute; inset: 70px -7% 155px 30%; z-index: 0; overflow: hidden; pointer-events: auto; mask-image: linear-gradient(90deg, transparent, #000 17%, #000 100%); }
.field-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .9; transition: opacity .5s; }
.hero-art[data-ready="true"] .field-fallback { opacity: 0; }
.hero-art::before { content: ''; position: absolute; inset: 8% 5% 2%; background: radial-gradient(ellipse at 53% 51%, #7d2be51a, transparent 63%); pointer-events: none; }
.hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #06040d 0%, transparent 14%, transparent 92%, #06040d 100%); pointer-events: none; }
#physical-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; }
.hero-content { position: relative; z-index: 4; padding: clamp(208px, 24vh, 298px) 0 160px var(--gutter); width: 76%; pointer-events: none; }
.hero-content a { pointer-events: auto; }
.eyebrow { display: flex; align-items: center; gap: 12px; font: 11px/1.6 var(--english); letter-spacing: .17em; color: #bba7cd; }
.status-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #b979ff; box-shadow: 0 0 12px #a35bff66; }
.hero h1 { font-size: clamp(58px, 5.9vw, 98px); font-weight: 400; line-height: 1.4; letter-spacing: -.035em; margin: 31px 0 30px; white-space: nowrap; }
.hero h1 > span { display: block; }
.hero-heading-accent { color: #eee3fb; }
.hero-keyword { color: var(--purple); }
.hero-description { font-size: 15px; line-height: 2.15; letter-spacing: .065em; color: #c0b4cc; }
.pill-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; min-width: 209px; margin-top: 36px; border: 1px solid #8d739366; border-radius: 50px; padding: 7px 8px 7px 25px; font-size: 12px; letter-spacing: .09em; background: #130e2166; backdrop-filter: blur(8px); transition: background .3s, border-color .3s, transform .3s; }
.pill-link:hover { background: #40205c66; border-color: #bc8ae4; transform: translateY(-2px); }
.pill-arrow { display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 36px; height: 36px; background: #c498e9; color: #160d20; }
.pill-arrow svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .3s; }
.pill-link:hover .pill-arrow svg { transform: translateY(2px); }
.art-coordinate { position: absolute; z-index: 3; right: 9%; display: flex; align-items: center; gap: 10px; font: 9px var(--mono); letter-spacing: .12em; color: #b59bc7; }
.art-coordinate-top { top: 9%; right: 13%; pointer-events: none; }
.scene-divider { color: #685178; margin-right: 10px; }
[data-scene-number] { color: #d0a7f1; }
[data-scene-name] { min-width: 92px; }
.art-coordinate-top i { display: inline-block; width: 24px; height: 1px; background: #ae7bd0; }
.hero-bottom { position: absolute; bottom: 26px; left: var(--gutter); right: var(--gutter); display: flex; align-items: center; justify-content: space-between; z-index: 5; }
.scroll-cue { display: flex; align-items: center; gap: 16px; font: 9px var(--mono); letter-spacing: .16em; color: #b29dbf; padding: 14px 0; }
.scroll-line { width: 34px; height: 1px; background: #806197; position: relative; overflow: hidden; }
.scroll-line::after { content: ''; position: absolute; inset: 0; background: #f1d8ff; animation: scroll-line 3s ease-in-out infinite; }
@keyframes scroll-line { 0% { transform: translateX(-120%); } 70%, 100% { transform: translateX(120%); } }
.hero-bottom-note { position: absolute; left: 50%; transform: translateX(-50%); font: 9px/1.7 var(--mono); letter-spacing: .1em; color: #907aa1; }
.motion-toggle { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 14px 0; font: 9px var(--mono); letter-spacing: .1em; color: #bda5cb; }
.motion-toggle svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.motion-toggle b { font-weight: 400; color: #d2b6e7; }
.motion-toggle .play-icon { display: none; }
.motion-toggle[aria-pressed='true'] .play-icon { display: block; }
.motion-toggle[aria-pressed='true'] .pause-icon { display: none; }

/* Each step is both a progress marker and a direct scene control. */
.hero-story { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 100px; z-index: 6; }
.story-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.story-overline { font-size: 11px; letter-spacing: .09em; color: #bd9cd0; line-height: 1.8; }
.story-caption { font-size: 12px; letter-spacing: .055em; color: #c9bbd5; line-height: 1.8; text-align: right; }
.story-stages { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding: 0; margin: 0; }
.story-stages li { position: relative; min-width: 0; }
.story-stages li:not(:last-child)::after { content: '→'; position: absolute; right: -23px; top: 18px; font: 12px var(--english); color: #5a426c; }
.story-step { position: relative; display: flex; align-items: baseline; gap: 12px; width: 100%; min-height: 47px; border: 0; border-top: 1px solid #755a8b46; padding: 16px 0 6px; background: transparent; text-align: left; color: #927ba2; transition: color .35s, border-color .35s; }
.story-step-index { font: 9px var(--mono); letter-spacing: .04em; color: #705184; }
.story-step-name { font: 16px/1.2 var(--english); letter-spacing: .005em; white-space: nowrap; }
.story-step-line { position: absolute; inset: -1px 0 auto; height: 1px; background: linear-gradient(90deg, #9c42ff, #e5c3ff); transform: scaleX(var(--stage-progress, 0)); transform-origin: left; transition: transform .12s linear; opacity: 0; }
.story-step[aria-pressed='true'] { color: #f5eaff; border-color: #ab7dca66; }
.story-step[aria-pressed='true'] .story-step-index { color: #d19af4; }
.story-step[aria-pressed='true'] .story-step-line { opacity: 1; box-shadow: 0 0 13px #b85afc55; }
.story-step.is-complete { border-color: #8e5fac77; color: #bc9ccd; }
.story-step:hover { color: #ead3fc; border-color: #bc7be2; }
.story-step:focus-visible { outline-offset: 5px; }
.story-step:disabled { cursor: default; }
.motion-paused .story-step-line { transition: none; }
html[lang='en'] .story-overline { font-family: var(--english); font-size: 12px; letter-spacing: .015em; }
html[lang='en'] .story-caption { font-family: var(--english); font-size: 13px; letter-spacing: .01em; }

/* Brand philosophy */
.concept-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); padding: 26px var(--gutter); color: #b09bbf; background: #0b0712; font: 10px var(--english); letter-spacing: .15em; }
.strip-star { flex: 0 0 17px; color: #b17bdb; }
.strip-star svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1; }
.section-wrap { padding: 122px var(--gutter); max-width: 1800px; margin: 0 auto; }
.section-meta { display: flex; align-items: center; gap: 22px; font: 10px var(--english); letter-spacing: .16em; color: #c1accf; }
.section-index { font-family: var(--mono); color: #a278bf; }
.section-meta-ja { margin-left: 18px; color: #a28dad; font-family: var(--font); letter-spacing: .07em; font-size: 11px; }
.section-heading { font-size: clamp(29px, 3.1vw, 52px); font-weight: 400; line-height: 1.65; letter-spacing: -.015em; }
.philosophy-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; margin-top: 76px; }
.question-art { position: relative; min-height: 420px; align-self: stretch; overflow: hidden; margin-left: -10px; }
.question-word { position: absolute; left: 0; top: 7px; font: 400 clamp(100px, 11.8vw, 210px)/.9 var(--english); letter-spacing: -.07em; color: #bea4d0; }
.question-word > span { display: block; margin-left: 107px; margin-top: 5px; font-style: italic; color: #c39cdf; }
.question-cross { position: absolute; top: 0; right: 8px; font: 18px var(--mono); color: #8c6a9e; }
.question-orbit { position: absolute; top: 14%; left: -13%; height: 58%; width: 102%; border: 1px solid #a278bb2b; border-radius: 50%; transform: rotate(-43deg); }
.question-art p { position: absolute; left: 15px; bottom: 38px; font: 9px/1.9 var(--english); letter-spacing: .15em; color: #a38bb3; }
.body-copy { font-size: 14px; line-height: 2.25; letter-spacing: .04em; color: var(--muted); }
.body-copy p + p { margin-top: 22px; }
.philosophy-copy .body-copy { margin-top: 30px; }
.name-origin { display: grid; grid-template-columns: auto auto auto 1fr; align-items: start; column-gap: 15px; margin-top: 42px; border-top: 1px solid var(--line); padding-top: 27px; }
.name-origin-q { font: 46px/1.2 var(--english); color: #d7b2f2; }
.name-origin-plus { font: 17px/3.1 var(--mono); color: #9272a4; }
.name-origin-mirai { font: 32px/1.65 var(--english); letter-spacing: -.045em; }
.name-origin > div { border-left: 1px solid var(--line); padding-left: 22px; margin-left: 8px; }
.name-origin p:first-child { font: 9px/1.7 var(--english); letter-spacing: .09em; color: #ceb2df; }
.name-origin p + p { font-size: 11px; color: #a38eaf; line-height: 2; letter-spacing: .035em; margin-top: 9px; }

/* Intelligence becomes part of everyday life. */
.vision { background: linear-gradient(135deg, #100b1c, #0c0815 60%, #110a1a); border-block: 1px solid var(--line); position: relative; overflow: hidden; }
.vision::before { content: ''; position: absolute; width: 800px; height: 800px; right: -220px; top: -100px; background: radial-gradient(ellipse, #7133a214, transparent 60%); pointer-events: none; }
.vision-inner { padding-bottom: 108px; }
.vision-layout { display: grid; grid-template-columns: 1fr 1.06fr; align-items: center; gap: 20px; margin-top: 62px; }
.overline { font: 10px var(--english); letter-spacing: .16em; color: #bc91d7; margin-bottom: 25px; }
.vision-heading { font-size: clamp(44px, 4.7vw, 78px); font-weight: 400; line-height: 1.5; letter-spacing: -.03em; }
.lavender { color: #d0a8ed; }
.vision-subheading { font-size: clamp(16px, 1.5vw, 23px); font-weight: 400; line-height: 1.9; letter-spacing: .035em; margin-top: 32px; color: #e1d4eb; }
.vision-copy .body-copy { margin-top: 23px; max-width: 520px; font-size: 13px; }
.vision-visual { position: relative; min-width: 0; align-self: center; }
.world-diagram { width: 110%; margin-left: -5%; height: auto; overflow: visible; }
.sphere-group { animation: sphere-breathe 10s ease-in-out infinite; transform-origin: 320px 210px; }
.world-core, .society-nodes { animation: world-pulse 5s ease-in-out infinite; }
@keyframes sphere-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes world-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.vision-visual-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 88%; margin: 16px auto 0; font: 9px/1.7 var(--english); letter-spacing: .12em; color: #ad8dbf; text-align: center; }
.small-cross { color: #c69ddd; font: 16px var(--mono); }

/* The three meanings of Q */
.values { padding-top: 118px; padding-bottom: 136px; }
.values-intro { margin-top: 50px; display: flex; align-items: flex-end; justify-content: space-between; }
.values-intro-en { font: 10px/1.9 var(--english); letter-spacing: .13em; color: #a58bb5; text-align: right; padding-bottom: 10px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; margin-top: 66px; }
.value-item { border-top: 1px solid #a389b04a; position: relative; padding-top: 27px; transition: border-color .3s; }
.value-item:hover { border-color: #c898ed; }
.value-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.value-top > span { font: 11px var(--mono); letter-spacing: .05em; color: #b08ac8; }
.value-icon { width: 56px; height: 56px; fill: none; stroke: #bb93d4; stroke-width: .8; transition: transform .5s, stroke .5s; }
.value-item:hover .value-icon { transform: rotate(7deg); stroke: #e2c4f7; }
.value-icon .icon-solid { fill: #c69bed; stroke: none; }
.value-en { font: 400 clamp(32px, 3.4vw, 55px)/1.15 var(--english); letter-spacing: -.055em; color: #eee5f5; margin-bottom: 25px; }
.value-en::first-letter { color: #c595ea; }
.value-item h3 { font-size: 17px; font-weight: 400; letter-spacing: .025em; line-height: 1.8; margin-bottom: 17px; }
.value-description { font-size: 13px; color: #ac9ab7; line-height: 2.15; max-width: 320px; letter-spacing: .045em; }

/* Closing */
.closing { position: relative; border-top: 1px solid var(--line); min-height: 650px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; padding: 116px var(--gutter) 190px; text-align: center; background: #0c0713; }
.closing-glow { position: absolute; bottom: -480px; left: 50%; transform: translateX(-50%); width: 1200px; height: 1000px; background: radial-gradient(ellipse, #9349c52e, transparent 66%); pointer-events: none; }
.closing-orbit { position: absolute; left: 50%; bottom: -470px; width: 1200px; height: 780px; border: 1px solid #aa76da25; border-radius: 50%; transform: translateX(-50%) rotate(-8deg); box-shadow: 0 -20px 80px #a34adc08; pointer-events: none; }
.closing-content { position: relative; z-index: 2; }
.closing .eyebrow { justify-content: center; font-size: 10px; }
.closing h2 { font-size: clamp(31px, 3.9vw, 64px); font-weight: 400; letter-spacing: -.02em; line-height: 1.6; margin-top: 33px; }
.closing-tagline { font: 24px var(--english); color: #b496c8; letter-spacing: -.015em; margin-top: 20px; }
.closing-link { display: inline-flex; gap: 24px; align-items: center; font-size: 12px; letter-spacing: .07em; margin-top: 39px; border-bottom: 1px solid #9365af; padding-bottom: 12px; color: #d7c0e4; transition: color .3s, border-color .3s; }
.closing-link svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform .3s; }
.closing-link:hover { color: white; border-color: #d2a5f0; }
.closing-link:hover svg { transform: translate(2px, -2px); }
.closing-wordmark { position: absolute; bottom: -.25em; left: 50%; transform: translateX(-50%); font: 400 clamp(180px, 25vw, 440px)/1 var(--english); letter-spacing: -.065em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px #a875d125; pointer-events: none; }
.mobile-break { display: none; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 34px var(--gutter); border-top: 1px solid var(--line); position: relative; background: #09060f; }
.footer-brand { width: 137px; }
.site-footer > p { font: 10px var(--english); letter-spacing: .05em; color: #a18aad; }
.footer-top { display: flex; align-items: center; gap: 17px; font: 9px var(--english); letter-spacing: .14em; color: #c0a5d0; padding: 12px 0; }
.footer-top svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1; }

/* Motion, progressive enhancement, and English typesetting */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s, transform .85s; transition-timing-function: cubic-bezier(.2, .6, .3, 1); }
.js .reveal.in-view { opacity: 1; transform: translateY(0); }
.value-item:nth-child(2) { transition-delay: .08s; }
.value-item:nth-child(3) { transition-delay: .16s; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.motion-paused .reveal { transition: none; }
.motion-paused { scroll-behavior: auto; }
html[lang='en'] .hero h1 { font-family: var(--english); font-size: clamp(60px, 6.1vw, 106px); line-height: 1.12; letter-spacing: -.045em; margin-top: 40px; margin-bottom: 32px; }
html[lang='en'] .hero-description { font-family: var(--english); letter-spacing: .01em; font-size: 16px; line-height: 1.85; }
html[lang='en'] .section-heading { line-height: 1.3; font-family: var(--english); font-size: clamp(36px, 3.7vw, 60px); letter-spacing: -.035em; }
html[lang='en'] .vision-heading { line-height: 1.15; font-family: var(--english); letter-spacing: -.045em; }
html[lang='en'] .vision-subheading { font-family: var(--english); letter-spacing: -.01em; }
html[lang='en'] .body-copy { font-family: var(--english); font-size: 16px; line-height: 1.95; letter-spacing: 0; }
html[lang='en'] .body-copy br { display: none; }
html[lang='en'] .name-origin p + p { font: 13px/1.9 var(--english); letter-spacing: 0; }
html[lang='en'] .closing h2 { font-family: var(--english); letter-spacing: -.035em; }
html[lang='en'] .value-item h3 { font: 19px/1.5 var(--english); letter-spacing: -.01em; }
html[lang='en'] .value-description { font: 16px/1.9 var(--english); letter-spacing: 0; }

@media (min-width: 1700px) {
  .hero { min-height: 930px; }
  .hero-content { padding-top: 280px; }
  .hero-art { inset-inline: 33% -3%; }
}
@media (max-width: 1100px) {
  .hero { height: 860px; min-height: 860px; }
  .hero-content { padding-top: 198px; }
  .hero h1 { font-size: 6.2vw; }
  .hero-art { inset: 82px -12% 160px 29%; }
  .art-coordinate-top { right: 21%; top: 12%; }
  .story-stages { gap: 25px; }
  .story-stages li:not(:last-child)::after { right: -19px; }
  .story-step { gap: 9px; }
  .story-step-name { font-size: 14px; }
  .story-caption { font-size: 11px; }
  .desktop-nav { gap: 28px; }
  .philosophy-layout { gap: 42px; grid-template-columns: .72fr 1.2fr; }
  .question-word { font-size: 137px; }
  .question-word > span { margin-left: 77px; }
  .section-wrap { padding-top: 96px; padding-bottom: 96px; }
  .name-origin { grid-template-columns: auto auto 1fr; row-gap: 16px; }
  .name-origin > div { grid-column: 1 / -1; margin: 0; border: 0; padding: 0; }
  .name-origin p + p { font-size: 12px; }
  .vision-layout { gap: 10px; grid-template-columns: 1.05fr 1fr; }
  .vision-heading { font-size: 52px; }
  .vision-subheading { font-size: 17px; }
  .hero-bottom-note { display: none; }
  .values-grid { gap: 29px; }
  .value-en { font-size: 39px; }
  .value-item h3 { font-size: 16px; }
  .closing { min-height: 590px; }
}
@media (max-width: 800px) {
  :root { --gutter: 30px; }
  .site-header { height: 80px; }
  body.menu-open .site-header { position: fixed; background: #0a0711; }
  .brand { width: 148px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .header-actions { gap: 18px; }
  .hero { height: 1080px; min-height: 1080px; }
  .hero-content { padding: 153px var(--gutter) 0; width: 100%; }
  .hero h1 { font-size: clamp(45px, 7.4vw, 62px); margin: 25px 0 22px; line-height: 1.5; }
  .hero-description { font-size: 14px; line-height: 2.1; }
  .eyebrow { font-size: 10px; letter-spacing: .14em; }
  .pill-link { margin-top: 28px; }
  .hero-art { inset: 490px -7% 230px; height: auto; opacity: 1; mask-image: linear-gradient(180deg, transparent, #000 12%, #000 94%, transparent); }
  .hero-art::after { background: linear-gradient(180deg, #06040d 0%, transparent 12%, transparent 86%, #06040d 100%); }
  .art-coordinate-top { top: 6%; right: 17%; font-size: 8px; }
  .hero-story { bottom: 95px; }
  .story-heading { display: block; margin-bottom: 16px; }
  .story-overline { font-size: 11px; }
  .story-caption { font-size: 12px; text-align: left; margin-top: 5px; min-height: 22px; }
  .story-stages { gap: 22px; }
  .story-step { display: block; padding-top: 13px; }
  .story-step-index { display: block; margin-bottom: 6px; font-size: 9px; }
  .story-step-name { font-size: 14px; }
  .story-stages li:not(:last-child)::after { right: -17px; top: 32px; font-size: 11px; }
  .hero-bottom { bottom: 20px; }
  .concept-strip { justify-content: flex-start; gap: 25px; padding-block: 23px; font-size: 9px; }
  .concept-strip > span:nth-child(n+5) { display: none; }
  .section-meta { gap: 14px; font-size: 9px; }
  .section-meta-ja { margin-left: auto; font-size: 10px; }
  .philosophy-layout { grid-template-columns: 1fr; gap: 35px; margin-top: 44px; }
  .question-art { min-height: 245px; max-height: 245px; margin: 0; }
  .question-word { font-size: 151px; left: 0; top: 13px; }
  .question-word > span { display: inline; margin-left: 14px; }
  .question-orbit { height: 200px; width: 385px; left: -15px; top: 4px; transform: rotate(-15deg); }
  .question-art p { bottom: 5px; left: 8px; }
  .question-cross { right: 8px; top: 10px; }
  .section-heading { font-size: 36px; }
  .body-copy { font-size: 14px; }
  .name-origin { grid-template-columns: auto auto auto 1fr; row-gap: 0; }
  .name-origin > div { grid-column: auto; margin-left: 10px; border-left: 1px solid var(--line); padding-left: 20px; }
  .vision-layout { grid-template-columns: 1fr; margin-top: 47px; gap: 28px; }
  .vision-heading { font-size: 62px; }
  .vision-subheading { font-size: 20px; margin-top: 25px; }
  .vision-copy .body-copy { font-size: 14px; max-width: 100%; }
  .vision-visual { width: 100%; max-width: 580px; margin: 0 auto; }
  .world-diagram { width: 100%; margin: 0; }
  .vision-visual-caption { margin-top: -15px; }
  .values-intro { margin-top: 38px; }
  .values-intro-en { font-size: 9px; }
  .values-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 45px; }
  .value-item { padding: 28px 0 0; display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 35px; }
  .value-top { grid-column: 1 / -1; margin-bottom: 16px; }
  .value-icon { width: 48px; height: 48px; }
  .value-en { font-size: 46px; grid-row: 2 / 4; margin: 0; }
  .value-item h3 { font-size: 17px; margin-bottom: 9px; }
  .value-description { font-size: 13px; max-width: none; }
  .closing { min-height: 550px; padding-top: 90px; }
  .closing h2 { font-size: 37px; }
  .closing-tagline { font-size: 21px; }
  .closing-wordmark { font-size: 27vw; }
  .site-footer { gap: 20px; }
  .footer-brand { width: 123px; }
  .footer-top { font-size: 8px; gap: 9px; }
  html[lang='en'] .hero h1 { font-size: clamp(48px, 8vw, 74px); margin-top: 30px; }
  html[lang='en'] .hero-description { font-size: 15px; max-width: 450px; }
  html[lang='en'] .section-heading { font-size: 43px; }
  html[lang='en'] .vision-heading { font-size: 64px; }
}
@media (max-width: 520px) {
  :root { --gutter: 24px; }
  html { scroll-padding-top: 82px; }
  .site-header { height: 78px; }
  .brand { width: 138px; }
  .header-actions { gap: 10px; }
  .language-switch { gap: 5px; font-size: 10px; }
  .hero { height: 990px; min-height: 990px; }
  .hero-content { padding-top: 144px; }
  .hero h1 { font-size: clamp(38px, 9.65vw, 50px); letter-spacing: -.04em; margin-top: 26px; margin-bottom: 24px; }
  .hero-description { font-size: 12px; letter-spacing: .03em; }
  .hero-eyebrow { font-size: 8px; letter-spacing: .13em; gap: 10px; }
  .pill-link { font-size: 11px; min-width: 188px; margin-top: 27px; padding-left: 22px; }
  .pill-arrow { width: 32px; height: 32px; }
  .hero-art { inset: 425px -10% 220px; height: auto; }
  .art-coordinate-top { top: 8%; right: 15%; font-size: 7px; letter-spacing: .08em; }
  .art-coordinate-top i { width: 14px; }
  .hero-story { bottom: 88px; }
  .story-overline { font-size: 10px; letter-spacing: .04em; }
  .story-caption { font-size: 11px; letter-spacing: .015em; margin-top: 6px; }
  .story-stages { gap: 13px; }
  .story-step-name { font-size: 10px; letter-spacing: -.015em; }
  .story-step-index { font-size: 8px; }
  .story-stages li:not(:last-child)::after { right: -11px; top: 31px; font-size: 8px; }
  html[lang="en"] .story-overline { font-size: 11px; }
  html[lang="en"] .story-caption { font-size: 11px; min-height: 40px; line-height: 1.65; max-width: 325px; }
  .hero-bottom { bottom: 16px; }
  .scroll-cue, .motion-toggle { font-size: 8px; letter-spacing: .08em; }
  .scroll-cue { gap: 10px; }
  .scroll-line { width: 26px; }
  .concept-strip { gap: 22px; font-size: 8px; padding-block: 21px; }
  .concept-strip > span:nth-child(n+4) { display: none; }
  .section-wrap { padding-block: 76px; }
  .section-meta { gap: 12px; letter-spacing: .09em; font-size: 9px; }
  .section-meta-ja { font-size: 9px; letter-spacing: .03em; }
  .philosophy-layout { margin-top: 41px; gap: 35px; }
  .question-art { min-height: 208px; max-height: 208px; }
  .question-word { font-size: 111px; top: 10px; }
  .question-word > span { margin-left: 6px; }
  .question-orbit { width: 305px; height: 167px; top: -1px; }
  .question-art p { font-size: 8px; bottom: 7px; }
  .section-heading { font-size: clamp(25px, 6.35vw, 33px); letter-spacing: -.025em; line-height: 1.7; }
  .body-copy { font-size: 12px; line-height: 2.2; letter-spacing: .02em; }
  .body-copy p + p { margin-top: 18px; }
  .philosophy-copy .body-copy { margin-top: 24px; }
  .name-origin { margin-top: 31px; padding-top: 25px; grid-template-columns: auto auto 1fr; column-gap: 14px; row-gap: 18px; }
  .name-origin > div { grid-column: 1 / -1; margin: 0; border: 0; padding: 0; }
  .name-origin p:first-child { font-size: 9px; letter-spacing: .13em; }
  .name-origin p + p { font-size: 12px; line-height: 2.1; }
  .vision-layout { margin-top: 39px; gap: 30px; }
  .overline { font-size: 9px; letter-spacing: .1em; margin-bottom: 22px; }
  .vision-heading { font-size: clamp(38px, 11.2vw, 56px); line-height: 1.5; }
  .vision-subheading { font-size: 16px; letter-spacing: .01em; margin-top: 27px; }
  .vision-copy .body-copy { font-size: 12px; margin-top: 20px; line-height: 2.2; }
  .world-diagram { width: 112%; margin-left: -6%; }
  .vision-visual-caption { font-size: 7px; letter-spacing: .05em; max-width: 96%; margin-top: -3px; }
  .values-intro { align-items: center; }
  .values-intro-en { font-size: 8px; letter-spacing: .04em; }
  .values-grid { margin-top: 38px; gap: 34px; }
  .value-item { display: block; padding-top: 25px; }
  .value-top { margin-bottom: 14px; }
  .value-en { font-size: 46px; margin-bottom: 20px; }
  .value-item h3 { font-size: 17px; margin-bottom: 12px; }
  .value-description { font-size: 13px; line-height: 2.1; max-width: 330px; }
  .closing { min-height: 534px; padding: 79px var(--gutter) 150px; }
  .closing .eyebrow { font-size: 8px; letter-spacing: .08em; gap: 9px; }
  .mobile-break { display: block; }
  .closing h2 { font-size: 33px; line-height: 1.7; margin-top: 28px; }
  .closing-tagline { font-size: 20px; margin-top: 17px; }
  .closing-link { font-size: 11px; margin-top: 28px; }
  .closing-wordmark { font-size: 31vw; bottom: -.13em; }
  .site-footer { padding-block: 27px; flex-wrap: wrap; gap: 24px; }
  .footer-brand { width: 125px; }
  .site-footer > p { font-size: 9px; margin-left: auto; }
  .footer-top { margin-left: auto; font-size: 8px; }
  html[lang='en'] .hero h1 { font-size: clamp(39px, 11.1vw, 55px); letter-spacing: -.045em; margin-top: 30px; margin-bottom: 24px; }
  html[lang='en'] .hero-description { font-size: 13px; line-height: 1.8; max-width: 350px; }
  html[lang='en'] .hero-description br { display: none; }
  html[lang='en'] .section-heading { font-size: 34px; }
  html[lang='en'] .vision-heading { font-size: clamp(37px, 11.3vw, 54px); }
  html[lang='en'] .vision-subheading { font-size: 18px; line-height: 1.6; }
  html[lang='en'] .body-copy { font-size: 14px; line-height: 1.95; }
  html[lang='en'] .value-description { font-size: 14px; }
  html[lang='en'] .values-intro-en { display: none; }
  html[lang='en'] .closing h2 { font-size: 37px; line-height: 1.3; }
}
@media (max-width: 350px) {
  :root { --gutter: 20px; }
  .brand { width: 116px; }
  .header-actions { gap: 7px; }
  .language-switch { gap: 2px; }
  .hero { height: 945px; min-height: 945px; }
  .hero h1 { font-size: 35px; }
  .hero-description { font-size: 11px; }
  .hero-art { inset: 410px -13% 215px; height: auto; }
  .art-coordinate-top { font-size: 6px; }
  .story-stages { gap: 10px; }
  .story-step-name { font-size: 9px; }
  .story-caption { font-size: 10px; }
  .story-stages li:not(:last-child)::after { right: -9px; font-size: 7px; }
  .hero-eyebrow { font-size: 7px; }
  .scroll-cue { font-size: 7px; }
  .section-meta { font-size: 8px; gap: 8px; }
  .section-meta-ja { font-size: 8px; }
  .question-word { font-size: 97px; }
  .section-heading { font-size: 23px; }
  .vision-heading { font-size: 36px; }
  .vision-subheading { font-size: 14px; }
  .values-intro-en { font-size: 7px; }
  .closing h2 { font-size: 29px; }
  html[lang='en'] .hero h1 { font-size: 36px; }
  html[lang='en'] .section-heading { font-size: 30px; }
  html[lang='en'] .closing h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}