/* Offscrypt company site. One idea runs through the page: many threads of work, gathered into one cord. */
:root {
  --night: #0a0f24;
  --night-2: #111938;
  --paper: #f5f6f3;
  --paper-2: #eceee9;
  --white: #ffffff;
  --ink: #121726;
  --ink-soft: #4a5268;
  --line: rgba(18, 23, 38, .1);
  /* Thread colors: water, wisteria, amber, silver. */
  --mizu: #7fd6e0;
  --fuji: #b7a3f0;
  --kohaku: #f2c078;
  --gin: #e6ecf5;
  --mizu-deep: #0b6f7b;
  --fuji-deep: #5a45b3;
  --kohaku-deep: #8f5400;
  --thread: linear-gradient(90deg, var(--mizu), var(--fuji) 52%, var(--kohaku));
  --thread-deep: linear-gradient(90deg, var(--mizu-deep), var(--fuji-deep) 52%, var(--kohaku-deep));
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Noto Serif JP", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter: clamp(20px, 5vw, 64px);
  --shell: min(1240px, 100% - var(--gutter) * 2);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --focus: var(--ink);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 104px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--gothic); font-weight: 500; font-size: 1rem; line-height: 1.95; letter-spacing: .04em;
  line-break: strict; word-break: auto-phrase; overflow-wrap: anywhere; overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
svg { display: block; }
em { font-style: normal; }
p { text-wrap: pretty; }
.section-lead, .plate-lead, .contact-caption, .hero-description { text-wrap: balance; }
h1, h2, h3 { font-family: var(--mincho); font-weight: 600; font-feature-settings: "palt"; letter-spacing: .03em; line-height: 1.4; }
.ph, .line { display: inline-block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.shell { width: var(--shell); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.arrow { display: inline-block; margin-left: .7em; font-family: var(--mono); letter-spacing: 0; transition: transform .35s var(--ease); }

.skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 700; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.preview-notice { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; padding: 7px 16px; background: #060916; color: #c9d0e0; font-size: .75rem; line-height: 1.6; letter-spacing: .08em; text-align: center; }
.preview-notice strong { color: var(--white); font-weight: 700; }

/* ---------- Floating menu ---------- */
/* With scripts the menu is fixed and follows the reader. Without them it stays at the top of the page,
   where its light-on-dark style is always readable. */
.nav-anchor { position: absolute; left: 0; right: 0; z-index: 60; height: 0; }
.js .nav-anchor { position: fixed; top: 0; }
.js .site-nav { top: var(--nav-top, 46px); }
.site-nav {
  --focus: var(--white);
  position: absolute; top: 12px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(1240px, 100% - 24px); min-height: 64px; margin: 0 auto; padding: 8px 10px 8px 26px;
  border-radius: 22px; color: var(--white);
  background: rgba(10, 15, 36, .62); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  transition: background .4s, color .4s, border-color .4s, box-shadow .4s, min-height .4s var(--ease);
}
.site-nav.is-scrolled {
  --focus: var(--ink);
  color: var(--ink); background: rgba(245, 246, 243, .94); border-color: rgba(18, 23, 38, .09);
  box-shadow: 0 18px 50px -24px rgba(10, 15, 36, .45), 0 1px 0 rgba(255, 255, 255, .7) inset;
}
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mincho); font-weight: 600; font-size: 1.32rem; letter-spacing: .04em; line-height: 1; }
.nav-links { display: flex; align-items: center; gap: clamp(8px, 2.2vw, 34px); font-size: .875rem; font-weight: 700; letter-spacing: .08em; }
.nav-links a { position: relative; padding: 12px 4px; white-space: nowrap; }
.nav-links a:not(.nav-cta)::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--thread); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav-links a:not(.nav-cta):hover::after, .nav-links a[aria-current="true"]::after { transform: scaleX(1); }
.nav-links .nav-cta { padding: 11px 20px 11px 24px; border-radius: 14px; background: var(--white); color: var(--ink); transition: background .4s, color .4s; }
.site-nav.is-scrolled .nav-cta { background: var(--night); color: var(--white); }
.nav-cta:hover .arrow, .button:hover .arrow, .text-link:hover .arrow { transform: translateX(4px); }
.nav-links .nav-cta:hover { box-shadow: 0 0 0 3px rgba(183, 163, 240, .45); }
summary:hover, .footer-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-progress { position: absolute; left: 24px; right: 24px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--thread); transform: scaleX(var(--read, 0)); transform-origin: left; opacity: 0; transition: opacity .4s; }
.site-nav.is-scrolled .nav-progress { opacity: 1; background: var(--thread-deep); }
/* Over the dark contact section the bar is dark glass again (the same as at the top of the page), so it never sits as a pale slab on the knot. */
.site-nav.is-night .nav-progress { opacity: 1; }
.nav-toggle { display: none; order: 3; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .1); cursor: pointer; }
.site-nav.is-scrolled .nav-toggle { background: rgba(18, 23, 38, .07); }
.nav-toggle-bars { display: grid; gap: 7px; width: 20px; margin: auto; }
.nav-toggle-bars i { height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease); }
.nav-toggle[aria-expanded="true"] i:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  --focus: var(--white);
  --cord-x: 74; --spread-from: 51; --spread-to: 101; --gather: 66; --veil: .62; --veil-until: 16; --strands: 46;
  position: relative; display: flex; min-height: min(100svh - 34px, 1040px); overflow: hidden; isolation: isolate;
  background: var(--night); color: var(--white);
}
.hero-sky { position: absolute; inset: 0; z-index: -2;
  background:
    var(--grain),
    radial-gradient(var(--bloom, 42% 46%) at calc(var(--cord-x) * 1%) calc(var(--gather) * 1%), rgba(72, 96, 210, .5), transparent 72%),
    radial-gradient(34% 40% at 96% 4%, rgba(183, 163, 240, .2), transparent 70%),
    radial-gradient(40% 50% at 52% -6%, rgba(127, 214, 224, .13), transparent 70%),
    linear-gradient(180deg, #080c1e 0%, #0b1130 58%, #0e1640 100%);
  background-blend-mode: soft-light, normal, normal, normal, normal;
}
.hero-still, .hero-threads { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.js .hero-still { display: none; }
.no-js .hero-threads { display: none; }
.hero-labels { position: absolute; inset: 112px 0 auto 0; z-index: -1; height: 0; font-family: var(--mincho); font-size: .875rem; font-weight: 600; letter-spacing: .36em; color: rgba(255, 255, 255, .78); }
.hero-labels span { position: absolute; top: 0; writing-mode: vertical-rl; padding: 18px 0 0 12px; white-space: nowrap; text-shadow: 0 0 5px #0a0f24, 0 0 10px #0a0f24, 0 0 16px #0a0f24; }
.hero-labels span::before { content: ""; position: absolute; top: 0; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.js .hero-labels span::before { display: none; }
/* Without scripts the labels sit on the lines of the still drawing. */
.hero-labels span:nth-child(1) { left: 58.5%; color: rgba(190, 236, 242, .92); }
.hero-labels span:nth-child(2) { left: 63.2%; }
.hero-labels span:nth-child(3) { left: 81.7%; color: rgba(216, 204, 248, .92); }
.hero-labels span:nth-child(4) { left: 86.8%; }
.hero-labels span:nth-child(5) { left: 92.4%; color: rgba(248, 220, 176, .94); }

.hero-inner { display: grid; grid-template-rows: 1fr auto; gap: 40px; padding: clamp(150px, 20vh, 220px) 0 clamp(28px, 4.4vh, 48px); }
.hero-copy { align-self: center; max-width: 660px; }
.hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(20px, 3vh, 34px); font-size: .8125rem; font-weight: 700; letter-spacing: .2em; color: #d6dcec; }
.eyebrow-thread { width: 44px; height: 2px; border-radius: 2px; background: var(--thread); }
.hero h1 { font-size: clamp(2rem, 10.2vw, 4.4rem); line-height: 1.24; letter-spacing: .035em; }
.hero h1 .line { display: block; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
.hero h1 .line > span { display: inline-block; }
.hero h1 .line:last-child > span { background: linear-gradient(100deg, #fff 30%, #cfe9f2 55%, #d9cdf6 78%, #f6dcae); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-description { max-width: 33em; margin-top: clamp(22px, 3.4vh, 36px); color: #d3d9ea; font-size: clamp(.97rem, 1.15vw, 1.07rem); line-height: 2.05; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4.4vh, 46px); }

.button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 28px 0 32px; overflow: hidden; border: 1px solid transparent; border-radius: 999px; font-size: .95rem; font-weight: 700; letter-spacing: .1em; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s, background .35s, border-color .35s; }
.button-light { background: var(--paper); color: var(--ink); box-shadow: 0 18px 44px -18px rgba(127, 170, 240, .65); }
.button-light::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(183, 163, 240, .45) 50%, transparent 62%); transform: translateX(-120%); transition: transform .9s var(--ease); }
.button-light:hover::before { transform: translateX(120%); }
.button-light:hover { transform: translateY(-2px); }
.button-ghost { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .05); color: var(--white); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.button-ghost:hover { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .1); }
.button > * { position: relative; }

.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hero-index { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.hero-index a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 20px 8px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: rgba(10, 15, 36, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; line-height: 1.4; transition: border-color .35s, background .35s, transform .35s var(--ease); }
.hero-index a:hover { border-color: var(--hue); background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
.hero-index i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 14px var(--hue); }
.hero-index small { display: block; font-size: .75rem; font-weight: 500; color: #c6cde0; letter-spacing: .06em; }
.hero-caption { margin-right: calc(100% - var(--cord-x) * 1% + 34px); font-family: var(--mincho); font-size: .95rem; line-height: 1.75; letter-spacing: .14em; color: #dfe4f2; text-align: right; white-space: nowrap; }
[data-hue="mizu"] { --hue: var(--mizu); --hue-deep: var(--mizu-deep); --hue-rgb: 127, 214, 224; }
[data-hue="fuji"] { --hue: var(--fuji); --hue-deep: var(--fuji-deep); --hue-rgb: 183, 163, 240; }
[data-hue="kohaku"] { --hue: var(--kohaku); --hue-deep: var(--kohaku-deep); --hue-rgb: 242, 192, 120; }

/* ---------- Shared section furniture ---------- */
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: .8125rem; font-weight: 700; letter-spacing: .2em; color: var(--ink-soft); }
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--thread-deep); }
.tate { display: none; }
.section-head { margin-bottom: clamp(44px, 6vw, 84px); }
.section-head h2, .belief h2, .contact h2 { font-size: clamp(1.7rem, 4.3vw, 3.15rem); }
.section-lead { margin-top: 22px; max-width: 33em; color: var(--ink-soft); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0; font-weight: 700; font-size: .95rem; background: var(--thread-deep) left bottom / 100% 2px no-repeat; transition: background-size .45s var(--ease); }
.text-link:hover { background-size: 34% 2px; }
.text-link { background-position: left calc(100% - 4px); }

/* ---------- Belief ---------- */
.belief { position: relative; padding: clamp(120px, 15vw, 210px) 0 clamp(56px, 7vw, 104px); overflow: hidden;
  background: radial-gradient(50% 60% at 88% 0%, rgba(127, 214, 224, .16), transparent 70%), var(--paper); }
.cord-tail { position: absolute; top: 0; left: 74%; width: 3px; height: clamp(84px, 11vw, 150px); margin-left: -1.5px; border-radius: 0 0 3px 3px; background: linear-gradient(180deg, #fff, var(--mizu-deep) 26%, var(--fuji-deep) 62%, var(--kohaku-deep)); }
.cord-tail::after { content: ""; position: absolute; left: 50%; bottom: -15px; width: 15px; height: 15px; margin-left: -7.5px; border: 2.5px solid var(--kohaku-deep); border-radius: 50%; }
.belief h2 { font-size: clamp(1.75rem, 6.6vw, 2.6rem); line-height: 1.5; }
.belief h2 em { background: var(--thread-deep) left 92% / 100% .11em no-repeat; padding-bottom: .1em; }
.belief-text { display: grid; gap: 1.1em; max-width: 32em; margin-top: clamp(32px, 5vw, 60px); color: var(--ink-soft); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 2.15; }

/* ---------- Services ---------- */
.services { padding: clamp(56px, 7vw, 104px) 0 clamp(88px, 11vw, 160px); background: var(--paper); }
.plates { display: grid; gap: clamp(20px, 3vw, 34px); }
.plate {
  position: relative; display: grid; gap: 8px; padding: 10px; border-radius: 30px; background: var(--white);
  border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 40px 80px -48px rgba(10, 15, 36, .38), 0 8px 24px -16px rgba(10, 15, 36, .16);
}
.plate-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(22px, 4vw, 46px) clamp(14px, 3.4vw, 44px) clamp(18px, 3vw, 40px); }
.plate-category { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 12px; border-radius: 999px; background: rgba(var(--hue-rgb), .16); color: var(--hue-deep); font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.plate-category i { width: 7px; height: 7px; border-radius: 50%; background: var(--hue-deep); }
.plate h3 { display: grid; gap: 6px; margin-top: 20px; }
.plate-name { font-size: clamp(1.45rem, 7.2vw, 2.7rem); line-height: 1.25; letter-spacing: .04em; }
.plate-kind { font-family: var(--gothic); font-size: .875rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-soft); }
.plate-lead { margin-top: 20px; font-family: var(--mincho); font-weight: 600; font-size: clamp(1.14rem, 1.8vw, 1.42rem); line-height: 1.7; letter-spacing: .05em; }
.plate-text { margin-top: 14px; max-width: 34em; color: var(--ink-soft); font-size: .97rem; }
.topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 24px; }
.topics li { padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; }
.plate .text-link { margin-top: auto; }
.plate-stage {
  position: relative; display: grid; place-items: center; min-height: 280px; overflow: hidden; border-radius: 22px; color: var(--white);
  background: var(--grain), radial-gradient(70% 70% at 50% 46%, rgba(var(--hue-rgb), .2), transparent 72%), linear-gradient(160deg, #0d1434, #080c1e);
  background-blend-mode: soft-light, normal, normal;
}
.plate-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--hue-rgb), .26), transparent 70%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.plate:hover .plate-stage::after { opacity: 1; }
.plate-stage svg { width: min(100%, 470px); height: auto; padding: 4px 0; }
.plate-stage figcaption { position: absolute; left: 18px; bottom: 12px; font-size: .75rem; letter-spacing: .2em; color: rgba(255, 255, 255, .66); }
.plate-stage text { fill: #e9edf7; font-family: var(--gothic); font-size: 18px; font-weight: 700; letter-spacing: .05em; }
.wire { stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; stroke-linecap: round; }
.wire-run { stroke: var(--hue); stroke-width: 2.6; stroke-dasharray: .2 .8; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px var(--hue)); }
.knot { fill: #0a0f24; stroke: var(--hue); stroke-width: 2; }
.layer path { fill: rgba(var(--hue-rgb), .07); stroke: rgba(var(--hue-rgb), .62); stroke-width: 1.2; stroke-linejoin: round; }
.layer.l1 path { fill: rgba(var(--hue-rgb), .16); stroke: var(--hue); }
.leader { stroke: rgba(255, 255, 255, .34); stroke-width: 1; }
.dots circle { fill: var(--hue); opacity: .75; }
.grid-lines path { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.block rect { fill: rgba(var(--hue-rgb), .1); stroke: var(--hue); stroke-width: 1.3; }
.block .rule { stroke: rgba(255, 255, 255, .26); stroke-width: 5; stroke-linecap: round; }
.block.b-old rect { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .5); stroke-dasharray: 5 5; }
.measure path { stroke: rgba(255, 255, 255, .36); stroke-width: 1; }
.lanes path { stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-dasharray: 3 6; }
.lanes text { fill: #c3cbe0; font-size: 16.5px; }
.step circle, .step rect { fill: #0c1230; stroke: var(--hue); stroke-width: 1.6; }
.step path { stroke: var(--hue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step.s1 circle { stroke: rgba(255, 255, 255, .6); }
.step.s1 path { stroke: rgba(255, 255, 255, .85); stroke-width: 1.6; }
.disclosure { margin-top: clamp(28px, 4vw, 44px); color: var(--ink-soft); font-size: .8125rem; line-height: 1.9; }

/* ---------- Approach ---------- */
.approach { padding: clamp(84px, 11vw, 160px) 0; background: radial-gradient(46% 60% at 100% 100%, rgba(242, 192, 120, .16), transparent 70%), var(--paper-2); }
.steps { position: relative; display: grid; gap: 34px; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 56px; bottom: -34px; width: 2px; background: linear-gradient(180deg, var(--step, var(--mizu-deep)), var(--step-next, var(--fuji-deep))); transform-origin: top; }
.steps li { position: relative; padding-left: 84px; }
.step-no { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--step, var(--mizu-deep)); color: var(--step, var(--mizu-deep)); font-family: var(--mincho); font-size: 1.3rem; line-height: 1; }
.steps li:nth-child(2) { --step: var(--fuji-deep); --step-next: var(--kohaku-deep); }
.steps li:nth-child(3) { --step: var(--kohaku-deep); }
.steps h3 { padding-top: 10px; font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.steps p { margin-top: 10px; max-width: 24em; color: var(--ink-soft); }

/* ---------- Company ---------- */
.company { padding: clamp(84px, 11vw, 160px) 0; background: var(--paper); }
.company-details dl { border-top: 1px solid rgba(18, 23, 38, .22); }
.company-details dl > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 4px 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 380px) { .company-details dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px 0; } }
.company-details dt { color: var(--ink-soft); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; line-height: 2.3; }
.company-details dd { font-size: 1.03rem; line-height: 1.85; }
.company-details dl > div:first-child dd { font-family: var(--mincho); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: .05em; line-height: 1.5; }
.field-note { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .8125rem; }
details summary { cursor: pointer; font-weight: 700; font-size: .9rem; letter-spacing: .08em; }
.sources { margin-top: 22px; }
.sources summary { padding: 11px 0; }
.sources p { margin-top: 10px; color: var(--ink-soft); font-size: .9rem; }

/* ---------- Contact ---------- */
.contact { --focus: var(--white); position: relative; padding: clamp(96px, 12vw, 170px) 0 clamp(72px, 9vw, 120px); overflow: hidden; isolation: isolate; background: var(--night); color: var(--white); }
.contact-sky { position: absolute; inset: 0; z-index: -1;
  background: var(--grain), radial-gradient(var(--bloom, 40% 52%) at var(--bloom-at, 76% 40%), rgba(72, 96, 210, .46), transparent 72%), radial-gradient(36% 40% at 4% 100%, rgba(242, 192, 120, .1), transparent 70%), linear-gradient(180deg, #0c1232, #080c1e);
  background-blend-mode: soft-light, normal, normal, normal; }
.contact .eyebrow { color: #d6dcec; }
.contact .eyebrow::before { background: var(--thread); }
.contact .section-lead { color: #d3d9ea; }
.contact-inner { display: grid; gap: clamp(28px, 5vw, 56px); }
.knot-stage { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin-inline: auto; }
.knot-stage canvas, .knot-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.js .knot-still { display: none; }
.no-js .knot-stage canvas { display: none; }
.contact-panel { padding: clamp(24px, 4vw, 40px); border: 1px solid rgba(255, 255, 255, .16); border-radius: 26px; background: rgba(255, 255, 255, .055); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.contact-status { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 12px; border-radius: 16px; line-height: 1.6; background: rgba(242, 192, 120, .16); color: #f8dcae; font-size: .78rem; font-weight: 700; letter-spacing: .1em; }
.contact-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--kohaku); }
.contact-email { margin-top: 18px; font-family: var(--mono); font-size: clamp(1.15rem, 4.6vw, 1.7rem); letter-spacing: 0; line-height: 1.5; }
.contact-caption { margin-top: 8px; color: #c6cde0; font-size: .8125rem; line-height: 1.9; }
.contact-button { width: 100%; margin-top: 26px; }
.copy-status { min-height: 1.9em; margin-top: 6px; color: #bfeef4; font-size: .875rem; font-weight: 700; }
.outline-details { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .16); }
.outline-details summary { padding: 14px 0 6px; }
.outline-details pre { margin-top: 8px; padding: 16px 18px; border-radius: 14px; background: rgba(6, 9, 22, .6); border: 1px solid rgba(255, 255, 255, .12); font-family: var(--gothic); font-size: .875rem; line-height: 1.9; white-space: pre-wrap; user-select: all; -webkit-user-select: all; }

.site-footer { --focus: var(--white); background: #060916; color: #c6cde0; font-size: .8125rem; }
.site-footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 30px 0 calc(30px + env(safe-area-inset-bottom)); }
.site-footer .wordmark { color: var(--white); margin-right: auto; }
.site-footer a { scroll-margin-bottom: 28px; }
.footer-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 6px; }
.footer-note { padding: 3px 12px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; }

/* ---------- Narrow screens: menu becomes a sheet under the bar ---------- */
@media (max-width: 859px) {
  .js .nav-toggle { display: block; }
  .js .nav-links { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border-radius: 22px; background: var(--paper); color: var(--ink); border: 1px solid rgba(18, 23, 38, .09); box-shadow: 0 28px 60px -24px rgba(10, 15, 36, .6); font-size: 1rem; }
  .js .site-nav.is-open .nav-links { display: flex; }
  .js .nav-links a { padding: 15px 16px; border-radius: 14px; --focus: var(--ink); }
  .js .nav-links a:not(.nav-cta)::after { display: none; }
  .js .nav-links .nav-cta { margin-top: 6px; padding: 16px; background: var(--night); color: var(--white); text-align: center; }
  .site-nav { padding-left: 20px; }
  .no-js .site-nav { flex-wrap: wrap; align-content: center; row-gap: 0; padding-block: 10px; }
  .no-js .nav-links { flex-wrap: wrap; gap: 0 14px; }
  .hero { --cord-x: 80; --spread-from: 4; --spread-to: 98; --gather: 87; --veil: .15; --veil-until: 73; --strands: 30; --bloom: 95% 30%; }
  .contact { --bloom: 110% 30%; --bloom-at: 50% 34%; }
  .hero-labels { display: none; }
  .hero-inner { padding-top: 132px; gap: 34px; }
  .hero-foot { align-items: stretch; }
  .hero-index { flex-direction: column; width: min(100%, 250px); }
  .hero-caption { display: none; }
  .hero-still { width: 220%; left: -113%; opacity: .5; }
  .no-js .hero-inner { padding-top: 212px; }
  .no-js .hero-still { opacity: .32; }
  .cord-tail { left: 80%; }
  .plate-stage text { font-size: 18px; }
  .site-footer .wordmark { flex-basis: 100%; }
}
@media (max-width: 420px) {
  .hero-actions .button { flex: 1 1 auto; padding-inline: 20px; }
}

/* ---------- Wide screens ---------- */
@media (min-width: 860px) {
  .hero-copy { max-width: min(660px, 47vw); }
  .hero h1 { font-size: clamp(2.9rem, 5.25vw, 4.9rem); }
  .tate { display: block; justify-self: start; writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 600; font-size: .95rem; letter-spacing: .42em; line-height: 1; color: var(--ink-soft); padding-top: 62px; position: relative; white-space: nowrap; }
  .tate::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 46px; margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, var(--mizu-deep), var(--fuji-deep) 52%, var(--kohaku-deep)); }
  .eyebrow:not(.hero-eyebrow) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .contact .eyebrow { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .section-head, .belief-inner { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; }
  .section-head-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; }
  .section-head-body .section-lead { margin-top: 0; padding-bottom: .55em; }
  .company .section-head-body { display: block; }
  .company .section-head-body .section-lead { margin-top: 22px; padding-bottom: 0; }
  /* The cord from the hero runs down the right of this section; the text keeps clear of it. */
  .belief { padding-top: clamp(96px, 10.5vw, 150px); padding-bottom: clamp(72px, 8vw, 116px); }
  .cord-tail { height: calc(100% - clamp(72px, 8vw, 116px) - 8px); }
  .belief-body { padding-right: calc(26vw - max(var(--gutter), (100vw - 1240px) / 2) + 44px); }
  .belief h2 { font-size: clamp(1.75rem, 3.55vw, 3.3rem); }
  .belief-text { margin-left: auto; }
  .plate-stage text { font-size: 15px; }
  .lanes text { font-size: 14px; }
  .services { padding-top: clamp(36px, 4.5vw, 64px); }
  .plate { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); padding: 12px; }
  .plate-stage { min-height: 460px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-left: 72px; }
  .steps li:not(:last-child)::after { left: 56px; right: -40px; top: 27px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--step, var(--mizu-deep)), var(--step-next, var(--fuji-deep))); transform-origin: left; }
  .steps li { padding: 84px 0 0; }
  .company-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "head list" "sources list"; grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .company .section-head { grid-area: head; margin-bottom: 0; }
  .company-details { grid-area: list; }
  .sources { grid-area: sources; margin: 34px 0 0 72px; padding-top: 6px; border-top: 1px solid var(--line); }
  .contact-inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "copy knot" "panel knot"; align-items: start; column-gap: clamp(40px, 7vw, 110px); }
  .contact-copy { grid-area: copy; }
  .contact-panel { grid-area: panel; max-width: 560px; }
  .knot-stage { grid-area: knot; width: min(100%, 500px); align-self: center; }
  .contact-button { width: auto; }
}
/* Service plates stack as you scroll. The class is set by site.js only when each plate fits the screen. */
.stack-ok .plate { position: sticky; top: calc(108px + var(--i, 0) * 20px); min-height: min(600px, 100svh - 190px); }
/* While the keyboard is inside the cards they lie in normal order, so the focused link is never underneath another card. */
.stack-ok .plates:focus-within .plate { position: relative; top: auto; }
.plate:nth-child(2) { --i: 1; }
.plate:nth-child(3) { --i: 2; }

/* ---------- Motion. Everything above is complete and still without it. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .line > span { animation: rise 1.1s var(--ease) both; }
  .hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
  .hero-eyebrow, .hero-description, .hero-actions, .hero-foot, .hero-labels { animation: fade-up 1s var(--ease) both; }
  .hero-eyebrow { animation-delay: .05s; }
  .hero-description { animation-delay: .32s; }
  .hero-actions { animation-delay: .44s; }
  .hero-foot { animation-delay: .7s; }
  .hero-labels { animation-delay: 1.1s; }
  .wire-run { animation: run 5.5s linear infinite; }
  .plate:nth-child(2) .wire-run { animation-duration: 6.5s; }
  .dots circle { animation: twinkle 3.6s ease-in-out infinite; }
  .dots circle:nth-child(3n) { animation-delay: -1.2s; }
  .dots circle:nth-child(3n + 1) { animation-delay: -2.4s; }
  .step.gate rect { animation: gate 3.4s ease-in-out infinite; }
  .fx [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
  .fx [data-reveal].is-in { opacity: 1; transform: none; }
  .fx .steps li::after { transform: scaleY(0); transition: transform .9s var(--ease) .35s; }
  .fx .steps li:nth-child(2)::after { transition-delay: .75s; }
  .fx .steps.is-in li::after { transform: none; }
  .fx .belief h2 em { background-size: 0% .11em; transition: background-size 1.2s var(--ease) .5s; }
  .fx .belief h2.is-in em { background-size: 100% .11em; }
  .fx .cord-tail { transform: scaleY(0); transform-origin: top; transition: transform 1.1s var(--ease); }
  .fx .belief.is-in .cord-tail { transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 860px) {
  .fx .steps li::after { transform: scaleX(0); }
  .fx .cord-tail { transition-duration: 1.9s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .wire-run { stroke-dashoffset: .6; }
}
@keyframes rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes run { to { stroke-dashoffset: 0; } }
@keyframes twinkle { 50% { opacity: .2; } }
@keyframes gate { 50% { fill: rgba(242, 192, 120, .26); } }

@media print {
  .nav-anchor, .hero-threads, .hero-still, .knot-stage, .preview-notice { display: none; }
  .hero, .contact { background: none; color: #000; min-height: 0; }
}