/* ==========================================================================
   Visionary — design system v0.3 (all pages)
   Off-white single surface · jumbo typography · logo as the hero · CSS lines only
   Layout modes on <html>:
     (none) / .m-off  → static, fully readable (no JS, reduced motion, very short screens)
     .m-on            → scroll-linked motion (pinned scenes), PC + smartphone
   ========================================================================== */

:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --ink: #11131a;
  --ink-2: #2f3442;
  --muted: #5f6878;          /* 5.3:1 on --bg */
  --soft: #8a92a1;           /* decorative labels only */
  --line: #dce0e7;
  --ghost: #e4e8ef;          /* giant background type */
  --blue: #0754a5;
  --violet: #8d409b;
  --magenta: #b03594;
  --aqua: #12b2bb;
  --grad: linear-gradient(105deg, #0755aa 5%, #7e42a9 62%, #b03594 100%);
  --font: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
          "Yu Gothic", YuGothic, Meiryo, system-ui, sans-serif;
  --pad: clamp(22px, 7vw, 120px);
  --head: 84px;
  --vh: 1vh;                 /* JS sets this to a stable px value (ignores mobile toolbar jitter) */
  --ease: cubic-bezier(.22, .61, .36, 1);
}
@media (max-width: 800px) { :root { --head: 66px; --pad: 24px; } }
@media (max-width: 359px) { :root { --pad: 18px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 16px; line-height: 1.9; font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
h1, h2, h3, .statement, .lead, .kw-detail { word-break: auto-phrase; line-break: strict; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
::selection { background: #cab3df; color: #10121c; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 900; background: var(--ink); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: 13px; transform: translateY(-180%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* fine CSS dot texture — the only "background" */
.page-noise {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(#0000000b .45px, transparent .65px); background-size: 8px 8px; opacity: .35;
}

/* ---------- shared typography & parts ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .26em; font-weight: 800; text-transform: uppercase; color: #5d6679;
  line-height: 1.6;
}
.eyebrow b { color: var(--blue); font-weight: 800; }
.accent-line { display: inline-block; width: 72px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #0958b1, #a23f9d, #12b3b7); }
.gradient-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.jumbo { font-weight: 900; letter-spacing: -.075em; line-height: 1.2; }
.outline-link, .solid-link {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em; line-height: 1.4;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.outline-link { border: 1px solid #6d778a; }
.outline-link:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.solid-link { background: var(--ink); color: #fff; min-height: 56px; padding: 16px 28px; gap: 56px; }
.solid-link:hover { background: var(--blue); transform: translateY(-2px); }
.arrow { font-size: 18px; font-weight: 400; line-height: 1; transition: transform .25s var(--ease); }
a:hover > .arrow { transform: translate(2px, -2px); }
.tel-link { font-weight: 800; letter-spacing: .06em; font-size: 15px; }
.tel-link:hover { color: var(--blue); }

/* ==========================================================================
   Header + MENU (PC / smartphone)
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 500; height: var(--head);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--pad);
  background: rgba(247, 248, 250, .84);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(42, 50, 68, .08);
}
.brand { display: block; width: clamp(132px, 13vw, 190px); flex-shrink: 0; }
.primary-nav { display: flex; align-items: center; gap: clamp(18px, 2.8vw, 50px); margin-left: auto; }
.primary-nav a { font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 8px 0; position: relative; }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-button {
  display: flex; align-items: center; gap: 12px; border: 0; background: none; cursor: pointer;
  font-size: 11px; font-weight: 800; letter-spacing: .18em; padding: 12px 0 12px 12px; min-height: 44px; margin-left: clamp(18px, 3vw, 48px);
}
.hamb { display: grid; gap: 6px; width: 28px; }
.hamb span { display: block; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.menu-button[aria-expanded="true"] .hamb span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-button[aria-expanded="true"] .hamb span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width: 1023px) { .primary-nav { display: none; } .menu-button { margin-left: auto; } }
@media (max-width: 800px) { .menu-button .lbl { display: none; } }

.menu-overlay {
  position: fixed; inset: var(--head) 0 0 0; z-index: 450; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg);
  padding: clamp(28px, 5vw, 72px) var(--pad) 48px;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 80px); align-content: start;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.menu-overlay.open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.menu-caption { font-size: 11px; letter-spacing: .25em; color: var(--muted); font-weight: 800; text-transform: uppercase; margin-bottom: 14px; }
.menu-links a {
  display: flex; align-items: baseline; gap: 18px; padding: 6px 0;
  font-size: clamp(30px, 4vw, 64px); font-weight: 900; letter-spacing: -.05em; line-height: 1.35;
  border-bottom: 1px solid var(--line); transition: color .25s;
}
.menu-links a small { font-size: 12px; color: var(--muted); letter-spacing: .04em; min-width: 24px; font-weight: 700; }
.menu-links a em { font-style: normal; font-size: 12px; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-left: auto; }
.menu-links a:hover, .menu-links a[aria-current="page"] { color: var(--blue); }
.menu-secondary { display: flex; flex-direction: column; }
.menu-secondary a { display: flex; justify-content: space-between; padding: 16px 0; font-size: 17px; font-weight: 700; border-bottom: 1px solid var(--line); }
.menu-secondary a:hover { color: var(--blue); }
.menu-contact { margin-top: 36px; font-size: 13px; color: var(--muted); line-height: 2; }
@media (max-width: 800px) {
  .menu-overlay { grid-template-columns: 1fr; padding-top: 24px; }
}

/* scene counter (TOP) */
.scene-counter {
  position: fixed; bottom: 38px; right: var(--pad); z-index: 300; pointer-events: none;
  display: flex; align-items: center; gap: 14px; color: var(--soft); font-size: 11px; letter-spacing: .18em;
  transition: opacity .35s;
}
.scene-counter .now { font-weight: 900; color: var(--ink); min-width: 1.7em; }
.counter-line { display: block; width: 52px; height: 1px; background: #c9ced7; overflow: hidden; }
.counter-line span { display: block; height: 100%; background: var(--blue); transform-origin: left; transform: scaleX(var(--p, 0)); }
.scene-counter.is-hidden { opacity: 0; }
.m-off .scene-counter, html:not(.m-on) .scene-counter { display: none; }
@media (max-width: 800px) { .scene-counter { bottom: 18px; right: 18px; font-size: 10px; } .counter-line { width: 28px; } }

/* ==========================================================================
   TOP — static layout (default)
   ========================================================================== */
.pin-scene { position: relative; overflow-anchor: none; }
.pin { position: relative; }
.anc, .deco, .sym, .scroll-hint, .intro-side, .kw-stamp, .svc-bottom, .st-bigs, .st-progress, .rc-rule { display: none; }

.sc-intro .pin { padding: calc(var(--head) + 8vh) var(--pad) 10vh; }
.intro-logo { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.intro-word { width: clamp(240px, 46vw, 560px); filter: drop-shadow(0 30px 40px rgba(64, 72, 95, .06)); }
.intro-tag { margin-top: 18px; font-size: 11px; letter-spacing: .4em; color: var(--soft); font-weight: 800; }
.intro-copy { margin-top: 6vh; }
.copy { margin: 18px 0 24px; font-size: clamp(56px, 12vw, 150px); font-weight: 900; line-height: 1.1; letter-spacing: -.1em; }
.copy span { display: block; width: max-content; }
.copy-sub { font-size: clamp(15px, 1.34vw, 21px); font-weight: 600; line-height: 2.1; letter-spacing: .06em; }
.kw { margin-top: 12vh; }
.kw-list { margin-top: 28px; display: grid; gap: 34px; }
.kw-word { font-size: clamp(80px, 17vw, 260px); font-weight: 900; line-height: 1; letter-spacing: -.11em; white-space: nowrap; }
.kw-word.w1 { color: #151820; }
.kw-word.w2 { background: linear-gradient(110deg, #075baa, #9245a5); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.kw-word.w3 { background: linear-gradient(110deg, #8443a0, #ba388f 57%, #0eabae); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.kw-detail { margin-top: 12px; font-size: clamp(17px, 2vw, 27px); line-height: 1.7; font-weight: 700; }

.sc-vision .pin, .sc-services .pin, .sc-steps .pin, .sc-recruit .pin { padding: 14vh var(--pad); }
.vision-copy h2 { font-size: clamp(42px, 7.8vw, 142px); font-weight: 900; line-height: 1.28; letter-spacing: -.085em; margin: 28px 0 32px; }
.vision-copy h2 span { display: block; }
.vision-copy .lead { font-size: clamp(15px, 1.4vw, 21px); line-height: 2.2; max-width: 34em; }
.vision-fact { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; max-width: 40em; font-size: 14px; }
.vision-fact dt { font-size: 11px; letter-spacing: .22em; color: var(--muted); font-weight: 800; padding-top: 3px; }
.vision-link { margin-top: 34px; }
.vision-caption { margin-top: 40px; font-size: 12px; letter-spacing: .24em; color: var(--soft); }
.orbit { display: none; }

.svc-track { margin-top: 36px; border-top: 1px solid var(--line); }
.svc-panel { position: relative; padding: 48px 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.svc-index { position: absolute; right: 0; top: 10px; font-size: clamp(110px, 20vw, 260px); font-weight: 900; line-height: 1; letter-spacing: -.12em; color: var(--ghost); z-index: -1; }
.svc-sub { font-size: 12px; color: var(--blue); font-weight: 800; letter-spacing: .2em; }
.svc-copy h3 { font-size: clamp(40px, 5.8vw, 98px); font-weight: 900; letter-spacing: -.075em; line-height: 1.15; margin: 22px 0 20px; }
.svc-copy .lead { font-size: clamp(16px, 1.4vw, 21px); font-weight: 800; line-height: 1.8; }
.svc-copy .desc { margin: 10px 0 30px; font-size: clamp(14px, 1.15vw, 17px); color: var(--ink-2); line-height: 2.05; max-width: 36em; }
.svc-sculpture { display: none; }

.st-list { margin-top: 28px; display: grid; gap: 40px; }
.st-item h3 { font-size: clamp(48px, 8vw, 138px); font-weight: 900; letter-spacing: -.08em; line-height: 1.22; }
.st-item p { margin-top: 14px; font-size: clamp(15px, 1.4vw, 22px); line-height: 2; max-width: 32em; }
.st-item .no { display: block; font-size: 12px; letter-spacing: .2em; color: var(--muted); font-weight: 800; margin-bottom: 8px; }
.st-more { margin-top: 40px; }

.rc-huge { font-size: clamp(110px, 23vw, 410px); font-weight: 900; line-height: .9; letter-spacing: -.11em; color: var(--ghost); white-space: nowrap; overflow: hidden; }
.rc-main h2 { font-size: clamp(48px, 7.8vw, 140px); font-weight: 900; line-height: 1.3; letter-spacing: -.085em; margin: 24px 0 28px; }
.rc-main p:not(.eyebrow) { font-size: clamp(15px, 1.4vw, 22px); line-height: 2; max-width: 30em; margin-bottom: 34px; }

/* 07 contact (flow in every mode) */
.contact-final { position: relative; overflow: hidden; padding: clamp(110px, 13vw, 230px) var(--pad) clamp(90px, 9vw, 160px); }
.contact-final h2 { font-size: clamp(46px, 7.8vw, 130px); font-weight: 900; line-height: 1.25; letter-spacing: -.08em; margin: 26px 0 40px; }
.contact-final .endrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; flex-wrap: wrap; }
.contact-final .endrow p { font-size: 16px; line-height: 2; color: var(--muted); }
.contact-final .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.contact-circle { position: absolute; right: -11vw; top: 8%; width: min(52vw, 720px); aspect-ratio: 1; border: 1px solid rgba(7, 84, 165, .16); border-radius: 50%; pointer-events: none; z-index: -1; }
.contact-circle::after { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(141, 64, 155, .18); border-radius: 50%; }
.contact-circle::before { content: ""; position: absolute; left: 4%; top: 50%; width: 92%; height: 1px; background: linear-gradient(90deg, transparent, rgba(7, 84, 165, .5), rgba(176, 53, 148, .45), transparent); transform: rotate(-24deg); }
.contact-mark { position: absolute; right: 9vw; top: 22%; width: clamp(150px, 20vw, 320px); opacity: .16; pointer-events: none; z-index: -1; }
@media (max-width: 800px) {
  .contact-final .endrow { display: block; }
  .contact-final .actions { margin-top: 30px; }
  .contact-circle { width: 110vw; top: 20%; right: -65vw; }
  .contact-mark { right: -6vw; top: 12%; width: 38vw; }
}

/* ==========================================================================
   TOP — motion layout (.m-on): every scene pinned, PC + smartphone
   ========================================================================== */
.m-on .pin { position: sticky; top: 0; height: calc(var(--vh) * 100); overflow: hidden; overflow: clip; padding: 0; isolation: isolate; }
.m-on [data-a] { will-change: transform, opacity; }
.m-on .pin-scene:not(.is-live) .pin a,
.m-on .pin-scene:not(.is-live) .pin button { pointer-events: none; }
.m-on .anc { display: block; position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.m-on .deco { display: block; position: absolute; inset: 0; pointer-events: none; z-index: -1; }

/* --- scene 01–03 : intro + keywords --- */
.m-on .sc-intro .pin { padding: 0; }
.halo {
  position: absolute; right: -10vw; top: calc(var(--vh) * 15); width: 60vw; max-width: calc(var(--vh) * 95); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(ellipse at 55% 55%, transparent 25%, rgba(31, 128, 204, .08) 46%, rgba(146, 66, 173, .06) 51%, transparent 58%);
}
.arc-a { position: absolute; left: -23vw; bottom: -45vw; width: 75vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(9, 83, 160, .14); }
.arc-b { position: absolute; right: -14vw; top: calc(var(--vh) * 8); width: 46vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(141, 64, 155, .13); }
.m-on .intro-logo { position: absolute; inset: 0; min-height: 0; padding-bottom: calc(var(--vh) * 6); }
.m-on .intro-word { width: clamp(240px, 34vw, 560px); }
.m-on .intro-word { clip-path: inset(-12% -2% -12% 25.6%); } /* the mark is drawn by .sym at the identical position */
.m-on .sym { display: block; position: absolute; z-index: 1; pointer-events: none;
  width: min(42vw, calc(var(--vh) * 82)); left: calc(70vw - min(42vw, calc(var(--vh) * 82)) / 2); top: calc(var(--vh) * 44 - min(42vw, calc(var(--vh) * 82)) * .339); }
.m-on .sym img { width: 100%; filter: drop-shadow(0 30px 60px rgba(52, 60, 92, .09)); }
.m-on .intro-copy { position: absolute; left: clamp(22px, 8.2vw, 138px); top: calc(var(--vh) * 23); margin: 0; z-index: 2; }
.m-on .copy { font-size: min(9vw, calc(var(--vh) * 13.5)); margin: calc(var(--vh) * 2.2) 0 calc(var(--vh) * 3); }
.m-on .intro-side { display: block; position: absolute; right: clamp(20px, 4.6vw, 82px); top: calc(var(--vh) * 22); writing-mode: vertical-rl; font-size: 10px; letter-spacing: .35em; color: var(--soft); }
.m-on .scroll-hint {
  display: flex; position: absolute; left: 50%; bottom: calc(var(--vh) * 5); transform: translateX(-50%);
  flex-direction: column; align-items: center; gap: 12px; font-size: 9px; font-weight: 800; letter-spacing: .25em; white-space: nowrap;
}
.m-on .scroll-hint::after { content: ""; width: 1px; height: 52px; background: linear-gradient(var(--ink), transparent); animation: hint 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.m-on .kw { position: absolute; inset: 0; margin: 0; }
.m-on .kw-eye { position: absolute; left: var(--pad); top: calc(var(--vh) * 19); }
.m-on .kw-list { position: absolute; inset: 0; margin: 0; display: block; }
.m-on .kw-list li { position: absolute; inset: 0; }
.m-on .kw-word { position: absolute; left: 8.5vw; top: calc(var(--vh) * 30); font-size: min(17vw, calc(var(--vh) * 30)); }
.m-on .kw-detail { position: absolute; left: 9vw; bottom: calc(var(--vh) * 16); margin: 0; }
.m-on .kw-stamp { display: block; position: absolute; right: 7vw; bottom: calc(var(--vh) * 12); font-size: 11px; letter-spacing: .2em; color: var(--soft); line-height: 2.2; }
.anc .a-mini { position: absolute; right: 12%; top: calc(var(--vh) * 15); width: clamp(80px, 11vw, 185px); aspect-ratio: 1182 / 801; }

/* --- scene 04 vision --- */
.m-on .sc-vision .pin { display: flex; align-items: center; padding: var(--head) var(--pad) calc(var(--vh) * 6); }
.m-on .orbit { display: block; position: absolute; right: -8vw; top: calc(var(--vh) * 10); width: min(59vw, 850px); aspect-ratio: 1; border: 1px solid rgba(13, 107, 185, .16); border-radius: 50%; z-index: -1; }
.orbit::before { content: ""; position: absolute; inset: 13%; border: 1px solid rgba(149, 63, 157, .15); border-radius: 50%; }
.orbit::after { content: ""; position: absolute; left: 6%; top: 50%; width: 88%; height: 1px; background: linear-gradient(90deg, transparent, #0c63b0, #a04d9b, transparent); transform: rotate(-30deg); }
.orbit .dot { position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 6px rgba(18, 178, 187, .14); }
.m-on .vision-copy { position: relative; z-index: 2; width: 100%; }
.m-on .vision-copy h2 { font-size: min(7.6vw, calc(var(--vh) * 12)); margin: calc(var(--vh) * 3) 0; }
.m-on .vision-fact { margin-top: calc(var(--vh) * 3); }
.m-on .vision-link { margin-top: calc(var(--vh) * 3.4); }
.m-on .vision-caption { position: absolute; right: 7vw; bottom: calc(var(--vh) * 12); margin: 0; }

/* --- scene 05 services (horizontal) --- */
.m-on .sc-services .pin { padding: 0; }
.m-on .svc-label { position: absolute; top: calc(var(--vh) * 16); left: var(--pad); z-index: 3; }
.m-on .svc-track { position: absolute; left: 0; top: calc(var(--vh) * 21); bottom: calc(var(--vh) * 11); margin: 0; border: 0; display: flex; width: max-content; }
.m-on .svc-panel {
  width: 100vw; flex: 0 0 100vw; height: 100%; padding: 0 9.6vw 0 9vw; border: 0; border-right: 1px solid rgba(15, 40, 90, .08);
  display: flex; align-items: center; justify-content: space-between; gap: 5vw; overflow: visible;
}
.m-on .svc-panel:last-child { border-right: 0; }
.m-on .svc-index { left: 9vw; right: auto; top: 2%; font-size: min(17vw, calc(var(--vh) * 34)); z-index: 0; }
.m-on .svc-copy { position: relative; z-index: 2; width: 55%; max-width: 850px; }
.m-on .svc-copy h3 { font-size: min(5.8vw, calc(var(--vh) * 10.5)); margin: calc(var(--vh) * 2.6) 0 calc(var(--vh) * 2.2); }
.m-on .svc-copy .desc { margin-bottom: calc(var(--vh) * 3.4); }
.m-on .svc-sculpture { display: grid; place-items: center; position: relative; flex: none; width: min(30vw, 440px, calc(var(--vh) * 52)); aspect-ratio: 1; }
.svc-sculpture .letter {
  font-weight: 900; font-size: min(20vw, calc(var(--vh) * 40)); line-height: 1; letter-spacing: -.15em; padding-right: .12em;
  background: linear-gradient(150deg, var(--blue), var(--violet) 65%, var(--aqua)); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; opacity: .9;
}
.svc-sculpture .ring { position: absolute; border-radius: 50%; }
.svc-sculpture .r1 { inset: 4%; border: 1px solid rgba(17, 69, 134, .16); transform: rotate(-30deg) scaleX(1.13); }
.svc-sculpture .r2 { inset: 15% -6%; border: 1px solid rgba(162, 63, 143, .26); transform: rotate(29deg) scaleY(.52); }
.m-on .svc-bottom {
  display: flex; position: absolute; bottom: calc(var(--vh) * 5 + 44px); left: 9vw; right: 9vw; border-top: 1px solid var(--line); padding-top: 16px;
  justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .18em; color: var(--soft); font-weight: 800; gap: 16px;
}
.svc-progress { display: flex; gap: 10px; }
.svc-progress span { display: block; width: 33px; height: 2px; background: #d3dbe6; transition: background .3s; }
.svc-progress span.on { background: var(--blue); }

/* --- scene 06a approach steps --- */
.m-on .sc-steps .pin { padding: 0; }
.m-on .st-eye { position: absolute; left: var(--pad); top: calc(var(--vh) * 19); z-index: 2; }
.m-on .st-bigs { display: block; position: absolute; inset: 0; pointer-events: none; }
.st-bigs span { position: absolute; right: 2vw; top: calc(var(--vh) * 11); font-size: min(35vw, calc(var(--vh) * 72)); line-height: 1; font-weight: 900; letter-spacing: -.15em; color: var(--ghost); }
.m-on .st-list { position: absolute; inset: 0; margin: 0; display: block; }
.m-on .st-item { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--vh) * 31); }
.m-on .st-item h3 { font-size: min(8vw, calc(var(--vh) * 13.5)); }
.m-on .st-progress { display: block; position: absolute; bottom: calc(var(--vh) * 9); left: var(--pad); right: var(--pad); height: 1px; background: var(--line); }
.st-progress i { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--blue); transform-origin: left; }
.st-progress span { position: absolute; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #d2d9e5; transition: background .3s, box-shadow .3s; }
.st-progress span.on { background: var(--blue); box-shadow: 0 0 0 5px rgba(186, 209, 237, .5); }
.st-progress span:nth-of-type(1) { left: 0; } .st-progress span:nth-of-type(2) { left: calc(33.33% - 4px); }
.st-progress span:nth-of-type(3) { left: calc(66.66% - 4px); } .st-progress span:nth-of-type(4) { right: 0; }
.m-on .st-more { position: absolute; right: var(--pad); bottom: calc(var(--vh) * 13); margin: 0; z-index: 3; }

/* --- scene 06b recruit --- */
.m-on .sc-recruit .pin { padding: 0; }
.m-on .rc-rule { display: block; position: absolute; top: calc(var(--vh) * 17); right: 9%; width: 20vw; height: 1px; background: linear-gradient(90deg, var(--blue), var(--violet), var(--aqua)); transform-origin: right; }
.m-on .rc-huge { position: absolute; left: 0; bottom: calc(var(--vh) * 7); font-size: min(23vw, calc(var(--vh) * 42)); overflow: visible; z-index: -1; }
.m-on .rc-main { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--vh) * 20); }
.m-on .rc-main h2 { font-size: min(7.6vw, calc(var(--vh) * 12.5)); margin: calc(var(--vh) * 2.6) 0 calc(var(--vh) * 3); }

/* ---------- motion layout: smartphone & tablet portrait ---------- */
@media (max-width: 800px) {
  .halo { width: 100vw; right: -45vw; top: calc(var(--vh) * 24); }
  .arc-b { width: 90vw; right: -50vw; }
  .m-on .intro-word { width: 74vw; }
  .m-on .sym { width: 86vw; left: 7vw; top: calc(var(--vh) * 27 - 86vw * .339); }
  .m-on .intro-copy { left: var(--pad); right: var(--pad); top: calc(var(--vh) * 49); }
  .m-on .copy { font-size: min(14.4vw, calc(var(--vh) * 8)); margin: calc(var(--vh) * 1.6) 0 calc(var(--vh) * 2); }
  .m-on .copy-sub { font-size: 15px; line-height: 2; }
  .m-on .intro-side { display: none; }
  .m-on .kw-eye { top: calc(var(--vh) * 20); }
  .m-on .kw-word { left: 15px; top: calc(var(--vh) * 31); font-size: min(30vw, calc(var(--vh) * 19)); }
  .m-on .kw-detail { left: var(--pad); right: var(--pad); bottom: calc(var(--vh) * 22); font-size: 19px; }
  .m-on .kw-stamp { right: 20px; bottom: calc(var(--vh) * 9); font-size: 8px; }
  .anc .a-mini { right: 8%; top: calc(var(--vh) * 15); width: 24vw; }

  .m-on .sc-vision .pin { padding: var(--head) var(--pad) calc(var(--vh) * 5); }
  .m-on .orbit { right: -45vw; top: calc(var(--vh) * 21); width: 110vw; }
  .m-on .vision-copy h2 { font-size: min(11.2vw, calc(var(--vh) * 7.2)); line-height: 1.34; }
  .m-on .vision-copy .lead { font-size: 15px; line-height: 2; }
  .m-on .vision-fact { font-size: 13px; grid-template-columns: 1fr; }
  .m-on .vision-caption { right: var(--pad); bottom: calc(var(--vh) * 7); font-size: 9px; }

  .m-on .svc-label { top: calc(var(--vh) * 14); }
  .m-on .svc-track { top: calc(var(--vh) * 19); bottom: calc(var(--vh) * 15); }
  .m-on .svc-panel { flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 var(--pad); gap: 0; }
  .m-on .svc-index { left: var(--pad); top: 0; font-size: min(52vw, calc(var(--vh) * 27)); }
  .m-on .svc-copy { width: 100%; margin-top: calc(var(--vh) * 6); }
  .m-on .svc-copy h3 { font-size: min(11.2vw, calc(var(--vh) * 6.6)); margin: calc(var(--vh) * 1.8) 0 calc(var(--vh) * 1.6); }
  .m-on .svc-copy .lead { font-size: 15px; }
  .m-on .svc-copy .desc { font-size: 15px; line-height: 1.9; margin-bottom: calc(var(--vh) * 2.4); }
  .m-on .svc-sculpture { position: absolute; right: -6vw; bottom: -4%; width: 56vw; opacity: .2; z-index: 0; }
  .m-on .svc-sculpture .letter { font-size: 44vw; }
  .m-on .svc-bottom { left: var(--pad); right: var(--pad); bottom: calc(var(--vh) * 9); padding-top: 12px; font-size: 9px; }
  .m-on .svc-bottom .hint { display: none; }

  .m-on .st-eye { top: calc(var(--vh) * 18); }
  .st-bigs span { right: -2vw; top: calc(var(--vh) * 14); font-size: 76vw; }
  .m-on .st-item { top: calc(var(--vh) * 36); }
  .m-on .st-item h3 { font-size: min(15vw, calc(var(--vh) * 9)); }
  .m-on .st-item p { font-size: 15px; line-height: 1.9; }
  .m-on .st-progress { bottom: calc(var(--vh) * 15); }
  .m-on .st-more { left: var(--pad); right: auto; bottom: calc(var(--vh) * 5); }

  .m-on .rc-rule { right: 22px; top: calc(var(--vh) * 22); width: 27vw; }
  .m-on .rc-huge { font-size: 45vw; bottom: calc(var(--vh) * 16); }
  .m-on .rc-main { top: calc(var(--vh) * 24); }
  .m-on .rc-main h2 { font-size: min(12vw, calc(var(--vh) * 7.4)); }
  .m-on .rc-main p:not(.eyebrow) { font-size: 15px; }
}
/* short landscape screens (PC windows / tablets) */
@media (max-height: 650px) and (min-width: 801px) {
  .m-on .svc-copy .desc { display: none; }
  .m-on .vision-fact { display: none; }
}

/* ==========================================================================
   Sub pages
   ========================================================================== */
.inner-page { padding-top: var(--head); }
.inner-hero { position: relative; overflow: hidden; min-height: min(78vh, 860px); padding: clamp(80px, 10vw, 160px) var(--pad) clamp(90px, 10vw, 150px); border-bottom: 1px solid var(--line); }
.inner-hero h1 { font-size: clamp(50px, 10vw, 165px); font-weight: 900; letter-spacing: -.085em; line-height: 1.18; margin: 26px 0 30px; position: relative; z-index: 2; }
.inner-hero h1 span { display: block; }
.inner-hero .lead { max-width: 36em; font-size: clamp(16px, 1.5vw, 23px); line-height: 2; position: relative; z-index: 2; }
.hero-mark { position: absolute; right: 6vw; top: 20%; width: clamp(160px, 24vw, 380px); opacity: .92; pointer-events: none; filter: drop-shadow(0 30px 50px rgba(52, 60, 92, .08)); }
.hero-ring { position: absolute; right: -24vw; top: -8vw; width: 54vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(7, 84, 165, .16); pointer-events: none; }
.hero-ring::after { content: ""; position: absolute; inset: 16%; border: 1px solid rgba(141, 64, 155, .14); border-radius: 50%; }
.hero-ghost { position: absolute; left: 0; bottom: -.12em; font-size: clamp(110px, 21vw, 360px); font-weight: 900; letter-spacing: -.11em; line-height: 1; color: var(--ghost); white-space: nowrap; pointer-events: none; z-index: 0; }
.hero-letter {
  position: absolute; right: 9vw; top: 50%; margin-top: -.55em; font-size: clamp(150px, 24vw, 380px); font-weight: 900; line-height: 1; letter-spacing: -.15em;
  background: linear-gradient(150deg, var(--blue), var(--violet) 65%, var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; opacity: .9; pointer-events: none;
}
.hero-orbit { position: absolute; right: 3vw; top: 50%; width: clamp(240px, 36vw, 560px); aspect-ratio: 1; margin-top: calc(clamp(240px, 36vw, 560px) / -2); pointer-events: none; }
.hero-orbit i { position: absolute; border-radius: 50%; }
.hero-orbit i:first-child { inset: 4%; border: 1px solid rgba(17, 69, 134, .18); transform: rotate(-30deg) scaleX(1.13); }
.hero-orbit i:last-child { inset: 15% -6%; border: 1px solid rgba(162, 63, 143, .28); transform: rotate(29deg) scaleY(.52); }
.breadcrumb { padding: 22px var(--pad); font-size: 11px; letter-spacing: .1em; color: var(--muted); border-bottom: 1px solid var(--line); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 10px; }
.breadcrumb li + li::before { content: "／"; margin-right: 10px; color: var(--line); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 700; }

.inner-block { position: relative; padding: clamp(90px, 11vw, 190px) var(--pad); border-bottom: 1px solid var(--line); overflow: hidden; }
.inner-block h2 { font-size: clamp(38px, 6vw, 94px); font-weight: 900; line-height: 1.25; letter-spacing: -.07em; margin: 18px 0 36px; }
.inner-block .body { font-size: clamp(15px, 1.25vw, 19px); line-height: 2.15; max-width: 42em; }
.inner-block .body + .body { margin-top: 1.2em; }
.inner-block .statement { font-size: clamp(28px, 4.4vw, 70px); font-weight: 900; letter-spacing: -.06em; line-height: 1.35; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.split > :first-child h2 { margin-bottom: 0; font-size: clamp(34px, 4.6vw, 76px); }

.big-list { border-top: 1px solid var(--line); margin-top: 20px; }
.big-list li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--line); }
.big-list .n { font-size: 12px; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.big-list strong { font-size: clamp(22px, 3vw, 44px); font-weight: 900; letter-spacing: -.045em; line-height: 1.4; }
.big-list .s { font-size: 15px; color: var(--muted); line-height: 1.8; max-width: 26em; }
@media (max-width: 800px) { .big-list li { grid-template-columns: 44px minmax(0, 1fr); } .big-list .s { grid-column: 2; } }

.svc-rows { border-top: 1px solid var(--line); }
.svc-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px; gap: 30px; align-items: center; padding: clamp(40px, 6vw, 80px) 0; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.svc-row .num { position: absolute; right: 9%; top: 50%; margin-top: -.5em; font-size: clamp(120px, 17vw, 280px); font-weight: 900; line-height: 1; letter-spacing: -.12em; color: var(--ghost); z-index: -1; transition: color .4s; }
.svc-row:hover .num { color: #dde3ec; }
.svc-row .tag { font-size: 11px; letter-spacing: .2em; color: var(--blue); font-weight: 800; }
.svc-row h2, .svc-row h3 { font-size: clamp(30px, 4.6vw, 74px); font-weight: 900; letter-spacing: -.07em; line-height: 1.2; margin: 14px 0 0; }
.svc-row p { font-size: clamp(15px, 1.15vw, 17px); line-height: 2; color: var(--ink-2); }
.svc-row .go { width: 64px; height: 64px; border-radius: 50%; border: 1px solid #6d778a; display: grid; place-items: center; font-size: 20px; transition: all .25s; }
.svc-row:hover .go { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 800px) {
  .svc-row { grid-template-columns: minmax(0, 1fr) 52px; gap: 14px 16px; }
  .svc-row p { grid-column: 1 / 2; }
  .svc-row .go { width: 52px; height: 52px; grid-column: 2; grid-row: 1 / 3; }
}

.steps-static { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.steps-static li { padding: 34px 26px 40px 0; border-right: 1px solid var(--line); }
.steps-static li + li { padding-left: 26px; }
.steps-static li:last-child { border-right: 0; }
.steps-static .n { font-size: clamp(54px, 6vw, 96px); font-weight: 900; letter-spacing: -.1em; color: var(--ghost); line-height: 1; }
.steps-static strong { display: block; margin-top: 18px; font-size: clamp(20px, 2vw, 28px); font-weight: 900; letter-spacing: -.04em; }
.steps-static p { margin-top: 10px; font-size: 15px; color: var(--muted); line-height: 1.9; }
@media (max-width: 1023px) { .steps-static { grid-template-columns: 1fr 1fr; } .steps-static li:nth-child(2) { border-right: 0; } .steps-static li:nth-child(3) { padding-left: 0; } .steps-static li { border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .steps-static { grid-template-columns: 1fr; } .steps-static li, .steps-static li + li { padding: 28px 0; border-right: 0; } }

.dl-rows { border-top: 1px solid var(--line); }
.dl-rows > div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.dl-rows dt { font-size: 12px; letter-spacing: .14em; color: var(--muted); font-weight: 800; padding-top: 6px; }
.dl-rows dd { font-size: clamp(16px, 1.5vw, 22px); font-weight: 700; line-height: 1.8; }
@media (max-width: 560px) { .dl-rows > div { grid-template-columns: 1fr; gap: 4px; } }

.ph { position: relative; aspect-ratio: 16 / 10; border-radius: 28px; }
.annotate .ph { outline: 1px dashed #b9c1cf; background: repeating-linear-gradient(135deg, #f1f3f7 0 12px, transparent 12px 24px); }
.annotate .ph::after { content: attr(data-ph); position: absolute; left: 16px; right: 16px; bottom: 14px; font-size: 12px; color: #687282; }

.tel-big { display: inline-flex; align-items: baseline; gap: 18px; font-size: clamp(40px, 6.6vw, 104px); font-weight: 900; letter-spacing: -.04em; line-height: 1.2; }
.tel-big small { font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.tel-big:hover { color: var(--blue); }
.note { font-size: 12px; line-height: 1.9; color: var(--muted); margin-top: 18px; }

.demo-form { border-top: 1px solid var(--line); padding-top: 10px; }
.demo-badge { display: inline-flex; gap: 10px; align-items: flex-start; margin: 18px 0 8px; padding: 10px 16px; border-radius: 14px; background: #fff7e8; color: #7a4e00; border: 1px solid #f0dcb0; font-size: 13px; font-weight: 700; line-height: 1.7; }
.demo-form .field { margin-top: 24px; }
.demo-form label { display: block; font-size: 12px; letter-spacing: .1em; font-weight: 800; margin-bottom: 8px; }
.demo-form input, .demo-form select, .demo-form textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid #aab2c0; border-radius: 0; padding: 12px 2px;
}
.demo-form textarea { min-height: 120px; resize: vertical; }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { outline: none; border-bottom-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
.demo-form button[disabled] { opacity: .42; cursor: not-allowed; }
.demo-form button[disabled]:hover { background: var(--ink); transform: none; }

.svc-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.svc-nav a { position: relative; padding: 30px 22px 34px 0; border-right: 1px solid var(--line); font-size: clamp(16px, 1.6vw, 22px); font-weight: 900; letter-spacing: -.03em; line-height: 1.4; transition: color .25s; }
.svc-nav a + a { padding-left: 22px; }
.svc-nav a:last-child { border-right: 0; }
.svc-nav a small { display: block; font-size: 11px; letter-spacing: .16em; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.svc-nav a:hover, .svc-nav a[aria-current="page"] { color: var(--blue); }
.svc-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--grad); }
@media (max-width: 800px) { .svc-nav { grid-template-columns: 1fr 1fr; } .svc-nav a:nth-child(2) { border-right: 0; } .svc-nav a:nth-child(3) { padding-left: 0; } .svc-nav a { border-bottom: 1px solid var(--line); } }

.inner-cta { position: relative; overflow: hidden; padding: clamp(110px, 12vw, 200px) var(--pad); }
.inner-cta h2 { font-size: clamp(40px, 6.4vw, 110px); font-weight: 900; letter-spacing: -.075em; line-height: 1.25; margin: 22px 0 40px; }
.inner-cta .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

@media (max-width: 800px) {
  .inner-hero { min-height: 0; padding: 72px var(--pad) 110px; }
  .inner-hero h1 { overflow-wrap: anywhere; }
  .hero-mark { width: 40vw; right: -8vw; top: auto; bottom: 8%; opacity: .14; }
  .hero-ring { width: 100vw; right: -60vw; top: -20vw; }
  .hero-letter { right: -2vw; top: auto; bottom: 4%; margin-top: 0; font-size: 46vw; opacity: .16; }
  .hero-orbit { right: -18vw; top: auto; bottom: -6%; width: 68vw; margin-top: 0; opacity: .7; }
  .split { grid-template-columns: 1fr; }
  .inner-block { padding: 80px var(--pad); }
}

/* ==========================================================================
   Footer (all pages)
   ========================================================================== */
.site-footer { padding: 0 var(--pad); }
.site-footer .f-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 48px; padding: 56px 0 44px; border-top: 1px solid var(--line); }
.site-footer .f-brand img { width: 176px; }
.site-footer .f-brand .tag { margin-top: 18px; font-size: 13px; font-weight: 800; letter-spacing: .2em; }
.site-footer .f-brand address { margin-top: 16px; font-style: normal; font-size: 12px; color: var(--muted); line-height: 2; }
.site-footer .f-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.site-footer .f-cols p { font-size: 10px; letter-spacing: .24em; color: var(--muted); font-weight: 800; margin-bottom: 10px; }
.site-footer .f-cols a { display: block; font-size: 13px; font-weight: 700; line-height: 2.5; }
.site-footer .f-cols a:hover { color: var(--blue); }
.site-footer .f-bottom { display: flex; justify-content: space-between; gap: 16px; padding: 0 0 34px; font-size: 10px; letter-spacing: .08em; color: var(--muted); }
.site-footer .f-bottom a:hover { color: var(--ink); }
@media (max-width: 900px) { .site-footer .f-top { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .site-footer .f-cols { grid-template-columns: 1fr 1fr; } .site-footer .f-bottom { flex-direction: column; padding-bottom: 60px; } }

/* ==========================================================================
   Reduced motion: everything readable, nothing travels
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ready-state: hide pinned stages until the engine has measured them (no flash of overlapped layers) */
.m-on:not(.m-ready) .pin { opacity: 0; }
.m-on:not(.m-ready) [data-m] { visibility: hidden; }
.m-ready .sc-intro .pin { animation: pinIn 1.2s var(--ease) both; }
@keyframes pinIn { from { opacity: 0; } to { opacity: 1; } }
.site-header.scrolled { background: rgba(247, 248, 250, .93); box-shadow: 0 2px 16px rgba(44, 51, 66, .04); }

/* ========================================================================
   v0.3: first-screen business communication & replaceable, real photo slots
   ======================================================================== */
.intro-business { max-width: 560px; padding: 22px 0; border-top: 1px solid #d7dce6; }
.intro-business > p:first-child { font-size: 15px; font-weight: 900; letter-spacing: .025em; }
.intro-business__list { margin-top: 12px; font-size: 13px; font-weight: 600; line-height: 1.9; color: var(--ink-2); }
.intro-business__list span { margin: 0 5px; color: #7c6ca3; }
.intro-business > a { display: inline-flex; align-items: center; gap: 30px; margin-top: 16px; border: 1px solid #9ca8bb; border-radius: 40px; padding: 11px 19px; font-size: 13px; font-weight: 800; background: #ffffffbd; }
.intro-business > a:hover, .intro-business > a:focus-visible { background: var(--ink); color: #fff; }
.m-on .intro-business { position: absolute; z-index: 4; left: max(var(--pad), calc((100vw - 1280px) / 2)); bottom: calc(var(--vh) * 7); border-top: 0; max-width: min(66vw, 560px); }
@media (max-width: 800px) {
  .intro-business { max-width: none; }
  .m-on .intro-business { left: var(--pad); right: var(--pad); max-width: none; bottom: calc(var(--vh) * 11); }
  .intro-business > p:first-child { font-size: 14px; }
  .intro-business__list { font-size: 12px; }
  .intro-business > a { font-size: 12px; padding: 10px 18px; margin-top: 11px; }
}
.photo-feature { padding: clamp(80px, 9vw, 145px) var(--pad); border-top: 1px solid var(--line); }
.photo-feature__intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.photo-feature__intro h2 { margin-top: 14px; font-size: clamp(38px, 5.3vw, 84px); font-weight: 900; line-height: 1.26; letter-spacing: -.075em; }
.photo-feature__intro > p { font-size: 15px; line-height: 1.9; color: var(--muted); }
.photo-feature__more { margin-top: 22px; }
.photo-slot { min-width: 0; }
.photo-slot__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #eaedf4; border: 1px solid #d6dce8; border-radius: clamp(16px, 2.6vw, 26px); }
.photo-slot--wide .photo-slot__media { aspect-ratio: 21 / 9; }
.photo-slot--portrait .photo-slot__media { aspect-ratio: 4 / 5; max-width: 460px; }
.photo-slot__media img { width: 100%; height: 100%; object-fit: cover; }
.photo-slot__pending { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 15px;
 background: radial-gradient(circle at 75% 20%, #f1ecf9 0, transparent 43%), linear-gradient(150deg, #f2f4f9, #e6eaf2); color: #5f6b80; padding: 22px; }
.photo-slot__pending::before, .photo-slot__pending::after { content: ''; position: absolute; width: 120%; height: 1px; background: rgba(124,136,159,.15); left: -10%; top: 50%; transform: rotate(20deg); }
.photo-slot__pending::after { transform: rotate(-20deg); }
.photo-slot__cross { width: 45px; height: 45px; border: 1px solid #aeb9cb; border-radius: 50%; background: radial-gradient(circle, #b4c1d4 2px, transparent 3px); z-index: 1; }
.photo-slot__pending-label { position: relative; z-index: 1; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.photo-slot__pending-label b { margin-left: 10px; color: #1657a6; }
.photo-slot__pending-type { position: relative; z-index: 1; font-size: clamp(14px, 1.7vw, 21px); font-weight: 900; }
.photo-slot figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-top: 12px; font-size: 12px; line-height: 1.6; }
.photo-slot figcaption > span { font-weight: 800; }
.photo-slot figcaption > small { color: var(--muted); font-size: 11px; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
@media (max-width: 800px) {
 .photo-feature { padding: 70px var(--pad); }
 .photo-feature__intro { display: block; }
 .photo-feature__intro > p { margin-top: 22px; }
 .photo-slot--wide .photo-slot__media { aspect-ratio: 16 / 10; }
 .photo-slot__pending { gap: 10px; }
 .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .photo-grid .photo-slot__pending-label { font-size: 9px; letter-spacing: .07em; }
 .photo-grid .photo-slot__pending-type { font-size: 12px; }
 .photo-grid .photo-slot__cross { width: 28px; height: 28px; }
}
@media (max-width: 360px) {
  .photo-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   v0.4 photo stories — automatic cinematic fade + tactile press-to-reveal
   All placeholders are CSS only; user photography replaces them by filename.
   ======================================================================== */
.photo-story {
  --story-ink: #111829;
  padding: clamp(72px, 8vw, 132px) var(--pad) clamp(66px, 7vw, 108px);
  border-top: 1px solid var(--line); overflow: hidden;
}
.photo-story--sub { padding-top: clamp(56px, 6vw, 90px); }
.photo-story__heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.photo-story__heading h2 { font-size: clamp(38px, 6vw, 92px); letter-spacing: -.075em; line-height: 1.22; font-weight: 900; margin-top: 16px; }
.photo-story--sub .photo-story__heading h2 { font-size: clamp(36px, 4.2vw, 62px); letter-spacing: -.06em; }
.photo-story__heading > p { font-size: 14px; color: var(--ink-2); max-width: 310px; line-height: 1.9; }
.photo-story__note { color: var(--muted); font-size: 12px; }
.photo-story__stage {
  position: relative; isolation: isolate; aspect-ratio: 2.03 / 1;
  overflow: hidden; border-radius: clamp(12px, 2vw, 28px); background: #e7ecf4;
  box-shadow: 0 24px 65px rgba(24, 35, 60, .075);
}
.photo-story--sub .photo-story__stage { aspect-ratio: 2.35 / 1; }
.story-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 0; transition: opacity 1.05s ease, visibility 0s 1.05s; }
.story-slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.05s ease, visibility 0s 0s; }
.story-slide__visual, .story-slide__visual img { position: absolute; width: 100%; height: 100%; inset: 0; }
.story-slide__visual img { display: block; object-fit: cover; }
.story-slide.is-active .story-slide__visual { animation: storySlowZoom 7.1s linear both; }
@keyframes storySlowZoom { from {transform: scale(1.015)} to {transform: scale(1.075)} }
.photo-story__veil { position:absolute; inset:0; pointer-events:none; z-index:2;
  background: linear-gradient(0deg, rgba(7,14,30,.72) 0%, rgba(7,14,30,.08) 33%, transparent 64%);
}
.story-pending {
  position: absolute; inset: 0; display: flex; align-items: flex-start; flex-direction: column; justify-content: center;
  padding: clamp(28px, 8vw, 120px); background:
     radial-gradient(circle at 75% 18%, #e7d7f1 0, transparent 34%),
     radial-gradient(circle at 12% 88%, #b6dbea 0, transparent 42%),
     linear-gradient(110deg, #e9eef7, #dee6f2 55%, #e9e2f1 100%);
  color: #2a3a5a;
}
.story-slide:nth-child(3n + 2) .story-pending { background: radial-gradient(circle at 12% 10%,#badbe9,transparent 35%),linear-gradient(115deg,#dfe9f0,#efe3ee 80%); }
.story-slide:nth-child(3n + 3) .story-pending { background: radial-gradient(circle at 88% 80%,#cfb6e2,transparent 40%),linear-gradient(145deg,#e6e6f3,#d7e9ef 90%); }
.story-pending__grid { position: absolute; inset: 0; opacity: .38; pointer-events: none; background-image: linear-gradient(#fff9 1px,transparent 1px),linear-gradient(90deg,#fff9 1px,transparent 1px);background-size: 82px 82px; }
.story-pending__mark { position: absolute; font-size: clamp(180px, 32vw, 500px); right: -3%; top: 50%; transform: translateY(-50%) rotate(-22deg); color: rgba(93,91,168,.12); line-height: 1; }
.story-pending__code { position:relative; font-size:clamp(10px,1.1vw,13px); letter-spacing: .24em; font-weight:800; }
.story-pending strong { position:relative; margin-top: 10px; font-size: clamp(22px, 3.2vw, 45px); font-weight:900; letter-spacing:-.04em; }
.story-slide__caption { position:absolute; left: clamp(28px, 5.5vw, 92px); bottom: clamp(26px, 4vw, 58px); color:#fff; z-index: 3; display:flex; flex-direction:column; gap:5px; max-width:65%; }
.story-slide__caption small {font-weight:800; letter-spacing:.22em; font-size:10px; }
.story-slide__caption strong {font-weight:900; letter-spacing:-.04em; font-size:clamp(24px, 4vw, 60px); line-height:1.22; }
.story-reveal {
  position: absolute; right: clamp(18px, 5.4vw, 90px); bottom: clamp(19px, 4.2vw, 60px); z-index: 5;
  border: 0; padding: 0 0 7px; background: transparent; cursor: pointer; border-radius: 999px;
  color: #fff; filter: drop-shadow(0 9px 0 rgba(0,0,0,.26));
}
.story-reveal__face { display:flex; justify-content:center; align-items:center; gap:17px; border:1px solid rgba(255,255,255,.54); background:rgba(20,26,50,.78); backdrop-filter: blur(10px); border-radius:999px;
   padding:15px 24px 15px 20px; min-height:64px; text-align:left; transition: transform .16s cubic-bezier(.4,0,.2,1), background .2s; }
.story-reveal__arrow { display:grid;place-items:center;width:38px;height:38px; background:#fff;color:var(--blue); border-radius:50%; font-size:23px; font-weight:500; }
.story-reveal__face > span:last-child {font-weight:900;font-size:14px;line-height:1.25;white-space:nowrap;}
.story-reveal__face small {display:block; opacity:.75;font-size:9px;letter-spacing:.15em;margin-top:4px;}
.story-reveal:hover .story-reveal__face { background:#12192e; transform: translateY(-2px); }
.story-reveal:active .story-reveal__face, .story-reveal.is-pressing .story-reveal__face { transform:translateY(7px) scale(.955); background:#0754a5; }
.photo-story__footer { display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:24px; }
.story-status {display:flex;align-items:center;gap:15px;font-size:12px;font-weight:900;letter-spacing:.12em;white-space:nowrap;}
.story-status__bar { height:2px;width:clamp(70px,10vw,180px);background:#cbd2dd; overflow:hidden; }
.story-status__bar i {display:block;height:100%;background:var(--blue);width:100%;transform:scaleX(0);transform-origin:left;}
.story-actions {display:flex;align-items:center;gap:14px;}
.story-dots {display:flex;align-items:center;gap:10px;}
.story-dot { cursor:pointer; display:grid;place-items:center;padding:8px;border:0;background:transparent;min-width:24px;min-height:32px; }
.story-dot span { display:block; width:8px;height:8px;background:#c7ccd6;border-radius:50%;transition:transform .2s,background .2s; }
.story-dot.is-active span { background:#0956a6;transform:scale(1.55); }
.story-nav { border:1px solid #aab4c2; background:transparent; width:42px;height:42px;display:grid;place-items:center;border-radius:50%;cursor:pointer;transition:background .2s; }
.story-nav:hover {background:#e1e7f0;}
.story-pause { border:0; background:transparent;font-size:11px;color:var(--muted);font-weight:800;padding:12px;cursor:pointer; }
.story-pause span {margin-left:5px;color:var(--blue);font-size:14px;}
.story-pause:hover {color:var(--ink);}
html.story-modal-open {overflow:hidden;}
.story-modal {position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:clamp(14px,4vw,52px); opacity:0;visibility:hidden;transition:opacity .32s,visibility 0s .32s; background:rgba(10,15,29,.94);backdrop-filter:blur(22px);}
.story-modal.is-open {opacity:1;visibility:visible;transition:opacity .32s,visibility 0s;}
.story-modal__inner {width:min(100%,1500px);max-height:100%;display:flex;flex-direction:column;gap:14px;min-height:0;}
.story-modal__top {display:flex;align-items:center;justify-content:space-between;color:#fff;gap:18px;}
.story-modal__top span {font-size:12px;letter-spacing:.22em;font-weight:800;}
.story-modal__close {color:#fff;border:1px solid #aab2c6;background:#ffffff14;border-radius:999px;padding:10px 18px;min-height:44px;cursor:pointer;}
.story-modal__stage { position:relative;min-height:0;flex:1;max-height:75vh;aspect-ratio:16/9;border-radius:16px;overflow:hidden;transform:translateY(36px) scale(.91);opacity:.6;transition:transform .55s cubic-bezier(.17,.88,.25,1),opacity .55s;background:#e8eef6;}
.story-modal.is-open .story-modal__stage {transform:translateY(0) scale(1);opacity:1;}
.story-modal__stage img,.story-modal__stage .story-pending {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.story-modal__stage .story-pending strong {font-size:clamp(22px,3vw,40px)}
.story-modal__bottom {color:#fff;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:15px;}
.story-modal__bottom p {font-weight:800;}
.story-modal__nav {display:flex;gap:10px;}
.story-modal__nav button {background:transparent;color:#fff;border:1px solid #9ba6b9;border-radius:100px;padding:9px 16px;min-height:44px;cursor:pointer;}
@media(max-width:800px) {
  .photo-story {padding:64px var(--pad) 72px;}
  .photo-story__heading {display:block;margin-bottom:22px;}
  .photo-story__heading > p {margin-top:13px;max-width:none;}
  .photo-story__stage, .photo-story--sub .photo-story__stage { aspect-ratio:4 / 5; }
  .story-pending {padding:28px;}
  .story-pending strong {font-size:clamp(20px,6vw,32px);max-width:80%;}
  .story-pending__mark {font-size:80vw;}
  .story-slide__caption {left:20px;bottom:130px;max-width:86%;}
  .story-slide__caption strong {font-size:clamp(26px,8vw,43px);}
  .story-reveal {right:16px;bottom:21px;}
  .story-reveal__face {min-height:55px;padding:10px 17px 10px 12px;}
  .story-reveal__arrow {width:35px;height:35px;}
  .story-reveal__face > span:last-child {font-size:12px;}
  .photo-story__footer {flex-wrap:wrap;gap:7px 12px;}
  .story-actions {gap:4px;}
  .story-dots {gap:0;}
  .story-nav {width:38px;height:38px;}
  .story-pause {padding:8px;}
  .story-modal__stage {max-height:70vh;aspect-ratio:4/5;}
  .story-modal__bottom {align-items:flex-start;}
}
@media(max-width:360px) {
  .story-status__bar {width:48px;}
  .story-slide__caption {bottom:116px;}
  .story-actions {width:100%;justify-content:space-between;}
}
@media(prefers-reduced-motion:reduce) {
  .story-slide.is-active .story-slide__visual {animation:none;}
  .story-slide,.story-modal,.story-modal__stage,.story-reveal__face {transition:none!important;}
}

/* v0.4 finishing — separate placeholder instructions from editorial captions. */
.story-pending { justify-content: flex-start; padding-top: clamp(30px, 4vw, 66px); }
.story-pending strong { font-size: clamp(17px, 1.9vw, 27px); max-width: 75%; }
.story-pending__mark { opacity: .8; }
@media (max-width: 800px) {
  .story-pending { padding-top: 26px; }
  .story-pending strong { font-size: clamp(17px, 5.4vw, 25px); max-width: 85%; }
  .story-slide__caption { bottom: 125px; }
}

/* ======================================================================
   Visionary v0.5 — INLINE reveal cards inspired by IR navigation tiles.
   Never use a full-screen photo modal. White faces, photo behind each face,
   tactile press, separated navigation link after reveal.
   ====================================================================== */
.ir-explore{padding:clamp(66px,7.8vw,118px) var(--pad) clamp(65px,6vw,98px);border-top:1px solid #e4e8eb;background:#fff;}
.ir-explore__head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:clamp(26px,4vw,46px);}
.ir-explore__head h2{font-size:clamp(33px,4.8vw,70px);font-weight:900;letter-spacing:-.065em;line-height:1.2;margin-top:15px;}
.ir-explore__head>p{color:#475167;font-size:14px;line-height:1.9;max-width:345px;}
.ir-explore__head small{font-size:12px;color:#7a8390;}
.ir-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #e2e6eb;border-left:1px solid #e2e6eb;}
.ir-card{min-width:0;position:relative;min-height:clamp(180px,20vw,320px);background:#fff;border-right:1px solid #e2e6eb;border-bottom:1px solid #e2e6eb;isolation:isolate;}
.ir-card__face{appearance:none;position:relative;overflow:hidden;cursor:pointer;display:flex;width:100%;height:100%;min-height:inherit;align-items:center;justify-content:center;border:0;border-radius:0;background:white;color:#141821;text-align:center;padding:32px 42px 43px;transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s ease;}
.ir-card__face:focus-visible{outline:3px solid #136dbb;outline-offset:-5px;z-index:4;}
.ir-card__face:active,.ir-card.is-pressing .ir-card__face{transform:scale(.963);box-shadow:inset 0 9px 24px #10274224;}
.ir-card__media,.ir-card__shade{position:absolute;inset:0;pointer-events:none;}
.ir-card__media{opacity:0;transform:scale(1.11);transition:opacity .65s ease,transform 1.1s cubic-bezier(.19,1,.22,1);background:#e5e9ed;}
.ir-card.is-revealed .ir-card__media{opacity:1;transform:scale(1);}
.ir-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.ir-card__shade{opacity:0;transition:opacity .5s ease;background:linear-gradient(0deg,#0b142e99,#14244c40);}
.ir-card.is-revealed .ir-card__shade{opacity:1;}
.ir-card__title{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:85%;transition:transform .5s,color .35s;}
.ir-card__title strong{font-size:clamp(23px,3vw,48px);font-weight:900;line-height:1.14;letter-spacing:-.055em;overflow-wrap:anywhere;}
.ir-card__title span{font-size:clamp(13px,1.45vw,19px);line-height:1.4;font-weight:750;letter-spacing:.03em;}
.ir-card.is-revealed .ir-card__title{color:#fff;transform:translateY(-13px);text-shadow:0 1px 10px #10152a7a;}
.ir-card__arrow{position:absolute;z-index:3;right:clamp(13px,2.2vw,34px);top:50%;transform:translateY(-50%);font-size:clamp(32px,4vw,54px);font-weight:700;line-height:1;color:#79b53d;transition:transform .35s,color .35s;}
.ir-card.is-revealed .ir-card__arrow{color:#fff;transform:translate(4px,-50%) rotate(90deg);}

.ir-card__detail{position:absolute;z-index:5;left:0;bottom:0;width:100%;background:linear-gradient(0deg,#07162be6,#0a1e39b3);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px clamp(12px,2vw,28px);color:white;min-height:48px;}
.ir-card__detail[hidden]{display:none!important;}
.ir-card__detail p{font-size:clamp(10px,1vw,13px);line-height:1.5;max-width:66%;}
.ir-card__go{border-radius:999px;color:#fff;border:1px solid #ffffffa6;font-size:12px;font-weight:800;text-decoration:none;padding:10px 14px;white-space:nowrap;background:#ffffff20;}
.ir-card__go:hover,.ir-card__go:focus-visible{background:#fff;color:#123a72;}
.ir-card__pending{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:7px;padding:17px;text-align:left;color:#40516a;background:repeating-linear-gradient(138deg,#e2e7ed,#e2e7ed 2px,#e9edf3 2px,#e9edf3 25px);}
.ir-card__pending>span:nth-child(2){font-size:10px;font-weight:800;letter-spacing:.18em;}
.ir-card__pending small{font-size:11px;line-height:1.5;max-width:80%;font-weight:600;}
.ir-card__pending-line{display:block;width:25px;height:2px;background:#8f9dae;margin-bottom:4px;}
.ir-card.needs-photo.is-revealed .ir-card__shade{background:linear-gradient(0deg,#344869ad,transparent 78%);}
.ir-explore__foot{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:20px;color:#657080;font-size:12px;font-weight:750;letter-spacing:.035em;}
.ir-explore__separator{margin:0 12px;color:#9fabb7;}
.ir-explore__foot button{border:1px solid #cbd3de;background:white;padding:10px 15px;border-radius:999px;min-height:44px;color:#26394e;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;}
.ir-explore__foot button:hover{background:#eff4f9;}
.ir-photo-slot{max-width:100%;min-width:0;}
.ir-photo-slot .ir-card{min-height:250px;}
.ir-photo-slot.photo-slot--portrait .ir-card{min-height:390px;max-width:460px;}
.ir-photo-slot.photo-slot--wide .ir-card{min-height:clamp(250px,30vw,420px);}
.ir-photo-slot .ir-card__face{min-height:inherit;}
.ir-photo-slot .ir-card__title strong{font-size:clamp(21px,2.6vw,34px);}
.ir-slot-caption{font-size:12px;line-height:1.8;color:#647083;padding-top:11px;}
@media(max-width:800px){
 .ir-explore{padding:63px var(--pad) 69px;}
 .ir-explore__head{display:block;margin-bottom:24px;}
 .ir-explore__head>p{margin-top:12px;max-width:none;}
 .ir-card{min-height:clamp(158px,43vw,240px);}
 .ir-card__face{padding:23px 20px 36px;}
 .ir-card__title{gap:6px;max-width:88%;}
 .ir-card__title strong{font-size:clamp(20px,5.5vw,29px);}
 .ir-card__title span{font-size:12px;}
 .ir-card__arrow{right:9px;font-size:29px;}

 .ir-card__pending{padding:10px;}
 .ir-card__pending>span:nth-child(2){font-size:8px;letter-spacing:.05em;}
 .ir-card__pending small{font-size:9px;}
 .ir-card__detail{padding:8px;flex-wrap:wrap;gap:5px;}
 .ir-card__detail p{max-width:100%;font-size:10px;line-height:1.3;}
 .ir-card__go{font-size:10px;padding:7px 10px;}
 .ir-card.is-revealed .ir-card__title{transform:translateY(-15px);}
 .ir-explore__foot{font-size:10px;gap:10px;}
 .ir-explore__separator{margin:0 3px;}
 .ir-photo-slot .ir-card{min-height:270px;}
 .ir-photo-slot.photo-slot--portrait .ir-card{min-height:390px;}
 .ir-photo-slot.photo-slot--wide .ir-card{min-height:250px;}
}
@media(max-width:360px){
 .ir-card__title strong{font-size:18px;}
 .ir-card__title span{font-size:11px;}
 .ir-card__arrow{font-size:26px;right:6px;}
 .ir-explore__foot{flex-wrap:wrap;}
}
@media(prefers-reduced-motion:reduce){
 .ir-card__face,.ir-card__media,.ir-card__shade,.ir-card__title,.ir-card__arrow{transition:none!important;}
}
/* Keep the tile itself clickable after reveal; only the explicit link captures taps. */
.ir-card__detail{pointer-events:none;}
.ir-card__go{pointer-events:auto;}

/* ======================================================================
   Visionary v0.6 — BACKGROUND MOTION (orbs · rings · lines · parallax)
   One fixed layer behind every page. Tuning guide: BACKGROUND_MOTION_GUIDE.md
   Structure:  .v-bg  > .v-depth (JS parallax) > .v-pos (scene/page placement,
               CSS transition) > .v-orb / .v-ring / .v-lines (CSS keyframe drift)
   Colors are "R G B" triplets so alpha can be applied: rgb(var(--c1) / .5)
   ====================================================================== */
.v-bg {
  --c1: 7 84 165;      /* blue    #0754a5 */
  --c2: 141 64 155;    /* violet  #8d409b */
  --c3: 18 178 187;    /* aqua    #12b2bb */
  --c4: 176 53 148;    /* magenta #b03594 */
  --k: 1;              /* overall intensity (TOP 1 · sub pages .6–.75 · contact .5) */
  --t: 1;              /* speed multiplier (higher = slower) */
  --orb: 68vmax;       /* orb diameter */
  --orb-a: .44;        /* orb core alpha */
  --orb-b: .19;        /* orb mid alpha (45% radius) */
  position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh;
  z-index: -2; overflow: hidden; pointer-events: none; contain: strict;
}
.v-depth { position: absolute; inset: 0; will-change: transform; }
.v-pos {
  position: absolute; left: 0; top: 0;
  transform: translate3d(var(--x, 50vw), var(--y, 50vh), 0) scale(var(--s, 1));
  transition: transform 1.15s cubic-bezier(.45, .05, .25, 1);
}
/* v0.6.1: opacity lives on the moving leaves, not on their parent. An opacity < 1 on a parent of
   composited children forces an extra offscreen render pass per layer (was 5–8 per page). */
.v-pos > i { opacity: calc(var(--a, 1) * var(--k)); transition: opacity 1s ease; }
/* --- light orbs (2–3 strong + 1 accent) --- */
.v-orb {
  /* v0.6.1: drawn at HALF the visible size, enlarged x2 by the drift keyframes (texture ≈ 1/4) */
  position: absolute; width: calc(var(--orb) / 2); height: calc(var(--orb) / 2); left: calc(var(--orb) / -4); top: calc(var(--orb) / -4);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--c) / var(--orb-a)), rgb(var(--c) / var(--orb-b)) 45%, rgb(var(--c) / 0) 100%);
  will-change: transform;
}
.o1 { --c: var(--c1); animation: vDriftA calc(var(--t) * 11s) ease-in-out infinite alternate; }
.o2 { --c: var(--c2); animation: vDriftB calc(var(--t) * 14s) ease-in-out infinite alternate; }
.o3 { --c: var(--c3); animation: vDriftC calc(var(--t) * 9s) ease-in-out infinite alternate; }
.o4 { --c: var(--c4); animation: vDriftD calc(var(--t) * 16s) ease-in-out infinite alternate; }
@keyframes vDriftA { 0% { transform: translate3d(-11vw, -7vh, 0) scale(1.8); } 55% { transform: translate3d(9vw, 9vh, 0) scale(2.28); } 100% { transform: translate3d(-3vw, 16vh, 0) scale(2); } }
@keyframes vDriftB { 0% { transform: translate3d(12vw, 8vh, 0) scale(2.2); } 50% { transform: translate3d(-10vw, -6vh, 0) scale(1.76); } 100% { transform: translate3d(4vw, -14vh, 0) scale(2.12); } }
@keyframes vDriftC { 0% { transform: translate3d(0, 12vh, 0) scale(1.9); } 50% { transform: translate3d(-14vw, -4vh, 0) scale(2.32); } 100% { transform: translate3d(8vw, -10vh, 0) scale(1.8); } }
@keyframes vDriftD { 0% { transform: translate3d(-8vw, 0, 0) scale(2); } 100% { transform: translate3d(14vw, 10vh, 0) scale(2.4); } }

/* --- floating rings (thin, behind text & cards) --- */
.v-ring { position: absolute; border-radius: 50%; will-change: transform; }
.r1 { width: 62vmax; height: 62vmax; left: -31vmax; top: -31vmax; border: 1.5px solid rgb(var(--c1) / .3); }
/* v0.6.1: a uniform circle looks the same at every angle, so the big ring stays still and only the
   small dot orbits (a tiny layer instead of re-sampling a 62vmax layer every frame). Same 24 s orbit. */
.v-dot { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform;
  animation: vSpin calc(var(--t) * 24s) linear infinite; }
.v-dot::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%;
  left: -5.5px; top: calc(-31vmax - 5.5px); background: rgb(var(--c3)); box-shadow: 0 0 0 7px rgb(var(--c3) / .16); }
.r2::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; }
.r2 { width: 94vmax; height: 34vmax; left: -47vmax; top: -17vmax; border: 1.5px solid rgb(var(--c2) / .3);
  animation: vTilt calc(var(--t) * 13s) ease-in-out infinite alternate; }
.r2::after { right: 12%; bottom: 9%; background: rgb(var(--c2)); box-shadow: 0 0 0 6px rgb(var(--c2) / .14); }
.r3 { width: 42vmax; height: 42vmax; left: -21vmax; top: -21vmax; border: 2px solid transparent;
  border-top-color: rgb(var(--c3) / .55); border-right-color: rgb(var(--c3) / .22);
  animation: vSpin calc(var(--t) * 15s) linear infinite reverse; }
@keyframes vSpin { to { transform: rotate(360deg); } }
@keyframes vTilt { 0% { transform: translate3d(-6vw, 2vh, 0) rotate(-26deg); } 100% { transform: translate3d(6vw, -3vh, 0) rotate(16deg); } }

/* --- page-specific line systems (off by default) --- */
.v-pos.pl { width: 100vmax; height: 100vmax; margin: -50vmax 0 0 -50vmax; /* v0.6.1: was 130vmax */
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); }
.v-lines { position: absolute; inset: -22%; display: none; will-change: transform; } /* v0.6.1: was -30% */
/* v0.6.1: pages without a line system render no line layer and no mask at all (was a 3000×3000 px
   texture + a full-screen mask pass on every page). On TOP the lines exist only during 03 BUSINESS. */
.v-bg:not([data-lines*="f"]):not([data-lines*="g"]) .pl { display: none; }
.v-bg[data-theme="top"] .pl { visibility: hidden; transition: visibility 0s 1s; }
.v-bg[data-theme="top"] .pl .v-lines { animation-play-state: paused; }
.v-bg[data-theme="top"][data-scene="services"] .pl { visibility: visible; transition-delay: 0s; }
.v-bg[data-theme="top"][data-scene="services"]:not(.is-paused) .pl .v-lines { animation-play-state: running; }
.v-lines::after { content: ""; position: absolute; display: none; }
/* flow: diagonal streams (speed) */
.v-bg[data-lines~="flow"] .v-lines { display: block;
  background: repeating-linear-gradient(90deg, rgb(var(--c3) / 0) 0 64px, rgb(var(--c3) / .32) 64px 65.5px, rgb(var(--c3) / 0) 65.5px 140px, rgb(var(--c2) / .24) 140px 141.5px, rgb(var(--c2) / 0) 141.5px 210px);
  animation: vFlow calc(var(--t) * 5s) linear infinite; }
@keyframes vFlow { from { transform: rotate(-24deg) translate3d(0, 0, 0); } to { transform: rotate(-24deg) translate3d(-210px, 0, 0); } }
/* flowx: horizontal progression (approach) */
.v-bg[data-lines~="flowx"] .v-lines { display: block;
  background: repeating-linear-gradient(90deg, rgb(var(--c1) / 0) 0 120px, rgb(var(--c1) / .3) 120px 121.5px, rgb(var(--c1) / 0) 121.5px 180px);
  animation: vFlowX calc(var(--t) * 6s) linear infinite; }
@keyframes vFlowX { from { transform: skewX(-28deg) translate3d(0, 0, 0); } to { transform: skewX(-28deg) translate3d(180px, 0, 0); } }
/* grid: analytical / structural geometry (marketing, web) */
.v-bg[data-lines~="grid"] .v-lines { display: block;
  background-image: linear-gradient(rgb(var(--c1) / .17) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c1) / .17) 1px, transparent 1px);
  background-size: 76px 76px; animation: vGrid calc(var(--t) * 8s) linear infinite; }
@keyframes vGrid { from { transform: rotate(9deg) translate3d(0, 0, 0); } to { transform: rotate(9deg) translate3d(76px, 76px, 0); } }
/* scan: moving horizontal light line on top of the grid (web) */
.v-bg[data-lines~="scan"] .v-lines::after { display: block; left: 0; right: 0; top: 30%; height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--c3) / .7), rgb(var(--c1) / .5), transparent);
  animation: vScan calc(var(--t) * 4.5s) ease-in-out infinite alternate; }
@keyframes vScan { from { transform: translate3d(0, -18vmax, 0); } to { transform: translate3d(0, 22vmax, 0); } }

/* ----------------------------------------------------------------------
   Page themes: colors · intensity · lines · resting composition
   ---------------------------------------------------------------------- */
.v-bg { /* default composition (= sub page hero) */
  --p1x: 80vw; --p1y: 20vh; --p1s: 1;   --p1a: .95;
  --p2x: 10vw; --p2y: 82vh; --p2s: .95; --p2a: .85;
  --p3x: 96vw; --p3y: 92vh; --p3s: .8;  --p3a: .8;
  --p4x: 42vw; --p4y: -8vh; --p4s: .6;  --p4a: .35;
  --r1x: 84vw; --r1y: 38vh; --r1s: .9;  --r1a: 1;
  --r2x: 32vw; --r2y: 74vh; --r2s: 1;   --r2a: .9;
  --r3x: 70vw; --r3y: 30vh; --r3s: .8;  --r3a: 1;
  --plx: 70vw; --ply: 45vh; --pls: 1;   --pla: 1;
}
.v-pos.p1 { --x: var(--p1x); --y: var(--p1y); --s: var(--p1s); --a: var(--p1a); }
.v-pos.p2 { --x: var(--p2x); --y: var(--p2y); --s: var(--p2s); --a: var(--p2a); }
.v-pos.p3 { --x: var(--p3x); --y: var(--p3y); --s: var(--p3s); --a: var(--p3a); }
.v-pos.p4 { --x: var(--p4x); --y: var(--p4y); --s: var(--p4s); --a: var(--p4a); }
.v-pos.pr1 { --x: var(--r1x); --y: var(--r1y); --s: var(--r1s); --a: var(--r1a); }
.v-pos.pr2 { --x: var(--r2x); --y: var(--r2y); --s: var(--r2s); --a: var(--r2a); }
.v-pos.pr3 { --x: var(--r3x); --y: var(--r3y); --s: var(--r3s); --a: var(--r3a); }
.v-pos.pl  { --x: var(--plx); --y: var(--ply); --s: var(--pls); --a: var(--pla); }

.v-bg[data-theme="top"] { --k: 1; }
.v-bg[data-theme="services"] { --c1: 7 84 165; --c2: 18 178 187; --c3: 141 64 155; --c4: 176 53 148; --k: .74; }
.v-bg[data-theme="marketing"] { --c1: 7 84 165; --c2: 141 64 155; --c3: 64 112 196; --c4: 141 64 155; --k: .72; --t: 1.15; }
.v-bg[data-theme="ads"] { --c1: 18 178 187; --c2: 141 64 155; --c3: 18 178 187; --c4: 176 53 148; --k: .74; --t: .85; }
.v-bg[data-theme="web"] { --c1: 7 84 165; --c2: 18 178 187; --c3: 18 178 187; --c4: 7 84 165; --k: .72; }
.v-bg[data-theme="recruitment"] { --c1: 141 64 155; --c2: 7 84 165; --c3: 176 53 148; --c4: 141 64 155; --k: .72; --t: 1.2; --orb: 82vmax; }
.v-bg[data-theme="about"] { --c1: 7 84 165; --c2: 34 112 196; --c3: 18 178 187; --c4: 7 84 165; --k: .66; --t: 1.25; }
.v-bg[data-theme="approach"] { --c1: 7 84 165; --c2: 141 64 155; --c3: 18 178 187; --k: .72; }
.v-bg[data-theme="recruit"] { --c1: 28 122 220; --c2: 18 178 187; --c3: 90 170 235; --c4: 141 64 155; --k: .76; }
.v-bg[data-theme="contact"] { --c1: 7 84 165; --c2: 18 178 187; --c3: 141 64 155; --k: .5; --t: 1.6; }

/* sub page: scrolling past the hero moves the light to the margins (reading mode) */
.v-bg[data-scene="body"] {
  --p1x: 104vw; --p1y: 62vh; --p1a: .7;  --p2x: -6vw; --p2y: 24vh; --p2a: .65;
  --p3x: 70vw; --p3y: 108vh; --p3a: .6;  --p4x: 8vw; --p4y: 100vh; --p4a: .3;
  --r1x: 96vw; --r1y: 78vh; --r1s: .8;   --r2x: 6vw; --r2y: 20vh; --r3x: 92vw; --r3y: 14vh;
  --plx: 88vw; --ply: 70vh; --pla: .7;
}
.v-bg[data-scene="cards"] {
  --p1x: 100vw; --p1y: 8vh; --p1a: .6;   --p2x: 0vw; --p2y: 96vh; --p2a: .55;
  --p3x: 50vw; --p3y: 112vh; --p3a: .45; --p4a: .2;
  --r1x: 100vw; --r1y: 100vh; --r2x: 50vw; --r2y: 104vh; --r2a: .6; --r3x: 4vw; --r3y: 10vh;
  --pla: .35;
}
.v-bg[data-scene="cta"] { --p1x: 88vw; --p1y: 30vh; --p2x: 20vw; --p2y: 88vh; --r1x: 82vw; --r1y: 48vh; --r1s: 1.1; }

/* TOP — the composition follows the story */
.v-bg[data-theme="top"] { --pla: 0; }
.v-bg[data-theme="top"][data-scene="intro"] {
  --p1x: 74vw; --p1y: 40vh; --p1s: 1.15; --p1a: 1;   --p2x: 22vw; --p2y: 78vh; --p2s: 1;   --p2a: .9;
  --p3x: 92vw; --p3y: 88vh; --p3s: .9;  --p3a: .9;   --p4x: 46vw; --p4y: 0vh;  --p4s: .7;  --p4a: .45;
  --r1x: 50vw; --r1y: 46vh; --r1s: 1.05; --r2x: 50vw; --r2y: 50vh; --r2s: 1.15; --r3x: 50vw; --r3y: 46vh; --r3s: 1;
}
.v-bg[data-theme="top"][data-scene="cards"] { --pla: 0; }
.v-bg[data-theme="top"][data-scene="vision"] {
  --p1x: 12vw; --p1y: 84vh; --p1s: .9;  --p1a: .75;  --p2x: 78vw; --p2y: 36vh; --p2s: 1.25; --p2a: 1;
  --p3x: 98vw; --p3y: 94vh; --p3a: .7;  --p4x: 60vw; --p4y: 92vh; --p4a: .4;
  --r1x: 80vw; --r1y: 46vh; --r1s: 1.15; --r2x: 40vw; --r2y: 78vh; --r3x: 80vw; --r3y: 46vh; --r3s: 1.3;
}
.v-bg[data-theme="top"][data-scene="services"] {
  --p1x: 14vw; --p1y: 18vh; --p1s: .9;  --p1a: .8;   --p2x: 50vw; --p2y: 104vh; --p2a: .55;
  --p3x: 72vw; --p3y: 52vh; --p3s: 1.25; --p3a: 1;   --p4x: 100vw; --p4y: 8vh; --p4a: .4;
  --r1x: 76vw; --r1y: 52vh; --r1s: .75; --r2x: 60vw; --r2y: 56vh; --r2s: 1.2; --r3x: 76vw; --r3y: 52vh; --r3s: .9;
  --plx: 64vw; --ply: 52vh; --pla: .9;
}
.v-bg[data-theme="top"][data-scene="approach"] {
  --p1x: 86vw; --p1y: 58vh; --p1s: 1.15; --p1a: 1;   --p2x: 34vw; --p2y: 14vh; --p2a: .65;
  --p3x: 106vw; --p3y: 98vh; --p3a: .7; --p4a: .2;
  --r1x: 92vw; --r1y: 40vh; --r1s: 1.1; --r2x: 66vw; --r2y: 86vh; --r3x: 92vw; --r3y: 40vh;
}
.v-bg[data-theme="top"][data-scene="recruit"] {
  --p1x: 82vw; --p1y: 22vh; --p1a: .85;  --p2x: 64vw; --p2y: 96vh; --p2a: .55;
  --p3x: 18vw; --p3y: 84vh; --p3s: 1.2; --p3a: 1;    --p4x: 54vw; --p4y: 60vh; --p4a: .45;
  --r1x: 22vw; --r1y: 82vh; --r1s: .9;  --r2x: 76vw; --r2y: 26vh; --r3x: 84vw; --r3y: 20vh;
}
.v-bg[data-theme="top"][data-scene="contact"] {
  --p1x: 92vw; --p1y: 22vh; --p1a: .7;  --p2x: 8vw; --p2y: 92vh; --p2a: .55;
  --p3x: 60vw; --p3y: 110vh; --p3a: .4; --p4a: .2;
  --r1x: 86vw; --r1y: 40vh; --r1s: 1.1; --r2x: 30vw; --r2y: 90vh; --r3x: 86vw; --r3y: 40vh;
}

/* smartphones: bigger relative orbs, shorter travel (set in JS), lighter rings */
@media (max-width: 800px) {
  .v-bg { --orb: 120vw; --orb-a: .46; --orb-b: .2; }
  .r1 { width: 108vw; height: 108vw; left: -54vw; top: -54vw; }
  .v-dot::after { top: calc(-54vw - 5.5px); }
  .r2 { width: 150vw; height: 58vw; left: -75vw; top: -29vw; }
  .r3 { width: 72vw; height: 72vw; left: -36vw; top: -36vw; }
  .v-pos.pl { width: 160vw; height: 160vw; margin: -80vw 0 0 -80vw; }
}

/* section layers that used to be opaque now let the motion through, softly */
.ir-explore { background: rgba(255, 255, 255, .58); transition: background-color .6s ease; }
.ir-explore:has(.ir-card.is-revealed) { background: rgba(255, 255, 255, .86); } /* calmer while a photo is open */
.ir-card-grid { box-shadow: 0 22px 60px rgba(17, 30, 60, .07); }
.ir-explore__foot button { background: #fff; }

/* paused while the tab is hidden */
.v-bg.is-paused .v-orb, .v-bg.is-paused .v-ring, .v-bg.is-paused .v-dot, .v-bg.is-paused .v-lines, .v-bg.is-paused .v-lines::after { animation-play-state: paused; }

/* reduced motion: a clean, still composition */
@media (prefers-reduced-motion: reduce) {
  .v-bg .v-orb, .v-bg .v-ring, .v-bg .v-dot, .v-bg .v-lines, .v-bg .v-lines::after { animation: none !important; }
  .v-pos, .v-depth, .v-pos > i { transition: none !important; }
}

/* LITE level — chosen automatically on devices that cannot keep up (v0.6.1 quality guard), or forced
   with BG_LEVEL = "lite" in tools/build.py / ?bg=lite. Keeps 3 moving orbs, the main ring with its
   orbiting dot, scene changes and (half) parallax; removes accent orb, ellipse, arc and lines. */
.v-bg[data-level="lite"] .p4, .v-bg[data-level="lite"] .pr2, .v-bg[data-level="lite"] .pr3, .v-bg[data-level="lite"] .pl { display: none; }

/* v0.6 fix: keep long katakana headings (e.g. マーケティング) on one line at ≤360px */
@media (max-width: 360px) { .inner-hero h1 { font-size: 42px; } }

/* ======================================================================
   Visionary v0.6.1 — rendering optimisation (same look, less GPU work)
   ====================================================================== */
/* The header's backdrop blur had to be recomputed on EVERY frame now that the background moves.
   A slightly more opaque fill gives the same look without the per-frame blur pass. */
.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(247, 248, 250, .94); }
.site-header.scrolled { background: rgba(247, 248, 250, .96); }
/* The fine dot texture used to be its own full-screen fixed layer above the motion layer.
   It is now painted as the motion layer's own background (one full-screen layer fewer). */
.v-bg ~ .page-noise, .page-noise { display: none; }
.v-bg { background-image: radial-gradient(rgba(0, 0, 0, .016) .45px, transparent .65px); background-size: 8px 8px; }
/* Sub pages: no accent orb (TOP keeps all four) — density ≈ 60–75 % of TOP, one large layer fewer. */
.v-bg:not([data-theme="top"]) .p4 { display: none; }

/* ======================================================================
   Visionary v0.6.2 — marketing-company messaging, navigation & readability
   (design system, background motion and scroll engine unchanged)
   ====================================================================== */
/* --- header: consult button visible at every width --- */
.head-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 18px;
  margin-left: clamp(14px, 2vw, 32px); border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; transition: background .25s;
}
.head-cta:hover, .head-cta:focus-visible { background: var(--blue); }
.head-cta + .menu-button { margin-left: 10px; }
@media (max-width: 1023px) { .head-cta { margin-left: auto; } }
@media (max-width: 800px) { .head-cta { min-height: 38px; padding: 7px 15px; font-size: 13px; } }
@media (max-width: 359px) { .head-cta { padding: 7px 12px; } .site-header .brand { width: 124px; } }
.menu-cta { margin-top: 26px; }

/* --- TOP: visible tagline inside the h1 (under the logo) --- */
.intro-tag.intro-role { display: block; margin-top: 18px; font-size: clamp(15px, 1.35vw, 19px); letter-spacing: .08em; color: var(--ink-2); font-weight: 800; line-height: 1.6; }

/* --- TOP: first-view business block --- */
.intro-business .ib-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .26em; color: #3f6797; }
.intro-business .ib-copy { margin-top: 8px; font-size: clamp(20px, 2vw, 28px); font-weight: 900; letter-spacing: -.02em; line-height: 1.45; }
.intro-business .ib-links { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 14px; }
.intro-business .ib-links a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 5px 13px; border: 1px solid #c3cad6; border-radius: 999px;
  background: rgba(255, 255, 255, .78); font-size: 13px; font-weight: 700; line-height: 1.3; transition: border-color .2s, color .2s;
}
.intro-business .ib-links a:hover, .intro-business .ib-links a:focus-visible { border-color: var(--blue); color: var(--blue); }
.intro-business .ib-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.intro-business .ib-primary {
  display: inline-flex; align-items: center; gap: 18px; min-height: 46px; padding: 11px 20px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 800; transition: background .25s;
}
.intro-business .ib-primary:hover, .intro-business .ib-primary:focus-visible { background: var(--blue); }
.intro-business .ib-secondary { font-size: 14px; font-weight: 800; border-bottom: 1px solid currentColor; padding: 4px 0; }
.intro-business .ib-secondary:hover { color: var(--blue); }
.m-on .intro-business { max-width: min(62vw, 600px); }
@media (max-width: 800px) {
  /* phones: lift the logo so the business block never overlaps it */
  .m-on .intro-logo { padding-bottom: calc(var(--vh) * 34); }
  .m-on .scroll-hint { display: none; }
  .m-on .intro-business { bottom: calc(var(--vh) * 8); max-width: none; }
  .intro-business .ib-copy { font-size: 20px; }
}
@media (max-width: 400px) {
  .intro-business .ib-links { gap: 4px 12px; }
  .intro-business .ib-links a { min-height: 0; padding: 3px 0; border: 0; border-radius: 0; background: none; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
  .intro-business .ib-cta { margin-top: 12px; gap: 8px 14px; }
  .intro-business .ib-primary { padding: 10px 16px; font-size: 13px; gap: 12px; }
  .intro-business .ib-secondary { font-size: 13px; }
}
@media (max-width: 400px) and (max-height: 760px) { .intro-business .ib-eyebrow { display: none; } .intro-business .ib-copy { margin-top: 0; font-size: 18px; } }

/* --- TOP: introduction section right after the logo scene --- */
.top-intro { position: relative; padding: clamp(80px, 9vw, 140px) var(--pad); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .5); }
.top-intro__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(32px, 6vw, 100px); align-items: end; }
.top-intro__head .eyebrow { grid-column: 1 / -1; }
.top-intro__head h2 { font-size: clamp(32px, 3.1vw, 50px); font-weight: 900; letter-spacing: -.06em; line-height: 1.3; }
.top-intro__head h2 span { display: inline; }
.top-intro__lead { font-size: clamp(15px, 1.3vw, 18px); line-height: 2.05; color: var(--ink-2); }
.top-intro__list { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.top-intro__list a { position: relative; display: block; height: 100%; padding: 26px 22px 30px 0; border-right: 1px solid var(--line); transition: color .25s; }
.top-intro__list li + li a { padding-left: 22px; }
.top-intro__list li:last-child a { border-right: 0; }
.top-intro__list .n { display: block; font-size: 12px; letter-spacing: .16em; color: var(--muted); font-weight: 700; }
.top-intro__list strong { display: block; margin-top: 10px; font-size: clamp(19px, 1.7vw, 24px); font-weight: 900; letter-spacing: -.03em; line-height: 1.4; }
.top-intro__list .s { display: block; margin-top: 10px; font-size: 14px; line-height: 1.85; color: var(--muted); }
.top-intro__list .go { position: absolute; right: 18px; top: 24px; font-size: 18px; color: var(--muted); transition: transform .25s, color .25s; }
.top-intro__list a:hover, .top-intro__list a:focus-visible { color: var(--blue); }
.top-intro__list a:hover .go { transform: translate(2px, -2px); color: var(--blue); }
.top-intro__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 40px; }
@media (max-width: 1023px) {
  .top-intro__list { grid-template-columns: 1fr 1fr; }
  .top-intro__list li:nth-child(2) a { border-right: 0; }
  .top-intro__list li:nth-child(3) a { padding-left: 0; }
  .top-intro__list a { border-bottom: 1px solid var(--line); }
}
@media (max-width: 800px) { .top-intro__head { grid-template-columns: minmax(0, 1fr); } .top-intro__head h2 { font-size: clamp(23px, 7.2vw, 52px); } }
@media (max-width: 560px) {
  .top-intro__list { grid-template-columns: 1fr; }
  .top-intro__list li a, .top-intro__list li + li a { padding: 20px 40px 22px 0; border-right: 0; }
  .top-intro__list .go { right: 4px; top: 22px; }
  .top-intro__cta .solid-link { width: 100%; }
}

/* --- IR cards: "写真を見る" (face) and an independent "詳細ページへ" link --- */
.ir-card__hint { left: clamp(14px, 2vw, 30px); transform: none; font-size: 13px; letter-spacing: .04em; color: #4f5a6c; }
.ir-card__hint span { font-size: 15px; margin-left: 2px; }
.ir-card.has-link .ir-card__face { padding-bottom: 64px; }
.ir-card__link {
  position: absolute; z-index: 6; right: clamp(10px, 1.6vw, 24px); bottom: clamp(8px, 1.2vw, 18px);
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid #c3cad6; background: #fff; color: var(--ink); font-size: 13px; font-weight: 800; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.ir-card__link:hover, .ir-card__link:focus-visible { background: var(--ink); color: #fff; border-color: var(--ink); }
.ir-card.is-revealed .ir-card__link { border-color: rgba(255, 255, 255, .7); }
.ir-explore__foot { font-size: 13px; }
.ir-explore__head > p { font-size: 15px; }
@media (max-width: 800px) {
  .ir-card__hint { font-size: 12px; bottom: 10px; left: 10px; letter-spacing: .02em; }
  .ir-explore__foot { font-size: 12px; }
}
@media (max-width: 520px) {
  /* narrow phones: the detail link becomes a full-width bar under the face */
  .ir-card.has-link { display: flex; flex-direction: column; }
  .ir-card.has-link .ir-card__face { flex: 1; padding-bottom: 34px; min-height: 150px; }
  .ir-card__link { position: relative; right: auto; bottom: auto; z-index: 6; justify-content: center; width: 100%; min-height: 44px;
    border-radius: 0; border: 0; border-top: 1px solid #e2e6eb; font-size: 13px; }
  .ir-card.is-revealed .ir-card__link { border-top-color: #e2e6eb; }
  .ir-card__hint { left: 50%; transform: translateX(-50%); }
}

/* --- sub pages --- */
.inner-hero h1.is-long { font-size: clamp(27px, 8.4vw, 124px); }
.inner-hero h1 span:not(.gradient-text) { display: block; }
.audience-note { position: relative; z-index: 2; margin-top: 30px; max-width: 760px; padding: 20px 22px; border: 1px solid #c9d5e6; border-radius: 18px; background: rgba(255, 255, 255, .86); }
.audience-note p { font-size: 15px; line-height: 1.9; }
.audience-note strong { display: block; font-weight: 800; }
.audience-note .outline-link { margin-top: 14px; }
.contact-paths { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; max-width: 900px; }
.contact-paths a { display: block; padding: 18px 20px; border: 1px solid #c9d5e6; border-radius: 18px; background: rgba(255, 255, 255, .86); font-size: 15px; font-weight: 800; line-height: 1.6; transition: border-color .2s, color .2s; }
.contact-paths a small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .06em; }
.contact-paths a:hover, .contact-paths a:focus-visible { border-color: var(--blue); color: var(--blue); }
@media (max-width: 640px) { .contact-paths { grid-template-columns: 1fr; } }
.cta-lead { font-size: clamp(15px, 1.3vw, 18px); line-height: 2; color: var(--ink-2); margin: -14px 0 30px; }
.text-inline { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.inner-block .body + .body { margin-top: 1.1em; }
.site-footer .f-role { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }

/* --- readability: no important text below 12–13px --- */
.breadcrumb { font-size: 12px; }
.note { font-size: 13px; }
.site-footer .f-brand address { font-size: 13px; }
.demo-badge { font-size: 14px; }
.top-intro__list strong, .svc-nav a, .menu-secondary a, .site-footer .f-cols a, .svc-row h2, .ib-links a, .breadcrumb li { word-break: keep-all; overflow-wrap: anywhere; }
.primary-nav a { font-size: 12px; }
.site-footer .f-bottom { font-size: 12px; }
.vision-fact dt { font-size: 12px; }

/* v0.6.2c: deep-link targets stay below the fixed header. */
[id="biz"], [id="career"] { scroll-margin-top: 90px; }

/* v0.6.2f: disclosure on temporary AI-generated illustration photos. */
.ir-card.ai-photo.is-revealed .ir-card__media:after{
 content:"AI生成イメージ";position:absolute;top:11px;left:11px;
 border-radius:3px;display:block;color:#fff;background:rgba(16,25,40,.78);
 padding:4px 8px;font-size:10px;font-weight:750;letter-spacing:.04em;
}
@media(max-width:600px){.ir-card.ai-photo.is-revealed .ir-card__media:after{font-size:9px;top:7px;left:7px;padding:3px 5px;}}


/* ================================================================
   v0.6.2g — photo preview on hover / inset CyberAgent-style tile.
   Photo remains edge-to-edge on the underlying card; the text panel
   floats inward with a milky, translucent glass treatment.
   Touch interactions remain controlled by photo-stories.js.
   ================================================================ */
.ir-card{overflow:hidden;background:#e7eef3;}
.ir-card__media{z-index:0;opacity:0;transform:scale(1.07);transition:opacity .4s ease,transform 1s cubic-bezier(.2,.7,.2,1);}
.ir-card.is-revealed .ir-card__media{opacity:1;transform:scale(1);}
.ir-card__face{z-index:1;transform:scale(1);transform-origin:center;background:#fff;will-change:auto;transition:transform .32s cubic-bezier(.2,.8,.2,1),border-radius .32s ease,background-color .35s ease,box-shadow .35s ease;}
.ir-card.is-revealed .ir-card__face{transform:scale(.92);border-radius:18px;background:rgb(255 255 255 / .78);box-shadow:0 12px 30px rgb(6 21 43 / .12);}
.ir-card.is-hovered .ir-card__face{transform:scale(.92);}
.ir-card__face:active,.ir-card.is-pressing .ir-card__face{transform:scale(.885);box-shadow:0 6px 22px rgb(6 21 43 / .25);}
.ir-card__shade{display:none;}
.ir-card.is-revealed .ir-card__title{color:#19212b;transform:none;text-shadow:none;}
.ir-card.is-revealed .ir-card__arrow{color:#78b82c;transform:translate(4px,-50%);}
/* Keep the mandatory AI-imagery disclosure readable without masking the card. */
.ir-card__detail{z-index:3;bottom:9px;left:9px;width:calc(100% - 18px);min-height:0;max-height:80px;overflow:hidden;border-radius:9px;padding:7px 10px;background:rgb(255 255 255 / .88);color:#273247;pointer-events:none;}
.ir-card__detail p{max-width:100%;font-size:10px;line-height:1.4;}
/* Loading placeholder for the unpublished representative portrait. */
.ir-card.needs-photo.is-revealed .ir-card__face{background:rgb(255 255 255 / .82);}
@media(max-width:800px){
 .ir-card.is-revealed .ir-card__face,.ir-card.is-hovered .ir-card__face{transform:scale(.94);border-radius:12px;}
 .ir-card.is-pressing .ir-card__face,.ir-card__face:active{transform:scale(.91);}
 .ir-card__detail{left:5px;bottom:5px;width:calc(100% - 10px);padding:5px 6px;max-height:56px;}
 .ir-card__detail p{font-size:8px;line-height:1.25;}
}
@media(prefers-reduced-motion:reduce){
 .ir-card__media,.ir-card__face,.ir-card__detail{transition:none!important;}
}

/* Cards already navigate on click, so no duplicate navigation pill. */
.ir-card__link{display:none!important;}

/* The gallery already discloses temporary AI images in the heading/footer; avoid a duplicate caption over compact cards. */
.ir-card__detail{display:none!important;}


/* ========================================================================== 
   v0.6.2h — compact mobile TOP. Only the three text-led sections become
   natural-height content. Logo + 4-service horizontal scroll remain pinned.
   These rules do not affect the nine lower pages or reduced-motion mode.
   ========================================================================== */
@media (max-width: 600px) {
  html.m-on.m-compact body.is-top .sc-vision,
  html.m-on.m-compact body.is-top .sc-steps,
  html.m-on.m-compact body.is-top .sc-recruit {
    height: auto !important;
    min-height: 0;
    overflow: hidden;
  }
  html.m-on.m-compact body.is-top .sc-vision .pin,
  html.m-on.m-compact body.is-top .sc-steps .pin,
  html.m-on.m-compact body.is-top .sc-recruit .pin {
    position: relative;
    height: auto;
    overflow: visible;
    isolation: isolate;
    padding: 62px var(--pad) 58px;
  }
  html.m-on.m-compact body.is-top .sc-vision .pin { padding-block: 68px 64px; }
  html.m-on.m-compact body.is-top .sc-steps .pin { padding-block: 70px 70px; }
  html.m-on.m-compact body.is-top .sc-recruit .pin { padding-block: 76px 70px; }
  html.m-on.m-compact body.is-top .sc-vision a,
  html.m-on.m-compact body.is-top .sc-steps a,
  html.m-on.m-compact body.is-top .sc-recruit a { pointer-events: auto !important; }
  html.m-on.m-compact body.is-top .vision-copy,
  html.m-on.m-compact body.is-top .rc-main { position: relative; inset: auto; top: auto; left: auto; right: auto; bottom: auto; }
  html.m-on.m-compact body.is-top .vision-copy h2 {
    font-size: clamp(33px, 9vw, 44px);
    margin: 16px 0 18px;
  }
  html.m-on.m-compact body.is-top .vision-copy .lead { font-size: 14px; line-height: 1.8; }
  html.m-on.m-compact body.is-top .vision-fact { margin-top: 20px; font-size: 12px; }
  html.m-on.m-compact body.is-top .vision-link { margin-top: 22px; }
  html.m-on.m-compact body.is-top .vision-caption { display: none; }
  html.m-on.m-compact body.is-top .orbit { opacity: .45; pointer-events: none; }
  html.m-on.m-compact body.is-top .st-eye { position: relative; inset: auto; margin: 0 0 22px; }
  html.m-on.m-compact body.is-top .st-list {
    position: relative; inset: auto; margin-top: 10px;
    display: grid; gap: 0;
  }
  html.m-on.m-compact body.is-top .st-item {
    position: relative; inset: auto; padding: 16px 0 18px;
    border-top: 1px solid var(--line);
  }
  html.m-on.m-compact body.is-top .st-item h3 { font-size: clamp(27px, 7.4vw, 34px); line-height: 1.2; }
  html.m-on.m-compact body.is-top .st-item p { margin-top: 7px; font-size: 13px; line-height: 1.65; }
  html.m-on.m-compact body.is-top .st-item .no { margin-bottom: 5px; font-size: 10px; }
  html.m-on.m-compact body.is-top .st-bigs,
  html.m-on.m-compact body.is-top .st-progress { display: none; }
  html.m-on.m-compact body.is-top .st-more { position: relative; inset: auto; margin: 16px 0 0; }
  html.m-on.m-compact body.is-top .rc-huge { display: none; }
  html.m-on.m-compact body.is-top .rc-rule { top: 28px; }
  html.m-on.m-compact body.is-top .rc-main h2 { font-size: clamp(38px, 10vw, 50px); margin: 18px 0 22px; }
  html.m-on.m-compact body.is-top .rc-main p:not(.eyebrow) { font-size: 14px; line-height: 1.8; margin-bottom: 22px; }
  html.m-on.m-compact body.is-top .top-intro { padding-top: 55px; padding-bottom: 55px; }
  html.m-on.m-compact body.is-top .top-intro__list { margin-top: 24px; }
  html.m-on.m-compact body.is-top .top-intro__list li a,
  html.m-on.m-compact body.is-top .top-intro__list li + li a { padding-top: 15px; padding-bottom: 16px; }
  html.m-on.m-compact body.is-top .top-intro__list strong { margin-top: 4px; font-size: 19px; }
  html.m-on.m-compact body.is-top .top-intro__list .s { margin-top: 4px; font-size: 12px; line-height: 1.5; }
  html.m-on.m-compact body.is-top .top-intro__cta { margin-top: 22px; }
}

/* v0.6.2j — scroll targets for stage 02 (planning), 03 (execution). */
.step-jump-anchor { position:absolute; left:0; display:block; width:1px; height:1px; overflow:hidden; pointer-events:none; scroll-margin-top:0; }
/* The remaining single CEO card is intentionally centered rather than left-aligned. */
body .ir-explore--sub .ir-card-grid:has(> .ir-card:only-child) { max-width:760px; grid-template-columns:minmax(0,1fr); }


/* v0.6.2k: align section links to non-animated containers; avoid fixed header overlap. */
.inner-block[id] { scroll-margin-top: 92px; }
html { scroll-padding-top: 92px; }
/* Company access: address on the left, interactive Google map on the right. */
.access-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,72px);align-items:start;margin-top:28px}
.access-details{display:flex;flex-direction:column;align-items:flex-start;gap:26px;min-width:0}
.access-details .body{margin:0;overflow-wrap:anywhere}
.access-map{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;min-height:300px;background:#edf1f5}
.access-map iframe{display:block;border:0;width:100%;height:clamp(310px,29vw,430px)}
.inner-hero h1.web-one-line{font-size:clamp(34px,7vw,115px);letter-spacing:-.08em;white-space:nowrap;overflow-wrap:normal}
.inner-hero h1.web-one-line span{display:inline;white-space:nowrap}
@media(max-width:800px){.access-layout{grid-template-columns:1fr;gap:24px}.access-map iframe{height:320px}}
@media(max-width:430px){.inner-hero h1.web-one-line{font-size:clamp(31px,9.3vw,42px);letter-spacing:-.075em}.access-map iframe{height:280px}}
/* One offset source only; combining scroll-padding and scroll-margin adds twice the spacing. */
html { scroll-padding-top: 0; }
/* Hidden route anchors are programmatic navigation only, never a second visible CTA. */
.ir-card__link[hidden] { display: none !important; }
/* Stage anchors should not be hidden beneath the fixed site header. */
.step-jump-anchor, #process { scroll-margin-top: 92px; }

/* Always offer map access if embeds are restricted by the browser or offline preview. */
.access-map{position:relative}
.access-map__external{position:absolute;right:14px;bottom:14px;z-index:1;padding:10px 14px;border-radius:30px;color:#111827;background:#fff;box-shadow:0 2px 10px #0002;font-size:13px;font-weight:750;text-decoration:none}
.access-map__external:hover,.access-map__external:focus-visible{background:#eef4ff;text-decoration:underline}

/* v0.6.2l — focused service messaging and direct email contact. */
.service-problem-label,.service-support-label{font-size:12px;letter-spacing:.12em;font-weight:850;color:#347a9a;margin-bottom:12px}
.service-problem{font-size:clamp(22px,2.25vw,36px);line-height:1.45;font-weight:850;letter-spacing:-.04em;margin-bottom:36px}
.service-support-label{margin-top:8px}
.service-overview-detail{margin-top:18px!important;font-size:clamp(14px,1.2vw,17px);line-height:1.9}
.service-overview-action{margin-top:30px}
.contact-mail-lead{font-size:clamp(24px,2.5vw,38px)}
.contact-mail{margin:24px 0 20px;line-height:1.4;overflow-wrap:anywhere}
.contact-mail a{color:var(--blue);font-size:clamp(20px,2.35vw,36px);font-weight:850;letter-spacing:-.025em;text-decoration:underline;text-underline-offset:5px}
.contact-mail a:hover{color:var(--ink)}
/* Cut redundant vertical whitespace without reducing legibility. */
body.is-top .top-intro{padding-block:clamp(62px,6.7vw,98px)}
body.is-top .ir-explore--top{padding-block:clamp(56px,5.7vw,82px)}
@media(max-width:600px){
  body.is-top .top-intro{padding-block:46px 52px}
  body.is-top .ir-explore--top{padding-block:48px 55px}
  .service-problem{margin-bottom:28px}
}