/* Home: one lens from a city at night into one laptop and back out (zoom-real.js). Inward, each step crosses a trust
   boundary and each scale is drawn in its own drawing language: night map, site plan, elevation, floor plan, desk,
   circuit. At the heart the approval ring becomes the ring of the five core areas (research); the lens then pulls back
   to the city, where the light travels on to others (social contribution), and the night lifts to day.
   A sticky canvas sits behind the captions; the captions are ordinary text that scrolls over it. Colours come from --z-*.
   Without JS the stages are plain text on the dark surface; with reduced motion each stage gets a still picture. */
.zr {
  --z-fg: var(--paper); --z-fg2: var(--ink-300); --z-line: var(--ink-700); --z-bg-c: var(--ink-1000); --z-accent: var(--cyan-glow);
  --z-panel: color-mix(in srgb, var(--ink-950) 95%, transparent);
  overflow: clip; border-bottom: 0; background: var(--ink-1000); color: var(--z-fg);
}
.zr::before { display: none; }
.zr-view { display: none; }
.zr-canvas { display: block; width: 100%; height: 100%; }
.zr-flow { position: relative; z-index: 1; }
.zr-step { padding-block: 72px; }
.zr-step + .zr-step { border-top: 1px solid var(--ink-800); }

/* Opening: the framework headline over the city at night. */
.zr-open { max-width: 38rem; }
.zr .hero-title { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.16; }
.zr .hero-value { margin-top: 28px; color: var(--z-fg); }
.zr .hero-text { color: var(--z-fg2); }
.zr-hint { display: none; }

/* Stage captions: where the camera is, the service that works at this depth, its question, and the boundary it sits at. */
.zr-cap { max-width: 31rem; }
.zr-name { margin-top: 0; color: var(--z-fg); font: 600 clamp(28px, 2.9vw, 40px)/1.16 var(--font-display); letter-spacing: -.024em; text-wrap: balance; }
.zr-sub { margin-top: 8px; color: var(--z-fg2); font-size: 15px; line-height: 1.5; }
.zr-q { position: relative; margin-top: 28px; padding-left: 26px; color: var(--z-fg); font: 500 clamp(17px, 1.35vw, 19px)/1.55 var(--font-display); text-wrap: pretty; }
.zr-q::before { content: '\276F'; position: absolute; left: 0; top: 0; color: var(--z-accent); font-family: var(--font-mono); }
.zr-v { margin-top: 14px; padding-left: 26px; color: var(--z-fg); font: 500 16.5px/1.6 var(--font-display); text-wrap: pretty; }
.zr-a { margin-top: 8px; padding-left: 26px; color: var(--z-fg2); font-size: 15.5px; line-height: 1.75; text-wrap: pretty; }
.zr-links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 18px; padding-left: 26px; }
.zr .text-link { color: var(--z-fg); text-decoration-color: var(--z-line); }
.zr .text-link:hover { text-decoration-color: currentColor; }
html:lang(ja) :is(.zr-q, .zr-v, .zr-a) { word-break: auto-phrase; }
/* Japanese service names break only at their word boundaries (<wbr> in the terms' .br variants) and at ・ */
html:lang(ja) .zr-name { word-break: keep-all; overflow-wrap: anywhere; }
/* Research and social contribution: statements rather than a service's question, so no prompt mark. */
.zr-cap--plain .zr-q, .zr-cap--plain .zr-v, .zr-cap--plain .zr-a, .zr-cap--plain .zr-links { padding-left: 0; }
.zr-cap--plain .zr-q::before { display: none; }

/* After the last caption: room for the dawn. Only the live zoom needs it. */
.zr-end { display: none; }

/* Live: the camera follows the scroll. Each stage takes most of a screen; its caption is centred when the camera arrives. */
.zr.is-live .zr-view { display: block; position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; }
.zr.is-live .zr-step { display: flex; align-items: center; min-height: 88vh; min-height: 88svh; padding-block: 88px; border-top: 0; }
.zr.is-live .zr-step > .wrap { width: 100%; }
.zr.is-live .zr-step--open { min-height: calc(100svh - 64px); padding-block: 48px 40px; }
.zr.is-live .zr-step--open > .wrap { display: grid; grid-template-rows: 1fr auto; align-items: center; min-height: calc(100svh - 64px - 88px); }
.zr.is-live .zr-hint { display: flex; align-items: center; gap: 14px; color: var(--z-fg2); font-size: 14px; }
.zr-hint-line { width: 1px; height: 36px; background: linear-gradient(var(--z-fg2), transparent); }
/* Pacing of the round trip: one screen into the heart, about one and a half back out to the city, then the dawn. */
.zr.is-live .zr-step--core { margin-top: 12vh; margin-top: 12svh; }
.zr.is-live .zr-step--give { margin-top: 56vh; margin-top: 56svh; }
/* the dawn, then about half a screen in which the day map fades into the paper before the next section */
.zr.is-live .zr-end { display: block; min-height: 179vh; min-height: 179svh; }
/* The next section rises over the fading day map like a sheet laid on top, so there is never an empty page between
   them: it overlaps the end of the zoom by 60% of the view and feathers into the map along its top edge. */
.zr.is-live + .zr-after { position: relative; z-index: 2; margin-top: -60vh; margin-top: -60svh; border-top: 0; background: var(--paper); }
.zr.is-live + .zr-after::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 160px; pointer-events: none;
  background: linear-gradient(to top, var(--paper), color-mix(in srgb, var(--paper) 0%, transparent));
}

/* The gauge on the right edge: SAFE SQUARE, the six services in the order the camera reaches them, research at the
   heart and social contribution on the way back out. While
   scrolling only the dots show, so nothing covers the drawing; the current stage is the filled cyan dot and the caption
   names it. Hovering the gauge or moving keyboard focus into it opens all nine names at once, each on an opaque
   backing, so it reads as the page's contents; the hovered or current name is the brightest. */
.zr-gauge { display: none; }
.zr.is-live .zr-gauge {
  position: fixed; right: 28px; top: 50%; z-index: 20; display: block; transform: translateY(-50%);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.zr.is-live .zr-gauge.is-on { opacity: 1; visibility: visible; }
.zr-gauge ol { position: relative; display: grid; gap: 4px; transition: opacity .2s linear; }
.zr-gauge ol::before { content: ''; position: absolute; right: 4px; top: 12px; bottom: 12px; width: 1px; background: var(--z-line); }
.zr-gauge a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 24px; color: var(--z-fg2); font-size: 13px; line-height: 1.3; text-decoration: none; }
.zr-dot { position: relative; order: 2; flex-shrink: 0; width: 9px; height: 9px; border: 1px dashed var(--z-fg2); border-radius: 50%; background: var(--z-bg-c); transition: background-color .2s, border-color .2s; }
.zr-gauge-t {
  max-width: 15em; padding: 3px 8px 4px; border-radius: 3px; background: color-mix(in srgb, var(--z-bg-c) 96%, transparent);
  box-shadow: 0 0 0 1px var(--z-line); font-size: 12.5px; text-align: right; text-wrap: balance;
  opacity: 0; transform: translateX(4px); pointer-events: none; transition: opacity .2s, transform .2s, color .2s;
}
html:lang(ko) .zr-gauge-t { word-break: keep-all; }
html:lang(ja) .zr-gauge-t { max-width: 18em; word-break: auto-phrase; }
.zr-gauge:hover .zr-gauge-t, .zr-gauge:focus-within .zr-gauge-t { opacity: 1; transform: none; }
.zr-gauge a:hover, .zr-gauge a:focus-visible, .zr-gauge a[aria-current] { color: var(--z-fg); }
.zr-gauge a.is-past .zr-dot { border-style: solid; border-color: var(--z-fg2); background: var(--z-fg2); }
.zr-gauge a[aria-current] .zr-dot { border-style: solid; border-color: var(--z-accent); background: var(--z-accent); }

@media (max-width: 1179px) { .zr.is-live .zr-gauge { display: none; } }
/* ---------- Split layout: phones, the Fold cover and unfolded, tablets upright or near-square ----------
   The same media query is in zoom-real.js. The picture owns the top of the view (52% on phones, 58% on larger
   screens); each caption is a solid panel docked to the bottom while its stage passes, sticky within its stage, so it
   rides in from below, stays, then leaves upward and fades within a short distance (zoom-real.js). The picture fades
   to the page colour above the panel, so drawing and text never share pixels. */
@media (max-width: 599px), (max-width: 1179px) and (max-aspect-ratio: 10/9) {
  .zr.is-live .zr-step:not(.zr-step--open) {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; padding-block: 0;
  }
  .zr.is-live .zr-step:not(.zr-step--open) > .wrap { position: sticky; bottom: 0; z-index: 2; margin-top: auto; padding-inline: 0; }
  .zr.is-live .zr-cap {
    /* No scroll container here: a swipe that starts on the text must scroll the page, not the panel. The picture
       already gives the panel the height its caption needs (zoom-real.js), so nothing is cut. */
    max-width: none;
    padding: 22px 24px calc(22px + env(safe-area-inset-bottom, 0px));
    background: var(--z-panel); border-top: 1px solid var(--z-line); border-radius: 14px 14px 0 0;
    box-shadow: 0 -18px 32px -24px rgba(0, 0, 0, .7);
    transition: color .35s ease, background-color .35s ease, border-color .35s ease;
  }
  .zr.is-live .zr-cap :is(p, h2, a, span), .zr.is-live .zr-q::before { transition: color .35s ease, text-decoration-color .35s ease; }
  .zr.is-live .zr-q { margin-top: 16px; }
  .zr.is-live .zr-links { margin-top: 14px; }
  .zr.is-live .zr-step--open { padding-block: 40px 28px; }
  /* the first caption waits below the fold on the opening screen */
  .zr.is-live .zr-step--open + .zr-step { margin-top: 10svh; }
}
/* Phones and the Fold cover: a full-width sheet, type tuned from 344px up to 430px. */
@media (max-width: 599px) {
  .zr .hero-title { font-size: clamp(27px, 8.2vw, 34px); }
  /* Longer captions need time on screen: each stage gets a full screen of scroll so its caption stays docked for
     about half a screen before it leaves. */
  .zr.is-live .zr-step:not(.zr-step--open) { min-height: 100vh; min-height: 100svh; }
  .zr.is-live .zr-cap { padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .zr.is-live .zr-q { margin-top: 12px; }
  .zr.is-live .zr-links { margin-top: 10px; }
  .zr-name { font-size: clamp(22px, 6.6vw, 26px); }
  .zr-sub { margin-top: 6px; font-size: 13.5px; }
  .zr-q { padding-left: 20px; font-size: clamp(15px, 4.2vw, 16px); line-height: 1.5; }
  .zr-v { margin-top: 8px; padding-left: 20px; font-size: clamp(14px, 3.9vw, 15px); line-height: 1.55; }
  .zr-a { margin-top: 4px; padding-left: 20px; font-size: clamp(13px, 3.6vw, 14px); line-height: 1.58; }
  .zr-links { padding-left: 20px; font-size: 15px; }
  .zr-cap--plain .zr-q, .zr-cap--plain .zr-v, .zr-cap--plain .zr-a, .zr-cap--plain .zr-links { padding-left: 0; }
}
/* Unfolded Fold and upright tablets: a centred sheet, the picture keeps 58% of the view. */
@media (min-width: 600px) and (max-width: 1179px) and (max-aspect-ratio: 10/9) {
  .zr.is-live .zr-cap {
    max-width: 680px; margin-inline: auto; padding: 24px 32px calc(24px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--z-line); border-bottom: 0;
  }
  .zr-name { font-size: 30px; }
}
/* Phones held sideways: the side layout, with a narrower caption column. */
@media (max-height: 520px) and (orientation: landscape) and (min-width: 600px) {
  .zr-cap { max-width: min(31rem, 46vw); }
  .zr.is-live .zr-step { padding-block: 72px 24px; }
  .zr-name { font-size: 24px; }
  .zr-q { margin-top: 14px; font-size: 15px; }
  .zr-v { font-size: 14.5px; }
  .zr-a { font-size: 13.5px; }
}
/* After the dawn every surface of the zoom is paper with ink text. */
.zr.is-day {
  --z-fg: var(--ink-950); --z-fg2: var(--ink-600); --z-line: var(--ink-150); --z-bg-c: var(--paper); --z-accent: var(--cyan-600);
  --z-panel: color-mix(in srgb, var(--paper) 96%, transparent);
}

/* The header turns with the dawn instead of flipping: colours ease and the two logos cross-fade. */
html.zr-page .site-head { transition: color .5s ease, border-color .5s ease; }
html.zr-page .site-head::before { transition: background-color .5s ease; }
html.zr-page .site-head :is(.menu-link, .lang-switch a, .lang-switch span, .btn-contact) { transition: color .5s ease, background-color .5s ease; }
html.zr-page .site-head :is(.m-icon, .m-icon::before, .m-icon::after) { transition: transform .2s, background-color .5s ease; }
html.zr-page .site-head .brand { position: relative; }
html.zr-page .site-head .brand img { transition: opacity .5s ease; }
html.zr-page .site-head .brand-dark { display: block; position: absolute; left: 0; top: 0; opacity: 0; }
html.zr-page .site-head.is-light .brand-light { display: block; opacity: 0; }
html.zr-page .site-head.is-light .brand-dark { opacity: 1; }

/* Reduced motion: no moving camera. Caption and a still of that depth, side by side; in the split layout the still
   comes first and the caption below it, as in the live zoom. */
.zr.is-static .zr-step > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: center; }
.zr.is-static .zr-step--open > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.zr-still { border: 1px solid var(--ink-800); border-radius: 12px; overflow: hidden; }
.zr-still canvas { display: block; width: 100%; }
@media (max-width: 599px), (max-width: 1179px) and (max-aspect-ratio: 10/9) {
  .zr.is-static .zr-step > .wrap, .zr.is-static .zr-step--open > .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .zr.is-static .zr-step:not(.zr-step--open) .zr-still { order: -1; }
}

@media print { .zr-view, .zr-gauge, .zr-still { display: none; } .zr { background: none; color: var(--ink-950); } }

/* ---------- Last home block: the doorway into the service guide ----------
   A small preview of the document world the other pages live in: the dossier desk, one white sheet with the
   running-header strip and stamp, one line on what the guide is, and its four chapter groups as links. Quiet: no motion. */
.guide-entry { padding-block: 96px 104px; background: #ECEEF0; border-top: 1px solid var(--ink-150); }
.ge-sheet {
  max-width: 1120px; margin-inline: auto; background: var(--paper);
  box-shadow: 0 0 0 1px rgba(11, 12, 14, .07), 0 1px 2px rgba(11, 12, 14, .05), 0 48px 80px -56px rgba(11, 12, 14, .35);
}
.ge-run {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 24px;
  padding: 16px 56px; border-bottom: 1px solid var(--ink-150); color: var(--ink-500); font-size: 13px; line-height: 1.5;
}
.ge-run .doc-code { color: var(--cyan-500); font: 500 12.5px/1.4 var(--font-mono); letter-spacing: .02em; }
.ge-run .doc-run-title { color: var(--ink-700); text-align: center; }
.ge-run .doc-stamp {
  display: inline-flex; align-items: center; gap: 9px; justify-self: end; padding: 5px 11px;
  border: 1.5px solid var(--cyan-600); border-radius: 3px; color: var(--cyan-600);
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px color-mix(in srgb, var(--cyan-600) 40%, transparent);
  font-size: 12px; line-height: 1.3; transform: rotate(-1.5deg); white-space: nowrap;
}
.ge-run .doc-stamp-value { font: 600 12px/1.3 var(--font-mono); letter-spacing: .14em; }
.ge-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; padding: 52px 56px 60px; }
.ge-intro h2 { color: var(--ink-950); font: 600 clamp(28px, 2.9vw, 40px)/1.2 var(--font-display); letter-spacing: -.02em; }
.ge-intro p { margin-top: 18px; max-width: 30em; color: var(--ink-600); font-size: 16px; line-height: 1.75; }
html:lang(ja) .ge-intro p { word-break: auto-phrase; }
.ge-intro .actions { margin-top: 30px; }
.ge-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; align-content: start; }
.ge-group-title { padding-bottom: 9px; border-bottom: 1.5px solid var(--ink-950); color: var(--ink-950); font: 600 14px/1.4 var(--font-display); }
.ge-list a {
  display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0 10px;
  border-bottom: 1px solid var(--ink-100); color: var(--ink-800); font-size: 14.5px; line-height: 1.45; text-decoration: none;
}
.ge-list a:hover { color: var(--ink-950); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ge-code { color: var(--cyan-500); font: 500 12px/1.5 var(--font-mono); letter-spacing: .02em; }
@media (max-width: 1080px) {
  .ge-body { grid-template-columns: minmax(0, 1fr); padding: 40px 40px 48px; }
  .ge-run { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 40px; }
  .ge-run .doc-run-title { display: none; }
}
@media (max-width: 760px) {
  .guide-entry { padding-block: 56px 64px; }
  .guide-entry .wrap { padding-inline: 12px; }
  .ge-run { padding: 12px 20px; }
  .ge-run .doc-stamp { gap: 6px; padding: 4px 8px; font-size: 11px; }
  .ge-body { padding: 32px 20px 36px; gap: 36px; }
  .ge-groups { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}