/* ============================================================
   v3 top page — vertical scroll → horizontal content motion,
   with a walking SVG character fixed at bottom-left.
============================================================ */

/* .page provides vertical scroll height; content stays fixed. */
.page {
  height: 600vh;          /* 6 sections × 100vh of scroll input */
  width: 100%;
  pointer-events: none;
}

.content {
  position: fixed;
  top: 0; left: 0;
  display: flex;
  width: 600vw;           /* 6 sections × 100vw */
  height: 100vh;
  will-change: transform;
  z-index: 1;
}

.section-h {
  flex-shrink: 0;
  width: 100vw;
  height: 100vh;
  /* Symmetric top/bottom padding so the inner content centers cleanly. */
  padding: var(--space-5) var(--gutter);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}

/* ============================================================
   Hero "404" mark — editorial wayfinding stamp on the right edge.
   A thin vertical line spans the section, with a small uppercase
   label centered. Subtle but designed.
============================================================ */
.section-h__watermark {
  position: absolute;
  top: 0;
  right: clamp(16px, 2.4vw, 36px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.section-h__watermark__line {
  width: 1px;
  flex: 1;
  background: var(--ink);
  opacity: 0.28;
}
.section-h__watermark__label {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--ink);
  opacity: 0.55;
  white-space: nowrap;
  padding: 0.5em 0;
}
.section-h__watermark__label .num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6em;
  letter-spacing: 0.04em;
  display: inline-block;
  margin: 0 0.2em;
}

@media (max-width: 720px) {
  .section-h__watermark { right: 8px; gap: 0.8rem; }
  .section-h__watermark__label { font-size: 0.62rem; letter-spacing: 0.3em; }
  /* On mobile only show the right-edge stamp in Hero — too cluttered
     on the smaller sections (text + grid + dock) at narrow widths. */
  .section-h:not(.section-h--hero) .section-h__watermark {
    display: none;
  }
}

.section-h__inner { position: relative; z-index: 1; }

.section-h--hero      { background: var(--sec-mustard); }
.section-h--identity  { background: var(--sec-sage); }
.section-h--business  { background: var(--sec-coral); }
.section-h--company   { background: var(--sec-cream); }
.section-h--news      { background: var(--sec-stone); }
.section-h--contact   { background: var(--sec-rose); }

.section-h__inner {
  max-width: 900px;
  width: 100%;
  text-align: center;
  margin-top: 0;           /* top-aligned via .section-h align-items: flex-start */
}
.section-h__inner--hero {
  max-width: 1280px;       /* extra room for the longer tagline */
}

.section-h__eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* Sub-heading sits TIGHT against the main heading — they read as a
     single unit. The previous gap-then-align approach is dropped. */
  margin-bottom: var(--space-1);
  opacity: 0.8;
}
/* Hero/Identity are vertically centered, so they get a little more
   breathing room between eyebrow and tagline. */
.section-h--hero .section-h__eyebrow,
.section-h--identity .section-h__eyebrow {
  margin-bottom: var(--space-2);
}

/* ============================================================
   Section title — no forced min-height; the title sits immediately
   under the eyebrow (tight set). Across sections the heading BLOCK
   is aligned by virtue of identical top padding + tight eyebrow gap.
============================================================ */
.section-h__title,
.section-h__title-jp,
.hero-h__tagline {
  margin-bottom: var(--space-4);
  text-align: center;
}

.section-h__title,
.hero-h__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.section-h__title-jp {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: clamp(26px, 4.4vw, 60px);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* Emphasis inside titles — underlined accent */
.section-h__title em,
.hero-h__tagline em {
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}
.section-h__title-jp em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 0.04em;
  text-underline-offset: 0.18em;
}

.section-h__lede {
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  line-height: 2;
  max-width: 640px;
  margin: 0 auto var(--space-4);
  opacity: 0.85;
}

.section-h__cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 30px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.section-h__cta:hover {
  background: var(--ink);
  color: var(--paper);
}

.section-h__email {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 36px);
  letter-spacing: 0.02em;
}

/* ============================================================
   Business section — editorial 2-column layout
   Left:  intro copy (eyebrow, title, lead, body)
   Right: 4 text-only service columns with big italic number,
          italic name, short dash, JP caption, circular arrow.
          Columns are separated by thin vertical rules.
============================================================ */
.section-h__inner--business {
  max-width: none;
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(260px, 32%) 1fr;
  column-gap: clamp(20px, 2.6vw, 48px);
  align-items: center;
  padding: 0 clamp(8px, 2vw, 36px);
}

/* ── Left column: intro ───────────────────────────────────── */
.biz-intro {
  text-align: left;
  /* Inset the intro from the viewport edge so it doesn't hug the
     left side too tightly. */
  padding-left: clamp(28px, 5vw, 80px);
}
.biz-intro .section-h__eyebrow {
  text-align: left;
  margin-bottom: var(--space-1);
}
.biz-intro .section-h__title {
  text-align: left;
  margin-bottom: var(--space-3);
}
.biz-intro__lead {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}
.biz-intro__body {
  font-family: var(--font-jp);
  font-size: clamp(13px, 0.95vw, 14px);
  line-height: 2;
  opacity: 0.78;
  margin: 0;
}

/* ── Right column: 4 service cards (text only) ─────────────── */
.biz-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-self: stretch;
}
.biz-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(14px, 1.8vw, 28px) clamp(14px, 1.8vw, 28px)
           clamp(14px, 1.8vw, 28px) clamp(20px, 2vw, 32px);
  /* Thin vertical rule between cards (skip first column) */
  border-left: 1px solid rgba(21, 22, 26, 0.3);
  min-width: 0;
}
.biz-card:first-child {
  border-left: none;
  padding-left: clamp(4px, 0.6vw, 12px);
}
.biz-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 5.5vw, 88px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-4);
  color: var(--ink);
}
.biz-card__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}
.biz-card__dash {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  opacity: 0.55;
  margin: 0 0 var(--space-2);
}
.biz-card__desc {
  font-family: var(--font-jp);
  font-size: clamp(12px, 0.92vw, 14px);
  line-height: 1.75;
  letter-spacing: 0.04em;
  opacity: 0.78;
  margin: 0 0 var(--space-4);
}
.biz-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3vw, 46px);
  height: clamp(38px, 3vw, 46px);
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  margin-top: auto;          /* push arrow to bottom of column */
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.biz-card__arrow:hover,
.biz-card__arrow:focus-visible {
  background: var(--ink);
  color: var(--paper);
  transform: translateX(3px);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .section-h__inner--business {
    grid-template-columns: minmax(220px, 30%) 1fr;
    column-gap: clamp(16px, 2vw, 30px);
  }
}
@media (max-width: 860px) {
  .section-h__inner--business {
    grid-template-columns: 1fr;
    row-gap: clamp(20px, 3vh, 32px);
    text-align: center;
    align-items: start;
  }
  .biz-intro,
  .biz-intro .section-h__eyebrow,
  .biz-intro .section-h__title { text-align: center; }
  .biz-intro { padding-left: 0; }   /* reset desktop inset for centered mobile */
  .biz-intro__body { display: none; }
  .biz-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .biz-card {
    padding: var(--space-2) clamp(10px, 3vw, 18px);
    border-left: 1px solid rgba(21, 22, 26, 0.25);
    align-items: flex-start;
    text-align: left;
  }
  .biz-card:nth-child(odd) {
    border-left: none;
    padding-left: clamp(4px, 2vw, 10px);
  }
  .biz-card:nth-child(n+3) {
    border-top: 1px solid rgba(21, 22, 26, 0.18);
    padding-top: clamp(14px, 3vw, 22px);
    margin-top: clamp(8px, 2vw, 14px);
  }
  .biz-card__num   { font-size: 36px; margin-bottom: var(--space-2); }
  .biz-card__name  { font-size: 20px; }
  .biz-card__arrow { width: 36px; height: 36px; font-size: 16px; }
}
@media (max-width: 480px) {
  .biz-intro__lead { font-size: 15px; }
  .biz-card__num   { font-size: 32px; }
  .biz-card__name  { font-size: 18px; }
}

/* ============================================================
   Text effects — initial hidden state, revealed when section
   becomes active (via .is-active class added by text-effects.js).
   Only applies when JS is enhanced (`.js-enhanced` on <html>).
============================================================ */
.js-enhanced .section-h .section-h__eyebrow,
.js-enhanced .section-h .section-h__lede,
.js-enhanced .section-h .hero-h__tagline-jp,
.js-enhanced .section-h .section-h__cta,
.js-enhanced .section-h .biz-cards > li,
.js-enhanced .section-h .snapshot-list__row,
.js-enhanced .section-h .section-h__email {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  transition-delay: var(--fx-delay, 0s);
  will-change: transform, opacity;
}

.js-enhanced .section-h.is-active .section-h__eyebrow,
.js-enhanced .section-h.is-active .section-h__lede,
.js-enhanced .section-h.is-active .hero-h__tagline-jp,
.js-enhanced .section-h.is-active .section-h__cta,
.js-enhanced .section-h.is-active .biz-cards > li,
.js-enhanced .section-h.is-active .snapshot-list__row,
.js-enhanced .section-h.is-active .section-h__email {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays per element (in active section) */
.js-enhanced .section-h.is-active .section-h__eyebrow      { --fx-delay: 0.08s; }
.js-enhanced .section-h.is-active .hero-h__tagline-jp       { --fx-delay: 0.55s; }
.js-enhanced .section-h.is-active .section-h__lede          { --fx-delay: 0.55s; }
.js-enhanced .section-h.is-active .biz-cards > li:nth-child(1) { --fx-delay: 0.55s; }
.js-enhanced .section-h.is-active .biz-cards > li:nth-child(2) { --fx-delay: 0.62s; }
.js-enhanced .section-h.is-active .biz-cards > li:nth-child(3) { --fx-delay: 0.69s; }
.js-enhanced .section-h.is-active .biz-cards > li:nth-child(4) { --fx-delay: 0.76s; }
.js-enhanced .section-h.is-active .snapshot-list__row:nth-child(1) { --fx-delay: 0.55s; }
.js-enhanced .section-h.is-active .snapshot-list__row:nth-child(2) { --fx-delay: 0.60s; }
.js-enhanced .section-h.is-active .snapshot-list__row:nth-child(3) { --fx-delay: 0.65s; }
.js-enhanced .section-h.is-active .snapshot-list__row:nth-child(4) { --fx-delay: 0.70s; }
.js-enhanced .section-h.is-active .snapshot-list__row:nth-child(5) { --fx-delay: 0.75s; }
.js-enhanced .section-h.is-active .snapshot-list__row:nth-child(6) { --fx-delay: 0.80s; }
.js-enhanced .section-h.is-active .section-h__email          { --fx-delay: 0.75s; }
.js-enhanced .section-h.is-active .section-h__cta            { --fx-delay: 0.95s; }

/* Title line-mask — title's entire content is wrapped in
   `.tx-line-mask > .tx-line-inner` by text-effects.js. Unified across
   sections: the inner block translates up from below the mask, no
   per-section variations (those felt scattered and inconsistent). */
.js-enhanced .section-h .tx-line-mask {
  display: inline-block;
  overflow: hidden;
  line-height: inherit;
  vertical-align: bottom;
  padding: 0.05em 0.04em;
  margin: -0.05em -0.04em;
}
.js-enhanced .section-h .tx-line-inner {
  display: inline-block;
  will-change: transform;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: 0.15s;
}
.js-enhanced .section-h.is-active .tx-line-inner {
  transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js-enhanced .section-h .section-h__eyebrow,
  .js-enhanced .section-h .section-h__lede,
  .js-enhanced .section-h .hero-h__tagline-jp,
  .js-enhanced .section-h .section-h__cta,
  .js-enhanced .section-h .biz-cards > li,
  .js-enhanced .section-h .snapshot-list__row,
  .js-enhanced .section-h .section-h__email {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Hero specifics
============================================================ */
.hero-h__logo {
  width: clamp(280px, 42vw, 520px);
  margin: 0 auto var(--space-3);
}
.hero-h__logo img {
  width: 100%; height: auto;
  filter: invert(1);   /* white PNG → black */
}
.hero-h__tagline-jp {
  font-family: var(--font-display-jp);
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: 0.14em;
  line-height: 1.7;
  opacity: 0.78;
}

.hero-h__scroll-hint {
  position: absolute;
  bottom: clamp(80px, 12vh, 140px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  z-index: 3;
}
.hero-h__scroll-hint .arrow {
  display: block;
  font-size: 28px;
  margin-top: 4px;
  animation: arrow-bob 1.4s var(--ease-in-out) infinite;
}
@keyframes arrow-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ============================================================
   Company snapshot list
============================================================ */
.snapshot-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-5);
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.snapshot-list__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: var(--fs-sm);
}
.snapshot-list__row dt {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}
@media (max-width: 880px) {
  .snapshot-list { grid-template-columns: 1fr; }
}

/* ============================================================
   News preview list (TOP section)
============================================================ */
.news-preview {
  list-style: none;
  margin: 0 auto var(--space-3);
  padding: 0;
  max-width: 720px;
  text-align: left;
}
.news-preview__item {
  display: grid;
  grid-template-columns: 110px 90px 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-line);
}
.news-preview__date {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.news-preview__cat {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.75;
  justify-self: start;
  white-space: nowrap;
}
.news-preview__title {
  font-family: var(--font-jp);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink);
  text-decoration: none;
  transition: opacity var(--dur-fast);
}
.news-preview__title:hover {
  opacity: 0.65;
}
@media (max-width: 720px) {
  .news-preview__item {
    grid-template-columns: 90px 1fr;
    gap: var(--space-2);
  }
  .news-preview__cat {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 2px;
  }
  .news-preview__title {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   Morphing 404 display — fixed bottom-left, replaces the walker.
   Three 7-segment digits whose segments turn on/off via JS as
   the user scrolls through the page.
============================================================ */
.walker {
  position: fixed;
  left: var(--gutter);
  bottom: clamp(22px, 4vh, 44px);
  width: clamp(140px, 16vw, 220px);
  height: auto;
  z-index: 2;
  pointer-events: none;
}
.walker svg.num404 {
  width: 100%;
  height: auto;
  display: block;
}
/* ── Gold corner brackets — fade in slightly with a delay ───────── */
.walker .num404__frame path {
  opacity: 0;
  animation: num404FrameIn 0.9s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes num404FrameIn {
  to { opacity: 0.9; }
}

/* ── Segments — dramatic directional throw + spin tumble ────────── */
.walker .num404 rect {
  /* Semi-transparent ink (instead of solid #15161A) so each section's
     bg colour shows through ~30%, naturally tinting the digits to
     "dark mustard / dark sage / dark stone / etc." Pitch black on
     mustard was too harsh. (mix-blend-mode doesn't work here because
     .walker creates its own stacking context via position:fixed.) */
  fill: rgba(21, 22, 26, 0.7);
  transform-origin: center center;
  transform-box: fill-box;
  opacity: 0;
  /* Exit motion = sharp accelerate-out (ease-in), short.
     Entry motion (.is-on) uses spring overshoot — see below. */
  transition:
    transform 0.55s cubic-bezier(0.55, 0, 0.85, 0.1),
    opacity 0.4s cubic-bezier(0.55, 0, 0.85, 0.1),
    fill 0.45s ease-out;
}

/* Each segment is THROWN out — large translate, wide rotation, shrink.
   These are the resting / inactive states. */
.walker .num404 rect[data-seg="top"] { transform: translateY(-260%) rotate(-28deg) scale(0.55); }
.walker .num404 rect[data-seg="bot"] { transform: translateY( 260%) rotate( 28deg) scale(0.55); }
.walker .num404 rect[data-seg="tl"]  { transform: translateX(-240%) translateY(-30%) rotate(-38deg) scale(0.5); }
.walker .num404 rect[data-seg="bl"]  { transform: translateX(-240%) translateY( 30%) rotate( 38deg) scale(0.5); }
.walker .num404 rect[data-seg="tr"]  { transform: translateX( 240%) translateY(-30%) rotate( 38deg) scale(0.5); }
.walker .num404 rect[data-seg="br"]  { transform: translateX( 240%) translateY( 30%) rotate(-38deg) scale(0.5); }
.walker .num404 rect[data-seg="mid"] { transform: scaleX(0.02) scaleY(0.2) rotate(45deg); }

/* Active segments slam into home with spring overshoot + gold flash with
   glow pulse. Entry transition overrides the exit easing for punch. */
.walker .num404 rect.is-on {
  transform: none;
  opacity: 1;
  transition:
    transform 0.7s cubic-bezier(0.34, 1.7, 0.5, 1),
    opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    fill 0.45s ease-out;
  animation: num404FlashGold 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes num404FlashGold {
  0%   { fill: var(--accent); filter: drop-shadow(0 0 0 transparent); }
  20%  { filter: drop-shadow(0 0 14px rgba(201, 166, 104, 0.85)); }
  60%  { fill: var(--accent); filter: drop-shadow(0 0 6px rgba(201, 166, 104, 0.35)); }
  /* Match the new semi-transparent resting tone so the flash doesn't
     end on a darker frame than the steady state. */
  100% { fill: rgba(21, 22, 26, 0.7); filter: drop-shadow(0 0 0 transparent); }
}

/* Compound staggered delays (per segment + per digit) — wider stagger
   so the rebuild reads as a sweeping wave across the three digits. */
.walker .num404 rect {
  transition-delay: calc(var(--digit-delay, 0s) + var(--seg-delay, 0s));
  animation-delay: calc(var(--digit-delay, 0s) + var(--seg-delay, 0s));
}
.walker .num404 .digit:nth-child(1) { --digit-delay: 0s; }
.walker .num404 .digit:nth-child(2) { --digit-delay: 0.12s; }
.walker .num404 .digit:nth-child(3) { --digit-delay: 0.24s; }

.walker .num404 rect[data-seg="top"] { --seg-delay: 0s; }
.walker .num404 rect[data-seg="tl"]  { --seg-delay: 0.06s; }
.walker .num404 rect[data-seg="tr"]  { --seg-delay: 0.09s; }
.walker .num404 rect[data-seg="mid"] { --seg-delay: 0.16s; }
.walker .num404 rect[data-seg="bl"]  { --seg-delay: 0.22s; }
.walker .num404 rect[data-seg="br"]  { --seg-delay: 0.26s; }
.walker .num404 rect[data-seg="bot"] { --seg-delay: 0.34s; }

/* ── Caption (section label below the 404) ─────────────────────── */
.num404__caption {
  display: flex;
  justify-content: center;
  gap: 0.55em;
  margin-top: 12px;
  font-family: var(--font-en);
  font-size: clamp(0.62rem, 1vw, 0.75rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  animation: num404FrameIn 0.9s 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.num404__caption-idx {
  color: var(--accent-deep);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.num404__caption-sep { opacity: 0.5; }
.num404__caption-name {
  transition: opacity 0.3s ease;
}
.num404__caption-name.is-changing { opacity: 0; }

@media (max-width: 880px) {
  .walker {
    left: clamp(12px, 4vw, 24px);
    bottom: clamp(60px, 8vh, 80px);  /* leave room for progress bar */
    width: clamp(110px, 30vw, 160px);
  }
}

/* On mobile, the 404 morph display (bottom-left) collides with
   content-heavy sections like Business (2×2 card grid). Mobile is
   too cramped to host walker + dock + content all in the bottom
   band — hide the walker entirely and let the dock + progress bar
   carry the section indicator role. */
@media (max-width: 720px) {
  .walker { display: none; }
  .section-dock { bottom: 18px; }
  /* Reserve clear space at the bottom of every section so card
     content (especially the 2×2 Business grid) never overlaps the
     dock orbs on short viewports. */
  .section-h { padding-bottom: clamp(72px, 11vh, 110px); }
  /* Drop the per-card arrow CTA on mobile — cards are already
     navigable via the dock + section transitions, and the arrow
     was the element bumping into the dock. */
  .biz-card__arrow { display: none; }
  .biz-card__desc { margin-bottom: 0; }
  /* Lift the Hero "Scroll ↓" hint clear of the dock orbs */
  .hero-h__scroll-hint { bottom: clamp(130px, 18vh, 180px); }
}

/* ============================================================
   Progress indicator (top-right, bottom-fixed bar across screen)
============================================================ */
.progress-bar {
  position: fixed;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(21, 22, 26, 0.08);
  z-index: 95;
  pointer-events: none;
}
.progress-bar__fill {
  height: 100%;
  width: 0%;
  background: var(--ink);
  transform-origin: left center;
  transition: width 80ms linear;
}

/* ============================================================
   Section dock — planet-style bottom navigation
   ============================================================ */
.section-dock {
  position: fixed;
  bottom: clamp(20px, 4vh, 44px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  /* No container — orbs float bare against the section colour */
  background: none;
  border: none;
  padding: 0;
  z-index: 90;
  pointer-events: auto;
}

.section-dock__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 3.2vw, 38px);
  height: clamp(28px, 3.2vw, 38px);
  cursor: pointer;
  text-decoration: none;
  border-radius: 50%;
}

.section-dock__orb {
  display: block;
  width: clamp(16px, 1.8vw, 22px);
  height: clamp(16px, 1.8vw, 22px);
  border-radius: 50%;
  background:
    radial-gradient(at 30% 25%, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
    var(--orb, #888);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.32s ease;
}

.section-dock__item:hover .section-dock__orb,
.section-dock__item:focus-visible .section-dock__orb {
  transform: scale(1.35);
}

.section-dock__item.is-active .section-dock__orb {
  transform: scale(1.55);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}

/* Tooltip label above each orb */
.section-dock__label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  background: rgba(15, 16, 20, 0.92);
  color: var(--paper);
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s ease;
}
.section-dock__item:hover .section-dock__label,
.section-dock__item:focus-visible .section-dock__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 720px) {
  .section-dock {
    /* `bottom` is set above (18px) in the walker-vs-dock collision
       fix; we keep just the spacing tweaks here. */
    gap: 8px;
    padding: 8px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-dock__orb { transition: none; }
}

/* ============================================================
   Book opener — first-visit intro overlay
   A realistic 3D book that sits closed on a dark stage. The hard
   cover swings open on its left-edge hinge, revealing the inside
   flyleaf; then the whole overlay fades to reveal the site.
   ============================================================ */
body.is-book-opening {
  overflow: hidden;
}

.book-opener {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: auto;
  /* Solid color (not a gradient) — gradient→color is NOT animatable in
     CSS, which caused the backdrop to snap-flash to cream mid-zoom.
     A pseudo-element below provides the radial vignette look. */
  background-color: #0c0d11;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-opener::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
.book-opener.is-done,
.no-book-opener .book-opener {
  display: none;
}
.book-opener.is-fading {
  opacity: 0;
}

/* Stage — provides perspective for the 3D book */
.book-opener__stage {
  position: relative;
  width: clamp(260px, 32vw, 380px);
  height: clamp(360px, 44vw, 520px);
  perspective: 2200px;
  perspective-origin: 50% 50%;
}

/* ── Book — closed object with realistic edges & shadow ───────── */
/* NOTE: do NOT put `filter:` on .book — filter flattens children and
   breaks `backface-visibility` / preserve-3d on the cover, causing
   mirrored ghost rendering of the cover face after it swings open.
   The book's drop shadow is rendered via box-shadow on .book__inside
   (which stays in place) instead. */
.book {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(-6deg) rotateX(2deg);
  opacity: 0;
  animation: bookEnter 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes bookEnter {
  from { opacity: 0; transform: rotateY(-6deg) rotateX(2deg) translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: rotateY(-6deg) rotateX(2deg); }
}

/* Top page-edge — cream paper stack, skewed like reference */
.book::before {
  content: '';
  position: absolute;
  top: -5px; left: 0;
  width: 100%; height: 5px;
  background: linear-gradient(180deg, #f0e9d8 0%, #c9c0a8 50%, #a89f86 100%);
  transform-origin: bottom;
  transform: skewX(-45deg);
  z-index: 1;
}
/* Right page-edge — cream paper stack */
.book::after {
  content: '';
  position: absolute;
  top: 0; right: -5px;
  width: 5px; height: 100%;
  background: linear-gradient(90deg, #c9c0a8 0%, #a89f86 50%, #8a8470 100%);
  transform-origin: left;
  transform: skewY(-45deg);
  z-index: 1;
}

/* ── Inside (visible when cover swings open) ──────────────────── */
.book__inside {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 110% at 100% 50%, rgba(0, 0, 0, 0.10) 0%, transparent 45%),
    linear-gradient(180deg, #f1ead7 0%, #e2dac2 100%);
  /* Spine darkening near the hinge (left edge) + outset drop shadow
     (which used to be `filter` on .book — moved here to keep 3D intact). */
  box-shadow:
    inset 30px 0 50px rgba(0, 0, 0, 0.22),
    inset 6px 0 0 rgba(0, 0, 0, 0.18),
    0 18px 22px -2px rgba(0, 0, 0, 0.55),
    0 38px 60px -4px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.5vw, 32px) clamp(20px, 3vw, 38px)
           clamp(18px, 2.5vw, 32px) clamp(36px, 5vw, 60px);
  text-align: center;
  color: #2a2826;
}
/* Decorative center fold line near the spine */
.book__inside-spine {
  position: absolute;
  left: 26px; top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%);
}
.book__inside-page {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 14px);
  /* Always fully opaque — the cover physically hides this until it
     rotates past 90°, so no fade-in is needed (a fade would clash
     with the moment the cover backside flips away). */
}
.book__inside-eyebrow {
  font-family: var(--font-en);
  font-size: clamp(0.6rem, 0.85vw, 0.7rem);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: #6b6557;
  margin: 0;
}
.book__inside-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #2a2826;
  margin: 0;
}
.book__inside-tagline em {
  font-style: italic;
  color: #b8893a;
}
.book__inside-jp {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #4a443a;
  margin: 0;
}

/* ── Hard cover — swings on its left edge ─────────────────────── */
/* Wrapper does the rotation. Inside, two faces (front + back) sit
   inset:0; each uses backface-visibility:hidden so only the face
   currently pointed at the camera renders. */
.book__cover {
  position: absolute;
  inset: 0;
  transform-origin: 0% 50%;
  transform-style: preserve-3d;
  transition: transform 1.4s cubic-bezier(0.7, 0, 0.25, 1);
  will-change: transform;
  z-index: 2;
}
.book__cover-face,
.book__cover-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.book__cover-face {
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
    radial-gradient(70% 50% at 50% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 60%),
    linear-gradient(135deg, #16171c 0%, #22232a 50%, #14151a 100%);
  box-shadow:
    inset 6px 0 14px rgba(0, 0, 0, 0.55),
    inset -1px 0 0 rgba(201, 166, 104, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 3.6vw, 48px) clamp(28px, 3.6vw, 48px);
}
.book__cover-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(60% 80% at 30% 50%, rgba(255, 255, 255, 0.025) 0%, transparent 60%),
    linear-gradient(135deg, #14151a 0%, #1c1d23 50%, #0e0f13 100%);
  /* When the cover lies flat-open to the left, this face is what the
     viewer sees. Subtle inset edge near the (now-right-side) spine. */
  box-shadow:
    inset -6px 0 14px rgba(0, 0, 0, 0.55),
    inset 1px 0 0 rgba(201, 166, 104, 0.12);
}
/* Spine darkening — a soft vertical band on the left edge of the cover */
.book__cover-spine-shadow {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 22px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.15) 50%,
    transparent 100%);
  pointer-events: none;
}
/* Decorative gold band — a horizontal foil-stamp across the cover */
.book__cover-band {
  position: absolute;
  left: 14%; right: 14%;
  top: 58%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 166, 104, 0.75) 30%,
    rgba(201, 166, 104, 0.95) 50%,
    rgba(201, 166, 104, 0.75) 70%,
    transparent 100%);
}

/* Gold corner brackets — matches .num404__frame language */
.book__cover-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(201, 166, 104, 0.78);
}
.book__cover-corner--tl { top: 18px;    left: 18px;    border-right: none; border-bottom: none; }
.book__cover-corner--tr { top: 18px;    right: 18px;   border-left: none;  border-bottom: none; }
.book__cover-corner--bl { bottom: 18px; left: 18px;    border-right: none; border-top: none;    }
.book__cover-corner--br { bottom: 18px; right: 18px;   border-left: none;  border-top: none;    }

/* Cover text block — centered between corners */
.book__cover-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.5vh, 18px);
  padding: clamp(36px, 5vw, 60px);
  text-align: center;
}
.book__cover-chapter,
.book__cover-meta {
  font-family: var(--font-en);
  font-size: clamp(0.6rem, 0.9vw, 0.72rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.55);
}

.book__cover-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(218, 188, 124, 0.95);
  margin: 0;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 0 18px rgba(201, 166, 104, 0.25);
}
.book__cover-brand em {
  font-style: italic;
  color: rgba(232, 200, 130, 1);
}

/* ── Opening phase — cover swings to the left around its hinge ── */
.book-opener.is-opening .book__cover {
  /* -178° = essentially flat against the back of the book (open).
     The wrapper rotates the whole cover; the back face becomes the
     one visible to the viewer past 90°, simulating the cover lying
     flat to the left of the spine. */
  transform: rotateY(-178deg);
  filter: brightness(0.7);
}

/* Hide the cover's text + decorations as the cover approaches edge-on
   (~90° rotation), so they're gone BEFORE the cover continues into the
   reversed-back orientation where backface-visibility was unreliable.
   With the cover transition at 1.4s cubic-bezier(0.7,0,0.25,1):
     - 0.0 – 0.55s : rotation crawls 0° → ~35° (slow ease-in)
     - 0.55 – 0.75s: opacity fades 1 → 0 here (we time the fade to land
                      right as rotation crosses ~85–90°)
     - 0.75s+      : rotation continues to -178°, text/marks already gone
   The 0.55s delay keeps the cover text fully readable while the book
   visibly STARTS opening, then it cleanly drops as the cover turns
   edge-on. */
.book-opener.is-opening .book__cover-content,
.book-opener.is-opening .book__cover-band,
.book-opener.is-opening .book__cover-corner {
  opacity: 0;
  transition: opacity 0.2s ease-out 0.55s;
}

/* ── Zoom phase — camera dollies into the open book ──────────── */
/* After the cover is open, the entire stage scales up so the inside
   flyleaf fills the viewport, then the overlay fades to reveal the
   actual corporate site beneath. */
.book-opener__stage {
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: 50% 50%;
}
.book-opener.is-zooming .book {
  /* De-tilt for a clean front-on zoom */
  transform: rotateY(0deg) rotateX(0deg);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-opener.is-zooming .book-opener__stage {
  transform: scale(8);
}
.book-opener.is-zooming {
  /* Hold the dark backdrop for the FIRST 2/3 of the zoom, then
     transition to cream (matching the inside paper) in the final
     ~0.35s — by which point the scaled inside has already covered
     most of the viewport. This keeps the "room is dark" feel while
     the camera dollies in, and avoids the earlier issue where the
     backdrop snap-flashed to cream mid-zoom. */
  background-color: #ebe2cc;
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.7s,
              opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-opener.is-zooming::before {
  /* Vignette darkness also fades out in the same late window */
  opacity: 0;
}
/* Inside text fades IMMEDIATELY as the zoom begins. Reason: CSS
   `transform: scale()` rasterises text at its pre-scale size and then
   blits the bitmap larger — so any text visible while the stage is
   scaling will look increasingly jagged. By fading the text out within
   the first 0.2s (when scale is still ~1.3×, before noticeable rasterised
   blur), the user only sees the cream paper enlarge — never enlarged
   pixelated text. */
.book-opener.is-zooming .book__inside-page {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

/* Reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  .book-opener { display: none !important; }
}

/* Mobile — keep book centered but slightly smaller */
@media (max-width: 760px) {
  .book-opener__stage {
    width: 78vw;
    height: 108vw;
    max-height: 70vh;
  }
}

/* ============================================================
   Letter-send overlay — page-transition for the "Open Form" CTA.
   Adapted from v3/参考/参考5 (clean SCSS demo). The envelope and
   speed lines are pure CSS shapes; the entire animation runs from
   keyframes triggered by the .is-active class — no JS timeline
   needed beyond toggling that class and the navigation timer.
   ============================================================ */
body.is-sending { overflow: hidden; }

.letter-send {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #0c0d11;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s 0.35s;
}
.letter-send.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease;
}

/* Envelope wrapper — centered then translated horizontally across
   the viewport via the mail-move keyframes. */
.letter-send .lt-mail-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.letter-send.is-active .lt-mail-container {
  animation: lt-mail-move 3s forwards;
}

/* Trailing speed lines — sit to the LEFT of the envelope, masked
   to a 60px window so they sweep past. */
.letter-send .lt-line-container {
  position: absolute;
  left: -70px;
  width: 60px;
  overflow: hidden;
}
.letter-send .lt-line {
  margin-top: 5px;
  width: 70px;
  height: 5px;
  background: #C9A668;        /* gold motion line */
  border-radius: 6px;
}

/* Envelope body — a rounded rectangle with two pseudo-elements that
   draw the diagonal "open-flap V" on top. */
.letter-send .lt-mail {
  width: 60px;
  height: 45px;
  border: solid 5px #C9A668;
  border-radius: 10px;
  overflow: hidden;
}
.letter-send .lt-mail::before {
  content: '';
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  border-top: solid 5px #C9A668;
  border-left: solid 5px #C9A668;
  transform: rotate(45deg);
  top: 18px;
  left: 12px;
}
.letter-send .lt-mail::after {
  content: '';
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  border: solid 5px #C9A668;
  transform: rotate(45deg);
  top: -70px;
  border-radius: 15px;
  background: #0c0d11;        /* matches overlay backdrop to mask the cross */
}

/* Line animations — only run when the overlay is is-active */
.letter-send.is-active .lt-line-1 { animation: lt-line-1-move 3s forwards; }
.letter-send.is-active .lt-line-2 { animation: lt-line-2-move 3s forwards; }
.letter-send.is-active .lt-line-3 { animation: lt-line-3-move 3s forwards; }
.letter-send.is-active .lt-line-4 { animation: lt-line-4-move 3s forwards; }
.letter-send.is-active .lt-line-5 { animation: lt-line-5-move 3s forwards; }

@keyframes lt-line-1-move {
  0%        { transform: translateX(-100%); }
  20%       { transform: translateX(100%); }
  20.0001%  { transform: translateX(-100%); }
  40%       { transform: translateX(20%); }
  60%       { transform: translateX(20%); }
  80%       { transform: translateX(-100%); }
  80.1%     { transform: translateX(100%); }
  100%      { transform: translateX(-100%); }
}
@keyframes lt-line-2-move {
  0%        { transform: translateX(-100%); }
  20%       { transform: translateX(100%); }
  20.0001%  { transform: translateX(-100%); }
  40%       { transform: translateX(40%); }
  60%       { transform: translateX(40%); }
  80%       { transform: translateX(-100%); }
  80.1%     { transform: translateX(100%); }
  100%      { transform: translateX(-100%); }
}
@keyframes lt-line-3-move {
  0%        { transform: translateX(-100%); }
  20%       { transform: translateX(100%); }
  20.0001%  { transform: translateX(-100%); }
  40%       { transform: translateX(60%); }
  60%       { transform: translateX(60%); }
  80%       { transform: translateX(-100%); }
  80.1%     { transform: translateX(100%); }
  100%      { transform: translateX(-100%); }
}
@keyframes lt-line-4-move {
  0%        { transform: translateX(-80%); }
  20%       { transform: translateX(100%); }
  20.0001%  { transform: translateX(-100%); }
  40%       { transform: translateX(120%); }
  60%       { transform: translateX(120%); }
  80%       { transform: translateX(-80%); }
  80.1%     { transform: translateX(80%); }
  100%      { transform: translateX(-120%); }
}
@keyframes lt-line-5-move {
  0%        { transform: translateX(-80%); }
  20%       { transform: translateX(100%); }
  20.0001%  { transform: translateX(-100%); }
  40%       { transform: translateX(150%); }
  60%       { transform: translateX(150%); }
  80%       { transform: translateX(-80%); }
  80.1%     { transform: translateX(80%); }
  100%      { transform: translateX(-120%); }
}

@keyframes lt-mail-move {
  0%   { opacity: 0; left: 3%; }
  40%  { opacity: 1; left: 50%; }
  60%  { left: 50%; }
  80%  { opacity: 1; }
  100% { opacity: 0; left: 95%; }
}

@media (prefers-reduced-motion: reduce) {
  .letter-send { display: none !important; }
}