:root {
  --scene-bg: #0b0b0b;
  --scene-ink: #f3f2ed;
  --paper: #f1f0eb;
  --mist: #d8d8d2;
  --black: #0b0b0b;
  --page-x: clamp(1.25rem, 5vw, 5.25rem);
  --progress: 0%;
  --image-shift: 0px;
  --hero-mountain-shift: 0px;
}
:root[data-tone="ink"] { --scene-bg: #0b0b0b; --scene-ink: #f3f2ed; }
:root[data-tone="paper"] { --scene-bg: #f1f0eb; --scene-ink: #111; }
:root[data-tone="mist"] { --scene-bg: #d8d8d2; --scene-ink: #111; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #0b0b0b; }
body {
  margin: 0; min-width: 320px; overflow-x: hidden; background: #0b0b0b; color: #f3f2ed;
  font-family: Arial, Helvetica, "Hiragino Sans", "Yu Gothic", sans-serif;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: #c8c8c2; color: #0b0b0b; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .6rem .85rem; background: #fff; color: #000; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-backdrop {
  position: fixed; z-index: 0; inset: 0; overflow: hidden; color: var(--scene-ink); background: var(--scene-bg);
  transition: background 900ms cubic-bezier(.22,1,.36,1), color 700ms cubic-bezier(.22,1,.36,1); pointer-events: none;
}
.backdrop-grid {
  position: absolute; inset: 0; opacity: .12;
  background-image: linear-gradient(to right,currentColor 1px,transparent 1px), linear-gradient(to bottom,currentColor 1px,transparent 1px);
  background-size: min(8vw,110px) min(8vw,110px);
  mask-image: radial-gradient(circle at 50% 45%,#000,transparent 74%);
  transition: opacity 700ms ease;
}
.backdrop-orbit {
  position: absolute; width: clamp(18rem,48vw,46rem); aspect-ratio: 1; left: 50%; top: 48%;
  border: 1px solid currentColor; border-radius: 50%; opacity: .1; transform: translate(-50%,-50%) scale(.8);
  transition: transform 1200ms cubic-bezier(.22,1,.36,1), opacity 700ms ease;
}
.backdrop-orbit--small { border-style: dashed; transform: translate(-50%,-50%) scale(.42); opacity: .07; }
.scene-index { position: absolute; right: clamp(1.25rem,3vw,3.5rem); bottom: 1.4rem; font: 500 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; opacity: .42; }

.site-shell { --scene-bg: #0b0b0b; --scene-ink: #f3f2ed; min-height: 100vh; color: var(--scene-ink); transition: color 700ms cubic-bezier(.22,1,.36,1); }
.site-shell.tone-ink { --scene-bg: #0b0b0b; --scene-ink: #f3f2ed; }
.site-shell.tone-paper { --scene-bg: #f1f0eb; --scene-ink: #111; }
.site-shell.tone-mist { --scene-bg: #d8d8d2; --scene-ink: #111; }
html[data-tone="paper"] .backdrop-orbit { transform: translate(-50%,-50%) scale(1.25); }
html[data-tone="paper"] .backdrop-orbit--small { transform: translate(-50%,-50%) scale(.62); }
html[data-tone="mist"] .backdrop-orbit { transform: translate(-50%,-50%) scale(.52); opacity: .2; }
html[data-tone="mist"] .backdrop-orbit--small { transform: translate(-50%,-50%) scale(1.1); opacity: .06; }
html[data-tone="paper"] .backdrop-grid,
html[data-tone="mist"] .backdrop-grid { opacity: .08; }

.site-header {
  position: fixed; z-index: 30; inset: 0 0 auto; height: 4.75rem; padding: 0 clamp(1.25rem,3.5vw,4rem);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid color-mix(in srgb,currentColor 19%,transparent);
  color: var(--scene-ink); background: color-mix(in srgb,var(--scene-bg) 76%,transparent);
  backdrop-filter: blur(16px); transition: background 800ms ease,color 700ms ease,border-color 600ms ease;
}
.monogram {
  display: grid; place-items: center; width: 2.2rem; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%;
  font-size: .55rem; font-weight: 700; letter-spacing: -.04em;
}
.site-header nav { display: flex; gap: clamp(1.2rem,3vw,3rem); font-size: .61rem; letter-spacing: .16em; }
.site-header nav a, .header-contact { opacity: .68; transition: opacity .18s ease; }
.site-header nav a:hover, .site-header nav a:focus-visible, .header-contact:hover, .header-contact:focus-visible { opacity: 1; }
.header-contact { justify-self: end; display: inline-flex; align-items: center; gap: .45rem; font-size: .61rem; letter-spacing: .16em; }
.scroll-progress { position: fixed; z-index: 35; top: 0; left: 0; right: 0; height: 2px; }
.scroll-progress span { display: block; width: var(--progress); height: 100%; background: currentColor; opacity: .6; }

.scene { position: relative; z-index: 1; min-height: 115svh; scroll-margin-top: 4.4rem; }
.scene-frame {
  width: 100%; min-height: 100svh; padding: clamp(7rem,14vh,10rem) var(--page-x) clamp(2.8rem,7vh,5rem);
  display: flex; flex-direction: column;
}
.eyebrow, .small-caps { margin: 0; font: 520 .63rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; }
.section-label {
  display: flex; justify-content: space-between; padding-bottom: 1.05rem;
  border-bottom: 1px solid color-mix(in srgb,currentColor 32%,transparent);
  font: 520 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .15em;
}
.hero-frame { justify-content: flex-end; padding-bottom: clamp(2.2rem,5vh,4rem); }
.hero-business-nav {
  display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: 1.15rem;
  border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22);
}
.hero-business-nav a {
  display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .72rem .6rem;
  border-right: 1px solid rgba(255,255,255,.16); color: rgba(243,242,237,.72);
  font-size: clamp(.55rem,.72vw,.68rem); white-space: nowrap; transition: color .2s ease,background .2s ease;
}
.hero-business-nav a:last-child { border-right: 0; }
.hero-business-nav a span { font: 500 .5rem/1 ui-monospace,monospace; letter-spacing: .1em; opacity: .58; }
.hero-business-nav a:hover, .hero-business-nav a:focus-visible { color: #fff; background: rgba(255,255,255,.08); outline: none; }
.hero-emblem {
  position: relative; width: 100%; height: clamp(24rem,68vh,48rem); margin: auto 0 0;
  display: grid; align-items: center; isolation: isolate;
}
.mountain-mark {
  position: absolute; z-index: 0; width: min(82vw,75rem); height: auto; left: 50%; top: 50%;
  transform: translate(-46%,-50%); overflow: visible;
}
.mountain-mark__ring { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .2; }
.mountain-mark__scene { transform: translateY(var(--hero-mountain-shift)); transform-origin: center; will-change: transform; }
.mountain-mark__sun { fill: #f3f2ed; opacity: .08; }
.mountain-mark__back { fill: url(#mountain-fade); opacity: .58; }
.mountain-mark__mid { fill: #f3f2ed; opacity: .1; }
.mountain-mark__front { fill: #f3f2ed; opacity: .15; }
.hero-name {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; justify-content: center; gap: clamp(.8rem,2.2vw,2.6rem);
  margin: 0; color: #f3f2ed; font-size: clamp(5.6rem,15vw,14rem); line-height: .76;
  text-transform: uppercase; white-space: nowrap; mix-blend-mode: screen;
}
.hero-name__sgn { font-weight: 750; letter-spacing: -.09em; }
.hero-name__group { font-size: .42em; font-weight: 400; letter-spacing: .2em; }
.hero-company-name {
  position: absolute; z-index: 2; left: 50%; top: calc(50% + clamp(4.6rem,9.7vw,8.5rem)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem; margin: 0; color: rgba(243,242,237,.56);
  font: 500 clamp(.5rem,.68vw,.64rem)/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .13em; white-space: nowrap;
}
.hero-company-name span + span { padding-left: 1rem; border-left: 1px solid rgba(243,242,237,.24); }
.hero-meta { margin-top: clamp(3rem,8vh,6rem); display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; font-size: clamp(.92rem,1.25vw,1.18rem); line-height: 1.5; }
.hero-meta p { margin: 0; }
.hero-meta p:last-child { font: 500 .6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 2.4rem; display: flex; align-items: center; gap: .65rem;
  font: 500 .55rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em;
  transform: translateX(-50%); writing-mode: vertical-rl;
}
.scroll-cue i { font-style: normal; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(.5rem); } }

.split-frame { display: grid; grid-template-columns: minmax(7.5rem,.55fr) minmax(0,1.7fr); gap: clamp(2rem,7vw,7.5rem); }
.split-frame .section-label { align-self: start; }
.section-main { display: flex; flex-direction: column; justify-content: center; min-height: 72svh; }
.display-copy {
  margin: clamp(2rem,5vh,4rem) 0 0; font-size: clamp(3rem,7.25vw,7.3rem); font-weight: 520;
  line-height: .94; letter-spacing: -.072em;
}
.display-copy .line, .contact-heading .line { display: block; }
.display-copy .line:nth-child(2) { margin-left: clamp(0rem,8vw,8rem); }
.display-copy .line--jp { margin: clamp(1.4rem,4vh,3rem) 0 0 auto; font-size: .28em; font-weight: 600; letter-spacing: -.045em; line-height: 1.4; }
.copy-grid {
  width: min(100%,49rem); margin: clamp(3.5rem,10vh,7.5rem) 0 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(2.5rem,9vw,8rem); align-items: start;
}
.copy-grid > p:first-child { max-width: 33rem; margin: 0; font-size: clamp(.92rem,1.35vw,1.2rem); line-height: 1.95; }

.business-intro { max-width: 70rem; }
.business-list { margin-top: clamp(4.5rem,13vh,9rem); border-top: 1px solid color-mix(in srgb,currentColor 35%,transparent); }
.business-row {
  position: relative; display: grid; grid-template-columns: 4.4rem minmax(13rem,.85fr) minmax(17rem,1.2fr) auto;
  gap: 1.8rem; padding: 2rem 0; border-bottom: 1px solid color-mix(in srgb,currentColor 35%,transparent);
  align-items: start; scroll-margin-top: 5.5rem; transition: padding .35s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.business-row::before { content: ""; position: absolute; inset: 0 calc(var(--page-x) * -1); z-index: -1; background: color-mix(in srgb,currentColor 7%,transparent); opacity: 0; transition: opacity .25s ease; }
.business-row:hover, .business-row:focus-visible { padding-left: 1rem; padding-right: 1rem; outline: none; }
.business-row:hover::before, .business-row:focus-visible::before { opacity: 1; }
.row-number, .business-action { font: 500 .58rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
.business-row h3 { margin: 0; font-size: clamp(1.2rem,2.05vw,2.15rem); font-weight: 560; line-height: 1.05; letter-spacing: -.048em; }
.business-copy strong { display: block; margin-bottom: .65rem; font-size: .82rem; }
.business-copy p { max-width: 30rem; margin: 0; font-size: .84rem; line-height: 1.85; }
.business-action { display: flex; align-items: center; gap: .55rem; padding-top: .2rem; white-space: nowrap; opacity: .62; }
.business-action i { display: inline-block; font-style: normal; font-size: .9rem; transition: transform .25s ease; }
.business-row:hover .business-action i, .business-row:focus-visible .business-action i { transform: translate(.25rem,-.2rem); }
.business-note { margin: 1.3rem 0 0 auto; width: max-content; max-width: 100%; font: 500 .57rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; opacity: .48; }

.company-heading { display: grid; grid-template-columns: minmax(0,1fr) 16rem; gap: 3rem; align-items: end; }
.company-heading .display-copy { max-width: 68rem; }
.company-heading > p { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.8; }
.editorial-cover { width: 100%; margin: clamp(4rem,10vh,7rem) 0 0; }
.editorial-image { position: relative; height: clamp(24rem,62vw,52rem); overflow: hidden; background: #171717; }
.editorial-image img { width: 100%; height: 115%; object-fit: cover; object-position: center calc(50% + var(--image-shift)); transform: translateY(-7%); filter: grayscale(1) contrast(1.08); }
.editorial-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(0,0,0,.4)); }
.editorial-stamp {
  position: absolute; z-index: 2; inset: 50% auto auto 50%; display: grid; place-items: center; width: clamp(9rem,20vw,16rem); aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: #fff; transform: translate(-50%,-50%); mix-blend-mode: difference;
}
.editorial-stamp span { font-size: clamp(2rem,5vw,4.8rem); font-weight: 650; letter-spacing: -.08em; }
.editorial-stamp small { position: absolute; bottom: 22%; font: 500 .48rem/1 ui-monospace,monospace; letter-spacing: .18em; }
.editorial-cover figcaption { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: .8rem; font: 500 .55rem/1.4 ui-monospace,monospace; letter-spacing: .11em; }
.company-grid { margin-top: clamp(4rem,9vh,7rem); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem,10vw,10rem); }
.company-statement > p:last-child { margin: 1.5rem 0 0; font-size: clamp(1.8rem,3.4vw,3.5rem); font-weight: 520; line-height: 1.2; letter-spacing: -.055em; }
.company-details { margin: 0; border-top: 1px solid color-mix(in srgb,currentColor 32%,transparent); }
.company-details div { display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; padding: 1.45rem 0; border-bottom: 1px solid color-mix(in srgb,currentColor 32%,transparent); }
.company-details dt { font: 500 .58rem/1.7 ui-monospace,monospace; letter-spacing: .13em; opacity: .62; }
.company-details dd { margin: 0; font-size: .86rem; line-height: 1.8; }
.company-details a { text-decoration: underline; text-underline-offset: .25rem; }

.president-layout {
  flex: 1; display: grid; grid-template-columns: minmax(18rem,.8fr) minmax(0,1.2fr);
  gap: clamp(3rem,10vw,10rem); align-items: center; padding: clamp(4rem,9vh,8rem) 0;
}
.president-mark {
  position: relative; display: grid; place-items: center; width: min(38vw,29rem); aspect-ratio: 1;
  border: 1px solid color-mix(in srgb,currentColor 32%,transparent); border-radius: 50%;
}
.president-mark::before {
  content: ""; position: absolute; inset: 14%; border: 1px dashed color-mix(in srgb,currentColor 22%,transparent); border-radius: 50%;
}
.president-mark span { font-size: clamp(4rem,9vw,8.5rem); font-weight: 600; letter-spacing: -.09em; }
.president-mark i { position: absolute; width: .55rem; aspect-ratio: 1; right: 13.5%; top: 50%; border-radius: 50%; background: currentColor; }
.president-mark small { position: absolute; bottom: 18%; font: 500 .52rem/1 ui-monospace,monospace; letter-spacing: .16em; }
.president-content { align-self: center; }
.president-name { margin: 2rem 0 0; font-size: clamp(3.6rem,8.7vw,9rem); font-weight: 560; line-height: .78; letter-spacing: -.08em; }
.president-name span { display: block; }
.president-name span:last-child { margin-left: clamp(0rem,5vw,5rem); }
.president-copy { max-width: 34rem; margin: clamp(2.5rem,7vh,5rem) 0 0; font-size: clamp(.9rem,1.2vw,1.08rem); line-height: 1.9; }
.president-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100%,27rem);
  margin-top: 2rem; padding: 1rem 0; border-top: 1px solid color-mix(in srgb,currentColor 35%,transparent);
  border-bottom: 1px solid color-mix(in srgb,currentColor 35%,transparent); font-size: .8rem; font-weight: 600;
  transition: padding .25s ease;
}
.president-link i { font-style: normal; font-size: 1rem; }
.president-link:hover, .president-link:focus-visible { padding-left: .7rem; padding-right: .7rem; outline: none; }

.contact-frame { justify-content: space-between; }
.contact-heading {
  margin: auto 0; font-size: clamp(3.6rem,10vw,10.5rem); font-weight: 540; line-height: .78; letter-spacing: -.085em;
}
.contact-heading .line:nth-child(2) { margin-left: auto; width: max-content; }
.contact-heading .line--jp { margin: clamp(1.8rem,5vh,4rem) 0 0 auto; font-size: .22em; font-weight: 600; letter-spacing: -.04em; line-height: 1.3; }
.contact-bottom { display: grid; grid-template-columns: 1fr minmax(18rem,1fr); gap: 3rem; align-items: end; }
.contact-bottom > p { margin: 0; font-size: .85rem; line-height: 1.8; }
.contact-links { display: flex; flex-direction: column; gap: 1.2rem; }
.contact-link { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid currentColor; font-size: clamp(1.5rem,3vw,3rem); font-weight: 520; letter-spacing: -.04em; }
.social-link { display: flex; justify-content: space-between; font: 500 .62rem/1.4 ui-monospace,monospace; letter-spacing: .13em; }
.contact-frame footer { display: flex; justify-content: space-between; margin-top: clamp(4rem,10vh,8rem); font: 500 .55rem/1 ui-monospace,monospace; letter-spacing: .12em; opacity: .62; }
.contact-frame footer b { font-weight: inherit; }

.reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-text { opacity: 0; transform: translateY(.65em); transition: opacity 1.05s cubic-bezier(.22,1,.36,1), transform 1.05s cubic-bezier(.22,1,.36,1); }
.reveal-text.is-visible { opacity: 1; transform: translateY(0); }
.reveal-row { opacity: 0; transform: translateY(1.3rem); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1), padding .35s cubic-bezier(.22,1,.36,1); }
.reveal-row.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 860px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .split-frame { grid-template-columns: 1fr; gap: 2.5rem; }
  .section-main { min-height: 70svh; }
  .business-row { grid-template-columns: 2.7rem minmax(8rem,.75fr) minmax(0,1.25fr); gap: 1rem; }
  .business-action { grid-column: 3; }
  .company-heading { grid-template-columns: 1fr; }
  .company-grid { grid-template-columns: 1fr; }
  .president-layout { grid-template-columns: 1fr; }
  .president-mark { width: min(64vw,25rem); }
}

@media (max-width: 560px) {
  .scene { min-height: 105svh; }
  .scene-frame { padding-top: 6.8rem; }
  .hero-emblem { height: 60svh; min-height: 28rem; }
  .hero-business-nav { grid-template-columns: repeat(5,minmax(8.3rem,1fr)); overflow-x: auto; margin-right: calc(var(--page-x) * -1); }
  .hero-business-nav a { padding: .7rem .55rem; }
  .mountain-mark { width: 47rem; left: 42%; transform: translate(-46%,-50%); }
  .hero-name { justify-content: flex-start; gap: .65rem; font-size: clamp(4.2rem,22vw,7rem); }
  .hero-name__group { font-size: .34em; letter-spacing: .14em; }
  .hero-company-name { left: 0; top: calc(50% + 4.2rem); transform: none; gap: .65rem; letter-spacing: .08em; }
  .hero-company-name span + span { padding-left: .65rem; }
  .hero-meta { align-items: flex-start; }
  .hero-meta p:last-child { writing-mode: vertical-rl; }
  .scroll-cue { display: none; }
  .display-copy { font-size: clamp(3rem,15vw,5.4rem); }
  .display-copy .line:nth-child(2) { margin-left: 0; }
  .copy-grid { grid-template-columns: 1fr; }
  .business-row { grid-template-columns: 2.2rem 1fr; gap: .8rem 1rem; padding: 1.7rem 0; }
  .business-row h3 { font-size: 1.45rem; }
  .business-copy, .business-action { grid-column: 2; }
  .business-action { margin-top: .3rem; }
  .business-note { width: auto; }
  .editorial-image { height: 68vh; }
  .company-details div { grid-template-columns: 1fr; gap: .55rem; }
  .president-mark { width: min(82vw,22rem); margin: 0 auto; }
  .president-name { font-size: clamp(3.6rem,18vw,6.4rem); }
  .president-name span:last-child { margin-left: 0; }
  .contact-heading { font-size: clamp(3.3rem,17vw,6rem); line-height: .83; }
  .contact-heading .line:nth-child(2) { margin-left: 0; width: auto; }
  .contact-bottom { grid-template-columns: 1fr; }
  .contact-frame footer { display: grid; gap: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal-text, .reveal-row { opacity: 1; transform: none; }
}