:root {
  --bg: #ffffff;
  --bg-tint: #f4f7fb;
  --surface: #ffffff;
  --ink: #0e1a2b;
  --ink-2: #3a4658;
  --muted: #5c6878;
  --line: #e2e8f0;
  --line-strong: #c9d3df;
  --brand: #14497e;
  --brand-2: #1b60a6;
  --brand-soft: #e8f0f9;
  --on-brand: #ffffff;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(14, 26, 43, .05), 0 6px 18px rgba(14, 26, 43, .05);
  --sans: "Inter", "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c131d; --bg-tint: #101a27; --surface: #131e2c; --ink: #e9eef5; --ink-2: #c3ccd8; --muted: #95a1b2;
    --line: #223043; --line-strong: #2f4058; --brand: #7fb2ea; --brand-2: #9cc4f0; --brand-soft: #172a40; --on-brand: #0c131d;
    --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c131d; --bg-tint: #101a27; --surface: #131e2c; --ink: #e9eef5; --ink-2: #c3ccd8; --muted: #95a1b2;
  --line: #223043; --line-strong: #2f4058; --brand: #7fb2ea; --brand-2: #9cc4f0; --brand-soft: #172a40; --on-brand: #0c131d;
  --shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font: 400 16px/1.8 var(--sans); letter-spacing: .01em; }
:lang(ja) body { letter-spacing: .02em; }
:lang(ja) :is(h1, h2, h3, p, li, dt, dd, span, strong, a) { word-break: auto-phrase; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 860px; }
.center { text-align: center; }
h1, h2, h3 { line-height: 1.35; margin: 0; font-weight: 700; letter-spacing: .01em; }
h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 18px; }
h3 { font-size: 20px; }
p { margin: 0 0 1em; color: var(--ink-2); }
.lead { font-size: 17px; color: var(--ink-2); max-width: 680px; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-2); margin: 0 0 10px; }
svg { width: 18px; height: 18px; flex: none; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 18px; color: var(--ink); white-space: nowrap; letter-spacing: .02em; }
.brand img { width: 40px; height: auto; }
.brand b { font-weight: 400; color: var(--muted); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { text-decoration: none; padding: 8px 14px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.nav a:hover { background: var(--bg-tint); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.tools { display: flex; align-items: center; gap: 6px; }
.lang { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); white-space: nowrap; }
.lang:hover { border-color: var(--brand-2); color: var(--brand); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--bg-tint); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.menu-btn { display: none; }

/* buttons and links */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 15px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--brand-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.link.quiet { color: var(--muted); font-weight: 500; }
.link svg { width: 16px; height: 16px; }

/* hero */
.hero { padding: 72px 0 40px; background: linear-gradient(180deg, var(--bg-tint), var(--bg)); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.2; margin-bottom: 22px; letter-spacing: .02em; }
.hero h1 span { display: block; }
.hero .lead { font-size: 18px; margin-bottom: 30px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.hero-art .ring { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--brand-soft), transparent 70%); border: 1px solid var(--line); }
.hero-art img { position: relative; width: 68%; }
.facts { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.facts li { padding: 20px 24px; display: flex; flex-direction: column; gap: 2px; }
.facts li + li { border-left: 1px solid var(--line); }
.facts b { font-size: 28px; font-weight: 700; color: var(--brand); letter-spacing: .02em; }
.facts li > span { font-size: 14px; color: var(--muted); }

/* sections */
.sec { padding: 88px 0; }
.sec.tint { background: var(--bg-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { margin-bottom: 36px; }
.sec-head h1 { font-size: clamp(32px, 4.4vw, 46px); margin-bottom: 14px; }
.page-head { padding: 64px 0 36px; background: var(--bg-tint); border-bottom: 1px solid var(--line); }
.page-head .sec-head { margin-bottom: 24px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { text-decoration: none; font-size: 14px; font-weight: 500; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); background: var(--surface); }
.toc a:hover { border-color: var(--brand-2); color: var(--brand); }

/* service cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.card .shot { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.card-body p { font-size: 15px; }
.card-body .links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.kind { font-size: 13px; font-weight: 600; color: var(--brand-2); margin: 0 0 4px; }
.card h3 { margin-bottom: 10px; }
.shot { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.chrome { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--bg-tint); border-bottom: 1px solid var(--line); }
.chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.chrome span { margin-left: 8px; font-size: 12px; color: var(--muted); }

/* message */
.message-teaser blockquote { margin: 0 0 22px; padding: 4px 0 4px 26px; border-left: 3px solid var(--brand-2); max-width: 820px; }
.message-teaser blockquote p { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.7; color: var(--ink); font-weight: 500; }
.message-teaser footer, .sign { display: flex; flex-direction: column; gap: 2px; }
.message-teaser footer span, .sign span { font-size: 14px; color: var(--muted); }
.message-teaser footer strong, .sign strong { font-size: 18px; }
.message p { font-size: 16.5px; line-height: 2; }
.message .message-lead { font-size: 20px; font-weight: 500; color: var(--ink); line-height: 1.8; margin-bottom: 28px; }
.sign { margin-top: 32px; align-items: flex-end; text-align: right; }

/* profile */
.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.profile { margin: 0; border-top: 1px solid var(--line-strong); }
.profile div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--line); }
.profile dt { font-weight: 600; color: var(--ink); }
.profile dd { margin: 0; color: var(--ink-2); }
.profile small { color: var(--muted); font-size: 13px; }

/* organization chart */
.org { margin: 28px 0 0; display: flex; flex-direction: column; align-items: center; }
.org-top, .unit { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); padding: 14px 22px; text-align: center; display: flex; flex-direction: column; min-width: 200px; }
.org-top { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.org-top span, .unit span { font-size: 13px; opacity: .85; }
.org-top strong, .unit strong { font-size: 17px; }
.org-units { list-style: none; margin: 0; padding: 32px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; width: 100%; }
.org-units::before { content: ""; position: absolute; top: 0; left: 50%; height: 16px; border-left: 2px solid var(--line-strong); }
.org-units li { position: relative; display: flex; justify-content: center; }
.org-units li::before { content: ""; position: absolute; top: -16px; left: 50%; height: 16px; border-left: 2px solid var(--line-strong); }
.org-units li::after { content: ""; position: absolute; top: -16px; left: -10px; right: -10px; border-top: 2px solid var(--line-strong); }
.org-units li:first-child::after { left: 50%; }
.org-units li:last-child::after { right: 50%; }
.unit { width: 100%; }
.unit span { color: var(--brand-2); opacity: 1; font-weight: 600; }

/* locations */
.locs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.loc { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 22px 24px; }
.loc > svg { width: 28px; height: 28px; color: var(--brand-2); margin-top: 4px; }
.loc-label { font-size: 13px; font-weight: 600; color: var(--brand-2); margin: 0; }
.loc h3 { margin-bottom: 6px; }
.loc p:last-child { margin: 0; font-size: 15px; }

/* contact */
.contact-list { list-style: none; padding: 0; margin: 8px 0 28px; border-top: 1px solid var(--line); }
.contact-list li { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.contact-list span { color: var(--ink-2); }
.contact-list a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 600; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.contact-list svg { width: 15px; height: 15px; }

/* business page */
.biz-list { padding-top: 24px; padding-bottom: 72px; }
.biz { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 84px; }
.biz:last-child { border-bottom: 0; }
.biz.flip .biz-text { order: 2; }
.biz h2 { font-size: clamp(28px, 3.4vw, 36px); margin-bottom: 14px; }
.points { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.points li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); }
.points svg { color: var(--brand-2); margin-top: 5px; }

/* footer */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-tint); padding: 56px 0 28px; }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.foot-brand p { margin: 12px 0 0; color: var(--muted); }
.site-footer h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer ul a { text-decoration: none; color: var(--ink-2); }
.site-footer ul a:hover { color: var(--brand); text-decoration: underline; }
.copy { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* tablets and phones */
@media (max-width: 960px) {
  .cards { grid-template-columns: 1fr; max-width: 620px; }
  .hero-grid, .split, .biz { grid-template-columns: 1fr; }
  .biz.flip .biz-text { order: 0; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts li:nth-child(3) { border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 1080px) {
  .menu-btn { display: inline-flex; }
  .tools { margin-left: auto; }
  .nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 24px 16px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(14, 26, 43, .08); }
  .nav.open { display: flex; animation: drop .25s ease-out; }
  .nav a { padding: 12px 8px; font-size: 16px; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .nav { padding: 8px 16px 16px; }
  .lang span { display: none; }
  .lang { padding: 8px 10px; }
  .hero { padding: 48px 0 32px; }
  .sec { padding: 60px 0; }
  .profile div { grid-template-columns: 1fr; gap: 2px; }
  .org-units { grid-template-columns: 1fr; gap: 14px; padding-top: 24px; }
  .org-units::before, .org-units li::after { display: none; }
  .org-units li::before { top: -14px; height: 14px; }
  .org-units li:first-child::before { top: -24px; height: 24px; }
  .locs { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .sign { align-items: flex-start; text-align: left; }
}
/* the seal mark is navy: lift it a little on dark backgrounds */
:root[data-theme="dark"] img[src^="/assets/mark.png"] { filter: brightness(1.45) saturate(1.1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img[src^="/assets/mark.png"] { filter: brightness(1.45) saturate(1.1); } }

/* =============================================================================================
   Motion. Everything below is decoration: with prefers-reduced-motion it is switched off,
   and without JavaScript every element is simply visible.
   ============================================================================================= */
html { scroll-behavior: smooth; }
@view-transition { navigation: auto; }
.site-header { view-transition-name: header; }
::view-transition-old(root) { animation: vt-out .28s ease-in both; }
::view-transition-new(root) { animation: vt-in .42s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
html.theme-switch::view-transition-old(root), html.theme-switch::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }

/* reveal on scroll */
/* how things enter is set per element by main.js (data-anim) */
.js .rv { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .7s ease, transform 1s cubic-bezier(.2, .85, .25, 1.06), clip-path 1.1s cubic-bezier(.7, 0, .2, 1), filter .9s ease; transition-delay: calc(var(--d, 0) * 95ms); }
.js .rv[data-anim="left"] { transform: translateX(-80px); }
.js .rv[data-anim="right"] { transform: translateX(80px); }
.js .rv[data-anim="flip"] { transform: perspective(1000px) rotateY(calc(var(--flip, 1) * 24deg)) rotateX(12deg) translateY(56px) scale(.92); transform-origin: 50% 100%; filter: blur(5px); }
.js .rv[data-anim="pop"] { transform: scale(.55) translateY(24px); transition-timing-function: ease, cubic-bezier(.3, 1.8, .5, 1); }
.js .rv[data-anim="wipe"] { opacity: 1; clip-path: inset(-20% 100% -20% 0); transform: translateX(-28px); }
.js .rv[data-anim="curtain"] { opacity: 1; clip-path: inset(0 0 0 100% round 14px); transform: translateX(30px); }
.js .rv[data-anim="curtain"] img { transition: transform 1.6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 95ms + .2s); }
.js .rv[data-anim="curtain"]:not(.in) img { transform: scale(1.22); }
.js .rv.in { opacity: 1; transform: none; filter: none; }
/* only wipes and curtains clip; they end fully open (a little past the edges, so shadows are not cut) */
.js .rv[data-anim="wipe"].in, .js .rv[data-anim="curtain"].in { clip-path: inset(-20% -6% -20% -6% round 14px); }

/* the short line before each kicker draws itself */
.kicker::before { content: ""; display: inline-block; vertical-align: middle; width: 26px; height: 2px; margin: -3px 10px 0 0; border-radius: 2px; background: currentColor; transform-origin: left; transition: transform .8s cubic-bezier(.6, 0, .2, 1) .35s; }
.js .rv:not(.in) .kicker::before, .js .rv.kicker:not(.in)::before { transform: scaleX(0); }
.page-head .kicker::before, .hero .kicker::before { animation: grow-line .9s cubic-bezier(.6, 0, .2, 1) .3s both; }
@keyframes grow-line { from { transform: scaleX(0); } }

/* a light sweeps across primary buttons on hover */
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); transform: translateX(-130%); pointer-events: none; }
.btn.primary:hover::after { transform: translateX(130%); transition: transform .75s ease; }

/* page heads: an icon that draws itself, rings that turn, chips that float */
.ph-art { position: absolute; right: 40px; top: 50%; width: 230px; height: 230px; pointer-events: none; transform: translate(calc(var(--px, 0) * 28px), calc(-50% + var(--sy, 0px) + var(--py, 0) * 28px)); transition: transform .35s ease-out; }
.ph-core { position: absolute; inset: 29%; display: grid; place-items: center; border-radius: 30px; color: var(--brand-2); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 22px 44px rgba(14, 26, 43, .13); animation: core-in 1.1s cubic-bezier(.3, 1.6, .5, 1) .25s both, core-bob 5.5s ease-in-out 1.4s infinite; }
.ph-core svg { width: 58%; height: 58%; stroke-width: 1.5; }
.ph-core svg > * { stroke-dasharray: 90; stroke-dashoffset: 90; animation: draw 2s cubic-bezier(.6, 0, .2, 1) .8s forwards; }
.ph-core svg > *:nth-child(2) { animation-delay: 1.1s; } .ph-core svg > *:nth-child(3) { animation-delay: 1.3s; } .ph-core svg > *:nth-child(n+4) { animation-delay: 1.5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes core-in { from { opacity: 0; transform: scale(.2) rotate(-35deg); } }
@keyframes core-bob { 50% { transform: translateY(-9px) rotate(4deg); } }
.ph-ring { position: absolute; border-radius: 50%; animation: ring-in 1s cubic-bezier(.3, 1.4, .5, 1) both, ph-spin 20s linear infinite; }
.ph-ring.r1 { inset: 13%; border: 1.5px dashed color-mix(in srgb, var(--brand-2) 50%, transparent); animation-delay: .4s, 0s; }
.ph-ring.r2 { inset: 0; border: 1.5px solid color-mix(in srgb, var(--brand-2) 18%, transparent); animation-delay: .55s, 0s; animation-duration: 1s, 32s; animation-direction: normal, reverse; }
.ph-ring.r3 { inset: -15%; border: 1px solid color-mix(in srgb, var(--brand-2) 10%, transparent); animation: ring-in 1s cubic-bezier(.3, 1.4, .5, 1) .7s both, ring-pulse 4s ease-in-out 1.7s infinite; }
.ph-ring i { position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 14px var(--brand-2); }
.ph-ring.r2 i:nth-child(2) { top: auto; bottom: -5px; width: 9px; height: 9px; background: #10b981; box-shadow: 0 0 12px #10b981; }
@keyframes ph-spin { to { rotate: 360deg; } }
@keyframes ring-in { from { opacity: 0; transform: scale(.4); } }
@keyframes ring-pulse { 50% { transform: scale(1.06); opacity: .5; } }
.ph-chip { position: absolute; width: 14px; height: 14px; border-radius: 4px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand-2) 35%, transparent); animation: chip-in .8s cubic-bezier(.3, 1.6, .5, 1) both, chip-float 6s ease-in-out infinite alternate; }
.ph-chip.c1 { top: 4%; left: 8%; animation-delay: .9s, 1.7s; }
.ph-chip.c2 { top: 14%; right: -6%; width: 10px; height: 10px; border-radius: 50%; animation-delay: 1s, 2.4s; }
.ph-chip.c3 { bottom: 6%; left: -4%; width: 18px; height: 18px; border-radius: 6px; animation-delay: 1.1s, 1.2s; }
.ph-chip.c4 { bottom: -4%; right: 18%; width: 9px; height: 9px; background: color-mix(in srgb, #10b981 30%, transparent); border-color: #10b981; border-radius: 50%; animation-delay: 1.2s, 3s; }
.ph-chip.c5 { top: 48%; left: -14%; width: 8px; height: 8px; border-radius: 50%; animation-delay: 1.3s, 2s; }
@keyframes chip-in { from { opacity: 0; transform: scale(0) rotate(90deg); } }
@keyframes chip-float { to { translate: 6px -16px; rotate: 25deg; } }
@media (max-width: 960px) { .ph-art { display: none; } }
.rise { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 120ms + 250ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* headings that run in, letter by letter */
.run .line { display: block; }
.run .ch { display: inline-block; white-space: pre; animation: run-in .75s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(var(--i) * 55ms + 120ms); }
@keyframes run-in {
  0% { opacity: 0; transform: translateX(-.7em) skewX(-18deg); filter: blur(6px); }
  60% { opacity: 1; transform: translateX(.06em) skewX(5deg); filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
.hero .run .line:last-child { color: var(--brand); position: relative; width: fit-content; }
.hero .run .line:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .14em; border-radius: 99px; background: linear-gradient(90deg, var(--brand-2), #6fb1f0, var(--brand-2)); background-size: 200% 100%; transform-origin: left; animation: swoosh .9s cubic-bezier(.6, 0, .2, 1) 1s both, shimmer 4s linear 2s infinite; opacity: .35; z-index: -1; }
@keyframes swoosh { from { transform: scaleX(0); } }
@keyframes shimmer { to { background-position: -200% 0; } }
.run.small .ch { animation-delay: calc(var(--i) * 40ms + 80ms); }
.run.huge { font-size: clamp(46px, 9vw, 120px); font-weight: 900; line-height: 1.1; letter-spacing: .02em; margin: 0; color: var(--ink); }
.run.huge .line:last-child { color: var(--brand); }

/* header: scroll progress and a shadow once the page moves */
.site-header { transition: box-shadow .3s; }
.site-header.scrolled { box-shadow: 0 8px 24px rgba(14, 26, 43, .07); }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--brand), #6fb1f0); transform-origin: left; transform: scaleX(var(--p, 0)); }
.brand img { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.brand:hover img { transform: rotate(-8deg) translateY(-2px); }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--brand-2); transform: scaleX(0); transition: transform .25s; }
.nav a:hover::after { transform: scaleX(1); }
#theme svg { transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
#theme:hover svg { transform: rotate(90deg); }

/* buttons that lean toward the pointer */
.btn { transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), background .2s, border-color .2s, box-shadow .2s; }
.btn.primary:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 35%, transparent); }
.magnet { transform: translate(var(--tx, 0), var(--ty, 0)); }
.btn svg { transition: transform .25s; }
.btn:hover svg, .link:hover svg { transform: translateX(3px); }
.link svg { transition: transform .25s; }

/* hero stage: the seal balances the globe */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent 65%); animation: drift 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes drift { to { transform: translate(-8%, 10%) scale(1.1); } }
.stage { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; user-select: none; -webkit-tap-highlight-color: transparent; }
.stage::before { content: ""; position: absolute; inset: 4% 0 0 30%; border-radius: 50%; background: radial-gradient(circle at 60% 40%, var(--brand-soft), transparent 68%); }
.globe { position: absolute; left: 43%; top: 6%; width: 54%; height: 54%; transform-origin: 50% 100%; animation: balance 3.4s ease-in-out infinite; }
.seal { position: absolute; left: 0; bottom: 4%; width: 80%; transform-origin: 12% 100%; animation: bob 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes balance { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-2%); } }
@keyframes bob { 0%, 100% { transform: rotate(.6deg); } 50% { transform: rotate(-1.2deg) translateY(-1%); } }
.stage.hop .globe { animation: hop .9s cubic-bezier(.3, 0, .3, 1); }
.stage.hop .seal { animation: squash .9s ease-out; }
@keyframes hop { 0% { transform: none; } 35% { transform: translateY(-42%) rotate(200deg) scale(1.04); } 70% { transform: translateY(0) rotate(360deg); } 82% { transform: translateY(-6%) rotate(360deg); } 100% { transform: rotate(360deg); } }
@keyframes squash { 0%, 100% { transform: none; } 12% { transform: scale(1.03, .95); } 30% { transform: scale(.98, 1.04) translateY(-2%); } 70% { transform: scale(1.04, .94); } }
.poke { position: absolute; left: 2%; bottom: 4%; width: 76%; height: 50%; border: 0; background: transparent; border-radius: 40% 50% 20% 20%; cursor: pointer; }
.poke:focus-visible { outline-offset: -6px; }
.poke-count { position: absolute; right: 2%; bottom: 0; margin: 0; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--brand); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; pointer-events: none; }
.poke-count.show { opacity: 1; transform: none; }
.pop { position: absolute; pointer-events: none; font-weight: 800; color: var(--brand-2); font-size: 18px; animation: pop-up .9s ease-out forwards; }
@keyframes pop-up { to { opacity: 0; transform: translateY(-60px) scale(1.4); } }

/* numbers that count */
.num { font-variant-numeric: tabular-nums; }
.facts li { transition: background .25s; }
.facts li:hover { background: var(--bg-tint); }

/* the ticker under the hero */
.ticker { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface); padding: 18px 0; }
.ticker .track { display: flex; align-items: center; width: max-content; animation: marquee 60s linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
.ticker span { font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: .04em; white-space: nowrap; padding: 0 22px; color: var(--ink); }
.ticker .alt { color: transparent; -webkit-text-stroke: 1px var(--muted); }
.ticker img { width: 34px; height: auto; flex: none; }
.ticker i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-2); margin: 0 18px; flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* tilt and glare on cards */
.tilt { --rx: 0deg; --ry: 0deg; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, opacity .8s cubic-bezier(.2, .7, .2, 1); position: relative; }
.tilt.tilting { transition: transform .08s linear, box-shadow .3s; }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 45%); opacity: 0; transition: opacity .3s; }
.tilt.tilting::after { opacity: 1; }
.card.tilting { box-shadow: 0 24px 48px rgba(14, 26, 43, .14); }
.js .rv.tilt.in { transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); }
.card .shot img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.card:hover .shot img { transform: scale(1.04); }
.shot { overflow: hidden; }

/* page heads: streaks of light running across, like information on the wire */
.page-head { position: relative; overflow: hidden; padding: 84px 0 48px; }
.page-head .wrap { position: relative; }
.flow i { position: absolute; left: 0; height: 2px; width: 34%; border-radius: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-2) 55%, transparent), transparent); animation: streak 5s linear infinite; opacity: .7; }
.flow i:nth-child(1) { top: 18%; animation-duration: 4.2s; }
.flow i:nth-child(2) { top: 34%; animation-duration: 6.1s; animation-delay: -2s; width: 22%; }
.flow i:nth-child(3) { top: 52%; animation-duration: 3.6s; animation-delay: -1s; }
.flow i:nth-child(4) { top: 66%; animation-duration: 7s; animation-delay: -4s; width: 46%; }
.flow i:nth-child(5) { top: 80%; animation-duration: 5.2s; animation-delay: -3s; width: 18%; }
.flow i:nth-child(6) { top: 92%; animation-duration: 4.6s; animation-delay: -.5s; }
@keyframes streak { from { transform: translateX(-110%); } to { transform: translateX(320%); } }
.flow i::after { content: ""; position: absolute; right: 30%; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 12px var(--brand-2); }

/* home: the three words */
.words { list-style: none; margin: 8px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: w; }
.word { position: relative; padding: 28px 26px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.word::before { counter-increment: w; content: "0" counter(w); position: absolute; right: 18px; top: 10px; font-size: 64px; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line-strong); }
.word b { font-size: clamp(30px, 4vw, 44px); font-weight: 900; letter-spacing: .03em; background: linear-gradient(100deg, var(--ink) 40%, var(--brand-2) 50%, var(--ink) 60%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1.2s ease; }
.word:hover b, .word.in b { background-position: 0 0; }
.word small { color: var(--muted); font-size: 14px; letter-spacing: .08em; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 38px; position: relative; display: flex; flex-direction: column; gap: 18px; }
.tl-line { position: absolute; left: 12px; top: 10px; bottom: 10px; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.tl-fill { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--fill, 1) * 100%); background: linear-gradient(180deg, var(--brand-2), #6fb1f0); }
.tl-item { position: relative; }
.tl-dot { position: absolute; left: -33px; top: 22px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand-2); transition: transform .5s cubic-bezier(.3, 1.8, .5, 1) .2s, background .3s .2s; }
.js .tl-item:not(.in) .tl-dot { transform: scale(0); }
.tl-item.in .tl-dot { background: var(--brand-2); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-2) 16%, transparent); }
.tl-item.is-future .tl-dot { border-style: dashed; background: var(--surface); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand-2) 6%, transparent); } }
.tl-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px 22px; transition: transform .3s, border-color .3s, box-shadow .3s; }
.tl-card:hover { transform: translateX(6px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.is-future .tl-card { border-style: dashed; }
.tl-card h3 { font-size: 18px; margin-bottom: 6px; }
.tl-card p:last-child { margin: 0; font-size: 15px; }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.tl-meta time { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip, .badge { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
.chip.storia { background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #7c4ddb; }
.chip.group { background: color-mix(in srgb, #10b981 14%, transparent); color: #0b8a63; }
.badge.future { background: transparent; border: 1px dashed var(--brand-2); color: var(--brand-2); }
.year { position: relative; }
.year + .year { margin-top: 56px; }
.year-no { font-size: clamp(64px, 12vw, 132px); font-weight: 900; line-height: 1; margin: 0 0 24px; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); letter-spacing: .02em; position: relative; }
.year-no::after { content: attr(data-year); position: absolute; inset: 0; color: var(--brand-2); -webkit-text-stroke: 0; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.6, 0, .2, 1) .2s; }
.year-no.in::after { clip-path: inset(0 0 0 0); }

/* vision */
.slogan { position: relative; padding: 96px 0; overflow: hidden; border-bottom: 1px solid var(--line); }
.slogan .wrap { position: relative; z-index: 1; }
.streams { position: absolute; inset: 0; width: 100%; height: 100%; }
.manifesto { padding: 88px 0; }
.mf-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
.mf { padding: 32px 28px 8px 0; border-right: 1px solid var(--line); }
.mf + .mf { padding-left: 28px; }
.mf:last-child { border-right: 0; }
.mf h2 { font-size: clamp(34px, 4.6vw, 52px); font-weight: 900; margin-bottom: 14px; }
.mf-sub { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-2); margin: 0 0 4px; }
.values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.value { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 28px 28px 22px; overflow: hidden; }
.v-no { display: block; font-size: 44px; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--brand-2); margin-bottom: 14px; }
.value h3 { font-size: 22px; margin-bottom: 8px; }
.value p { margin: 0; }
.map { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.map-item { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.map-item img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); transition: transform .6s; }
.map-item:hover img { transform: scale(1.05); }
.map-item > div { padding: 18px 22px 20px; }
.map-item h3 { margin-bottom: 6px; }
.map-item p:last-child { margin: 0; font-size: 15px; }

/* technology */
.stats { margin: 0 0 56px; }
.tech-list { display: flex; flex-direction: column; }
.tech-block { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.tech-block header h2 { margin-bottom: 6px; }
.spec { margin: 0; }
.spec div { display: grid; grid-template-columns: 11em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec div:first-child { padding-top: 4px; }
.spec dt { font-weight: 600; }
.spec dd { margin: 0; color: var(--ink-2); }
.repos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.repo { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.repo a { display: flex; align-items: center; gap: 14px; padding: 18px 20px; text-decoration: none; }
.repo a > svg:first-child { width: 26px; height: 26px; color: var(--ink); }
.repo a > svg:last-child { margin-left: auto; color: var(--muted); width: 16px; }
.repo span { display: flex; flex-direction: column; min-width: 0; }
.repo b { font-size: 16px; overflow-wrap: anywhere; }
.repo small { color: var(--muted); font-size: 13px; }
.repo:hover { border-color: var(--brand-2); }

/* brand */
.rules { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
.rules li { padding-left: 18px; border-left: 3px solid var(--brand-2); }
.rules h3 { font-size: 17px; margin-bottom: 2px; }
.rules p { margin: 0; font-size: 15px; }
.mark-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.board { border-radius: var(--radius); border: 1px solid var(--line); display: grid; place-items: center; padding: 36px; aspect-ratio: 4 / 3; }
.board img { width: 78%; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.board:hover img { transform: rotate(-6deg) scale(1.05); }
.board.light { background: #ffffff; }
.board.dark { background: #0e1a2b; }
.board.dark img { filter: brightness(1.45) saturate(1.1) !important; }
.board.wm { grid-column: 1 / -1; aspect-ratio: auto; padding: 28px; background: var(--bg-tint); }
.wordmark { font-size: clamp(30px, 5vw, 48px); font-weight: 600; letter-spacing: .02em; }
.wordmark b { font-weight: 400; color: var(--muted); }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.swatch { width: 100%; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0 0 14px; overflow: hidden; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 2px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.swatch:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(14, 26, 43, .1); }
.swatch:active { transform: scale(.97); }
.chip-c { display: block; height: 96px; background: var(--c); border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.swatch b, .swatch code, .swatch small { padding: 0 14px; }
.swatch code { font-size: 13px; color: var(--ink-2); }
.swatch small { font-size: 12px; color: var(--muted); line-height: 1.5; }
.type-sample { border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; background: var(--surface); }
.ts-ja { font-size: clamp(28px, 4vw, 40px); font-weight: 900; color: var(--ink); margin-bottom: 6px; }
.ts-en { font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; color: var(--ink-2); }
.ts-meta { margin: 0; font-size: 13px; color: var(--muted); }
.downloads { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translate(-50%, 30px); opacity: 0; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px; pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* footer sea with a swimming seal (click it) */
.site-footer { position: relative; padding-top: 88px; border-top: 0; }
.sea { position: absolute; left: 0; right: 0; top: -1px; height: 64px; overflow: hidden; background: var(--bg); }
.wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 34px; fill: var(--bg-tint); animation: waves 14s linear infinite; }
.wave.w1 { opacity: .55; animation-duration: 20s; bottom: 6px; }
.wave.w2 { animation-direction: reverse; }
@keyframes waves { to { transform: translateX(-50%); } }
.swimmer { position: absolute; bottom: 10px; left: 0; width: 64px; height: auto; animation: swim 34s linear infinite, paddle 1.6s ease-in-out infinite; cursor: pointer; pointer-events: auto; z-index: 1; }
@keyframes swim { from { translate: -90px 0; } to { translate: calc(100vw + 20px) 0; } }
@keyframes paddle { 0%, 100% { transform: rotate(2deg) translateY(4px); } 50% { transform: rotate(-4deg) translateY(-1px); } }
.swimmer.jump { animation: swim 34s linear infinite, leap .9s cubic-bezier(.3, 0, .3, 1); }
@keyframes leap { 40% { transform: translateY(-46px) rotate(-30deg); } 80% { transform: translateY(4px) rotate(20deg); } }

/* hidden: the seal rain */
.rain { position: fixed; top: -80px; z-index: 95; pointer-events: none; width: 56px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(calc(100vh + 160px)) rotate(var(--r, 360deg)); } }

/* Seal Ball (game page and 404) */
.seal-game { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, var(--bg-tint), var(--surface) 70%); user-select: none; -webkit-user-select: none; }
.seal-game canvas { display: block; width: 100%; height: 380px; cursor: pointer; outline: none; }
.seal-game.full canvas { height: clamp(380px, 62vh, 620px); }
.seal-game.is-playing canvas { touch-action: none; cursor: none; }
.sg-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--muted); pointer-events: none; }
.sg-hud b { font-size: 20px; color: var(--brand); font-variant-numeric: tabular-nums; margin-left: 4px; }
.sg-hud .sg-lives { font-size: 14px; letter-spacing: 2px; color: #e5484d; }
.sg-combo { margin-left: auto; color: #d99a00; font-weight: 800; }
.sg-combo:empty { display: none; }
.sg-overlay { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(3px); animation: rise .35s ease-out; cursor: pointer; }
.sg-overlay[hidden], .sg-overlay [hidden] { display: none; }
.sg-overlay h2 { font-size: clamp(24px, 4vw, 34px); margin-bottom: 6px; }
.sg-overlay p { max-width: 460px; }
.sg-overlay .actions { justify-content: center; }
.game-page { padding: 48px 0 88px; }
.game-title { margin-bottom: 22px; }
.game-title h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 8px; }
.game-help { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.game-help h2 { font-size: 22px; }
.game-rules { margin: 0; padding-left: 1.2em; color: var(--ink-2); }
.game-rules li { margin-bottom: 6px; }
.lost-game { margin-top: 56px; }
.lost-game h2 { font-size: 22px; margin-bottom: 6px; }
@media (max-width: 760px) { .game-help { grid-template-columns: 1fr; gap: 24px; } .seal-game canvas { height: 360px; } .game-page { padding-top: 28px; } }

@media (max-width: 960px) {
  .stage { max-width: 360px; margin-top: 8px; }
  .words, .mf-words, .map, .repos { grid-template-columns: 1fr; }
  .mf { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 0 12px; }
  .mf + .mf { padding-left: 0; }
  .values { grid-template-columns: 1fr; }
  .tech-block { grid-template-columns: 1fr; gap: 16px; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .spec div { grid-template-columns: 1fr; gap: 2px; }
  .mark-boards { grid-template-columns: 1fr; }
  .page-head { padding: 56px 0 36px; }
  .slogan { padding: 64px 0; }
  .ticker { padding: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .rv, .js .rv[data-anim] { opacity: 1; transform: none; filter: none; clip-path: none; }
  .js .rv[data-anim] img { transform: none; }
  .ticker .track { animation: none; }
  .swimmer { animation: none; left: 70%; }
  .flow { display: none; }
  .tilt { transform: none !important; }
}
.center .lead { margin-left: auto; margin-right: auto; }
.flow i { opacity: .45; }
.run .w { display: inline-block; white-space: nowrap; }
:root[data-theme="dark"] img[src^="/assets/seal.png"] { filter: brightness(1.45) saturate(1.1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img[src^="/assets/seal.png"] { filter: brightness(1.45) saturate(1.1); } }

/* join us */
.open-pill { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: none; color: #0b8a63; background: color-mix(in srgb, #10b981 14%, transparent); }
.open-pill i { width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: live 1.6s ease-in-out infinite; }
.open-pill.big { margin: 0; font-size: 14px; padding: 5px 14px; }
@keyframes live { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, #10b981 22%, transparent); } }
.join-teaser-in { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; padding: 40px 44px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); background: linear-gradient(135deg, var(--brand-soft), var(--surface) 60%); }
.join-teaser h2 { font-size: clamp(26px, 3.4vw, 36px); }
.racks { display: flex; flex-direction: column; gap: 8px; }
.racks span { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); opacity: .35; transition: opacity .4s, border-color .4s; transition-delay: calc(var(--d) * 180ms + 200ms); }
.racks i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background .4s; transition-delay: inherit; }
.racks i + i { width: auto; flex: 1; height: 4px; border-radius: 2px; }
.in .racks span, .rv.in.racks span, .perk-hero.in .racks span, .join-teaser-in.in .racks span { opacity: 1; border-color: var(--brand-2); }
.in .racks i:first-child { background: #10b981; animation: live 2s ease-in-out infinite; animation-delay: calc(var(--d) * 300ms); }
.in .racks i + i { background: linear-gradient(90deg, var(--brand-2) 0 var(--w, 60%), var(--line) 0); }
.racks span:nth-child(2) i + i { --w: 35%; } .racks span:nth-child(3) i + i { --w: 80%; } .racks span:nth-child(4) i + i { --w: 20%; } .racks span:nth-child(5) i + i { --w: 55%; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.role-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 30px 30px 26px; box-shadow: var(--shadow); overflow: hidden; scroll-margin-top: 84px; }
.role-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-2); margin-bottom: 16px; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.role-icon svg { width: 26px; height: 26px; }
.role-card:hover .role-icon { transform: rotate(-8deg) scale(1.08); }
.role-card h3 { font-size: 24px; margin-bottom: 8px; }
.want { margin-top: 6px; padding: 14px 16px; border-radius: 10px; background: var(--bg-tint); }
.want b { font-size: 13px; color: var(--brand-2); }
.want p { margin: 4px 0 0; font-size: 15px; }
.perk-hero { display: grid; grid-template-columns: 1.4fr .6fr; gap: 32px; align-items: center; padding: 32px 36px; border-radius: calc(var(--radius) + 4px); background: var(--surface); border: 1px solid var(--line); margin-bottom: 20px; }
.perk-big { display: flex; gap: 24px; align-items: center; }
.perk-big > b { font-size: clamp(80px, 12vw, 132px); line-height: .9; font-weight: 900; color: var(--brand-2); letter-spacing: -.02em; }
.perk-big h3 { font-size: 22px; margin-bottom: 6px; }
.perk-big p { margin: 0; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.perk { display: flex; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.perk > svg { width: 24px; height: 24px; color: var(--brand-2); margin-top: 3px; }
.perk h3 { font-size: 17px; margin-bottom: 4px; }
.perk p { margin: 0; font-size: 15px; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; position: relative; }
.step { display: flex; gap: 16px; align-items: flex-start; }
.step-no { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--on-brand); background: var(--brand); box-shadow: 0 0 0 6px var(--brand-soft); }
.step h3 { font-size: 18px; margin: 6px 0 2px; }
.step p { margin: 0; font-size: 15px; }
.apply-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; background: linear-gradient(160deg, var(--brand-soft), var(--surface) 55%); }
.apply-box ul { margin: 0 0 22px; padding-left: 1.2em; color: var(--ink-2); }
.apply-box li { margin-bottom: 4px; }
.apply-box ul:has(+ .apply-note) { margin-bottom: 12px; }
.apply-box .must { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: .72em; font-weight: 700; line-height: 1.6; vertical-align: .1em; color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.apply-req { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.apply-req span { font-size: .8em; font-weight: 700; color: var(--ink-2); }
.apply-req b { font-size: 1.05em; }
.apply-note { margin: 0 0 22px; font-size: .85em; color: var(--ink-2); }
.faqs { display: flex; flex-direction: column; gap: 10px; }
.faq { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.faq summary { cursor: pointer; padding: 16px 20px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--brand-2); transition: transform .3s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 20px 18px; }
.faq[open] p { animation: rise .4s ease-out; }
.disclaimer { border: 1px solid var(--line-strong); border-left: 4px solid var(--brand-2); border-radius: var(--radius); padding: 24px 28px; background: var(--bg-tint); }
.disclaimer h2 { font-size: 20px; margin-bottom: 10px; }
.disclaimer ul { margin: 0 0 16px; padding-left: 1.2em; color: var(--ink-2); font-size: 15px; }
.disclaimer li { margin-bottom: 4px; }
.terms-date { color: var(--muted); font-size: 14px; }
.terms { counter-reset: none; }
.article { padding: 22px 0; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.article h2 { font-size: 19px; margin-bottom: 10px; }
.article ol { margin: 0; padding-left: 1.4em; color: var(--ink-2); }
.article li { margin-bottom: 6px; }
.terms-end { margin-top: 28px; color: var(--muted); font-size: 14px; }
@media (max-width: 960px) {
  .roles, .perks { grid-template-columns: 1fr; }
  .join-teaser-in, .perk-hero { grid-template-columns: 1fr; padding: 28px 24px; }
  .racks { max-width: 360px; }
}

/* support program */
.programs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.program { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 30px 30px 26px; box-shadow: var(--shadow); overflow: hidden; scroll-margin-top: 84px; }
.program-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.program-top b { font-size: clamp(64px, 8vw, 96px); line-height: .9; font-weight: 900; color: var(--brand-2); letter-spacing: -.02em; }
.program.personal .program-top b { color: #0b8a63; }
.program-top > span { font-weight: 700; color: var(--ink-2); }
.program h3 { font-size: 24px; margin-bottom: 8px; }
.program h4 { font-size: 14px; margin: 18px 0 8px; color: var(--brand-2); letter-spacing: .04em; }
.program .points { margin-bottom: 0; }
.need { margin: 0; padding-left: 1.2em; color: var(--ink-2); font-size: 15px; }
.need li { margin-bottom: 4px; }
.sp-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--bg-tint); font-size: 14px; }
.sp-teaser { padding-bottom: 0; }
.sp-teaser-in { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; padding: 40px 44px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); background: linear-gradient(135deg, color-mix(in srgb, #10b981 10%, var(--surface)), var(--surface) 60%); }
.sp-teaser h2 { font-size: clamp(26px, 3.4vw, 36px); }
.sp-nums { display: flex; gap: 28px; justify-content: center; }
.sp-nums div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sp-nums b { font-size: clamp(56px, 7vw, 84px); line-height: 1; font-weight: 900; color: var(--brand-2); }
.sp-nums div + div b { color: #0b8a63; }
.sp-nums span { font-size: 13px; font-weight: 600; color: var(--muted); }
@media (max-width: 960px) {
  .programs { grid-template-columns: 1fr; }
  .sp-teaser-in { grid-template-columns: 1fr; padding: 28px 24px; }
  .sp-nums { justify-content: flex-start; }
}

/* Elements waiting to slide in sit off to the side. iPhone Safari lets the page pan sideways to them
   unless the containers themselves clip, so clip at main and the footer (and the page as a fallback). */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
/* phones: nothing waits off to the side (Safari would let the page pan to it); things rise and tip instead */
@media (max-width: 760px) {
  .js .rv[data-anim="left"], .js .rv[data-anim="right"] { transform: translateY(34px); }
  .js .rv[data-anim="flip"] { transform: translateY(44px) scale(.95); }
  .js .rv[data-anim="wipe"], .js .rv[data-anim="curtain"] { transform: none; }
  /* these rules come after the general ".in" one, so end the movement again here */
  .js .rv[data-anim].in { transform: none; }
}

/* =============================================================================================
   Home page toys (static/home.js)
   ============================================================================================= */
/* the Earth: drag to spin; sideways drags spin, vertical ones still scroll the page */
.globe { cursor: grab; touch-action: pan-y; }
.globe.grabbing { cursor: grabbing; }
.stage.dragged .globe { animation-play-state: paused; }
.globe-hint { position: absolute; left: 50%; top: 0; transform: translate(-30%, -6px); width: max-content; max-width: 260px; margin: 0; padding: 6px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.stage:hover .globe-hint { opacity: 1; transform: translate(-30%, -14px); }
.stage.dragged .globe-hint { opacity: 0 !important; }
.stage.flip-seal .seal { animation: backflip 1.1s cubic-bezier(.4, 0, .2, 1); }
@keyframes backflip { 0% { transform: none; } 30% { transform: translateY(-30%) rotate(-140deg); } 60% { transform: translateY(-36%) rotate(-300deg); } 100% { transform: rotate(-360deg); } }
.stage.flip-seal .globe { animation: hop .9s cubic-bezier(.3, 0, .3, 1) .15s; }

/* greeting */
.greet { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--brand); background: var(--brand-soft); }
.greet[hidden] { display: none; }

/* a soft light and bubbles follow the pointer in the hero */
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--lx, 70%) var(--ly, 30%), color-mix(in srgb, var(--brand-2) 9%, transparent), transparent 70%); transition: background .2s; }
.hero > .wrap { position: relative; z-index: 1; }
.bubble { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--brand-2) 55%, transparent); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .8), color-mix(in srgb, var(--brand-2) 12%, transparent) 60%); transform: translate(-50%, -50%); animation: bubble 1.6s ease-out forwards; }
@keyframes bubble { 70% { opacity: .9; } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% - 110px)) scale(1.3); } }

/* fact cards flip over */
.facts.flips li { padding: 0; perspective: 800px; cursor: pointer; }
.flip-in { position: relative; height: 100%; min-height: 96px; transition: transform .7s cubic-bezier(.3, 1.3, .5, 1); transform-style: preserve-3d; }
.flip .face { position: absolute; inset: 0; padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; gap: 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .face.back { transform: rotateY(180deg); background: var(--brand); color: var(--on-brand); border-radius: inherit; }
.flip .face.back span { color: var(--on-brand); font-size: 15px; font-weight: 600; line-height: 1.5; }
.flip.flipped .flip-in { transform: rotateY(180deg); }
@media (hover: hover) { .flip:hover .flip-in, .flip:focus-visible .flip-in { transform: rotateY(180deg); } }
.facts.flips li:first-child .face.back { border-radius: var(--radius) 0 0 var(--radius); }
.facts.flips li:last-child .face.back { border-radius: 0 var(--radius) var(--radius) 0; }
/* two by two on tablets and phones: round only the outer corner of each card, and give the words room */
@media (max-width: 960px) {
  .facts.flips li .face.back { border-radius: 0; }
  .facts.flips li:nth-child(1) .face.back { border-top-left-radius: var(--radius); }
  .facts.flips li:nth-child(2) .face.back { border-top-right-radius: var(--radius); }
  .facts.flips li:nth-child(3) .face.back { border-bottom-left-radius: var(--radius); }
  .facts.flips li:nth-child(4) .face.back { border-bottom-right-radius: var(--radius); }
}
@media (max-width: 760px) {
  .facts.flips .flip-in { min-height: 128px; }
  .flip .face { padding: 18px 16px; }
  .flip .face.back span { font-size: 14px; line-height: 1.65; letter-spacing: .02em; }
  .facts b { font-size: 24px; }
  .facts li > span, .flip .face > span { font-size: 13px; line-height: 1.5; }
}

/* a seal peeks out of the service screenshots */
.shot { position: relative; }
.peek { position: absolute; right: 14px; bottom: -64px; width: 86px; height: auto; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; filter: drop-shadow(0 4px 6px rgba(14, 26, 43, .2)); }
.card:hover .peek { transform: translateY(-58px) rotate(-6deg); }
@media (hover: none) { .card .rv.in .peek, .card.in .peek { animation: peek-once 2.4s cubic-bezier(.3, 1.4, .5, 1) .6s; } }
@keyframes peek-once { 30%, 70% { transform: translateY(-58px) rotate(-6deg); } }

/* back to the top, with the seal */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 66px; height: 66px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); box-shadow: 0 10px 26px rgba(14, 26, 43, .16); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(30px) scale(.8); pointer-events: none; transition: opacity .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top img { width: 44px; margin-top: 12px; }
.to-top .ball { position: absolute; top: 9px; right: 14px; width: 11px; height: 11px; border-radius: 50%; background: var(--brand-2); animation: ball-bob 1.6s ease-in-out infinite; }
@keyframes ball-bob { 50% { transform: translateY(-5px); } }
.to-top:hover { transform: translateY(-4px); }
.to-top.launch .ball { animation: ball-launch .7s cubic-bezier(.3, 0, .3, 1); }
@keyframes ball-launch { 50% { transform: translateY(-60px) scale(1.2); } }

/* the logo spins after five clicks */
.brand.spin img { animation: logo-spin .9s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes logo-spin { to { transform: rotate(720deg); } }

@media (max-width: 760px) { .globe-hint { display: none; } .to-top { width: 56px; height: 56px; right: 14px; bottom: 14px; } .to-top img { width: 38px; } }
@media (prefers-reduced-motion: reduce) { .bubble, .hero::after { display: none; } }

/* ---------------------------------------------------------------------------------------------
 * Home: an aerial photo of Osaka behind the hero, lying flat and receding toward the top right
 * (where the Earth is), in a diagonal band. The near end fades out under the text.
 * Photo: GSI seamless aerial photos (地理院タイル), credited in .sat-credit.
 * ------------------------------------------------------------------------------------------- */
.hero-top { position: relative; }
.hero-top > .wrap { position: relative; z-index: 1; }
.hero-sat {
  position: absolute; inset: -72px 0 0 0; z-index: 0; pointer-events: none; overflow: hidden;
  /* the photo fills the whole hero and melts into the page at the bottom */
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  opacity: 0; animation: sat-in 1.6s cubic-bezier(.2, .7, .2, 1) .3s forwards;
}
/* a light veil on the left keeps the heading and text readable */
.hero-sat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 84%, transparent) 38%, color-mix(in srgb, var(--bg) 18%, transparent) 60%, transparent 76%);
}
/* the plane is turned so that "far away" points up and to the right, then laid down.
   Osaka city sits in the middle; the north (Minoh, Nose) recedes into the haze. */
.sat-turn { position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 2000 / 1900; translate: -50% -50%; rotate: 40deg; perspective: 1000px; }
.sat-plane {
  position: absolute; inset: 0; background-size: 106% auto; background-position: 50% 50%; background-repeat: no-repeat;
  transform-origin: 50% 50%; transform: rotateX(52deg);
  /* haze toward the far edge, like looking into the distance */
  -webkit-mask-image: linear-gradient(to top, #000 50%, rgba(0, 0, 0, .55) 72%, transparent 92%);
  mask-image: linear-gradient(to top, #000 50%, rgba(0, 0, 0, .55) 72%, transparent 92%);
  animation: sat-fly 80s ease-in-out infinite alternate;
}
@keyframes sat-in { from { opacity: 0; transform: translateY(24px); } to { opacity: var(--sat-o, 1); transform: none; } }
@keyframes sat-fly { from { background-position: 46% 54%; } to { background-position: 54% 46%; } }
.sat-credit { position: absolute; right: 12px; bottom: 4px; z-index: 1; margin: 0; font-size: 10px; color: var(--muted); opacity: .75; }
:root[data-theme="dark"] .sat-plane { filter: brightness(.7) saturate(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sat-plane { filter: brightness(.7) saturate(.9); } }
@media (max-width: 960px) {
  .hero-sat::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 55%, color-mix(in srgb, var(--bg) 20%, transparent) 80%, transparent 100%); }
  .sat-turn { width: 320%; }
  .sat-credit { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .sat-plane { animation: none; } .hero-sat { animation: none; opacity: var(--sat-o, 1); } }