/* ==========================================================================
   Reiwa Capital — Foundation (soft-gradient direction)
   Brand inspo: warm cream → soft blue gradient, DM Sans sans-serif,
   minimal rounded cards, Sumire purple ink, generous whitespace.
   ========================================================================== */

:root {
  --paper:        #FFFFFF;            /* base */
  --paper-warm:   var(--cream);      /* warm white cream (→ canonical) */
  --paper-soft:   #F7F2E8;            /* very faint cream */
  --ink:          var(--plum);        /* Sumire purple — primary text (→ canonical) */
  --ink-2:        #4F4458;
  --ink-3:        #6E637A;            /* lifted to ≥4.5:1 on cream (was #807388) */
  --ink-4:        #928799;            /* lifted for separators/placeholders (was #B0A8B7) */
  --rule:         var(--hairline);                 /* base divider (→ canonical) */
  --rule-soft:    rgba(39, 20, 48, 0.06);          /* retained: fainter-than-hairline variant */
  --rule-strong:  rgba(39, 20, 48, 0.22);          /* retained: emphasis rule / link underlines */
  --rule-inverse: var(--hairline-light);           /* on-plum divider (→ canonical) */

  /* ── Spacing — ONE 8-based scale. Nothing lives outside it. ───────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;

  /* ── Vertical rhythm — ONE section token, used by every page band. ─ */
  --section:       clamp(80px, 6vw, 96px);
  --section-tight: clamp(60px, 5vw, 88px);
  /* Legacy aliases kept so existing references resolve to the one scale. */
  --sp-section:    var(--section);
  --sp-closing:    var(--section);
  --sp-home:       var(--section);
  --sp-section-sm: var(--section-tight);

  /* ── Typographic vertical rhythm — the gaps BETWEEN type, each mapped onto
     the 8-scale so no relationship carries an arbitrary margin. One system:
     label→heading · heading→body · body→body · body→closing meta. ────── */
  --flow-label:   var(--space-2);   /*  8px — eyebrow / label to its heading   */
  --flow-heading: var(--space-4);   /* 24px — heading to first paragraph        */
  --flow-para:    var(--space-4);   /* 24px — paragraph to paragraph            */
  --flow-caption: var(--space-2);   /*  8px — caption to the divider it follows */
  --flow-meta:    var(--space-6);   /* 48px — body block to the closing meta    */

  /* ── Page head — ONE entrance spec (type may vary per page, space never). */
  --head-top:    clamp(76px, 7vw, 104px);
  --head-bottom: clamp(52px, 4.5vw, 68px);

  /* ── Editorial spine — one rail + gutter for the label/body device.
     Formalised onto the twelve-column grid below: rail = 3 cols, body =
     9 cols, --rail-gap is the shared column gutter. ─────────────────── */
  --rail:     200px;
  --rail-gap: 64px;
  --grid-cols: 12;

  /* ── Container — ONE frame for the whole product (site + portal). Page
     margin scales in three bands — desktop 72–96 · tablet 32–40 ·
     mobile 20–24 — via the media queries just below this block. ─────── */
  --container: 1240px;
  --gutter:    clamp(72px, 5.8vw + 13px, 96px);

  /* ── Image ratios — the only crops imagery may take. ───────────── */
  --ratio-portrait:  4 / 5;
  --ratio-landscape: 3 / 2;
  --ratio-band:      16 / 9;

  /* Breakpoints (CSS vars can't be used in @media; for reference only):
     desktop→tablet 1024 · tablet→mobile 760 · small 420 */
}
@media (max-width: 1024px) { :root { --gutter: clamp(32px, 3vw + 9px, 40px); } }
@media (max-width: 760px)  { :root { --gutter: clamp(20px, 1vw + 16px, 24px); --section: clamp(64px, 10vw, 96px); } }

html { background: var(--paper-warm); margin: 0; padding: 0; overscroll-behavior-y: none; }
body { background: var(--paper-warm); margin: 0; padding: 0; overscroll-behavior-y: none; }
/* No-JS fallback — shell.js builds the real header/footer from script, so if
   JavaScript is blocked or fails, those hosts stay empty. This bar is the
   only thing that ever shows it (invisible whenever JS runs normally) and
   is not the approved footer, so the "no navigation list in the footer"
   rule is untouched — it just guarantees every page keeps working without
   JS: identity, all five pages + Privacy, email, LinkedIn. */
.noscript-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 16px var(--gutter); background: var(--paper-warm); border-bottom: 1px solid var(--rule-strong); font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--ink); }
.noscript-bar strong { font-weight: 500; }
.noscript-bar nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.noscript-bar a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.noscript-bar a:hover { color: var(--ink-2); }
body {
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--ink);
  font-size: var(--type-body);
  line-height: 1.55;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }

/* Ground — a single flat warm-cream field sitewide. No per-page ambient
   colour wash: the identity carries through photography, ink and the
   restrained brand devices below, not a decorative gradient behind
   content (Anti-template audit — removed the "blurred colour field"
   pattern entirely, rather than retune it). */
body {
  position: relative;
  background-color: var(--paper-warm);
}
@media print { body::before { display: none; } }

/* Fine static grain — painted as body's own texture, never animated.
   Absolutely positioned against body's own box (not fixed), so it scrolls
   with the page and always spans the full document height rather than
   one viewport. Sits under every opaque section (hero, page-head,
   next-chapter, footer, photography), which simply paint over it. */
body::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}



.positioning, .identity, .responsibilities, .assessment, .contact-body { position: relative; z-index: 0; overflow: hidden; }
/* Local ambient blockers — the dense process rail and assessment grid,
   plus photography (opaque by nature), sit on a fully opaque ground so
   the fixed colour fields never show through a rail of numbers or a
   grid, and never compete with an image. Same token as the page ground,
   so there is no visible seam. */
.process-list, .assess-grid { position: relative; background: var(--paper-warm); }


/* Typographic discipline — sitewide, all breakpoints: headings never wrap
   into an unbalanced rag or leave a widow; running paragraphs never leave a
   single-word orphan on the last line. */
main h1, main h2, main h3 { text-wrap: balance; hyphens: none; }
p { text-wrap: pretty; }
.df-mail, .cd-v a { white-space: nowrap; }

/* =====================================================================
   NAV (overrides shell.js base)
   ===================================================================== */
/* The shell injects the nav into this wrapper. Without display:contents the
   wrapper box is only as tall as the nav, so position:sticky unsticks as soon
   as it scrolls past — promote the nav to a direct child of <body>. */
[data-shell="nav"] { display: contents; }

.nav-bar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 246, 238, 0.68);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
          backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 0;
}
.nav-right { display: inline-flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  /* Row height is driven by .lang-toggle (45.5px — its buttons carry a 44px
     min-height tap-target floor), NOT by the 30px logo. Solve padding
     against that: 14 + 45.5 + 14 = 73.5px, mid-band. */
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
}
/* Header separator — content-aligned hairline on the same grid. */
.nav-inner::after {
  content: "";
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0;
  height: 1px;
  background: var(--rule);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out);
}
.nav-bar.header-past-threshold .nav-inner::after { opacity: 1; }
html.nav-drawer-open .nav-inner::after { opacity: 0; }
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { height: 30px; display: block; }
/* Drawer open: dissolve the bar chrome. The wordmark + language toggle
   hide; the X (the morphed toggle) stays put on the right where the
   parallel bars were; the emblem lives centred inside the panel. */
html.nav-drawer-open .nav-bar {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom-color: transparent;
}
html.nav-drawer-open .nav-logo { visibility: hidden; }
html.nav-drawer-open .logo-light { display: none !important; }
html.nav-drawer-open .lang-toggle { display: none; }
html.nav-drawer-open .nav-bar .nav-toggle { color: var(--ink); }
/* While the drawer (a true-right-edge panel) is open, let the toggle
   escape the centred, max-width nav row and sit flush with the same true
   right edge — so the X lines up with the drawer's own content below it
   instead of stopping at the container's inset gutter. */
html.nav-drawer-open .nav-bar .nav-inner { max-width: none; padding-right: 36px; }
@media (max-width: 720px) { html.nav-drawer-open .nav-bar .nav-inner { padding-right: var(--gutter); } }

.nav-right { display: flex; align-items: center; gap: 12px; }
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  overflow: hidden;
  border-radius: var(--radius-pill);
}
.lang-toggle button {
  font: inherit;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--type-label-ls);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  color: var(--ink-3);
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.lang-toggle button.is-active { background: var(--ink); color: #fff; }

/* =====================================================================
   LANGUAGE SWITCH — "EN | JA". Two text buttons either side of a short
   hairline. The active language is ink at medium weight; the other is
   quiet. No pill, no fill, no border: it should never compete with the
   logo. Tap targets stay comfortable through padding, not visible bulk.
   ===================================================================== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.lang-switch button {
  font: inherit;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 34px;
  padding: 0 6px;
  margin: 0;
  background: transparent;
  color: var(--ink-3);
  border: 0;
  border-radius: 1px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 200ms var(--ease-out);
}
.lang-switch button.is-active { color: var(--ink); font-weight: 500; cursor: default; }
@media (hover: hover) { .lang-switch button:not(.is-active):hover { color: var(--ink-2); } }
.lang-switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lang-switch .ls-sep {
  display: block;
  width: 1px;
  height: 12px;
  background: var(--rule-strong);
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) { .lang-switch button { transition: none; } }

/* =====================================================================
   PRIMARY NAV LINKS — six destinations, visible at every width.
   No hamburger and no drawer on the English site: the reader can always
   see where the site goes. One <ul>, repositioned by CSS.

     >=1101px   logo | links | language toggle, on a single line
     <=1100px   logo + toggle on line one; the links wrap to their own
                full-width second line and scroll horizontally

   The active page carries a solid 1px rule; hover draws the same rule in
   from the left. No pills, no boxes, no background states.
   ===================================================================== */
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(17px, 1.75vw, 30px);
  order: 2;
  flex: 0 1 auto;
}
.nav-links li { display: block; }
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 0.3vw + 11.7px, 14.5px);
  font-weight: 400;
  letter-spacing: 0.004em;
  line-height: 1.2;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms var(--ease-out);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--ease-out);
}
@media (hover: hover) {
  .nav-links a:hover { color: var(--ink); }
  .nav-links a:hover::after { transform: scaleX(1); }
}
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 1px; }
@media (prefers-reduced-motion: reduce) {
  .nav-links a, .nav-links a::after { transition: none; }
}

/* Over the dark home hero the whole row inverts, matching the white
   lockup swap craft.js performs on the same class. */
.nav-bar.nav-over-hero .nav-links a { color: rgba(255, 255, 255, 0.78); }
.nav-bar.nav-over-hero .nav-links a[aria-current="page"] { color: #fff; }
@media (hover: hover) { .nav-bar.nav-over-hero .nav-links a:hover { color: #fff; } }
.nav-bar.nav-over-hero .nav-links a:focus-visible { outline-color: #fff; }
.nav-bar.nav-over-hero .lang-switch button { color: rgba(255, 255, 255, 0.62); }
.nav-bar.nav-over-hero .lang-switch button.is-active { color: #fff; }
@media (hover: hover) { .nav-bar.nav-over-hero .lang-switch button:not(.is-active):hover { color: rgba(255, 255, 255, 0.86); } }
.nav-bar.nav-over-hero .lang-switch button:focus-visible { outline-color: #fff; }
.nav-bar.nav-over-hero .lang-switch .ls-sep { background: rgba(255, 255, 255, 0.34); }

/* The nav row is the flex line; the logo opens it and the language
   toggle closes it. */
.nav-logo { order: 1; }
.nav-right { order: 3; }
.nav-inner { flex-wrap: wrap; row-gap: 0; }

/* ---- Two-line navigation below 1101px -------------------------------
   The four links drop to their own full-width line beneath the logo and
   language switch. Nothing scrolls, nothing clips: at every supported
   width all four labels are visible. If a very narrow viewport cannot fit
   them on one line at readable size, the row wraps to two lines rather
   than shrinking the type or hiding a destination. */
@media (max-width: 1100px) {
  .nav-inner {
    column-gap: 16px;
    row-gap: 0;
    padding-top: 8px;
    padding-bottom: 0;
  }
  /* The logo and the language switch share line one; the links take line
     two. Both must sit before the link row in flex order, or the switch is
     pushed onto a third line by the row's 100% basis. */
  .nav-logo { order: 1; }
  .nav-right { order: 2; margin-left: auto; }
  .nav-links {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px clamp(16px, 5.2vw, 30px);
    margin: 8px 0 0;
    padding: 10px 0 9px;
    border-top: 1px solid var(--rule);
  }
  /* Design lab · Nav 1 + 3: the wrapped row is centred rather than ranged
     left, and each label reaches a 40px target while the bar loses ~6px. */
  .nav-links a { min-height: 40px; padding: 1px 0; font-size: 13.5px; }
  /* The links row now owns the bar's bottom edge, so the scroll hairline
     would double up on it. */
  .nav-bar.header-past-threshold .nav-inner::after { opacity: 0; }
  /* Over the home hero the divider needs to read on dark. */
  .nav-bar.nav-over-hero .nav-links { border-top-color: rgba(255, 255, 255, 0.22); }
}

/* Narrowest phones (≤340px): four labels will not sit on one line at a
   readable size, and a natural wrap leaves Company stranded alone on a
   second line. Compose it instead: a deliberate 2 × 2 with the columns
   aligned, so the row reads as a small, ordered index rather than a spill. */
@media (max-width: 340px) {
  .nav-links {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: clamp(22px, 8vw, 36px);
    row-gap: 0;
    justify-content: start;
    padding-top: 6px;
    padding-bottom: 8px;
  }
  .nav-links li { display: block; }
  .nav-links a { min-height: 40px; }
}

/* Design lab · Nav 2: the bar is measured whole (see craft.js), so the link
   row and the language switch dip out together with the logo while the hero
   headline passes behind the bar — previously the logo left on its own. */
.nav-bar.nav-over-hero .nav-links, .nav-bar.nav-over-hero .nav-right,
.nav-bar.nav-over-head .nav-links, .nav-bar.nav-over-head .nav-right { transition: opacity 140ms var(--ease-out); }
.nav-bar.logo-needs-contrast .nav-links, .nav-bar.logo-needs-contrast .nav-right { opacity: 0; pointer-events: none; }

/* Mobile logo: the lockup is the Home control but should not dominate the
   bar. Roughly a sixth smaller than desktop, and a touch smaller again on
   the narrowest phones. */
@media (max-width: 760px) {
  .nav-logo img { height: 25px; }
  /* Design lab · Nav 2: the row above now carries the bar's lower air. */
  .nav-inner { padding-top: 8px; padding-bottom: 0; }
}
/* Coarse pointers get the same 40px target the wrapped row uses. */
@media (hover: none) { .nav-links a { min-height: 40px; } }
@media (max-width: 380px) {
  .nav-logo img { height: 22px; }
}

/* Touch targets: comfortable without inflating the bar or shrinking type. */
@media (hover: none) {
  .nav-links a { min-height: 34px; }
}

/* =====================================================================
   FOOTER — the final moment. A deep sumire banner carries the mark in
   cream; one quiet baseline row beneath it. No link list, no legal wall.
   Content is visible by default — never gated on an animation.
   ===================================================================== */
.footer {
  background: var(--ink);
  color: var(--paper-warm);
  margin-top: 0;
  border-top: 0;
  position: relative;
}
/* =====================================================================
   DIVIDER SYSTEM — every section separator rides the global content
   grid. One weight (1px), one colour (--rule, ~10% charcoal), one inset.
   Section borders are declared per-page in inline <style>; we neutralise
   them here (!important) and draw a centred hairline pseudo-element that
   begins and ends on the --container grid. Internal row dividers already
   sit inside the container and are left alone.
   ===================================================================== */
.page-head,
.positioning {
  border-top: 0 !important;
  border-bottom: 0 !important;
  position: relative;
}
.page-head::after,
.positioning::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(100% - 2 * var(--gutter), var(--container));
  height: 1px;
  background: var(--rule);
  pointer-events: none;
}
/* =====================================================================
   ONWARD NAVIGATION — a standalone block on cream between the page and the
   footer. Its own section, not footer furniture: one label, one destination,
   the whole band clickable. A single hairline and one quiet arrow — no
   card, no button, no enclosure. Hover/focus adds only a faint tone shift.
   ===================================================================== */
.nextnav { position: relative; background: var(--paper-warm); }
.nextnav::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: min(100% - 2 * var(--gutter), var(--container));
  height: 1px;
  background: var(--rule);
  pointer-events: none;
}
.nn-link { display: block; height: 180px; text-decoration: none; background: var(--paper-warm); transition: background 220ms var(--ease-out); }
.nn-link:hover, .nn-link:focus-visible { background: var(--paper-soft); }
.nn-inner {
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 32px;
  align-items: baseline;
  align-content: center;
  justify-content: end;
  text-align: right;
}
.nn-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(22px, 1vw + 12px, 28px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--ink);
  transition: transform 280ms var(--ease-out);
}
/* Japanese keeps its own leading and tracking here, but no longer its own
   size: the size that used to live on this rule was written for the compact
   Japanese NEXT block that no longer exists, and its specificity was beating
   the band rule below — a 25% EN/JA gap nobody chose. */
html[lang="ja"] .nn-title { font-size: clamp(28px, 1.9vw + 18px, 46px); line-height: 1.32; letter-spacing: 0.01em; }
.nn-title-row { grid-column: 2; justify-self: end; display: flex; align-items: baseline; gap: 8px; }
.nn-arrow { display: inline-block; flex: none; transition: transform 200ms var(--ease-out); }
/* Arrow moves; the title never does. One text-link language site-wide. */
.nn-link:hover .nn-arrow, .nn-link:focus-visible .nn-arrow { transform: translateX(4px); }
.nn-link:focus-visible { outline: 2px solid var(--ink); outline-offset: -8px; }
@media (prefers-reduced-motion: reduce) { .nn-arrow, .nn-link { transition: none; } }

/* =====================================================================
   EDITORIAL ATOMS — established on Home and shared from there: eyebrow,
   section heading, body copy, the numbered Index mark and the arrow.
   ===================================================================== */
.h-eyebrow { display: block; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; color: var(--eyebrow-ink); margin: 0; }
.h-h2 { font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: clamp(26px, 18px + 1.4vw, 38px); line-height: 1.15; letter-spacing: -0.014em; color: var(--ink); margin: 0; text-wrap: pretty; }
.h-body { font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: clamp(16px, 15.2px + 0.25vw, 17.5px); line-height: 1.6; color: var(--ink-2); margin: 0; }
/* The Index — a numeral led by a small filled sumire square. The one
   brand mark that runs through the numbered sections. */
.h-num { display: inline-flex; align-items: center; gap: 9px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.h-num::before { content: ""; display: inline-block; width: 4px; height: 4px; background: var(--reiwa-node, #5E3D78); flex: none; }
/* Design lab · one arrowhead drawing everywhere: 1.4 stroke, round cap,
   round join. Sizes, positions and hover motion are unchanged. */
.h-arrow, .nn-arrow, .hi-dia .d-arrow { stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.h-arrow { display: inline-block; flex: none; transition: transform 220ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .h-arrow { transition: none; } }

/* ---------------------------------------------------------------------
   NEXT BAND (English site) — the onward link as a full-width editorial
   transition on warm cream, directly above the deep sumire footer. One
   kicker, one destination, one short contextual line, one arrow. The whole
   block is the link. Hover moves only the arrow and warms the ground a
   shade. No fill, no button, no card, no rounded corners.
   --------------------------------------------------------------------- */
.nextnav--band { background: var(--paper-warm); border-top: 1px solid var(--rule); }
.nextnav--band::before { content: none; }
.nextnav--band .nn-link { height: auto; display: block; background: transparent; text-decoration: none; transition: background 260ms var(--ease-out); }
.nextnav--band .nn-link:hover, .nextnav--band .nn-link:focus-visible { background: var(--paper-soft); }
.nextnav--band .nn-inner {
  display: grid;
  /* Design lab · the text block is ranged right and the arrow follows it,
     so the band closes the page on the same edge the reader leaves on. */
  grid-template-columns: auto auto;
  column-gap: 40px;
  align-items: end;
  justify-content: end;
  text-align: right;
  height: auto;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(60px, 7vw, 100px) var(--gutter);
}
.nn-text { display: block; min-width: 0; }
.nextnav--band .nn-text { justify-self: end; }
.nn-kicker { display: block; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; color: var(--eyebrow-ink); margin-bottom: clamp(16px, 1.8vw, 24px); }
/* Capped at 46px: at the old 58px ceiling this onward-navigation affordance
   was set larger than the H1 of the page it sits under. */
.nextnav--band .nn-title { display: block; font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: clamp(32px, 20px + 1.8vw, 46px); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); }
.nn-lead { display: block; margin-top: clamp(12px, 1.4vw, 18px); font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: clamp(16px, 15px + 0.3vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.nextnav--band .nn-arrow { display: block; width: 44px; height: 24px; color: var(--ink); align-self: end; margin-bottom: 10px; transition: transform 240ms var(--ease-out); }
.nextnav--band .nn-link:hover .nn-arrow, .nextnav--band .nn-link:focus-visible .nn-arrow { transform: translateX(8px); }
.nextnav--band .nn-link:focus-visible { outline: 2px solid var(--ink); outline-offset: -8px; }
@media (max-width: 768px) {
  .nextnav--band .nn-inner { grid-template-columns: 1fr; padding: 52px var(--gutter) 56px; row-gap: 0; }
  .nextnav--band .nn-title { font-size: clamp(32px, 7.5vw, 40px); }
  /* Design lab · single column keeps the right edge: the arrow takes its own
     row beneath the text rather than returning to the left margin. */
  .nextnav--band .nn-arrow { grid-column: 1; justify-self: end; margin: 26px 0 0; width: 40px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .nextnav--band .nn-link, .nextnav--band .nn-arrow { transition: none; } }

/* =====================================================================
   FOOTER — legal identity only. Three-column row on the deep sumire
   ground: copyright left, standalone symbol mathematically centred via
   1fr auto 1fr, Privacy right. No link list, no socials, no wordmark. */
.footer-inner {
  max-width: var(--container);
  height: 84px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ff-copy { font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 400; line-height: 1.4; letter-spacing: 0.01em; color: rgba(252,250,241,0.78); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ff-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; text-decoration: none; z-index: 1; }
.ff-symbol { display: block; height: 26px; width: auto; opacity: 0.92; transition: opacity 220ms var(--ease-out); }
.ff-brand:hover .ff-symbol { opacity: 1; }
/* English footer — deep sumire, quiet, functional. Copyright left,
   LinkedIn and Privacy right. No symbol, no wordmark, no navigation, no
   location line. It sits directly beneath the NEXT band, which is also
   dark, so the two are kept apart deliberately: the footer is a step
   deeper in tone, a fraction of the height, and carries only small
   utility type, with one faint hairline marking the join. The Japanese
   footer keeps the treatment it shipped with until its own phase. */
.footer.footer-quiet {
  background: #1C0E23;
  color: var(--paper-warm);
  border-top: 1px solid rgba(252, 250, 241, 0.13);
}
/* Design lab · the cream emblem returns to the quiet footer, mathematically
   centred between the copyright and Privacy. LinkedIn is gone. */
.footer-quiet .footer-inner { height: 72px; position: relative; }
.footer-quiet .ff-symbol { height: 22px; }
.footer-quiet .ff-copy { color: rgba(252, 250, 241, 0.60); font-size: 12px; }
.footer-quiet .ff-link { color: rgba(252, 250, 241, 0.60); font-size: 12px; }
.footer-quiet .ff-link:hover,
.footer-quiet .ff-link[aria-current="page"] { color: var(--paper-warm); }
.footer-quiet :focus-visible { outline-color: var(--paper-warm); }
@media (max-width: 768px) {
  .footer-quiet .footer-inner { height: 62px; }
  .footer-quiet .ff-copy, .footer-quiet .ff-link { font-size: 11.5px; }
}
/* Right-hand side: Privacy alone. One link, no list. */
.ff-right { display: flex; align-items: center; gap: clamp(18px, 2vw, 28px); }
.ff-link {
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 400; line-height: 1.4; letter-spacing: 0.01em;
  color: rgba(252,250,241,0.78); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px; margin: -16px 0;
  transition: color 220ms var(--ease-out);
}
.ff-link:hover, .ff-link[aria-current="page"] { color: var(--paper-warm); }
.ff-jalinks { max-width: var(--container); margin: 0 auto; padding: 22px var(--gutter) 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.ff-jalinks a { font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 400; letter-spacing: 0.01em; color: rgba(252,250,241,0.72); text-decoration: none; transition: color 220ms var(--ease-out); }
.ff-jalinks a:hover { color: var(--paper-warm); }
@media (max-width: 768px) { .ff-jalinks { padding-top: 18px; gap: 8px 16px; } }
/* Touch: give the small footer links a comfortable target without changing
   their type size or the footer's height. */
@media (hover: none) {
  .ff-jalinks a, .ff-link { display: inline-flex; align-items: center; min-height: 44px; }
  .ff-jalinks { gap: 0 20px; padding-top: 10px; }
}

@media (max-width: 768px) {
  .nn-link { height: auto; }
  .nn-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    padding: 32px var(--gutter);
  }
  .nn-title {
    font-size: clamp(32px, 3.6vw + 20px, 40px);
    line-height: 1.12;
    text-wrap: balance;
  }
  html[lang="ja"] .nn-title { font-size: clamp(27px, 3vw + 16px, 34px); line-height: 1.4; }
  .nn-title-row { grid-column: 1; }
  .nn-link:focus-visible { outline-offset: -4px; }
  .footer-inner { height: 72px; }
  .ff-copy, .ff-link { font-size: 11.5px; }
  .ff-symbol { height: 21px; }
}
@media (max-width: 340px) {
  .footer-inner { padding: 0 16px; }
}

/* =====================================================================
   SHARED LAYOUT
   ===================================================================== */
/* Sticky footer — short pages (Contact, Privacy) still fill the viewport;
   the dark footer always sits at the bottom edge. */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
.shell, .ed-shell {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Eyebrow */
.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--type-eyebrow);
  font-weight: 500;
  line-height: var(--type-eyebrow-lh);
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--eyebrow-ink);
}

/* Body lede */
.lede {
  font-size: var(--type-body-l);
  line-height: var(--type-body-l-lh);
  letter-spacing: var(--type-body-l-ls);
  color: var(--ink-2);
  max-width: var(--measure-lead);
  margin: 0;
}

/* =====================================================================
   LINK — ONE tertiary link treatment. A quiet 2px underline in
   rule-strong that wipes to ink on hover.
   ===================================================================== */
.link {
  font-size: var(--type-caption);
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  transition: border-color var(--dur-2) var(--ease-out);
}
.link:hover { border-color: var(--ink); }

/* =====================================================================
   PAGE HEAD (inner pages — restrained, paper, hairline only)
   ===================================================================== */
.page-head {
  position: relative;
  background: var(--paper);
  padding: 0;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.page-head::after { content: none; }
body[data-page="about"] .page-head,
body[data-page="approach"] .page-head,
body[data-page="focus"] .page-head { border-bottom: 1px solid var(--rule-strong); }
.page-head .inner {
  position: relative;
  z-index: 2;
  text-align: left;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--head-top) var(--gutter) var(--head-bottom);
}
.page-head .marker {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--type-eyebrow-ls);
  line-height: var(--type-eyebrow-lh);
  text-transform: uppercase;
  color: var(--eyebrow-ink);
  margin-bottom: 96px;
}
.page-head .marker .dot { width: 5px; height: 5px; border-radius: var(--radius-sm); background: var(--ink); }
.page-head h1 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: var(--type-page-title);
  line-height: var(--type-page-title-lh);
  letter-spacing: var(--type-page-title-ls);
  color: var(--ink);
  margin: 0;
  text-indent: var(--optical-cap);   /* optical: cap glyph onto the true left grid line */
  max-width: 16ch;
}
.page-head h1 em { font-style: normal; color: var(--ink-3); }

/* Art-directed hero washes — pale architectural imagery behind the page
   title. A left-weighted cream scrim keeps the dark headline crisp; a
   bottom fade settles the image into the foot band. Scoped per page. */
body[data-page="contact"] .page-head,
body[data-page="company"] .page-head {
  min-height: 32vh;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}
/* About / Approach / Investment Focus — one full-bleed hero, tucked under
   the transparent nav to the true top of the viewport (same technique as
   the home hero). Condensed to ~460–540px total on desktop, including the
   header zone, and scaled down at tablet/mobile. */
body[data-page="about"] .page-head,
body[data-page="approach"] .page-head,
body[data-page="focus"] .page-head {
  --head-h: clamp(260px, 21vw, 300px);
  margin-top: calc(var(--nav-h, 74px) * -1);
  min-height: calc(var(--head-h) + var(--nav-h, 74px));
  display: flex;
  align-items: flex-end;
  border-bottom: 0;
}
@media (max-width: 1024px) {
  body[data-page="about"] .page-head,
  body[data-page="approach"] .page-head,
  body[data-page="focus"] .page-head { --head-h: clamp(250px, 24vw, 285px); }
}
@media (max-width: 760px) {
  body[data-page="about"] .page-head,
  body[data-page="approach"] .page-head,
  body[data-page="focus"] .page-head { --head-h: clamp(220px, 32vw, 250px); }
}
@media (max-width: 420px) {
  body[data-page="about"] .page-head,
  body[data-page="approach"] .page-head,
  body[data-page="focus"] .page-head { --head-h: clamp(200px, 44vw, 230px); }
}
body[data-page="about"] .page-head .inner,
body[data-page="approach"] .page-head .inner,
body[data-page="focus"] .page-head .inner {
  padding: calc(var(--nav-h, 74px) + 56px) var(--gutter) clamp(40px, 4vw, 52px);
}
/* Inner-page heads: About and Investment Focus carry a sharp photograph
   beneath a warm cream scrim — dark title on the cream-heavy left, the
   image reading through to the right (same photography used elsewhere on
   each page, echoed here). Approach and Contact stay on clean paper. */
body[data-page="about"] .page-head,
body[data-page="approach"] .page-head,
body[data-page="focus"] .page-head {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
body[data-page="about"] .page-head {
  background-image:
    linear-gradient(100deg, rgba(252,250,241,0.80) 0%, rgba(252,250,241,0.60) 18%, rgba(252,250,241,0.40) 36%, rgba(252,250,241,0.24) 54%, rgba(252,250,241,0.13) 72%, rgba(252,250,241,0.07) 100%),
    url("assets/imagery/about-hero-blur.webp");
}
body[data-page="approach"] .page-head {
  background-image:
    linear-gradient(100deg, rgba(252,250,241,0.80) 0%, rgba(252,250,241,0.60) 18%, rgba(252,250,241,0.40) 36%, rgba(252,250,241,0.24) 54%, rgba(252,250,241,0.13) 72%, rgba(252,250,241,0.07) 100%),
    url("assets/imagery/approach-hero-blur.webp");
}
body[data-page="focus"] .page-head {
  background-image:
    linear-gradient(100deg, rgba(252,250,241,0.80) 0%, rgba(252,250,241,0.60) 18%, rgba(252,250,241,0.40) 36%, rgba(252,250,241,0.24) 54%, rgba(252,250,241,0.13) 72%, rgba(252,250,241,0.07) 100%),
    url("assets/imagery/focus-hero-blur.webp");
}
.page-head .ja {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--font-jp);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
/* Load fade for the CSS hero washes — the one image type initImageFades
   can't reach (Motion audit D1). A paper cover sits over the wash and fades
   out once craft.js has decoded the image (html.bg-loaded). Gated on
   html.bg-fade (JS-set), so no-JS and reduced-motion render instantly; the
   headline sits at z-index 2 and is never covered. */
html.bg-fade body[data-page="about"] .page-head::before,
html.bg-fade body[data-page="approach"] .page-head::before,
html.bg-fade body[data-page="focus"] .page-head::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--paper);
  opacity: 1;
  transition: opacity var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
  pointer-events: none;
}
html.bg-fade.bg-loaded body[data-page="about"] .page-head::before,
html.bg-fade.bg-loaded body[data-page="approach"] .page-head::before,
html.bg-fade.bg-loaded body[data-page="focus"] .page-head::before { opacity: 0; }

/* =====================================================================
   EDITORIAL SECTION HELPERS
   ===================================================================== */
.ed-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--rail-gap);
  align-items: baseline;
}
.ed-row > :first-child { grid-column: span 3; }
.ed-row > :last-child { grid-column: span 9; }
.ed-row + .ed-row { margin-top: 80px; }
.ed-row .eyebrow { padding-top: 6px; display: block; }
.ed-row h2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: var(--type-h2);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.ed-row h2 em { font-style: normal; color: var(--ink-3); }
/* Neutralise the design-system generic `.body` background/typography collision */
.ed-row .body { background: transparent; color: inherit; font-size: inherit; line-height: inherit; }
.ed-row .body p {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: var(--type-statement);
  line-height: var(--type-statement-lh);
  letter-spacing: var(--type-statement-ls);
  color: var(--ink);
  margin: 0 0 var(--flow-para);
  max-width: var(--measure-lead);
}
.ed-row h2 em { font-style: normal; color: var(--ink-3); }
.ed-row .body p.tail {
  margin-top: var(--flow-para);
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: var(--ink-2);
  letter-spacing: 0;
  max-width: var(--measure);
}
.ed-row .body p em { font-style: normal; color: var(--ink-3); }

@media (max-width: 1024px) {
  .ed-row { grid-template-columns: 1fr; gap: 16px; }
  .ed-row + .ed-row { margin-top: 56px; }
}

/* Reveal class retained for markup compatibility; content always visible */
.reveal { opacity: 1; }

/* =====================================================================
   FOCUS-VISIBLE — one brand keyboard-focus ring for every interactive
   element, replacing the browser default. Pointer focus stays quiet.
   ===================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sumire-purple);
  outline-offset: 3px;
  border-radius: 1px;
}

/* =====================================================================
   SCROLL REVEALS — whisper-quiet fade + rise as sections enter.
   Only active when JS adds `.reveal-on` AND motion is welcome, so
   no-JS, print, and reduced-motion all render fully visible content.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-y, 14px));
    transition: opacity var(--dur-reveal-scroll, 520ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1)),
                transform var(--dur-reveal-scroll, 520ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
  }
  html.reveal-on [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}
/* Mobile: shorter throw, calmer feel — same fade, less travel. */
@media (max-width: 760px) {
  :root { --reveal-y: 8px; }
}

/* =====================================================================
   PAGE TRANSITIONS — one simple, native crossfade between pages. No JS
   and no duplicate fallback: unsupported browsers just navigate instantly.
   ===================================================================== */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
::view-transition-old(root) {
  animation-duration: var(--dur-3, 320ms);
  animation-timing-function: var(--ease-in, cubic-bezier(0.4,0,1,1));
}
::view-transition-new(root) {
  animation-duration: var(--dur-3, 320ms);
  animation-timing-function: var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.nav-bar { view-transition-name: site-nav; }

/* Menu toggle — labelled button, shown on every breakpoint */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 4px;
  margin-left: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  font-family: inherit;
  color: var(--ink);
}
.nav-toggle-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 26px;
}
.nav-toggle-icon .bar {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1)),
              opacity var(--dur-2, 200ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
/* Toggle morphs to an X while the drawer is open */
.nav-drawer-open .nav-toggle-icon .bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-drawer-open .nav-toggle-icon .bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   RIGHT SLIDE-OUT DRAWER (desktop + mobile)
   --------------------------------------------------------------------- */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(17, 10, 26, 0.36);
  opacity: 0;
  transition: opacity var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.nav-drawer-in .nav-scrim { opacity: 1; }

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 95;
  width: min(440px, 92vw);
  height: 100%;
  background: var(--warm-beige, #FCFAF1);
  border-left: 1px solid var(--rule, rgba(39,20,48,0.12));
  transform: translateX(100%);
  /* Closed: off-screen AND out of the tab order + AT tree. `nav-drawer-open`
     persists through the whole slide-out (JS removes it only after the
     transform finishes), so visibility can flip with no transition and never
     leaves focusable links stranded off-canvas. */
  visibility: hidden;
  transition: transform var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html.nav-drawer-open .nav-drawer { visibility: visible; }
.nav-drawer-in .nav-drawer { transform: translateX(0); }

.drawer-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 92px 40px 40px;
  box-sizing: border-box;
}
.drawer-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.drawer-emblem {
  height: 27px;
  width: auto;
  display: block;
}
.drawer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer-nav li { border-top: 1px solid var(--sumire-purple); }
.drawer-nav li:last-child { border-bottom: 1px solid var(--sumire-purple); }
.drawer-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15.5px 16px;
  margin: 0 -16px;
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink);
  transition: background-color var(--dur-2) var(--ease-out);
}
.drawer-nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.drawer-nav a[aria-current="page"] { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.drawer-nav a[aria-current="page"]::before { opacity: 1; }
@media (hover: hover) { .drawer-nav a:not([aria-current="page"]):hover { background: color-mix(in srgb, var(--ink) 3%, transparent); } }
.drawer-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.drawer-nav .dn-label {
  font-size: var(--type-h3);
  letter-spacing: var(--type-h3-ls);
  line-height: 1;
  color: var(--warm-600, #6E6A5F);
  font-weight: 400;
  transition: color var(--dur-2) var(--ease-out);
}
.drawer-nav a:hover .dn-label { color: var(--warm-700, #4A463E); }
.drawer-nav a[aria-current="page"] .dn-label { color: var(--ink); font-weight: 500; }

/* Staggered reveal of the index as the drawer opens */
@media (prefers-reduced-motion: no-preference) {
  .nav-drawer .drawer-head,
  .nav-drawer .drawer-nav li,
  .nav-drawer .drawer-foot {
    opacity: 0;
    transform: translateY(var(--reveal-y, 14px));
    transition: opacity var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1)),
                transform var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
  }
  .nav-drawer-in .nav-drawer .drawer-head,
  .nav-drawer-in .nav-drawer .drawer-nav li,
  .nav-drawer-in .nav-drawer .drawer-foot {
    opacity: 1;
    transform: none;
  }
  .nav-drawer-in .nav-drawer .drawer-head    { transition-delay: 60ms; }
  .nav-drawer-in .nav-drawer .drawer-nav li:nth-child(1) { transition-delay: 100ms; }
  .nav-drawer-in .nav-drawer .drawer-nav li:nth-child(2) { transition-delay: 140ms; }
  .nav-drawer-in .nav-drawer .drawer-nav li:nth-child(3) { transition-delay: 180ms; }
  .nav-drawer-in .nav-drawer .drawer-nav li:nth-child(4) { transition-delay: 220ms; }
  .nav-drawer-in .nav-drawer .drawer-nav li:nth-child(5) { transition-delay: 260ms; }
  .nav-drawer-in .nav-drawer .drawer-foot    { transition-delay: 300ms; }
}

.drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 40px;
}
.df-mail {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: var(--type-caption);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-2) var(--ease-out);
}
.df-mail:hover { border-bottom-color: var(--ink); }
.df-social { display: flex; align-items: center; gap: 16px; }
.df-social a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--ink);
  /* fade, don't lift — boxes never move on hover (Motion audit System 3) */
  opacity: 0.72;
  transition: opacity var(--dur-2) var(--ease-out);
}
.df-social a:hover { opacity: 1; }
.df-social svg { display: block; }

/* Lock the page while the drawer is open */
html.nav-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-scrim,
  .nav-drawer { transition: none; }
}

/* Drawer-era rules, retained only for the CSS the legacy Japanese pages
   still reference. Neither header renders a drawer any more: both are the
   same two-line flat bar, which sets its own row height in the block
   above, in both languages. */
@media (max-width: 720px) {
  .nav-right { gap: 12px; }
  .nav-toggle { margin-left: 2px; }
  .nav-drawer { width: 100vw; border-left: 0; }
  .drawer-inner { padding: 84px 28px 32px; }
}
/* Below ~380px the wordmark + language pill + menu button no longer fit
   the bar at their tablet sizing (confirmed by direct measurement: they
   overflow the viewport by ~48px at 320px). Trim the same three levers a
   little further — nothing shrinks below its 44px tap target. */
@media (max-width: 380px) {
  .nav-inner { padding-left: 14px; padding-right: 14px; }
  .nav-logo img { height: 24px; }
  .nav-right { gap: 8px; }
  .lang-toggle button { padding: 0 11px; }
}

/* =====================================================================
   MOBILE REFINEMENT — a single confident gutter, tightened page heads,
   and calmer vertical rhythm on phones. Brand language unchanged; this
   only corrects spacing that was tuned for the desktop measure.
   ===================================================================== */
@media (max-width: 760px) {
  /* Shared page head — about + sectors had no mobile override and kept the
     full desktop padding. Bring the headline up and let it breathe less. */
  .page-head .inner { padding: 72px var(--gutter) 44px; }
  .page-head .marker { margin-bottom: 44px; }
  .page-head h1 { max-width: 16ch; }
  .page-head .ja { margin-top: 22px; }

  /* Headings break by balance at narrow widths so a lone orphan word never
     drops to its own line; long-form body keeps text-wrap: pretty. This is
     what makes mobile headings read art-directed rather than reflowed. */
  main h1, main h2, main h3 { text-wrap: balance; }
}

@media (max-width: 420px) {
  .page-head .inner { padding: 64px var(--gutter) 40px; }
}

/* =====================================================================
   ACCESSIBILITY — additive only. Keyboard focus on dark grounds, a skip
   link, comfortable icon hit-areas and anchor offsets. Nothing here
   changes the visual language; it only makes the site easier to operate
   with a keyboard, screen reader or touch.
   ===================================================================== */

/* Skip-to-content — first tab stop on every page (injected by shell.js). */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper-warm);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--paper-warm);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* The main landmark is the skip target; focusing it stays quiet. */
main:focus, [id="main"]:focus { outline: none; }

/* Keyboard-focus ring turns cream on dark grounds so it never vanishes. */
.footer :focus-visible,
.on-dark :focus-visible,
.nav-bar.nav-over-hero :focus-visible,
.home-hero :focus-visible {
  outline-color: var(--paper-warm);
}

.df-social a.df-linkedin { opacity: 1; font-size: var(--type-caption); font-weight: 500; color: var(--ink); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color var(--dur-2) var(--ease-out); }
.df-social a.df-linkedin:hover { border-bottom-color: var(--ink); }

/* Standalone text CTAs clear the 44px comfortable-target height. */
.df-linkedin { min-height: 44px; }

/* Fixed nav no longer hides in-page anchor targets when jumped to. */
:target { scroll-margin-top: var(--anchor-h, 96px); }

/* Section-label eyebrows promoted to real headings keep zero margin. */
h2.eyebrow, h3.eyebrow { margin: 0; }

/* --- Narrative page transition --------------------------------------
   Plays ONLY on arrival via the bottom next-page/return-home link — the
   flag is set by that link's click handler (shell.js) and consumed,
   pre-paint, by a small inline script in each page's <head>. Ordinary
   menu/drawer navigation never sets the flag, so it loads exactly as
   before: instantly, no class ever added. The header/nav is never part
   of this — only #main moves, so nothing above it shifts. */
html.pt-enter #main { opacity: 0; transform: translateY(8px); transition: none; }
html.pt-enter.pt-run #main { opacity: 1; transform: none; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { html.pt-enter #main, html.pt-enter.pt-run #main { opacity: 1; transform: none; transition: none; } }