/* Selected concept 2: a full-screen laptop portal, with copy above the scene. */
:root {
  --brand: #606060;
  --brand-dark: #292929;
  --silver: #bdbdbd;
  --accent: #ddeb37;
  --accent-soft: #f1f5b0;
  --header-height: 84px;
  --scene-progress: 0;
}
html { scroll-padding-top: calc(var(--header-height) + 28px); }
body, .section, .services-section, .company-section, .approach-section,
.contact-section, .site-footer, dialog { background: #fff; }
.site-header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-height);
  z-index: 40;
  background: rgb(255 255 255 / 97%);
  border-bottom: 1px solid var(--line);
  transition: opacity .18s, visibility .18s;
  backdrop-filter: blur(12px);
}
body[data-site-stage="story"] .site-header { visibility: hidden; opacity: 0; pointer-events: none; }
body[data-site-stage="body"] .site-header { visibility: visible; opacity: 1; }
.brand { width: 132px; }
.brand img, .footer-brand img { width: 106px; mix-blend-mode: normal; }
.header-contact { background: #333; }
.header-contact:hover, .form-submit:hover { background: #555; }
.mobile-nav { background: #fff; }

.hero.hero-story {
  height: 1800vh; height: 1800svh;
  min-height: 0;
  max-height: none;
  position: relative;
  overflow: visible;
  isolation: auto;
  background: #fff;
}
.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh; height: 100svh;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}
#hero-scene { position: absolute; inset: 0; z-index: 1; background: transparent; pointer-events: none; }
#hero-scene canvas { display: block; width: 100%; height: 100%; }
.hero-story .hero-copy {
  position: absolute;
  top: clamp(34px, 5.7vh, 72px); top: clamp(34px, 5.7svh, 72px);
  left: 5%;
  width: 90%;
  height: auto;
  padding: 0;
  margin: 0;
  z-index: 3;
  text-align: center;
  pointer-events: none;
}
.scene-copy { display: none; width: 100%; }
[data-scene-step="0"] [data-scene-copy="0"],
[data-scene-step="1"] [data-scene-copy="1"],
[data-scene-step="2"] [data-scene-copy="2"] { display: block; }
.hero-story .scene-copy h1, .hero-story .scene-copy h2 {
  color: #292929;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(clamp(46px, min(6.45vw, 9.4vh), 96px), calc(88vw / var(--headline-chars, 9))); font-size: min(clamp(46px, min(6.45vw, 9.4svh), 96px), calc(88vw / var(--headline-chars, 9)));
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.075em;
  margin: 0;
  padding: 0;
  transform: none;
  text-shadow: none;
  filter: none;
}
.hero-headline-line { display: block; white-space: nowrap; }
.hero-story .hero-description {
  margin: clamp(20px, 2.5vh, 30px) auto 0; margin: clamp(20px, 2.5svh, 30px) auto 0;
  color: #3d3d3d;
  font-size: clamp(13px, 1.24vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .14em;
  text-shadow: none;
}
/* Text yields the screen to the camera as it travels through the laptop. */
.scene-copy[data-scene-copy="0"] {
  opacity: clamp(0, calc((.0686 - var(--scene-progress, 0)) * 54.945), 1);
  transform: none;
}
.scene-copy[data-scene-copy="1"] {
  display: none !important;
  opacity: 0;
}
.scene-copy[data-scene-copy="2"] {
  opacity: clamp(0, calc((var(--scene-progress, 0) - .965) * 28.58), 1);
}
.hero-story .hero-footer {
  position: absolute;
  bottom: clamp(26px, 4.7vh, 52px); bottom: clamp(26px, 4.7svh, 52px);
  left: 4.4%;
  right: 4.4%;
  height: auto;
  padding: 0;
  margin: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  border: 0;
  background: transparent;
}
.hero-services-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #343434;
  border-bottom: 1px solid #a9a9a9;
  padding: 10px 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.4;
}
.hero-services-link span { font-size: 17px; line-height: 1; }
.hero-story[data-hero-ui="middle"] .hero-footer { visibility: hidden; opacity: 0; pointer-events: none; }
.hero-services-link:hover { border-bottom-color: #737d10; }
.hero-story .scroll-cue {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #737373;
  font: 500 8px/1.5 'DM Sans', sans-serif;
  letter-spacing: .17em;
  padding: 8px 0;
  white-space: nowrap;
}
.hero-story .scroll-line { width: 1px; height: 52px; background: #606060; flex: none; }
.scene-navigation, .scene-caption, .industry-notes, .scene-chapter { display: none; }
.software-chapters {
  position: absolute;
  left: 4.4%;
  bottom: 5vh; bottom: 5svh;
  width: min(440px, 58%);
  z-index: 5;
  pointer-events: none;
}
.software-chapter { display: none; align-items: flex-start; gap: 15px; }
.software-chapter-number {
  color: #737373;
  font: 500 9px/1.7 'DM Sans', sans-serif;
  letter-spacing: .09em;
  white-space: nowrap;
  padding-top: 4px;
}
.software-chapter-title { margin: 0 0 7px; color: #343434; font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -.025em; }
.software-chapter-action { margin: 0; color: #737373; font-size: 11px; line-height: 1.7; letter-spacing: .035em; }
.resolution-caption { display: none; }
[data-resolution-phase="problem"] [data-resolution-caption="problem"],
[data-resolution-phase="process"] [data-resolution-caption="process"],
[data-resolution-phase="outcome"] [data-resolution-caption="outcome"] { display: block; }
.resolution-phase-word { display: block; font-size: 9px; letter-spacing: .08em; color: #858585; margin: 0 0 7px; }
.caption-mobile { display: none; }
.hero-story[data-hero-ui="middle"][data-software-stage="build"] [data-software-caption="build"],
.hero-story[data-hero-ui="middle"][data-software-stage="care"] [data-software-caption="care"],
.hero-story[data-hero-ui="middle"][data-software-stage="knowledge"] [data-software-caption="knowledge"],
.hero-story[data-hero-ui="middle"][data-software-stage="workflow"] [data-software-caption="workflow"],
.hero-story[data-hero-ui="middle"][data-software-stage="community"] [data-software-caption="community"] { display: flex; }
.scene-fallback {
  position: absolute;
  inset: 48% 10% auto;
  width: auto;
  height: auto;
  text-align: center;
  color: #737373;
  perspective: none;
}
.scene-fallback p { font-size: 18px; line-height: 1.8; }
.scene-ready .scene-fallback { display: none; }
.hero.hero-story.story-unavailable { height: 100vh; height: 100svh; }
.story-unavailable .hero-stage { position: relative; }
.story-unavailable #hero-scene canvas { display: none; }
.story-unavailable .app-css-renderer { display: none; }
.story-unavailable .scene-copy { display: none !important; }
.story-unavailable .scene-copy[data-scene-copy="0"] { display: block !important; opacity: 1; transform: none; }
.hero-story.story-unavailable .software-chapters { display: none; }
.hero-story.story-unavailable .hero-footer { visibility: visible; opacity: 1; pointer-events: auto; }

@media (min-width: 1800px) {
  .hero-story .scene-copy h1, .hero-story .scene-copy h2 { font-size: min(6.2vw, 10vh, 124px, calc(88vw / var(--headline-chars, 9))); font-size: min(6.2vw, 10svh, 124px, calc(88vw / var(--headline-chars, 9))); }
}
@media (min-width: 761px) and (max-height: 760px) {
  .hero-story .hero-copy { top: 4.8vh; top: 4.8svh; }
  .hero-story .scene-copy h1, .hero-story .scene-copy h2 { font-size: min(6.1vw, 9.4vh, calc(88vw / var(--headline-chars, 9))); font-size: min(6.1vw, 9.4svh, calc(88vw / var(--headline-chars, 9))); }
  .hero-story .hero-description { margin-top: 17px; font-size: 13px; }
  .hero-story .hero-footer { bottom: 20px; }
  .hero-story .scroll-line { height: 38px; }
}
@media (max-width: 760px) {
  :root { --header-height: 74px; }
  .site-header { height: 74px; }
  .brand { width: 112px; }
  .brand img { width: 94px; }
  .mobile-nav { top: 73px; }
  .hero.hero-story { height: 1800vh; height: 1800svh; }
  .hero-story .hero-copy { top: clamp(32px, 7vh, 68px); top: clamp(32px, 7svh, 68px); left: 4%; width: 92%; }
  .hero-story .scene-copy h1, .hero-story .scene-copy h2 {
    font-size: min(clamp(34px, min(8.4vw, 7.9vh), 61px), calc(88vw / var(--headline-chars, 9))); font-size: min(clamp(34px, min(8.4vw, 7.9svh), 61px), calc(88vw / var(--headline-chars, 9)));
    line-height: 1.28;
    letter-spacing: -.075em;
  }
  .hero-story .hero-description {
    font-size: clamp(11px, 2.15vw, 14px);
    letter-spacing: .065em;
    line-height: 1.8;
    margin-top: 20px;
  }
  .hero-story .hero-footer { left: 7%; right: 7%; bottom: 28px; gap: 22px; }
  .hero-services-link { font-size: 10px; gap: 10px; padding-bottom: 10px; }
  .hero-services-link span { font-size: 15px; }
  .hero-story .scroll-cue { max-width: 142px; gap: 12px; font-size: 6px; letter-spacing: .12em; white-space: normal; }
  .hero-story .scroll-line { height: 42px; }
  .scene-fallback { inset: 43% 8% auto; }
  .software-chapters { left: 7%; bottom: 5vh; bottom: 5svh; width: 86%; }
  .software-chapter { gap: 12px; }
  .software-chapter-number { font-size: 8px; padding-top: 3px; }
  .software-chapter-title { margin-bottom: 5px; font-size: 14px; }
  .software-chapter-action { font-size: 10px; letter-spacing: .015em; }
  .caption-desktop { display: none; }
  .caption-mobile { display: inline; }
}
@media (max-width: 380px) {
  .hero-story .scene-copy h1, .hero-story .scene-copy h2 { font-size: min(8.75vw, calc(88vw / var(--headline-chars, 9))); }
  .hero-story .hero-description { font-size: 10px; letter-spacing: .03em; }
  .hero-story .hero-footer { left: 6%; right: 6%; }
}
@media (max-height: 600px) and (max-width: 760px) {
  .hero-story .hero-copy { top: 25px; }
  .hero-story .scene-copy h1, .hero-story .scene-copy h2 { font-size: min(6.2vw, 8.9vh, calc(88vw / var(--headline-chars, 9))); font-size: min(6.2vw, 8.9svh, calc(88vw / var(--headline-chars, 9))); line-height: 1.15; }
  .hero-story .hero-description { font-size: 10px; margin-top: 12px; }
  .hero-story .hero-footer { bottom: 14px; }
  .hero-story .scroll-line { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene-copy { transform: none !important; }
  .scene-copy[data-scene-copy="0"] { opacity: 1; }
  .scene-copy[data-scene-copy="1"] { display: none !important; opacity: 0; }
  .scene-copy[data-scene-copy="2"] { opacity: clamp(0, calc((var(--scene-progress, 0) - .965) * 28.58), 1); }
}

/* Gray lettering catches one narrow lime reflection; scroll is its only clock. */
.hero-headline-line { width: fit-content; max-width: 100%; margin-inline: auto; color: #292929; }
.scene-copy[data-scene-copy="0"] { --hero-letter-travel: clamp(0, calc(var(--scene-progress, 0) * 14.57726), 1); }
.scene-copy[data-scene-copy="1"] { --hero-letter-travel: clamp(0, calc((var(--scene-progress, 0) - .43) * 5), 1); }
.scene-copy[data-scene-copy="2"] { --hero-letter-travel: clamp(0, calc((var(--scene-progress, 0) - .965) * 28.58), 1); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-headline-line {
    background-image:
      linear-gradient(112deg, #ddeb3700 0%, #ddeb3700 45%, #ddeb3744 47.5%, #ddeb37ed 49%, #fffef0 50%, #ddeb37ed 51%, #ddeb3700 53%, #ddeb3700 100%),
      linear-gradient(106deg, #242424 0%, #292929 25%, #858585 36%, #5b5b5b 44%, #292929 55%, #727272 67%, #353535 79%, #292929 100%);
    background-size: 260% 100%, 100% 100%;
    background-position: calc(100% - var(--hero-letter-travel, 0) * 100%) 50%, 50% 50%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce), print {
  .hero-headline-line { background: none; color: #292929; -webkit-text-fill-color: currentColor; }
}
@media (forced-colors: active) {
  .hero-headline-line { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
}

/* Startup messages are outside the aria-hidden scene; the approved 3D stays intact. */
.hero-load-status[hidden], .hero-diagnostics[hidden] { display: none !important; }
.hero-load-status { position: absolute; z-index: 12; top: 58%; left: 50%; transform: translate(-50%,-50%); width: min(440px,88%); padding: 24px 28px; background: #ffffffed; border: 1px solid #e3e4e4; border-radius: 12px; color: #555; font-size: 12px; line-height: 1.9; text-align: center; }
.hero-load-status p { margin: 0 0 10px; }
.hero-load-status .hero-load-status-title { color: #292929; font-size: 15px; font-weight: 500; }
.hero-load-status button { padding: 8px 18px; margin: 4px 12px 4px 0; border: 1px solid #bbb; border-radius: 99px; color: #292929; background: #fff; cursor: pointer; font: inherit; }
.hero-load-status a { display: inline-block; padding-block: 8px; color: #555; text-underline-offset: 4px; }
.hero-status-visible .scene-fallback { visibility: hidden; }
.hero-diagnostics { position: fixed; z-index: 150; left: 12px; top: 100px; width: min(500px,calc(100% - 24px)); padding: 8px 12px; border: 1px solid #bbb; border-radius: 5px; background: #fffffffa; color: #292929; font: 12px/1.6 monospace; }
.hero-diagnostics summary { cursor: pointer; }
.hero-diagnostics pre { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }