/* NORTHLINE — fictional business design company sample by TANOMATO
   Motif: the northern horizon — one orange line over a moving contour map. */
@font-face { font-family: "NL Sans"; src: url("fonts/zkg-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NL Sans"; src: url("fonts/zkg-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "NL Sans"; src: url("fonts/zkg-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "NL Mincho"; src: url("fonts/zom-500.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "NL Display"; src: url("fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "NL Mono"; src: url("fonts/jbmono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --night: #0a1626;
  --night-2: #0f2038;
  --night-3: #16294a;
  --ice: #eef2f4;
  --snow: #f8fafb;
  --ink: #0a1626;
  --ink-2: #2f4257;
  --muted: #56687b;
  --glacier: #a9c2d8;
  --signal: #ff6a33;
  --signal-ink: #c2410c;
  --line: rgba(10, 22, 38, .12);
  --line-2: rgba(10, 22, 38, .24);
  --line-d: rgba(238, 242, 244, .13);
  --line-d2: rgba(238, 242, 244, .28);
  --k-ink: var(--night);
  --k-bg: var(--snow);
  --k-spot: rgba(255, 106, 51, .12);
  --f-sans: "NL Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --f-mincho: "NL Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-display: "NL Display", "NL Sans", "Segoe UI", sans-serif;
  --f-mono: "NL Mono", ui-monospace, "Consolas", monospace;
  --gut: clamp(18px, 4.6vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }
body { margin: 0; background: var(--ice); color: var(--ink); font-family: var(--f-sans); font-size: 16px; line-height: 1.9; letter-spacing: .03em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
h1, h2, h3, p, dt, dd, li { word-break: auto-phrase; text-wrap: pretty; }
ol, ul { padding: 0; list-style: none; }
em { font-style: normal; }
::selection { background: var(--signal); color: var(--night); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; border-radius: 4px; }
.wrap { width: min(1320px, 100% - var(--gut) * 2); margin-inline: auto; }

.label { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.label i { width: 22px; height: 1px; background: var(--signal); }
[data-theme="dark"] .label { color: var(--glacier); }
.h2 { margin-top: 22px; font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.3; letter-spacing: .01em; }
.h2 .ln > span { white-space: nowrap; }

.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; padding: 15px 22px; border-radius: 4px; font-weight: 700; font-size: .92rem; letter-spacing: .06em; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--k-ease); }
.btn:hover svg { transform: translateX(4px); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform .7s var(--k-ease); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--signal { background: var(--signal); color: var(--night); }
.btn--signal::before { background: var(--snow); }
.btn--ghost { border: 1px solid var(--line-d2); color: var(--snow); }
.btn--ghost::before { background: rgba(238, 242, 244, .1); }

/* ---------- Opening: the horizon opens ---------- */
.loader { color: var(--snow); }
.loader__half { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--night); transition: transform 1.25s var(--k-ease-io) .15s; }
.loader__half--top { top: 0; }
.loader__half--bottom { bottom: 0; }
.loader__line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; }
.loader__line b { position: absolute; inset: 0; background: var(--signal); transform: scaleX(var(--p, 0)); transform-origin: left; box-shadow: 0 0 14px rgba(255, 106, 51, .6); }
.loader__word { position: absolute; left: var(--gut); bottom: calc(50% + 16px); font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 6vw, 4.6rem); letter-spacing: .12em; line-height: 1; clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0); }
.loader__meta { position: absolute; left: var(--gut); right: var(--gut); top: calc(50% + 16px); display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .14em; color: var(--glacier); }
.is-loaded .loader__half--top { transform: translateY(-100%); }
.is-loaded .loader__half--bottom { transform: translateY(100%); }
.is-loaded .loader__line, .is-loaded .loader__word, .is-loaded .loader__meta { opacity: 0; transition: opacity .35s; }

.veil { transform: none !important; }
.veil i { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--night); transition: transform .72s var(--k-ease-io); }
.veil i:first-child { top: 0; transform: translateY(-100%); }
.veil i:nth-child(2) { bottom: 0; transform: translateY(100%); }
.veil b { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--signal); transform: scaleX(0); transition: transform .6s var(--k-ease) .1s; }
.veil.is-leaving i, .entering .veil i { transform: none; }
.veil.is-leaving b, .entering .veil b { transform: scaleX(1); }
.entering .veil i, .entering .veil b { transition: none; }
.entering.is-entered .veil i { transition: transform .95s var(--k-ease-io) .1s; }
.entering.is-entered .veil i:first-child { transform: translateY(-100%); }
.entering.is-entered .veil i:nth-child(2) { transform: translateY(100%); }
.entering.is-entered .veil b { transform: scaleX(0); transform-origin: right; transition: transform .5s var(--k-ease); }

/* ---------- Cursor mark (only over clickable things) ---------- */
.cursor__shape { width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1px solid rgba(255, 106, 51, .55); border-radius: 50%; background: rgba(255, 106, 51, .1); scale: .4; transition: scale .4s var(--k-ease); }
.cursor__shape::before, .cursor__shape::after { content: ""; position: absolute; background: var(--signal); }
.cursor__shape::before { left: 50%; top: -6px; bottom: -6px; width: 1px; }
.cursor__shape::after { top: 50%; left: -6px; right: -6px; height: 1px; }
.cursor.is-hover .cursor__shape { scale: 1; }
.cursor.is-down .cursor__shape { scale: .82; }

/* ---------- Header ---------- */
.head { position: fixed; inset: 0 0 auto; z-index: 100; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); padding: 18px var(--gut); color: var(--ink); transition: transform .7s var(--k-ease), color .4s, padding .5s var(--k-ease); }
.head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--snow) 84%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .4s, background .4s, border-color .4s; }
.head.is-scrolled { padding-block: 12px; }
.head.is-scrolled::before { opacity: 1; }
.head.on-dark { color: var(--snow); }
.head.on-dark::before { background: color-mix(in srgb, var(--night) 72%, transparent); border-color: var(--line-d); }
.head.is-hidden { transform: translateY(-110%); }
.js .head { opacity: 0; transition: opacity 1s var(--k-ease) .35s, transform .7s var(--k-ease), color .4s, padding .5s var(--k-ease); }
.js.is-ready .head { opacity: 1; }

.logo { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.logo__mark { width: 34px; height: 34px; overflow: visible; fill: none; stroke-linecap: square; }
.logo__n { stroke: currentColor; stroke-width: 2.4; stroke-linejoin: miter; }
.logo__h { stroke: var(--signal); stroke-width: 2; transform-origin: center; transition: transform .8s var(--k-ease); }
.logo:hover .logo__h { transform: scaleX(1.25); }
.logo__word { font-family: var(--f-display); font-weight: 800; font-size: 1.08rem; letter-spacing: .16em; line-height: 1.15; }
.logo__word small { display: block; font-weight: 500; font-size: .58rem; letter-spacing: .2em; opacity: .66; }

.gnav { margin-left: auto; display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.gnav a { position: relative; padding: 6px 0; font-size: .86rem; font-weight: 500; }
.gnav a span { margin-right: 8px; font-family: var(--f-mono); font-size: .66rem; color: var(--signal); }
.gnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--k-ease); }
.gnav a:hover::after, .gnav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.gnav a[aria-current="page"]::after { background: var(--signal); }
.gnav .gnav__cta { padding: 9px 18px; border: 1px solid currentColor; border-radius: 99px; transition: background .4s, color .4s, border-color .4s; }
.gnav .gnav__cta::after { display: none; }
.gnav .gnav__cta:hover { background: var(--signal); border-color: var(--signal); color: var(--night); }
.head__clock { position: relative; z-index: 2; display: flex; flex-direction: column; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; line-height: 1.4; text-align: right; }
.head__clock span { opacity: .6; }
.head__clock b { font-weight: 500; font-size: .78rem; font-variant-numeric: tabular-nums; }

.menu-toggle { display: none; position: relative; z-index: 2; width: 46px; height: 46px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; }
.menu-toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .6s var(--k-ease), top .6s var(--k-ease); }
.menu-toggle span:nth-child(1) { top: 19px; }
.menu-toggle span:nth-child(2) { top: 26px; left: 19px; }
.menu-open .menu-toggle span { top: 22.5px; left: 13px; }
.menu-open .menu-toggle span:nth-child(1) { transform: rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 140px 0 28px; background: radial-gradient(120% 90% at 78% 8%, var(--night-3), var(--night) 60%); color: var(--snow); }
.topo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.js .hero .topo { opacity: 0; transition: opacity 2.4s ease .3s; }
.js.is-ready .hero .topo { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 22, 38, .2), transparent 30%, transparent 55%, rgba(10, 22, 38, .85)); }
.hero__horizon { position: absolute; left: 0; right: 0; top: clamp(120px, 27%, 300px); height: 1px; pointer-events: none; }
.hero__horizon i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--signal) 12%, var(--signal) 70%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--k-ease) .5s; }
.hero__horizon i::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 16px var(--signal); animation: travel 9s linear infinite; }
@keyframes travel { from { left: 8%; } to { left: 72%; } }
.hero__horizon span { position: absolute; right: var(--gut); bottom: 10px; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; color: var(--glacier); opacity: 0; transition: opacity 1s 1.4s; }
.js.is-ready .hero__horizon i { transform: scaleX(1); }
.js.is-ready .hero__horizon span, html:not(.js) .hero__horizon span { opacity: 1; }
html:not(.js) .hero__horizon i { transform: none; }

.hero__label { color: var(--glacier); }
.hero__title { margin: 26px 0 0 -.04em; font-weight: 700; font-size: clamp(2.7rem, 7.2vw, 7rem); line-height: 1.16; letter-spacing: .005em; }
.hero__title .ln > span { white-space: nowrap; }
.hero__title em { position: relative; color: var(--signal); }
.hero__title .ln + .ln > span { transition-delay: .12s; }
.js .hero__title .ln > span { transition-delay: calc(var(--l, 0) * 120ms + .15s); }
.hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; margin-top: clamp(28px, 4vw, 48px); }
.hero__lead { max-width: 31em; color: rgba(238, 242, 244, .78); font-size: clamp(.94rem, 1.2vw, 1.02rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.js .hero__label, .js .hero__foot > * { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 1s var(--k-ease), transform 1.2s var(--k-ease); }
.js.is-ready .hero__label, .js.is-ready .hero__foot > * { opacity: 1; transform: none; }
.js .hero__label { transition-delay: .1s; }
.js .hero__foot > :first-child { transition-delay: .55s; }
.js .hero__foot > :last-child { transition-delay: .7s; }

.hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 7vh, 80px); border-top: 1px solid var(--line-d); }
.hud div { padding: 16px 16px 6px 0; }
.hud div + div { padding-left: 18px; border-left: 1px solid var(--line-d); }
.hud dt { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--glacier); opacity: .8; }
.hud dd { margin-top: 2px; font-family: var(--f-mono); font-size: .82rem; font-variant-numeric: tabular-nums; }
.hud dd:not([data-jst]):not([data-coord]) { font-family: var(--f-sans); font-weight: 500; }
.js .hud { opacity: 0; transition: opacity 1.2s .9s; }
.js.is-ready .hud { opacity: 1; }

/* ---------- Point of view ---------- */
.view { padding: clamp(110px, 14vw, 200px) 0 clamp(80px, 10vw, 140px); }
.view__grid { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 40px clamp(24px, 4vw, 72px); }
.view__grid .label { align-self: start; padding-top: 16px; }
.statement { font-family: var(--f-mincho); font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.7; letter-spacing: .04em; }
.statement .w.hl.on { color: var(--signal-ink); }
.view__note { max-width: 38em; margin-top: clamp(32px, 4vw, 56px); padding-left: 24px; border-left: 2px solid var(--signal); color: var(--ink-2); }

/* ---------- Cases ---------- */
.cases { padding: 0 0 clamp(110px, 13vw, 180px); }
.sec-head { margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 60px; }
.sec-head__lead { max-width: 26em; color: rgba(238, 242, 244, .72); }
.cases__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.case { position: relative; display: flex; flex-direction: column; gap: 18px; min-height: 290px; padding: 30px 26px 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--snow); transition: border-color .4s, box-shadow .6s var(--k-ease), transform .7s var(--k-ease); }
.case:hover { border-color: var(--line-2); box-shadow: 0 30px 60px -40px rgba(10, 22, 38, .45); }
.case::before { content: "“"; position: absolute; right: 18px; top: 4px; font-family: var(--f-display); font-weight: 800; font-size: 5rem; line-height: 1; color: var(--signal); opacity: .9; }
.case__q { padding-right: 34px; font-weight: 700; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.65; }
.case__a { color: var(--muted); font-size: .9rem; }
.case__tag { align-self: flex-start; margin-top: auto; padding: 6px 12px; border-radius: 99px; background: var(--ice); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; transition: background .4s, color .4s; }
.case__tag:hover { background: var(--night); color: var(--snow); }
.case.is-in { transition: opacity 1.1s var(--k-ease), transform .7s var(--k-ease), border-color .4s, box-shadow .6s var(--k-ease); transition-delay: calc(var(--i, 0) * 90ms), 0s, 0s, 0s; }

/* ---------- Capabilities ---------- */
.caps { padding: clamp(110px, 13vw, 180px) 0; background: var(--night); color: var(--snow); }
.caps__list { border-top: 1px solid var(--line-d2); }
.cap a { position: relative; isolation: isolate; display: grid; grid-template-columns: 90px 64px minmax(0, 1.1fr) minmax(0, 1fr) 56px; align-items: center; gap: 24px; padding: clamp(26px, 3.4vw, 44px) 12px; border-bottom: 1px solid var(--line-d); }
.cap a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255, 106, 51, .16), rgba(255, 106, 51, 0) 70%); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--k-ease); }
.cap a:hover::before { transform: scaleY(1); }
.cap__no { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--glacier); transition: color .5s; }
.cap a:hover .cap__no { color: var(--signal); -webkit-text-stroke-color: var(--signal); }
.cap__icon { width: 52px; height: 52px; fill: none; stroke: var(--signal); stroke-width: 1.6; stroke-linecap: round; }
.cap__icon * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--k-ease) .3s; }
.cap.is-in .cap__icon *, html:not(.js) .cap__icon * { stroke-dashoffset: 0; }
.cap__title { font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.3; }
.cap__title small { display: block; margin-bottom: 6px; font-family: var(--f-mono); font-weight: 400; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--glacier); }
.cap__text { color: rgba(238, 242, 244, .74); font-size: .95rem; }
.cap__arrow { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-d2); border-radius: 50%; transition: background .5s, border-color .5s, transform .7s var(--k-ease); }
.cap__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cap a:hover .cap__arrow { background: var(--signal); border-color: var(--signal); color: var(--night); transform: rotate(45deg); }

/* ---------- Process (horizontal on wide screens) ---------- */
.process { position: relative; background: var(--ice); }
.process__sticky { --pgap: clamp(32px, 5vh, 56px); position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: var(--pgap); padding: 110px 0 60px; overflow: hidden; }
.process__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.process__count { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em; color: var(--muted); }
.process__count b { display: block; font-family: var(--f-display); font-weight: 300; font-size: clamp(3rem, 6vw, 5.4rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.process__rail { position: relative; width: min(1320px, 100% - var(--gut) * 2); height: 1px; margin-inline: auto; background: var(--line-2); }
.process__rail i { position: absolute; inset: 0; background: var(--signal); transform: scaleX(var(--p, 0)); transform-origin: left; }
.process__track { display: flex; gap: 20px; padding-inline: max(var(--gut), (100% - 1320px) / 2); will-change: transform; }
.pstep { position: relative; flex: none; width: clamp(300px, 34vw, 480px); min-height: 300px; padding: 30px 30px 26px; border-radius: 6px; background: var(--snow); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; transition: border-color .5s, background .5s; }
.pstep::before { content: ""; position: absolute; left: 30px; top: calc(-1 * var(--pgap) - 6.5px); width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--ice); transition: background .4s, border-color .4s, box-shadow .4s; }
.pstep.is-on { border-color: var(--line-2); }
.pstep.is-on::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 5px rgba(255, 106, 51, .18); }
.pstep__no { font-family: var(--f-display); font-weight: 200; font-size: 4.2rem; line-height: .9; color: var(--signal); }
.pstep h3 { font-weight: 700; font-size: 1.7rem; line-height: 1.3; }
.pstep p { color: var(--ink-2); font-size: .94rem; }
.pstep .pstep__meta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em; color: var(--muted); }

/* ---------- Contact ---------- */
.contact { position: relative; isolation: isolate; overflow: hidden; padding: clamp(120px, 15vw, 220px) 0; background: var(--night); color: var(--snow); }
.contact__title { margin-top: 26px; font-weight: 700; font-size: clamp(2.6rem, 7vw, 6.6rem); line-height: 1.16; }
.contact__title .ln > span { white-space: nowrap; }
.contact__lead { margin-top: 26px; color: rgba(238, 242, 244, .78); font-size: 1.05rem; }
.contact__note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: clamp(48px, 6vw, 80px); padding: 26px 28px; border: 1px solid var(--line-d2); border-radius: 6px; background: rgba(10, 22, 38, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.contact__note p { max-width: 34em; font-size: .9rem; color: rgba(238, 242, 244, .78); }
.contact__note b { display: block; font-size: 1rem; color: var(--snow); }

/* ---------- Footer ---------- */
.foot { padding: 64px 0 90px; background: var(--night); color: var(--snow); border-top: 1px solid var(--line-d); }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding-bottom: 36px; border-bottom: 1px solid var(--line-d); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: .9rem; }
.foot__nav a:hover, .foot__links a:hover { color: var(--signal); }
.foot__up { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.foot__up svg { width: 34px; height: 34px; padding: 8px; border: 1px solid var(--line-d2); border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .6s var(--k-ease), background .4s; }
.foot__up:hover svg { transform: translateY(-4px); background: var(--signal); }
.foot__sample { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding: 30px 0; }
.foot__sample p { max-width: 42em; font-size: .84rem; color: rgba(238, 242, 244, .7); }
.foot__sample b { display: block; font-weight: 500; color: var(--snow); }
.foot__links { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: .88rem; }
.foot__links a { border-bottom: 1px solid var(--line-d2); padding-bottom: 2px; }
.foot__copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-family: var(--f-mono); color: rgba(238, 242, 244, .5); }

/* ---------- Sub pages ---------- */
.phero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(150px, 20vw, 240px) 0 clamp(60px, 8vw, 110px); background: var(--night); color: var(--snow); }
.phero .topo { opacity: .75; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 22, 38, .1), rgba(10, 22, 38, .75)); pointer-events: none; }
.crumb { display: flex; gap: 10px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; color: var(--glacier); }
.crumb a:hover { color: var(--signal); }
.crumb span { color: var(--signal); }
.phero__big { position: absolute; right: var(--gut); bottom: -.14em; z-index: -1; font-family: var(--f-display); font-weight: 800; font-size: clamp(5rem, 15vw, 15rem); line-height: 1; letter-spacing: -.04em; color: rgba(10, 22, 38, .55); -webkit-text-stroke: 1px rgba(169, 194, 216, .2); white-space: nowrap; pointer-events: none; }
.phero__title { margin-top: 30px; font-weight: 700; font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: 1.2; }
.phero__title .ln > span { white-space: nowrap; }
.phero__lead { max-width: 36em; margin-top: 28px; color: rgba(238, 242, 244, .78); }
.phero__line { position: relative; height: 1px; margin-top: clamp(40px, 6vw, 72px); background: var(--line-d); }
.phero__line::after { content: ""; position: absolute; inset: 0; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--k-ease) .4s; }
.is-ready .phero__line::after, html:not(.js) .phero__line::after { transform: scaleX(.38); }

/* Service page */
.svc { padding: clamp(90px, 11vw, 160px) 0; }
.svc__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); align-items: start; }
.index { position: sticky; top: 110px; display: flex; flex-direction: column; border-left: 1px solid var(--line-2); }
.index a { position: relative; padding: 10px 0 10px 20px; color: var(--muted); font-size: .9rem; transition: color .4s; }
.index a span { display: block; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; }
.index a::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--signal); transform: scaleY(0); transition: transform .6s var(--k-ease); }
.index a:hover { color: var(--ink); }
.index a.is-current { color: var(--ink); font-weight: 700; }
.index a.is-current::before { transform: scaleY(1); }
.block { padding: 0 0 clamp(80px, 10vw, 130px); }
.block + .block { padding-top: clamp(80px, 10vw, 130px); border-top: 1px solid var(--line-2); }
.block__top { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 320px); gap: 24px clamp(24px, 4vw, 60px); align-items: start; }
.block__no { display: flex; align-items: baseline; gap: 16px; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .16em; color: var(--muted); }
.block__no b { font-family: var(--f-display); font-weight: 200; font-size: clamp(3.6rem, 6vw, 5.4rem); line-height: 1; letter-spacing: -.03em; color: var(--signal); }
.block h2 { margin-top: 10px; font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.3; }
.block__catch { margin-top: 14px; font-family: var(--f-mincho); font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.7; color: var(--ink-2); }
.block__desc { max-width: 38em; margin-top: 22px; color: var(--ink-2); }
.diagram { width: 100%; aspect-ratio: 1; border-radius: 6px; background: var(--night); color: var(--glacier); overflow: hidden; }
.diagram svg { width: 100%; height: 100%; }
.block__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 4vw, 56px); }
.col { padding: 24px 24px 22px; border-radius: 6px; background: var(--snow); border: 1px solid var(--line); }
.col h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1rem; font-weight: 700; }
.col h3::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--signal); }
.col li { position: relative; padding: 7px 0 7px 18px; border-bottom: 1px dashed var(--line-2); font-size: .9rem; color: var(--ink-2); }
.col li:last-child { border-bottom: 0; }
.col li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 8px; height: 1px; background: var(--muted); }
.col ol { counter-reset: s; }
.col ol li { counter-increment: s; padding-left: 30px; }
.col ol li::before { content: counter(s, decimal-leading-zero); top: 7px; width: auto; height: auto; background: none; font-family: var(--f-mono); font-size: .7rem; color: var(--signal-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 99px; font-size: .82rem; }
.chips li::before { display: none; }

/* Diagram motion */
.dg-dot { fill: var(--glacier); transition: transform 1.6s var(--k-ease), fill .8s; transform-box: fill-box; transform-origin: center; }
.js .diagram .dg-dot { transform: scale(0); }
.diagram.is-in .dg-dot { transform: none; }
.dg-dot:nth-child(3n) { transition-delay: .15s; }
.dg-dot:nth-child(3n+1) { transition-delay: .3s; }
.dg-dot:nth-child(4n) { transition-delay: .45s; }
.dg-ring { fill: none; stroke: var(--signal); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--k-ease) .8s; }
.is-in .dg-ring, html:not(.js) .dg-ring { stroke-dashoffset: 0; }
.dg-scan { stroke: var(--signal); stroke-width: 1; opacity: .8; animation: dg-scan 5s ease-in-out infinite; }
@keyframes dg-scan { 0%, 100% { transform: translateY(20px); } 50% { transform: translateY(180px); } }
.dg-path { fill: none; stroke: var(--signal); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--k-ease) .3s; }
.is-in .dg-path, html:not(.js) .dg-path { stroke-dashoffset: 0; }
.dg-node { fill: var(--night); stroke: var(--glacier); stroke-width: 1.4; }
.dg-grid { stroke: rgba(169, 194, 216, .12); stroke-width: 1; }
.dg-wave { fill: none; stroke: var(--glacier); stroke-width: 1.2; transform-box: fill-box; transform-origin: 0% 50%; animation: dg-wave 3.6s var(--k-ease) infinite; opacity: 0; }
.dg-wave:nth-of-type(2) { animation-delay: 1.2s; }
.dg-wave:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes dg-wave { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
.dg-src { fill: var(--signal); }
.dg-label { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; fill: var(--glacier); }

.plans { padding: clamp(90px, 11vw, 150px) 0; background: var(--night); color: var(--snow); }
.plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 28px; border: 1px solid var(--line-d2); border-radius: 6px; background: var(--night-2); }
.plan--main { border-color: var(--signal); }
.plan--main::before { content: "ご依頼が多い工事"; position: absolute; top: -12px; left: 24px; padding: 2px 10px; border-radius: 99px; background: var(--signal); color: var(--night); font-size: .72rem; font-weight: 700; }
.plan__term { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; color: var(--glacier); }
.plan h3 { font-size: 1.5rem; font-weight: 700; }
.plan p { color: rgba(238, 242, 244, .74); font-size: .92rem; }
.plan ul { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-d); }
.plan li { padding: 5px 0 5px 20px; position: relative; font-size: .88rem; }
.plan li::before { content: ""; position: absolute; left: 0; top: 1em; width: 10px; height: 1px; background: var(--signal); }
.plans__fine { margin-top: 20px; font-size: .8rem; color: rgba(238, 242, 244, .6); }

.flow { padding: clamp(90px, 11vw, 150px) 0; }
.flow .h2 { font-size: clamp(2rem, 3vw, 2.8rem); }
.timeline { position: relative; max-width: 860px; margin-top: 20px; padding-left: 56px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: var(--line-2); }
.timeline__bar { position: absolute; left: 11px; top: 8px; width: 1px; height: calc(var(--p, 0) * (100% - 16px)); background: var(--signal); }
.tl { position: relative; padding-bottom: clamp(34px, 5vw, 56px); }
.tl:last-child { padding-bottom: 0; }
.tl::before { content: ""; position: absolute; left: -51px; top: 8px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--ice); transition: all .6s var(--k-ease); }
.tl.is-in::before { border-color: var(--signal); background: var(--signal); box-shadow: 0 0 0 6px rgba(255, 106, 51, .16); }
.tl__when { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; color: var(--signal-ink); }
.tl h3 { margin: 4px 0 8px; font-size: 1.3rem; font-weight: 700; }
.tl p { color: var(--ink-2); max-width: 36em; }

.next { position: relative; overflow: hidden; background: var(--night); color: var(--snow); }
.next a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(70px, 10vw, 130px) 0; }
.next__label { display: block; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .16em; color: var(--glacier); }
.next__title { display: block; margin-top: 12px; font-weight: 700; font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.15; transition: color .5s; }
.next a:hover .next__title { color: var(--signal); }
.next__arrow { display: grid; place-items: center; width: clamp(64px, 8vw, 110px); aspect-ratio: 1; border: 1px solid var(--line-d2); border-radius: 50%; transition: background .5s, transform .8s var(--k-ease), border-color .5s; }
.next__arrow svg { width: 34%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.next a:hover .next__arrow { background: var(--signal); border-color: var(--signal); color: var(--night); transform: rotate(-45deg); }

/* About page */
.mvv { padding: clamp(90px, 11vw, 160px) 0; }
.mvv__row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 90px); padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line-2); }
.mvv__row:last-child { border-bottom: 1px solid var(--line-2); }
.mvv__key { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .16em; color: var(--muted); }
.mvv__key b { display: block; margin-top: 6px; font-family: var(--f-sans); font-size: 1rem; letter-spacing: .04em; color: var(--ink); }
.mvv__big { font-family: var(--f-mincho); font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 3.1rem); line-height: 1.55; }
.mvv__big em { color: var(--signal-ink); }
.mvv__row p:not(.mvv__big) { max-width: 38em; margin-top: 16px; color: var(--ink-2); }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.value { padding: 26px 24px; border-radius: 6px; background: var(--snow); border: 1px solid var(--line); }
.value b { display: block; font-family: var(--f-display); font-weight: 200; font-size: 2.8rem; line-height: 1; color: var(--signal); }
.value h3 { margin: 16px 0 8px; font-size: 1.2rem; font-weight: 700; }
.value p { color: var(--ink-2); font-size: .9rem; margin: 0 !important; }

.origin { position: relative; overflow: hidden; padding: clamp(110px, 13vw, 190px) 0; background: var(--night); color: var(--snow); }
.origin__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 110px); align-items: center; }
.origin__word { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 6.6vw, 6rem); line-height: 1; letter-spacing: .06em; }
.origin__word span { display: block; }
.origin__word span:last-child { color: var(--signal); }
.origin__text p { color: rgba(238, 242, 244, .8); }
.origin__text p + p { margin-top: 18px; }
.origin__text .origin__lead { font-family: var(--f-mincho); font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.7; color: var(--snow); }
.origin__scene { grid-column: 1 / -1; position: relative; height: clamp(160px, 22vw, 280px); margin-top: 20px; }
.origin__scene svg { width: 100%; height: 100%; overflow: visible; }
.hz-ground { fill: none; stroke: rgba(169, 194, 216, .35); stroke-width: 1; }
.hz-line { stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--k-ease) .2s; }
.origin__scene.is-in .hz-line, html:not(.js) .hz-line { stroke-dashoffset: 0; }
.hz-sun { fill: var(--signal); opacity: .9; transform: translateY(26px); transition: transform 2.4s var(--k-ease) .6s; }
.origin__scene.is-in .hz-sun, html:not(.js) .hz-sun { transform: none; }
.hz-star { fill: var(--glacier); animation: twinkle 3s ease-in-out infinite; }
.hz-star:nth-of-type(2n) { animation-delay: 1s; }
.hz-star:nth-of-type(3n) { animation-delay: 2s; }
@keyframes twinkle { 50% { opacity: .2; } }

.profile { padding: clamp(90px, 11vw, 160px) 0; }
.profile__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 90px); align-items: start; margin-top: 40px; }
.table { border-top: 1px solid var(--line-2); }
.table div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; padding: 18px 8px; border-bottom: 1px solid var(--line); transition: background .4s; }
.table div:hover { background: var(--snow); }
.table dt { font-weight: 700; font-size: .92rem; }
.table dd { color: var(--ink-2); font-size: .95rem; }
.table small { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.globe { position: relative; aspect-ratio: 1; border-radius: 6px; background: var(--night); overflow: hidden; }
.globe svg { width: 100%; height: 100%; }
.gl-grid { fill: none; stroke: rgba(169, 194, 216, .2); stroke-width: 1; }
.gl-lat { fill: none; stroke: var(--signal); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--k-ease) .3s; }
.globe.is-in .gl-lat, html:not(.js) .gl-lat { stroke-dashoffset: 0; }
.gl-mer { fill: none; stroke: rgba(169, 194, 216, .2); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 200px 200px; animation: gl-mer 16s linear infinite; }
.gl-mer:nth-of-type(2) { animation-delay: -4s; }
.gl-mer:nth-of-type(3) { animation-delay: -8s; }
.gl-mer:nth-of-type(4) { animation-delay: -12s; }
@keyframes gl-mer { 0% { transform: scaleX(1); } 25% { transform: scaleX(0); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.gl-pin { fill: var(--signal); }
.gl-pulse { fill: var(--signal); opacity: .3; transform-box: fill-box; transform-origin: center; animation: gl-pulse 2.4s var(--k-ease) infinite; }
@keyframes gl-pulse { from { transform: scale(.5); opacity: .5; } to { transform: scale(3); opacity: 0; } }
.gl-text { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; fill: var(--snow); }
.gl-sub { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; fill: var(--glacier); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .gnav { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 110px var(--gut) 60px; background: var(--night); color: var(--snow); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .8s var(--k-ease-io), visibility 0s .8s; }
  .gnav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--signal); }
  .menu-open .gnav { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s var(--k-ease-io); }
  .gnav a { font-weight: 700; font-size: clamp(2rem, 8vw, 3rem); opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .8s var(--k-ease); }
  .gnav a span { font-size: .9rem; }
  .menu-open .gnav a { opacity: 1; transform: none; }
  .menu-open .gnav a:nth-child(2) { transition-delay: .06s; }
  .menu-open .gnav a:nth-child(3) { transition-delay: .12s; }
  .menu-open .gnav a:nth-child(4) { transition-delay: .18s; }
  .gnav .gnav__cta { margin-top: 20px; font-size: 1rem; padding: 12px 22px; }
  .menu-open .head { color: var(--snow); }
  .menu-open .head::before { opacity: 0; }
  .head__clock { margin-left: auto; }
  .menu-toggle { display: block; }
  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case { min-height: 280px; }
}
@media (max-width: 960px) {
  .hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hud div:nth-child(3) { border-left: 0; padding-left: 0; }
  .hud div:nth-child(n+3) { border-top: 1px solid var(--line-d); }
  .view__grid, .svc__layout, .mvv__row, .origin__grid, .profile__grid, .block__top { grid-template-columns: minmax(0, 1fr); }
  .cap a { grid-template-columns: 56px minmax(0, 1fr) 46px; grid-template-areas: "no title arrow" "no text arrow"; gap: 6px 18px; }
  .cap__no { grid-area: no; font-size: 2.4rem; align-self: start; }
  .cap__icon { display: none; }
  .cap__title { grid-area: title; }
  .cap__text { grid-area: text; font-size: .88rem; }
  .cap__arrow { grid-area: arrow; width: 44px; height: 44px; }
  .process__sticky { position: static; min-height: 0; padding: clamp(90px, 12vw, 120px) 0; }
  .process__count, .process__rail { display: none; }
  .process__track { flex-direction: column; gap: 14px; }
  .pstep { width: auto; min-height: 0; margin-left: 28px; }
  .pstep::before { left: -28px; top: 34px; }
  .pstep.is-in::before { background: var(--signal); border-color: var(--signal); }
  .index { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; border-left: 0; }
  .index a { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 99px; font-size: .82rem; }
  .index a span { display: none; }
  .index a::before { display: none; }
  .diagram { max-width: 360px; }
  .block__cols, .plans__grid, .values { grid-template-columns: minmax(0, 1fr); }
  .globe { max-width: 420px; }
}
@media (max-width: 640px) {
  .head__clock span { display: none; }
  .head__clock { font-size: .6rem; }
  .logo__word small { display: none; }
  .hero { padding-top: 120px; }
  .hero__title { font-size: clamp(2.35rem, 11vw, 3.2rem); }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .hud dd { font-size: .74rem; }
  .cases__grid { grid-template-columns: minmax(0, 1fr); }
  .case { min-height: 0; }
  .h2 { font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .contact__title { font-size: clamp(2.2rem, 10.5vw, 3rem); }
  .contact__note { padding: 22px 20px; }
  .contact__note .btn { width: 100%; justify-content: center; }
  .phero__title { font-size: clamp(2.2rem, 10.5vw, 3rem); }
  .phero__title .ln > span, .h2 .ln > span { white-space: normal; }
  .table div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .foot__top { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 961px) {
  .process__sticky { position: static; min-height: 0; }
  .process__rail, .process__count { display: none; }
  .process__track { flex-wrap: wrap; }
  .pstep { width: calc(50% - 10px); }
  .pstep::before { display: none; }
}