/* ==========================================================================
   KOMATSU DESIGN — V4 MONUMENT (motion revision)
   One K of six plates lives in a single fixed layer behind every reading
   plane. The layout reserves the architecture's space: a left wall column,
   lintel/plinth bands around Services, beam lanes beside/under the works,
   a bar lane under the email. main.js attaches the plates to those reserved
   positions and moves them between sections with native scroll.
   Default HTML is fully composed without JS: static K in the hero zone and
   CSS-painted wall/bands/bars. html.enhanced (set after a successful init)
   swaps to the live layer and shows the header controls / menu panel.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --mute: #5a5a5a;
  --rule: rgba(10, 10, 10, .14);
  --cobalt: #0038ff;
  --cobalt-light: #7a9bff;

  --sans: 'Noto Sans JP', -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "メイリオ", sans-serif;
  --gutter: clamp(16px, 4vw, 64px);
  --header-h: 60px;

  /* architecture reservations (read by main.js through a probe element) */
  --wall-w: 7vw;
  --band-h: 6vh;
  --dock: 28px;
  --dock-gap: 10px;
  --bar: 10px;
  --col-l: calc(var(--wall-w) + 14px);
  --col-r: 100%;

  --ease: cubic-bezier(.2, .7, .1, 1);
}
@media (min-width: 1000px) {
  :root {
    --header-h: 64px;
    --wall-w: clamp(64px, 7vw, 120px);
    --band-h: clamp(56px, 8vh, 96px);
    --dock: 56px;
    --dock-gap: 16px;
    --bar: 14px;
    --col-l: calc(var(--wall-w) + var(--dock-gap) + var(--dock) + var(--dock-gap));
    --col-r: 50vw;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 8px);
  scroll-behavior: smooth;
}
html.motion-off { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
a { color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 500; line-height: 1.1; }
i { line-height: 1; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.skip-link {
  position: fixed; top: .6rem; left: .6rem; z-index: 100;
  padding: .6em 1em; background: var(--fg); color: #fff;
  font-size: .85rem; text-decoration: none; transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline-color: var(--fg); }
.motion-off *, .motion-off *::before, .motion-off *::after {
  transition: none !important;
  animation: none !important;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  position: relative;
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .75rem;
  padding-inline: var(--gutter);
}
.logo {
  font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-decoration: none; white-space: nowrap; min-width: 0; overflow: hidden;
}
.header-tools { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.2rem); justify-self: end; }
.motion-toggle, .nav-toggle {
  display: none; appearance: none; background: var(--bg); color: inherit; border: 0;
  font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .1em; line-height: 1;
  cursor: pointer; align-items: center;
}
.enhanced .motion-toggle, .enhanced .nav-toggle { display: inline-flex; }
.motion-toggle { gap: .6em; padding: .6em .9em; border: 2px solid var(--fg); }
.mt-state { display: inline-flex; align-items: center; gap: .45em; }
.mt-state::before {
  content: ''; width: .55em; height: .55em;
  background: var(--cobalt); box-shadow: inset 0 0 0 2px var(--cobalt); transition: background .25s;
}
.motion-toggle[aria-pressed="false"] .mt-state::before { background: var(--bg); }
.nav-toggle { gap: .7em; padding: .6em 0 .6em .4em; }
.menu-icon { position: relative; width: 24px; height: 12px; display: block; }
.menu-icon span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .4s var(--ease); }
.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .menu-icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Navigation ---------- */
.site-nav { grid-column: 1 / -1; padding: 0 0 .9rem; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.nav-link {
  position: relative; display: inline-block; padding: .45em 0;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-decoration: none;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
  background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav-link:hover::after, .nav-link:focus-visible::after,
html[data-scene="0"] .nav-link[data-sec="0"]::after,
html[data-scene="1"] .nav-link[data-sec="1"]::after,
html[data-scene="2"] .nav-link[data-sec="2"]::after,
html[data-scene="3"] .nav-link[data-sec="3"]::after { transform: scaleX(1); }
@media (max-width: 999px) {
  .enhanced .site-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--fg); color: #fff;
    padding: 2rem var(--gutter) 3rem; overflow-y: auto;
    visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path .45s var(--ease), visibility 0s linear .45s;
  }
  .enhanced .site-nav.open { visibility: visible; clip-path: inset(0); transition: clip-path .45s var(--ease), visibility 0s; }
  .enhanced .site-nav ul { flex-direction: column; gap: 0; }
  .enhanced .site-nav li { border-top: 1px solid rgba(255, 255, 255, .22); }
  .enhanced .site-nav li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
  .enhanced .nav-link { display: block; padding: 1.05rem 0; font-size: clamp(1.8rem, 8vw, 2.8rem); font-weight: 700; letter-spacing: -.02em; }
  .enhanced .nav-link::after { display: none; }
  html[data-scene="0"] .enhanced .nav-link[data-sec="0"],
  html[data-scene="1"] .enhanced .nav-link[data-sec="1"],
  html[data-scene="2"] .enhanced .nav-link[data-sec="2"],
  html[data-scene="3"] .enhanced .nav-link[data-sec="3"] { color: var(--cobalt-light); }
  .enhanced .site-nav :focus-visible { outline-color: #fff; }
}
@media (min-width: 1000px) {
  .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(2rem, 4vw, 5rem); }
  .site-nav, .enhanced .site-nav { grid-column: 2; padding: 0; }
  .site-nav ul { flex-wrap: nowrap; gap: 2.2rem; }
  .nav-toggle, .enhanced .nav-toggle { display: none; }
}

/* ---------- The live layer ---------- */
.kstage {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none; display: none;
}
.enhanced .kstage { display: block; }
.kstage .part rect { fill: var(--fg); stroke: var(--bg); stroke-width: 3; transition: fill .25s; }
.kstage .part-j rect { fill: var(--cobalt); }
.kstage .part.is-hot rect { fill: var(--cobalt); }

/* Reading planes: opaque, above the layer */
.plane { position: relative; z-index: 3; background: var(--bg); }

/* ---------- Sections / reading column ---------- */
/* overflow-x: clip (not hidden) keeps translated planes from extending the
   document width without creating a scroll container; ignored where
   unsupported, and the JS bound above makes it belt-and-braces. */
main { overflow-x: clip; }
.sec { position: relative; }
.col {
  position: relative;
  padding-left: var(--col-l);
  padding-right: var(--gutter);
  max-width: var(--col-r);
}
/* narrow: the joint docks ABOVE each title group, so reserve the space */
.title-group { margin-top: calc(var(--dock) + var(--dock-gap) + 6px); margin-bottom: clamp(1.8rem, 5vh, 3.2rem); }
.hero-col { padding-top: calc(var(--dock) + var(--dock-gap) + 6px); padding-bottom: clamp(3rem, 8vh, 6rem); }

/* Hero */
.sec-hero { min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; }
.hero-zone { position: relative; height: 56vh; min-height: 340px; }
.k-static { position: absolute; inset: 6%; width: 88%; height: 88%; display: block; }
.k-static rect { fill: var(--fg); stroke: var(--bg); stroke-width: 3; }
.k-static .k-static-j rect { fill: var(--cobalt); }
.enhanced .k-static { display: none; }

/* Services: lintel band above, plinth band below, wall at left (reserved) */
.sec-services { padding: calc(var(--band-h) + 6vh) 0 calc(var(--band-h) + 8vh); }
.service { border-top: 3px solid var(--fg); padding-top: clamp(1.6rem, 3vw, 2.4rem); }

/* Works */
.sec-works { padding: clamp(4rem, 10vh, 7rem) 0; }
.works-list { border-top: 3px solid var(--fg); }
.work-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  column-gap: 1rem;
  align-items: baseline;
  padding: clamp(1rem, 2vw, 1.5rem) 0 calc(clamp(1rem, 2vw, 1.5rem) + var(--bar) + 10px);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--fg);
}

/* Contact: bar lane under the email; narrow screens hang the K below.
   The email row is NOT an opaque plane: its bar lane sits inside its own
   padding and must stay visible. The email text itself is opaque. */
.sec-contact { padding: clamp(4rem, 10vh, 7rem) 0 calc(30vh + 4rem); }
.contact-row { margin-top: clamp(1.8rem, 5vh, 3rem); margin-bottom: 0; padding-bottom: calc(var(--bar) + 12px); background: transparent; }
/* Narrow: each work row carries its beam lane in its bottom padding, so rows
   are not opaque planes there (the struts travel in the right gutter, never
   under row text). Wide: rows are planes; beams live in the right zone. */
@media (max-width: 999px) {
  .work-item.plane { background: transparent; }
  /* the row's reading boxes are opaque text planes; only its bottom lane is open */
  .work-item .work-title, .work-item .work-category, .work-item .work-arrow {
    position: relative; z-index: 3; background: var(--bg);
  }
}
.contact-email { max-width: calc(100% - var(--dock) - 24px); }

@media (min-width: 1000px) {
  .title-group { margin-top: 0; }
  .hero-col { padding-top: 0; padding-bottom: 0; }
  .sec-hero {
    display: grid;
    grid-template-columns: minmax(0, 50vw) minmax(0, 1fr);
    align-items: stretch;
  }
  .hero-col { grid-column: 1; grid-row: 1; align-self: center; padding-top: 8vh; padding-bottom: 8vh; }
  .hero-zone { grid-column: 2; grid-row: 1; height: auto; min-height: 0; }
  .sec-services { min-height: 115vh; }
  .sec-works { min-height: 100vh; }
  .work-link { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
  .sec-contact { min-height: 100vh; padding-bottom: clamp(5rem, 12vh, 8rem); }
  .sec-contact .col { max-width: none; }
  #contactTitle { max-width: 42vw; }
  .contact-email { max-width: none; }
}

/* ---------- Static architecture without the enhancement ---------- */
html:not(.enhanced) .sec-services {
  background:
    linear-gradient(var(--fg), var(--fg)) left top / var(--wall-w) 100% no-repeat,
    linear-gradient(var(--fg), var(--fg)) left top / 100% var(--band-h) no-repeat,
    linear-gradient(var(--fg), var(--fg)) left bottom / 100% var(--band-h) no-repeat;
}
html:not(.enhanced) .work-link {
  background: linear-gradient(var(--fg), var(--fg)) left calc(100% - 10px) / 45% var(--bar) no-repeat;
}
html:not(.enhanced) .contact-row {
  background: linear-gradient(var(--fg), var(--fg)) left bottom / 100% var(--bar) no-repeat;
}
@media (min-width: 1000px) {
  html:not(.enhanced) .work-link { background: none; border-left: 10px solid var(--fg); padding-left: 1rem; }
}

/* ---------- Type ---------- */
.eyebrow, .label {
  display: flex; align-items: center; gap: 1em;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; line-height: 1;
}
.eyebrow { color: var(--cobalt); margin-bottom: clamp(1.4rem, 4vh, 2.6rem); }
.label { color: var(--fg); margin-bottom: 1.4rem; }
.eyebrow::before, .label::before { content: ''; width: 2.4rem; height: 3px; background: var(--cobalt); flex: none; }
.hero-title {
  font-size: clamp(2.3rem, 11.5vw, 4.2rem); font-weight: 700; line-height: 1.0; letter-spacing: -.035em;
  font-feature-settings: "palt";
}
.hero-title .pivot { color: var(--cobalt); }
.hero-lead { margin-top: clamp(1.4rem, 4vh, 2.4rem); font-size: clamp(.98rem, 1.05vw, 1.12rem); line-height: 2; max-width: 28em; }
.hero-actions { margin-top: clamp(1.6rem, 4vh, 2.6rem); display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 1000px) { .hero-title { font-size: clamp(3.2rem, 6.4vw, 7rem); line-height: .96; } }
.display {
  font-size: clamp(1.5rem, 2.4vw, 2.6rem); font-weight: 700; line-height: 1.3; letter-spacing: -.025em;
  font-feature-settings: "palt"; max-width: 18em;
}
.services-display { max-width: 15em; text-wrap: balance; }
.btn {
  display: inline-flex; align-items: center; padding: 1em 1.7em; border: 2px solid var(--fg);
  font-size: .84rem; font-weight: 700; letter-spacing: .06em; line-height: 1; text-decoration: none;
  color: var(--fg); background: var(--bg); transition: color .25s, background-color .25s, border-color .25s;
}
.btn:hover, .btn:focus-visible { color: var(--cobalt); border-color: var(--cobalt); }
.btn-fill { background: var(--fg); color: #fff; }
.btn-fill:hover, .btn-fill:focus-visible { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }

.service-icon { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: var(--cobalt); color: #fff; font-size: 1rem; margin-bottom: 1.4rem; }
.service-title { font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 700; letter-spacing: -.02em; font-feature-settings: "palt"; margin-bottom: 1.1rem; }
.service-description { max-width: 34em; font-size: clamp(.95rem, 1.02vw, 1.05rem); line-height: 2.05; }

.works-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 2rem; }
.works-head .label { margin-bottom: 0; }
.works-head .display { max-width: none; }
.work-title { font-size: clamp(1.1rem, 1.7vw, 1.7rem); font-weight: 700; line-height: 1.4; letter-spacing: -.02em; font-feature-settings: "palt"; overflow-wrap: anywhere; transition: color .25s; }
.work-category { grid-column: 1; margin-top: .25rem; font-size: .72rem; letter-spacing: .14em; color: var(--mute); }
.work-arrow { grid-column: 2; grid-row: 1; justify-self: end; font-size: .95rem; color: var(--mute); transition: transform .4s var(--ease), color .25s; }
.work-link:hover .work-title, .work-link:focus-visible .work-title, .work-item.is-active .work-title { color: var(--cobalt); }
.work-link:hover .work-arrow, .work-link:focus-visible .work-arrow, .work-item.is-active .work-arrow { color: var(--cobalt); transform: translate3d(.2em, -.2em, 0) rotate(-45deg); }
.work-link:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

.contact-intro { max-width: 20em; }
.contact-email {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: clamp(1.15rem, 2.6vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.3;
  color: var(--cobalt); text-decoration: none; overflow-wrap: anywhere; transition: color .25s;
  /* the link box itself is the opaque protection plane for the email glyphs;
     the bar lane below it (in the row's padding) stays visible */
  position: relative; z-index: 3; background: var(--bg);
}
.contact-email i { font-size: .7em; flex: none; }
.contact-email:hover, .contact-email:focus-visible { color: var(--fg); }

/* ---------- Footer: plinth ---------- */
.site-footer { position: relative; z-index: 3; background: var(--fg); color: #fff; font-size: .82rem; line-height: 1.9; }
.footer-inner { padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.footer-logo { font-size: .74rem; font-weight: 700; letter-spacing: .18em; }
.company-info p + p { color: rgba(255, 255, 255, .7); }
.footer-email { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; overflow-wrap: anywhere; }
.footer-email:hover, .footer-email:focus-visible { color: var(--cobalt-light); }
.footer-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.footer-nav a { font-size: .74rem; letter-spacing: .1em; text-decoration: none; color: rgba(255, 255, 255, .75); }
.footer-nav a:hover, .footer-nav a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: .3em; }
.copyright { font-size: .72rem; color: rgba(255, 255, 255, .6); padding-top: 1rem; }
.site-footer :focus-visible { outline-color: #fff; }
@media (min-width: 1000px) {
  .footer-inner {
    grid-template-columns: .8fr 1.3fr 1.3fr .9fr;
    grid-template-areas: "logo info mail nav" "copy copy copy copy";
    column-gap: 2rem; align-items: start;
  }
  .footer-logo { grid-area: logo; }
  .company-info { grid-area: info; }
  .footer-email { grid-area: mail; }
  .footer-nav { grid-area: nav; justify-self: end; }
  .copyright { grid-area: copy; padding-top: 2.2rem; }
}

/* ---------- Narrow header fit ---------- */
@media (max-width: 420px) {
  .logo { font-size: .7rem; letter-spacing: .12em; }
  .header-tools { gap: .4rem; }
  .motion-toggle { padding: .55em .7em; gap: 0; }
  .motion-toggle .mt-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .nav-toggle { gap: .55em; padding-left: .3em; }
  .menu-icon { width: 22px; }
}
@media (max-width: 359px) {
  :root { --header-h: 56px; }
  .hero-title { font-size: 2.1rem; }
  .btn { padding: .9em 1.3em; font-size: .8rem; }
  .hero-zone { min-height: 300px; }
}

/* ---------- Coarse pointers ---------- */
@media (pointer: coarse) {
  .work-link:hover .work-arrow { transform: none; }
  .work-link:hover .work-title { color: inherit; }
}